feat: add the language menu in login or regsiter form

public/locales/en/authentication.json

@@ -8,7 +8,10 @@
     "emailIsInvalid": "Email is invalid",
     "phoneNumberIsInvalid": "Phone number is invalid",
     "thisFieldIsRequired": "This field is required",
-    "googleAuthenticationFailed": "Login with google failed"
+    "googleAuthenticationFailed": "Login with google failed",
+    "persian": "Persian(Fa)",
+    "english": "English(En)",
+    "accountInfo": "Harmony Account - 2025"
   },
   "verify": {
     "verify": "Verify",

public/locales/fa/authentication.json

@@ -8,7 +8,10 @@
     "emailIsInvalid": "ایمیل وارد شده نامعتبر میباشد",
     "phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد",
     "thisFieldIsRequired": "این فیلد الزامی است",
-    "googleAuthenticationFailed": "ورود با گوگل با خطا مواجه شد"
+    "googleAuthenticationFailed": "ورود با گوگل با خطا مواجه شد",
+    "persian": "فارسی(Fa)",
+    "english": "انگلیسی(En)",
+    "accountInfo": "۱۴۰۴-هارمونی اکانت"
   },
   "verify": {
     "verify": "اعتبارسنجی",

src/features/authentication/components/AuthenticationSteps/LanguageSwitcher.tsx

@@ -0,0 +1,46 @@
+import { Box, Typography, MenuItem, Select, Stack } from '@mui/material';
+import { Global } from 'iconsax-react';
+import { useTranslation } from 'react-i18next';
+
+export default function LanguageAccountBar() {
+  const { t, i18n } = useTranslation('authentication');
+
+  const handleChange = (event: any) => {
+    const lang = event.target.value;
+    i18n.changeLanguage(lang);
+    document.body.dir = lang === 'fa' ? 'rtl' : 'ltr';
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        px: 2,
+        py: 1,
+        position: 'absolute',
+        bottom: 0,
+        direction: i18n.language === 'fa' ? 'rtl' : 'ltr',
+      }}
+    >
+      <Stack direction="row" alignItems="center" spacing={1}>
+        <Select
+          size="small"
+          value={i18n.language}
+          onChange={handleChange}
+          variant="standard"
+          disableUnderline
+        >
+          <MenuItem value="fa">{t('loginForm.persian')}</MenuItem>
+          <MenuItem value="en">{t('loginForm.english')}</MenuItem>
+        </Select>
+        <Global size={20} style={{ color: '#666' }} />
+      </Stack>
+
+      <Typography sx={{ color: 'text.primary' }} variant="body2">
+        {t('loginForm.accountInfo')}
+      </Typography>
+    </Box>
+  );
+}

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -15,6 +15,7 @@ import { useApi } from '@/hooks/useApi';
 import type { GenerateTokenResponse } from '../../api/identityAPI';
 import { GoogleAuthenticationV2 } from './GoogleAuthenticationV2';
 import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
+import LanguageAccountBar from './LanguageSwitcher';
 
 export interface LoginRegisterFormProps {
   loginRegisterValue: string;
@@ -143,6 +144,7 @@ export function LoginRegisterForm({
   const showAdornment = authType === 'phone' && loginRegisterValue.length > 0;
 
   return (
+    <>
       <AuthenticationCard>
         <Box
           component="form"
@@ -210,5 +212,7 @@ export function LoginRegisterForm({
           </Stack>
         </Box>
       </AuthenticationCard>
+      <LanguageAccountBar />
+    </>
   );
 }