✨ Add AuthorizationAdminBox

frontend/src/components/authorization/AuthorizationAdminBox.tsx

@@ -0,0 +1,61 @@
+import {navigate} from "@reach/router"
+import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useAuthorizationContext} from "../../contexts/authorization"
+import {useInstanceContext} from "../../contexts/instance"
+
+
+export interface AuthorizationAdminBoxProps {
+
+}
+
+
+export function AuthorizationAdminBox({}: AuthorizationAdminBoxProps): JSX.Element {
+    const instance = useInstanceContext()
+    const authorization = useAuthorizationContext()
+
+    const canAdministrate =
+        React.useMemo(
+            () => (
+                authorization !== undefined && !authorization.state.running
+            ),
+            [authorization],
+        )
+
+    const doAdministrate =
+        React.useCallback(
+            async () => {
+                if(!instance) {
+                    return
+                }
+                if(!instance.state.url) {
+                    return
+                }
+
+                await navigate(`${instance.state.url}admin`)
+            },
+            [instance],
+        )
+
+
+    return (
+        <Box disabled={!canAdministrate}>
+            <Heading level={3}>
+                Site administration
+            </Heading>
+            <p>
+                To configure the Sophon server, an account with <I>superuser</I> access is required.
+            </p>
+            <p>
+                If you are the server administrator, please refer to the Sophon manual for details on how to acquire the credentials for this account.
+            </p>
+            <Form>
+                <Form.Row>
+                    <Form.Button disabled={!canAdministrate} onClick={doAdministrate}>
+                        Administrate
+                    </Form.Button>
+                </Form.Row>
+            </Form>
+        </Box>
+    )
+}

frontend/src/components/authorization/AuthorizationStepPage.tsx

@@ -1,6 +1,7 @@
 import {Chapter} from "@steffo/bluelib-react"
 import * as React from "react"
 import {InstanceDescriptionBox} from "../instance/InstanceDescriptionBox"
+import {AuthorizationAdminBox} from "./AuthorizationAdminBox"
 import {AuthorizationBrowseBox} from "./AuthorizationBrowseBox"
 import {AuthorizationLoginBox} from "./AuthorizationLoginBox"
 
@@ -12,5 +13,6 @@ export function AuthorizationStepPage(): JSX.Element {
             <AuthorizationBrowseBox/>
             <AuthorizationLoginBox/>
         </Chapter>
+        <AuthorizationAdminBox/>
     </>
 }