added LanguageSelector

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