From c07dc899de3f7e597d0b1144a5a286f3f3fe6f50 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Sat, 27 Apr 2024 13:00:32 +0200
Subject: [PATCH] added LanguageSelector

---
 interface/src/SignIn.tsx                      |  85 ++-----------
 .../components/inputs/LanguageSelector.tsx    |  84 +++++++++++++
 interface/src/components/inputs/index.ts      |   1 +
 .../src/components/layout/LayoutMenu.tsx      | 119 ++++--------------
 4 files changed, 119 insertions(+), 170 deletions(-)
 create mode 100644 interface/src/components/inputs/LanguageSelector.tsx

diff --git a/interface/src/SignIn.tsx b/interface/src/SignIn.tsx
index 984cc8af8..f1c6dfc8b 100644
--- a/interface/src/SignIn.tsx
+++ b/interface/src/SignIn.tsx
@@ -1,30 +1,22 @@
 import { useContext, useState } from 'react';
-import type { ChangeEventHandler, FC } from 'react';
+import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import ForwardIcon from '@mui/icons-material/Forward';
-import { Box, Button, MenuItem, Paper, TextField, Typography } from '@mui/material';
+import { Box, Button, Paper, Typography } from '@mui/material';
 
 import * as AuthenticationApi from 'api/authentication';
 import { PROJECT_NAME } from 'api/env';
 
 import { useRequest } from 'alova';
 import type { ValidateFieldsError } from 'async-validator';
-import { ValidatedPasswordField, ValidatedTextField } from 'components';
+import {
+  LanguageSelector,
+  ValidatedPasswordField,
+  ValidatedTextField
+} from 'components';
 import { AuthenticationContext } from 'contexts/authentication';
-import DEflag from 'i18n/DE.svg';
-import FRflag from 'i18n/FR.svg';
-import GBflag from 'i18n/GB.svg';
-import ITflag from 'i18n/IT.svg';
-import NLflag from 'i18n/NL.svg';
-import NOflag from 'i18n/NO.svg';
-import PLflag from 'i18n/PL.svg';
-import SKflag from 'i18n/SK.svg';
-import SVflag from 'i18n/SV.svg';
-import TRflag from 'i18n/TR.svg';
-import { I18nContext } from 'i18n/i18n-react';
-import type { Locales } from 'i18n/i18n-types';
-import { loadLocaleAsync } from 'i18n/i18n-util.async';
+import { useI18nContext } from 'i18n/i18n-react';
 import type { SignInRequest } from 'types';
 import { onEnterCallback, updateValue } from 'utils';
 import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';
@@ -32,7 +24,7 @@ import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';
 const SignIn: FC = () => {
   const authenticationContext = useContext(AuthenticationContext);
 
-  const { LL, setLocale, locale } = useContext(I18nContext);
+  const { LL } = useI18nContext();
 
   const [signInRequest, setSignInRequest] = useState<SignInRequest>({
     username: '',
@@ -83,15 +75,6 @@ const SignIn: FC = () => {
 
   const submitOnEnter = onEnterCallback(signIn);
 
-  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
-    target
-  }) => {
-    const loc = target.value as Locales;
-    localStorage.setItem('lang', loc);
-    await loadLocaleAsync(loc);
-    setLocale(loc);
-  };
-
   return (
     <Box
       display="flex"
@@ -115,55 +98,7 @@ const SignIn: FC = () => {
       >
         <Typography variant="h4">{PROJECT_NAME}</Typography>
 
-        <TextField
-          name="locale"
-          variant="outlined"
-          value={locale}
-          onChange={onLocaleSelected}
-          size="small"
-          select
-        >
-          <MenuItem key="de" value="de">
-            <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;DE
-          </MenuItem>
-          <MenuItem key="en" value="en">
-            <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;EN
-          </MenuItem>
-          <MenuItem key="fr" value="fr">
-            <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;FR
-          </MenuItem>
-          <MenuItem key="it" value="it">
-            <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;IT
-          </MenuItem>
-          <MenuItem key="nl" value="nl">
-            <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;NL
-          </MenuItem>
-          <MenuItem key="no" value="no">
-            <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;NO
-          </MenuItem>
-          <MenuItem key="pl" value="pl">
-            <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;PL
-          </MenuItem>
-          <MenuItem key="sk" value="sk">
-            <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;SK
-          </MenuItem>
-          <MenuItem key="sv" value="sv">
-            <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;SV
-          </MenuItem>
-          <MenuItem key="tr" value="tr">
-            <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-            &nbsp;TR
-          </MenuItem>
-        </TextField>
+        <LanguageSelector />
 
         <Box display="flex" flexDirection="column" alignItems="center">
           <ValidatedTextField
diff --git a/interface/src/components/inputs/LanguageSelector.tsx b/interface/src/components/inputs/LanguageSelector.tsx
new file mode 100644
index 000000000..6a1837c2f
--- /dev/null
+++ b/interface/src/components/inputs/LanguageSelector.tsx
@@ -0,0 +1,84 @@
+import { type ChangeEventHandler, type FC, useContext } from 'react';
+
+import { MenuItem, TextField } from '@mui/material';
+
+import DEflag from 'i18n/DE.svg';
+import FRflag from 'i18n/FR.svg';
+import GBflag from 'i18n/GB.svg';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SKflag from 'i18n/SK.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+import { I18nContext } from 'i18n/i18n-react';
+import type { Locales } from 'i18n/i18n-types';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
+
+const LanguageSelector: FC = () => {
+  const { setLocale, locale } = useContext(I18nContext);
+
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
+    target
+  }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
+  return (
+    <TextField
+      name="locale"
+      variant="outlined"
+      value={locale}
+      onChange={onLocaleSelected}
+      size="small"
+      select
+    >
+      <MenuItem key="de" value="de">
+        <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;DE
+      </MenuItem>
+      <MenuItem key="en" value="en">
+        <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;EN
+      </MenuItem>
+      <MenuItem key="fr" value="fr">
+        <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;FR
+      </MenuItem>
+      <MenuItem key="it" value="it">
+        <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;IT
+      </MenuItem>
+      <MenuItem key="nl" value="nl">
+        <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;NL
+      </MenuItem>
+      <MenuItem key="no" value="no">
+        <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;NO
+      </MenuItem>
+      <MenuItem key="pl" value="pl">
+        <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;PL
+      </MenuItem>
+      <MenuItem key="sk" value="sk">
+        <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;SK
+      </MenuItem>
+      <MenuItem key="sv" value="sv">
+        <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;SV
+      </MenuItem>
+      <MenuItem key="tr" value="tr">
+        <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;TR
+      </MenuItem>
+    </TextField>
+  );
+};
+
+export default LanguageSelector;
diff --git a/interface/src/components/inputs/index.ts b/interface/src/components/inputs/index.ts
index daae8a727..09bfca9b7 100644
--- a/interface/src/components/inputs/index.ts
+++ b/interface/src/components/inputs/index.ts
@@ -1,3 +1,4 @@
 export { default as BlockFormControlLabel } from './BlockFormControlLabel';
 export { default as ValidatedPasswordField } from './ValidatedPasswordField';
 export { default as ValidatedTextField } from './ValidatedTextField';
+export { default as LanguageSelector } from './LanguageSelector';
diff --git a/interface/src/components/layout/LayoutMenu.tsx b/interface/src/components/layout/LayoutMenu.tsx
index 92f3d4651..234c09214 100644
--- a/interface/src/components/layout/LayoutMenu.tsx
+++ b/interface/src/components/layout/LayoutMenu.tsx
@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import type { ChangeEventHandler, FC } from 'react';
+import type { FC } from 'react';
 
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AssessmentIcon from '@mui/icons-material/Assessment';
@@ -22,30 +22,17 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  MenuItem,
-  Popover,
-  TextField
+  Popover
 } from '@mui/material';
 
+import { LanguageSelector } from 'components/inputs';
 import LayoutMenuItem from 'components/layout/LayoutMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
-import DEflag from 'i18n/DE.svg';
-import FRflag from 'i18n/FR.svg';
-import GBflag from 'i18n/GB.svg';
-import ITflag from 'i18n/IT.svg';
-import NLflag from 'i18n/NL.svg';
-import NOflag from 'i18n/NO.svg';
-import PLflag from 'i18n/PL.svg';
-import SKflag from 'i18n/SK.svg';
-import SVflag from 'i18n/SV.svg';
-import TRflag from 'i18n/TR.svg';
-import { I18nContext } from 'i18n/i18n-react';
-import type { Locales } from 'i18n/i18n-types';
-import { loadLocaleAsync } from 'i18n/i18n-util.async';
+import { useI18nContext } from 'i18n/i18n-react';
 
 const LayoutMenu: FC = () => {
   const { me, signOut } = useContext(AuthenticatedContext);
-  const { locale, LL, setLocale } = useContext(I18nContext);
+  const { LL } = useI18nContext();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
@@ -54,15 +41,6 @@ const LayoutMenu: FC = () => {
 
   const [menuOpen, setMenuOpen] = useState(true);
 
-  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
-    target
-  }) => {
-    const loc = target.value as Locales;
-    localStorage.setItem('lang', loc);
-    await loadLocaleAsync(loc);
-    setLocale(loc);
-  };
-
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -94,7 +72,7 @@ const LayoutMenu: FC = () => {
             }}
           >
             <ListItemText
-              primary={LL.MODULE()}
+              primary={LL.MODULES()}
               primaryTypographyProps={{
                 fontWeight: '600',
                 mb: '2px',
@@ -173,7 +151,7 @@ const LayoutMenu: FC = () => {
 
       <Popover
         id={id}
-        sx={{ mt: 1 }}
+        // sx={{ mb: 10 }}
         open={open}
         anchorEl={anchorEl}
         onClose={handleClose}
@@ -187,12 +165,22 @@ const LayoutMenu: FC = () => {
         }}
       >
         <Box
-          p={2}
+          padding={2}
+          justifyContent="center"
+          flexDirection="column"
           sx={{
-            borderRadius: 2,
-            border: '2px solid grey'
+            borderRadius: 3,
+            border: '3px solid grey'
           }}
         >
+          <Button
+            variant="outlined"
+            fullWidth
+            color="primary"
+            onClick={() => signOut(true)}
+          >
+            {LL.SIGN_OUT()}
+          </Button>
           <List>
             <ListItem disablePadding>
               <Avatar sx={{ bgcolor: '#b1395f', color: 'white' }}>
@@ -201,72 +189,13 @@ const LayoutMenu: FC = () => {
               <ListItemText
                 sx={{ pl: 2 }}
                 primary={me.username}
-                secondary={me.admin ? LL.ADMIN() : LL.GUEST()}
+                secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
               />
             </ListItem>
           </List>
-          <Box p={2}>
-            <TextField
-              name="locale"
-              InputProps={{ style: { fontSize: 10 } }}
-              variant="outlined"
-              value={locale}
-              onChange={onLocaleSelected}
-              size="small"
-              select
-            >
-              <MenuItem key="de" value="de">
-                <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;DE
-              </MenuItem>
-              <MenuItem key="en" value="en">
-                <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;EN
-              </MenuItem>
-              <MenuItem key="fr" value="fr">
-                <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;FR
-              </MenuItem>
-              <MenuItem key="it" value="it">
-                <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;IT
-              </MenuItem>
-              <MenuItem key="nl" value="nl">
-                <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;NL
-              </MenuItem>
-              <MenuItem key="no" value="no">
-                <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;NO
-              </MenuItem>
-              <MenuItem key="pl" value="pl">
-                <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;PL
-              </MenuItem>
-              <MenuItem key="sk" value="sk">
-                <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;SK
-              </MenuItem>
-              <MenuItem key="sv" value="sv">
-                <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;SV
-              </MenuItem>
-              <MenuItem key="tr" value="tr">
-                <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-                &nbsp;TR
-              </MenuItem>
-            </TextField>
-          </Box>
-          <Box>
-            <Button
-              variant="outlined"
-              fullWidth
-              color="primary"
-              onClick={() => signOut(true)}
-            >
-              {LL.SIGN_OUT()}
-            </Button>
-          </Box>
+          {/* <Box p={2}> */}
+          <LanguageSelector />
+          {/* </Box> */}
         </Box>
       </Popover>
     </>