formatting code

app/client/web/src/App.tsx

@@ -67,7 +67,7 @@ const router = createBrowserRouter([
       { path: 'session', element: <Session /> },
       { path: 'node', element: <Node /> },
     ],
-  }
+  },
 ])
 
 export function App() {
@@ -75,7 +75,12 @@ export function App() {
   const defaultScheme = useColorScheme('light', {
     getInitialValueInEffect: false,
   })
-  const scheme = selectedScheme === 'light' ? 'light' : selectedScheme === 'dark' ? 'dark' : defaultScheme
+  const scheme =
+    selectedScheme === 'light'
+      ? 'light'
+      : selectedScheme === 'dark'
+        ? 'dark'
+        : defaultScheme
 
   return (
     <div className={classes.app}>

app/client/web/src/access/Access.module.css

@@ -16,6 +16,12 @@
       width: 50%;
     }
 
+    .title {
+      position: absolute;
+      top: 0;
+      margin: 64px;
+    }
+
     .submit {
       width: 20%;
       min-width: 92px;
@@ -32,6 +38,9 @@
       display: flex;
       flex-direction: row;
       gap: 16px;
+      position: absolute;
+      margin: 16px;
+      bottom: 0;
     }
   }
 

app/client/web/src/access/Access.tsx

@@ -1,60 +1,99 @@
 import React from 'react'
 import { useAccess } from './useAccess.hook'
-import classes from './Access.module.css';
-import { Select, Space, Title, Image, Button, PasswordInput, TextInput } from '@mantine/core';
-import login from '../images/login.png';
+import classes from './Access.module.css'
+import {
+  Select,
+  Space,
+  Title,
+  Image,
+  Button,
+  PasswordInput,
+  TextInput,
+} from '@mantine/core'
+import login from '../images/login.png'
 import { IconLock, IconUser, IconSettings } from '@tabler/icons-react'
 
 export function Access() {
-
   const { state, actions } = useAccess()
 
-  const change = (ev) => {
-    console.log(ev);
-  }
-
   return (
     <div className={classes.split}>
-      { (state.display === 'medium' || state.display === 'large') && (
+      {(state.display === 'medium' || state.display === 'large') && (
         <div className={classes.left}>
           <Image className={classes.splash} src={login} fit="contain" />
         </div>
       )}
-      { state.display != null && (
+      {state.display != null && (
         <div className={classes.right}>
-          { state.mode !== 'admin' && (
-            <Button variant="transparent" className={classes.float} leftSection={<IconSettings size={28} />} onClick={() => actions.setMode('admin')} />
+          {state.mode !== 'admin' && (
+            <Button
+              variant="transparent"
+              className={classes.float}
+              leftSection={<IconSettings size={28} />}
+              onClick={() => actions.setMode('admin')}
+            />
           )}
-          { state.mode === 'admin' && (
-            <Button variant="transparent" className={classes.float} leftSection={<IconUser size={28} />} onClick={() => actions.setMode('login')} />
+          {state.mode === 'admin' && (
+            <Button
+              variant="transparent"
+              className={classes.float}
+              leftSection={<IconUser size={28} />}
+              onClick={() => actions.setMode('login')}
+            />
           )}
-          <Title order={1}>Databag</Title>
-          <Title order={3}>{ state.strings.login }</Title>
-          <Space h="md" />
-          <TextInput className={classes.input} size="md" leftSectionPointerEvents="none" leftSection={<IconUser />} placeholder={ state.strings.username }
-            onChange={(event) => actions.setUsername(event.currentTarget.value)} />
-          <PasswordInput className={classes.input} size="md" leftSection={<IconLock />} placeholder={ state.strings.password }
-            onChange={(event) => actions.setPassword(event.currentTarget.value)} />
-          <Space h="md" />
-          <Button variant="filled" className={classes.submit}>{ state.strings.login }</Button>
-          <Button variant="subtle">{ state.strings.createAccount }</Button>
-          <Space h="md" />
+          <Title className={classes.title} order={1}>
+            Databag
+          </Title>
+          {state.mode === 'login' && (
+            <>
+              <Title order={3}>{state.strings.login}</Title>
+              <Space h="md" />
+              <TextInput
+                className={classes.input}
+                size="md"
+                leftSectionPointerEvents="none"
+                leftSection={<IconUser />}
+                placeholder={state.strings.username}
+                onChange={(event) =>
+                  actions.setUsername(event.currentTarget.value)
+                }
+              />
+              <PasswordInput
+                className={classes.input}
+                size="md"
+                leftSection={<IconLock />}
+                placeholder={state.strings.password}
+                onChange={(event) =>
+                  actions.setPassword(event.currentTarget.value)
+                }
+              />
+              <Space h="md" />
+              <Button variant="filled" className={classes.submit}>
+                {state.strings.login}
+              </Button>
+              <Button
+                variant="subtle"
+                onClick={() => actions.setMode('create')}
+              >
+                {state.strings.createAccount}
+              </Button>
+            </>
+          )}
+          {state.mode === 'create' && <></>}
+          {state.mode === 'admin' && <></>}
           <div className={classes.settings}>
-
-    <Select
-      label={ state.strings.theme }
-      data={ state.themes }
-      value={state.theme}
-      onChange={(theme) => actions.setTheme(theme)}
-    />
-
-    <Select
-      label={ state.strings.language }
-      data={ state.languages }
-      value={state.language}
-      onChange={(language) => actions.setLanguage(language)}
-    />
-
+            <Select
+              label={state.strings.theme}
+              data={state.themes}
+              value={state.theme}
+              onChange={(theme) => actions.setTheme(theme as string)}
+            />
+            <Select
+              label={state.strings.language}
+              data={state.languages}
+              value={state.language}
+              onChange={(language) => actions.setLanguage(language as string)}
+            />
           </div>
         </div>
       )}

app/client/web/src/access/useAccess.hook.ts

@@ -1,48 +1,56 @@
 import { useState, useContext, useEffect } from 'react'
-import { SettingsContext } from '../context/SettingsContext';
+import { SettingsContext } from '../context/SettingsContext'
 import { ContextType } from '../context/ContextType'
 
 export function useAccess() {
   const settings = useContext(SettingsContext) as ContextType
-  const [ state, setState ] = useState({
+  const [state, setState] = useState({
     display: null,
-    strings: {},
+    strings: settings.state.strings,
     mode: 'login',
     username: '',
     password: '',
     theme: '',
     language: '',
-    themes: {},
-    languages: {},
+    themes: settings.state.themes,
+    languages: settings.state.languages,
   })
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateState = (value: any) => {
     setState((s) => ({ ...s, ...value }))
   }
 
   useEffect(() => {
-    const { display, strings, themes, theme, languages, language } = settings.state;
-    updateState({ display, strings, themes: [ ...themes ], theme, languages, language });
-  }, [settings.state]);
+    const { display, strings, themes, theme, languages, language } =
+      settings.state
+    updateState({
+      display,
+      strings,
+      themes: [...themes],
+      theme,
+      languages,
+      language,
+    })
+  }, [settings.state])
 
   const actions = {
     setMode: (mode: string) => {
-      updateState({ mode });
+      updateState({ mode })
     },
     setUsername: (username: string) => {
-      updateState({ username });
+      updateState({ username })
     },
     setPassword: (password: string) => {
-      updateState({ password });
+      updateState({ password })
     },
     setLanguage: (code: string) => {
-      settings.actions.setLanguage(code);
+      settings.actions.setLanguage(code)
     },
     setTheme: (theme: string) => {
-      settings.actions.setTheme(theme);
-    },    
-  };
+      settings.actions.setTheme(theme)
+    },
+  }
 
-  return { state, actions };  
+  return { state, actions }
 }
-

app/client/web/src/root/Root.tsx

@@ -1,12 +1,8 @@
 import React from 'react'
-import { TextInput, Button } from '@mantine/core'
 import { useRoot } from './useRoot.hook'
 import { Outlet } from 'react-router-dom'
 
 export function Root() {
-  const { state, actions } = useRoot()
-
-  return (
-    <Outlet />
-  )
+  useRoot()
+  return <Outlet />
 }

app/client/web/src/root/useRoot.hook.ts

@@ -1,45 +1,45 @@
 import { useState, useContext, useEffect } from 'react'
 import { AppContext } from '../context/AppContext'
 import { ContextType } from '../context/ContextType'
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from 'react-router-dom'
 
 export function useRoot() {
   const app = useContext(AppContext) as ContextType
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [ state, setState ] = useState({
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [state, setState] = useState({
     pathname: '',
   })
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateState = (value: any) => {
     setState((s) => ({ ...s, ...value }))
   }
 
   useEffect(() => {
-    const { pathname } = location;
-    updateState({ pathname });
-  }, [location.pathname]);
+    const { pathname } = location
+    updateState({ pathname })
+  }, [location.pathname])
 
   useEffect(() => {
     if (state.pathname === '/session' && !app.state.session) {
-      navigate('/');
+      navigate('/')
+    } else if (state.pathname === '/node' && !app.state.node) {
+      navigate('/')
+    } else if (
+      state.pathname === '/' &&
+      !app.state.session &&
+      !app.state.node
+    ) {
+      navigate('/access')
+    } else if (state.pathname !== '/node' && app.state.node) {
+      navigate('/node')
+    } else if (state.pathname !== '/session' && app.state.session) {
+      navigate('/session')
     }
-    else if (state.pathname === '/node' && !app.state.node) {
-      navigate('/');
-    }
-    else if (state.pathname === '/' && !app.state.session && !app.state.node) {
-      navigate('/access');
-    }
-    else if (state.pathname !== '/node' && app.state.node) {
-      navigate('/node');
-    }
-    else if (state.pathname !== '/session' && app.state.session) {
-      navigate('/session');
-    }
-  }, [state.pathname, app.state.session, app.state.node]);
+  }, [state.pathname, app.state.session, app.state.node])
 
-  const actions = {};
+  const actions = {}
 
-  return { state, actions };  
+  return { state, actions }
 }
-