✨ Create InstanceBox to select Sophon instance

frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import {Bluelib, Box, Heading, LayoutThreeCol} from "@steffo/bluelib-react";
+import {Bluelib, Chapter, Heading, LayoutThreeCol} from "@steffo/bluelib-react";
 import {SophonContextProvider} from "./utils/SophonContext";
 import {LoginBox} from "./components/LoginBox";
+import {InstanceBox} from "./components/InstanceBox";
 
 function App() {
     return (
@@ -12,7 +13,10 @@ function App() {
                         <Heading level={1}>
                             Sophon
                         </Heading>
+                        <Chapter>
+                            <InstanceBox/>
                             <LoginBox/>
+                        </Chapter>
                     </LayoutThreeCol.Center>
                 </LayoutThreeCol>
             </Bluelib>

frontend/src/components/InstanceBox.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {Box, Heading, Form, Anchor} from "@steffo/bluelib-react";
+import {useSophonContext} from "../utils/SophonContext";
+import {useFormProps} from "../hooks/useValidatedState";
+
+
+interface InstanceBoxProps {
+
+}
+
+
+export function InstanceBox({}: InstanceBoxProps): JSX.Element {
+    const {instanceUrl, changeSophon} = useSophonContext()
+    const sophonServer = useFormProps("", value => {
+        if(value === "") return null
+
+        try {
+            new URL(value)
+        } catch (_) {
+            return false
+        }
+
+        return true
+    })
+
+    const doChange = React.useCallback(
+        () => {
+            changeSophon(sophonServer.value.trim())
+            // Small hack to clear the field
+            sophonServer.onSimpleChange("")
+        },
+        [changeSophon, sophonServer]
+    )
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Change instance
+            </Heading>
+            <p>
+                You are currently using the Sophon instance at <Anchor href={instanceUrl}>{instanceUrl}</Anchor>.
+            </p>
+            <Form>
+                <Form.Field label={"URL"} {...sophonServer}/>
+                <Form.Row>
+                    <Form.Button onClick={doChange} disabled={!sophonServer.validity}>Change instance</Form.Button>
+                </Form.Row>
+            </Form>
+        </Box>
+    )
+}

frontend/src/utils/SophonContext.tsx

@@ -55,6 +55,11 @@ export interface SophonContextContents {
      */
     logout: LogoutFunction,
 
+    /**
+     * The Sophon instance URL.
+     */
+    instanceUrl: string,
+
     /**
      * Change Sophon instance to the one with the given `url`.
      */
@@ -156,7 +161,7 @@ export function SophonContextProvider({children}: SophonContextProviderProps): J
     )
 
     return (
-        <SophonContext.Provider value={{api, loginData, loginRunning, loginError, login, logout, changeSophon}}>
+        <SophonContext.Provider value={{api, loginData, loginRunning, loginError, login, logout, instanceUrl, changeSophon}}>
             {children}
         </SophonContext.Provider>
     )