language menu in login page

2025-12-06 07:49:52 +03:00 · 2023-08-06 18:33:01 +02:00
parent 9b92bfa81c
commit ca2bb4ba6f
4 changed files with 87 additions and 82 deletions
--- a/interface/package.json
+++ b/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",
--- a/interface/src/SignIn.tsx
+++ b/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 }} />
+
+        <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
-          </Button>
-          <Button size="small" variant={locale === 'en' ? 'contained' : 'outlined'} onClick={() => selectLocale('en')}>
-            <GBflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="en" value="en">
+            <GBflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;EN
-          </Button>
-          <Button size="small" variant={locale === 'fr' ? 'contained' : 'outlined'} onClick={() => selectLocale('fr')}>
-            <FRflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="fr" value="fr">
+            <FRflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;FR
-          </Button>
-          <Button size="small" variant={locale === 'it' ? 'contained' : 'outlined'} onClick={() => selectLocale('it')}>
-            <ITflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="it" value="it">
+            <ITflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;IT
-          </Button>
-          <Button size="small" variant={locale === 'nl' ? 'contained' : 'outlined'} onClick={() => selectLocale('nl')}>
-            <NLflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="nl" value="nl">
+            <NLflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;NL
-          </Button>
-          <Button size="small" variant={locale === 'no' ? 'contained' : 'outlined'} onClick={() => selectLocale('no')}>
-            <NOflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="no" value="no">
+            <NOflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;NO
-          </Button>
-          <Button size="small" variant={locale === 'pl' ? 'contained' : 'outlined'} onClick={() => selectLocale('pl')}>
-            <PLflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="pl" value="pl">
+            <PLflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;PL
-          </Button>
-          <Button size="small" variant={locale === 'sv' ? 'contained' : 'outlined'} onClick={() => selectLocale('sv')}>
-            <SVflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="sv" value="sv">
+            <SVflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;SV
-          </Button>
-          <Button size="small" variant={locale === 'tr' ? 'contained' : 'outlined'} onClick={() => selectLocale('tr')}>
-            <TRflag style={{ width: 24 }} />
+          </MenuItem>
+          <MenuItem key="tr" value="tr">
+            <TRflag style={{ width: 16, verticalAlign: 'middle' }} />
            &nbsp;TR
-          </Button>
+          </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"
+          />
+          <ValidatedPasswordField
+            fieldErrors={fieldErrors}
+            disabled={processing}
+            sx={{
+              width: 200
+            }}
+            name="password"
+            label={LL.PASSWORD()}
+            value={signInRequest.password}
+            onChange={updateLoginRequestValue}
+            onKeyDown={submitOnEnter}
+            variant="outlined"
+          />
        </Box>

-        <ValidatedTextField
-          fieldErrors={fieldErrors}
-          disabled={processing}
-          name="username"
-          label={LL.USERNAME(0)}
-          value={signInRequest.username}
-          onChange={updateLoginRequestValue}
-          margin="normal"
-          variant="outlined"
-          fullWidth
-        />
-        <ValidatedTextField
-          fieldErrors={fieldErrors}
-          disabled={processing}
-          type="password"
-          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}>
+        <Button variant="contained" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
          <ForwardIcon sx={{ mr: 1 }} />
          {LL.SIGN_IN()}
-        </Fab>
+        </Button>
      </Paper>
    </Box>
  );
--- a/interface/vite.config.ts
+++ b/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(),
-        ProgmemGenerator({ outputPath: '../lib/framework/WWWData.h', bytesPerLine: 20 })
+        svgrPlugin()
+        // 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.');
+}
--- a/interface/yarn.lock
+++ b/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":
-  version: 20.4.7
-  resolution: "@types/node@npm:20.4.7"
-  checksum: 95c0179ca0c1e3c96f3613276f98c7f620ee035f5d871e3045bc39e76fb77f4330b03b79335d8d254e88c8deb1143fcaa2fb4ad576d857c31f389282fe56a0f1
+"@types/node@npm:^20.4.8":
+  version: 20.4.8
+  resolution: "@types/node@npm:20.4.8"
+  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":
-  version: 8.10.0
-  resolution: "eslint-config-prettier@npm:8.10.0"
+"eslint-config-prettier@npm:^9.0.0":
+  version: 9.0.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