language menu in login page

interface/package.json

@@ -25,9 +25,10 @@
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.3",
     "@preact/compat": "^17.1.2",
+    "@prefresh/vite": "^2.4.1",
     "@table-library/react-table-library": "4.1.4",
     "@types/lodash-es": "^4.17.8",
-    "@types/node": "^20.4.7",
+    "@types/node": "^20.4.8",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
@@ -57,7 +58,7 @@
     "eslint": "^8.46.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-autofix": "^1.1.0",
     "eslint-plugin-import": "^2.28.0",

interface/src/SignIn.tsx

@@ -1,5 +1,5 @@
 import ForwardIcon from '@mui/icons-material/Forward';
-import { Box, Fab, Paper, Typography, Button } from '@mui/material';
+import { Box, Paper, Typography, MenuItem, TextField, Button } from '@mui/material';
 import { useRequest } from 'alova';
 import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -7,12 +7,12 @@ import { FeaturesContext } from './contexts/features';
 import type { ValidateFieldsError } from 'async-validator';
 
 import type { Locales } from 'i18n/i18n-types';
-import type { FC } from 'react';
+import type { ChangeEventHandler, FC } from 'react';
 import type { SignInRequest } from 'types';
 import * as AuthenticationApi from 'api/authentication';
 import { PROJECT_NAME } from 'api/env';
 
-import { ValidatedTextField } from 'components';
+import { ValidatedPasswordField, ValidatedTextField } from 'components';
 import { AuthenticationContext } from 'contexts/authentication';
 
 import { ReactComponent as DEflag } from 'i18n/DE.svg';
@@ -82,7 +82,8 @@ const SignIn: FC = () => {
 
   const submitOnEnter = onEnterCallback(signIn);
 
-  const selectLocale = async (loc: Locales) => {
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+    const loc = target.value as Locales;
     localStorage.setItem('lang', loc);
     await loadLocaleAsync(loc);
     setLocale(loc);
@@ -111,82 +112,79 @@ const SignIn: FC = () => {
       >
         <Typography variant="h4">{PROJECT_NAME}</Typography>
         <Typography variant="subtitle2">{features.version}</Typography>
-        <Box
-          mt={2}
-          mb={2}
-          sx={{
-            '& button, & a, & .MuiCard-root': {
-              mt: 1,
-              mx: 1
-            }
-          }}
-        >
-          <Button size="small" variant={locale === 'de' ? 'contained' : 'outlined'} onClick={() => selectLocale('de')}>
-            <DEflag style={{ width: 24 }} />
-            &nbsp;DE
-          </Button>
-          <Button size="small" variant={locale === 'en' ? 'contained' : 'outlined'} onClick={() => selectLocale('en')}>
-            <GBflag style={{ width: 24 }} />
-            &nbsp;EN
-          </Button>
-          <Button size="small" variant={locale === 'fr' ? 'contained' : 'outlined'} onClick={() => selectLocale('fr')}>
-            <FRflag style={{ width: 24 }} />
-            &nbsp;FR
-          </Button>
-          <Button size="small" variant={locale === 'it' ? 'contained' : 'outlined'} onClick={() => selectLocale('it')}>
-            <ITflag style={{ width: 24 }} />
-            &nbsp;IT
-          </Button>
-          <Button size="small" variant={locale === 'nl' ? 'contained' : 'outlined'} onClick={() => selectLocale('nl')}>
-            <NLflag style={{ width: 24 }} />
-            &nbsp;NL
-          </Button>
-          <Button size="small" variant={locale === 'no' ? 'contained' : 'outlined'} onClick={() => selectLocale('no')}>
-            <NOflag style={{ width: 24 }} />
-            &nbsp;NO
-          </Button>
-          <Button size="small" variant={locale === 'pl' ? 'contained' : 'outlined'} onClick={() => selectLocale('pl')}>
-            <PLflag style={{ width: 24 }} />
-            &nbsp;PL
-          </Button>
-          <Button size="small" variant={locale === 'sv' ? 'contained' : 'outlined'} onClick={() => selectLocale('sv')}>
-            <SVflag style={{ width: 24 }} />
-            &nbsp;SV
-          </Button>
-          <Button size="small" variant={locale === 'tr' ? 'contained' : 'outlined'} onClick={() => selectLocale('tr')}>
-            <TRflag style={{ width: 24 }} />
-            &nbsp;TR
-          </Button>
-        </Box>
 
+        <TextField name="locale" variant="outlined" value={locale} onChange={onLocaleSelected} size="small" select>
+          <MenuItem key="de" value="de">
+            <DEflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;DE
+          </MenuItem>
+          <MenuItem key="en" value="en">
+            <GBflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;EN
+          </MenuItem>
+          <MenuItem key="fr" value="fr">
+            <FRflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;FR
+          </MenuItem>
+          <MenuItem key="it" value="it">
+            <ITflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;IT
+          </MenuItem>
+          <MenuItem key="nl" value="nl">
+            <NLflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;NL
+          </MenuItem>
+          <MenuItem key="no" value="no">
+            <NOflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;NO
+          </MenuItem>
+          <MenuItem key="pl" value="pl">
+            <PLflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;PL
+          </MenuItem>
+          <MenuItem key="sv" value="sv">
+            <SVflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;SV
+          </MenuItem>
+          <MenuItem key="tr" value="tr">
+            <TRflag style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;TR
+          </MenuItem>
+        </TextField>
+
+        <Box display="flex" flexDirection="column" alignItems="center">
           <ValidatedTextField
             fieldErrors={fieldErrors}
             disabled={processing}
+            sx={{
+              width: 200
+            }}
             name="username"
             label={LL.USERNAME(0)}
             value={signInRequest.username}
             onChange={updateLoginRequestValue}
             margin="normal"
             variant="outlined"
-          fullWidth
           />
-        <ValidatedTextField
+          <ValidatedPasswordField
             fieldErrors={fieldErrors}
             disabled={processing}
-          type="password"
+            sx={{
+              width: 200
+            }}
             name="password"
             label={LL.PASSWORD()}
             value={signInRequest.password}
             onChange={updateLoginRequestValue}
             onKeyDown={submitOnEnter}
-          margin="normal"
             variant="outlined"
-          fullWidth
           />
-        <Fab variant="extended" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
+        </Box>
+
+        <Button variant="contained" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
           <ForwardIcon sx={{ mr: 1 }} />
           {LL.SIGN_IN()}
-        </Fab>
+        </Button>
       </Paper>
     </Box>
   );

interface/vite.config.ts

@@ -4,6 +4,7 @@ import svgrPlugin from 'vite-plugin-svgr';
 import { visualizer } from 'rollup-plugin-visualizer';
 import ProgmemGenerator from './progmem-generator';
 import preact from '@preact/preset-vite';
+// import prefresh from '@prefresh/vite';
 
 export default defineConfig(({ command, mode }) => {
   if (mode === 'hosted') {
@@ -17,8 +18,9 @@ export default defineConfig(({ command, mode }) => {
       plugins: [
         preact(),
         viteTsconfigPaths(),
-        svgrPlugin(),
+        svgrPlugin()
-        ProgmemGenerator({ outputPath: '../lib/framework/WWWData.h', bytesPerLine: 20 })
+        // prefresh()
+        // ProgmemGenerator({ outputPath: '../lib/framework/WWWData.h', bytesPerLine: 20 })
       ],
 
       build: {
@@ -67,3 +69,6 @@ export default defineConfig(({ command, mode }) => {
     };
   }
 });
+function prefresh(): PluginOption {
+  throw new Error('Function not implemented.');
+}

interface/yarn.lock

@@ -1044,7 +1044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prefresh/vite@npm:^2.2.8":
+"@prefresh/vite@npm:^2.2.8, @prefresh/vite@npm:^2.4.1":
   version: 2.4.1
   resolution: "@prefresh/vite@npm:2.4.1"
   dependencies:
@@ -1324,10 +1324,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.4.7":
+"@types/node@npm:^20.4.8":
-  version: 20.4.7
+  version: 20.4.8
-  resolution: "@types/node@npm:20.4.7"
+  resolution: "@types/node@npm:20.4.8"
-  checksum: 95c0179ca0c1e3c96f3613276f98c7f620ee035f5d871e3045bc39e76fb77f4330b03b79335d8d254e88c8deb1143fcaa2fb4ad576d857c31f389282fe56a0f1
+  checksum: 8b0c090a10f67ecb4ae9cbf0da4889570e8cf242f02eb4341d1011e9e552b32cc0de569079c2e8c6a43524e2b88df6ee30075249c8b63e72638d462a246bf71c
   languageName: node
   linkType: hard
 
@@ -1553,10 +1553,11 @@ __metadata:
     "@mui/material": ^5.14.3
     "@preact/compat": ^17.1.2
     "@preact/preset-vite": ^2.5.0
+    "@prefresh/vite": ^2.4.1
     "@table-library/react-table-library": 4.1.4
     "@types/babel__core": ^7
     "@types/lodash-es": ^4.17.8
-    "@types/node": ^20.4.7
+    "@types/node": ^20.4.8
     "@types/react": ^18.2.18
     "@types/react-dom": ^18.2.7
     "@types/react-router-dom": ^5.3.3
@@ -1567,7 +1568,7 @@ __metadata:
     eslint: ^8.46.0
     eslint-config-airbnb: ^19.0.4
     eslint-config-airbnb-typescript: ^17.1.0
-    eslint-config-prettier: ^8.10.0
+    eslint-config-prettier: ^9.0.0
     eslint-import-resolver-typescript: ^3.5.5
     eslint-plugin-autofix: ^1.1.0
     eslint-plugin-import: ^2.28.0
@@ -2709,14 +2710,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:^8.10.0":
+"eslint-config-prettier@npm:^9.0.0":
-  version: 8.10.0
+  version: 9.0.0
-  resolution: "eslint-config-prettier@npm:8.10.0"
+  resolution: "eslint-config-prettier@npm:9.0.0"
   peerDependencies:
     eslint: ">=7.0.0"
   bin:
     eslint-config-prettier: bin/cli.js
-  checksum: 19f8c497d9bdc111a17a61b25ded97217be3755bbc4714477dfe535ed539dddcaf42ef5cf8bb97908b058260cf89a3d7c565cb0be31096cbcd39f4c2fa5fe43c
+  checksum: bc1f661915845c631824178942e5d02f858fe6d0ea796f0050d63e0f681927b92696e81139dd04714c08c3e7de580fd079c66162e40070155ba79eaee78ab5d0
   languageName: node
   linkType: hard