feat: add language selector on login page (#135)

Co-authored-by: Eric Boucher <[email protected]>

apps/backend-infrastructure/package.json

@@ -18,6 +18,7 @@
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
+    "@babel/core": "7.23.3",
     "@types/jest": "^29.4.0",
     "@types/node": "18.11.18",
     "aws-cdk": "2.63.2",

apps/frontend/.eslintignore

@@ -0,0 +1,2 @@
+out/
+public/__ENV.js

apps/frontend/.eslintrc.js

@@ -1,4 +1,9 @@
 module.exports = {
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
   root: true,
   extends: ['custom/next'],
 };

apps/frontend/components/Layout/Layout.tsx

@@ -2,17 +2,18 @@ import { Box } from '@mui/material';
 import { ReactNode } from 'react';
 
 interface Props {
+  alignItems?: string;
   children: ReactNode;
 }
-export const Layout = ({ children }: Props): JSX.Element => {
+export const Layout = ({ alignItems, children }: Props): JSX.Element => {
   // Warning: the maxWidth will influence the way the PDF are generated
   // TODO investigate how to reduce this value without changing th PDF display
   return (
     <Box
       flexGrow={1}
       display="flex"
       flexDirection="column"
-      alignItems="left"
+      alignItems={alignItems ?? 'left'}
       sx={{ p: 1 }}
     >
       <Box maxWidth={1500}>{children}</Box>

apps/frontend/components/NavBar/NavMenuContent.tsx

@@ -1,50 +1,37 @@
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import HomeIcon from '@mui/icons-material/Home';
-import LanguageIcon from '@mui/icons-material/Language';
 import LogoutIcon from '@mui/icons-material/Logout';
 import StarIcon from '@mui/icons-material/Star';
 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
 import {
   Box,
   Button,
-  FormControl,
   IconButton,
   List,
   ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
   Typography,
 } from '@mui/material';
 import Logo from 'next/image';
 import Link from 'next/link';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import { useLanguageContext } from 'context';
+import SelectLanguage from 'components/SelectLanguage';
+import { apiBaseUrl } from 'services/api/client';
 import { useIsSignedInUserAdmin } from 'services/api/user/useUser';
-import { env } from 'services/env';
 import { logout } from 'utils/logout';
 
 export const NavMenuContent = (): JSX.Element => {
   const intl = useIntl();
   const isAdmin = useIsSignedInUserAdmin();
 
   const handleAdminClick = () => {
-    // TODO - Use apiClient.baseUrl?
-    const baseURL = env('NEXT_PUBLIC_API_BASE_URL');
-    const path = new URL('/admin/login', baseURL).toString();
+    const path = new URL('/admin/login', apiBaseUrl).toString();
     window.location.href = path;
   };
 
-  const { language, setLanguage } = useLanguageContext();
-  const handleLanguageChange = (e: SelectChangeEvent) => {
-    const newLanguage = e.target.value;
-    setLanguage(newLanguage);
-  };
-
   const handleLogoutClick = () => {
     void logout();
   };
@@ -148,26 +135,7 @@ export const NavMenuContent = (): JSX.Element => {
           </ListItem>
         )}
       </List>
-      <FormControl sx={{ padding: 4 }}>
-        <Select
-          value={language}
-          onChange={handleLanguageChange}
-          startAdornment={<LanguageIcon sx={{ marginRight: 1 }} />}
-        >
-          <MenuItem value="en">
-            <FormattedMessage
-              id="navigation.language.english"
-              defaultMessage="English"
-            />
-          </MenuItem>
-          <MenuItem value="km">
-            <FormattedMessage
-              id="navigation.language.khmer"
-              defaultMessage="ភាសាខ្មែរ"
-            />
-          </MenuItem>
-        </Select>
-      </FormControl>
+      <SelectLanguage />
       <Button
         className="logout"
         onClick={handleLogoutClick}

apps/frontend/components/SelectLanguage/index.tsx

@@ -0,0 +1,44 @@
+import LanguageIcon from '@mui/icons-material/Language';
+import {
+  FormControl,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { useLanguageContext } from 'context';
+
+const SelectLanguage = (): JSX.Element => {
+  const { language, setLanguage } = useLanguageContext();
+  const handleLanguageChange = (e: SelectChangeEvent) => {
+    const newLanguage = e.target.value;
+    setLanguage(newLanguage);
+  };
+
+  return (
+    <FormControl sx={{ padding: 4 }}>
+      <Select
+        value={language}
+        onChange={handleLanguageChange}
+        startAdornment={<LanguageIcon sx={{ marginRight: 1 }} />}
+      >
+        <MenuItem value="en">
+          <FormattedMessage
+            id="navigation.language.english"
+            defaultMessage="English"
+          />
+        </MenuItem>
+        <MenuItem value="km">
+          <FormattedMessage
+            id="navigation.language.khmer"
+            defaultMessage="ភាសាខ្មែរ"
+          />
+        </MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default SelectLanguage;

apps/frontend/components/pages/Login/Login.tsx

@@ -5,6 +5,7 @@ import { NextPage } from 'next/types';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 
+import SelectLanguage from 'components/SelectLanguage';
 import { Input, PasswordInput } from 'components/atoms';
 import { Pages } from 'constant';
 import { login, LoginData } from 'services/api/auth/login';
@@ -98,6 +99,7 @@ export const Login: NextPage = () => {
             <FormattedMessage id="login.submit" />
           </button>
         </form>
+        <SelectLanguage />
       </div>
     </main>
   );

apps/frontend/package.json

@@ -6,7 +6,7 @@
     "build": "next build",
     "build:analyze": "DEV_ANALYZE_BUNDLE=true next build",
     "dev": "./gen_env.sh local && next dev -p 3000",
-    "lint": "eslint --cache --cache-location .next/cache/eslint/ './**/*.{js,ts,tsx}'",
+    "lint": "eslint --cache --cache-location .next/cache/eslint/ './!(out)/**/*.{js,ts,tsx}'",
     "lint:fix": "pnpm lint --fix",
     "lint:style": "stylelint './**/*.module.css'",
     "lint:style:fix": "stylelint --fix './**/*.module.css'",

apps/frontend/pages/login.tsx

@@ -4,7 +4,7 @@ import { Login } from 'components';
 import { Layout } from 'components/Layout';
 
 const LoginPage: NextPage = () => (
-  <Layout>
+  <Layout alignItems="center">
     <Login />
   </Layout>
 );

apps/frontend/services/api/client.ts

@@ -16,8 +16,10 @@ import {
   setAccessToken,
 } from './auth/utils';
 
+export const apiBaseUrl = env('NEXT_PUBLIC_API_BASE_URL');
+
 export const apiClient = axios.create({
-  baseURL: env('NEXT_PUBLIC_API_BASE_URL'),
+  baseURL: apiBaseUrl,
   withCredentials: true,
   headers: {
     'Content-Type': 'application/json',