feat(i18n): localize profile and login page

bas-kirill · Aug 30, 2024 · 36a3f72 · 36a3f72
1 parent e31becf
commit 36a3f72
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 8 deletions.
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -28,6 +28,17 @@ export const I18N_INSTRUMENT_BASIC_MATERIALS = "instrument.basic.materials";
 export const I18N_INSTRUMENT_DATE_FROM = "instrument.date.from";
 export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
 
+export const I18N_LOGIN_INPUT = "login.login.input";
+export const I18N_LOGIN_PASSWORD_INPUT = "login.login.password";
+export const I18N_LOGIN_BUTTON = "login.login.button";
+export const I18N_REGISTRATION_BUTTON = "login.registration.button";
+
+export const I18N_PROFILE_NAME_SPAN = "profile.name.span";
+export const I18N_PROFILE_ROLE_SPAN = "profile.role.span";
+
+export const I18N_DARK_MODE_BUTTON = "dark-mode.button";
+export const I18N_LOGOUT_BUTTON = "logout.button";
+
 export const I18N_FOOTER = "footer";
 
 const resources = {
@@ -55,6 +66,17 @@ const resources = {
       [I18N_INSTRUMENT_DATE_FROM]: "From",
       [I18N_INSTRUMENT_DATE_TO]: "To",
 
+      [I18N_LOGIN_INPUT]: "Login",
+      [I18N_LOGIN_PASSWORD_INPUT]: "Password",
+      [I18N_LOGIN_BUTTON]: "Login",
+      [I18N_REGISTRATION_BUTTON]: "Registration",
+
+      [I18N_DARK_MODE_BUTTON]: "Dark Mode",
+      [I18N_LOGOUT_BUTTON]: "Logout",
+
+      [I18N_PROFILE_NAME_SPAN]: "Name",
+      [I18N_PROFILE_ROLE_SPAN]: "Role",
+
       [I18N_FOOTER]: "Muse Group Frontend Academy",
     }
   },
@@ -81,6 +103,17 @@ const resources = {
       [I18N_INSTRUMENT_BASIC_MATERIALS]: "Основные материалы",
       [I18N_INSTRUMENT_DATE_FROM]: "С",
       [I18N_INSTRUMENT_DATE_TO]: "По",
+
+      [I18N_LOGIN_INPUT]: "Логин",
+      [I18N_LOGIN_PASSWORD_INPUT]: "Пароль",
+      [I18N_LOGIN_BUTTON]: "Войти",
+      [I18N_REGISTRATION_BUTTON]: "Регистрация",
+
+      [I18N_PROFILE_NAME_SPAN]: "Имя",
+      [I18N_PROFILE_ROLE_SPAN]: "Роль",
+
+      [I18N_DARK_MODE_BUTTON]: "Темная тема",
+      [I18N_LOGOUT_BUTTON]: "Выйти",
     }
   }
 };

diff --git a/client/src/pages/login/ui/Login.page.tsx b/client/src/pages/login/ui/Login.page.tsx
@@ -6,8 +6,16 @@ import { Form, useActionData, useNavigate } from "react-router-dom";
 import { LoginAction } from "../api/action";
 import { REGISTRATION_URL } from "shared/config/paths";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import {
+  I18N_LOGIN_BUTTON,
+  I18N_LOGIN_INPUT,
+  I18N_LOGIN_PASSWORD_INPUT,
+  I18N_REGISTRATION_BUTTON
+} from "../../../i18n";
 
 export function LoginPage() {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
   const actionData = useActionData() as LoginAction;
   const navigate = useNavigate();
@@ -30,23 +38,23 @@ export function LoginPage() {
         <input
           type="text"
           name="login"
-          placeholder={"Login..."}
+          placeholder={t(I18N_LOGIN_INPUT)}
           className={`${darkMode && styles.login__form__input__dark}`}
         />
         <input
           type="password"
           name="password"
-          placeholder={"Password..."}
+          placeholder={t(I18N_LOGIN_PASSWORD_INPUT)}
           className={`${darkMode && styles.login__form__input__dark}`}
         />
         <input
           type="submit"
-          value="Login"
+          value={t(I18N_LOGIN_BUTTON)}
           className={`${darkMode && styles.login__form__input__dark}`}
         />
         <input
           type="button"
-          value="Registration"
+          value={t(I18N_REGISTRATION_BUTTON)}
           onClick={handleRegisterRedirect}
           className={`${darkMode && styles.login__form__input__dark}`}
         />

diff --git a/client/src/pages/profile/ui/Profile.page.tsx b/client/src/pages/profile/ui/Profile.page.tsx
@@ -12,11 +12,19 @@ import { deleteCookie } from "shared/cookie/cookie";
 import { COOKIE_JWT_KEY, COOKIE_SESSIONID } from "shared/config/frontend";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
 import { apiConfig } from "shared/config/api";
+import {
+  I18N_DARK_MODE_BUTTON,
+  I18N_LOGOUT_BUTTON,
+  I18N_PROFILE_NAME_SPAN,
+  I18N_PROFILE_ROLE_SPAN
+} from "../../../i18n";
+import { useTranslation } from "react-i18next";
 
 const logout = new LogoutApi(apiConfig);
 
 export function ProfilePage() {
   useJwt();
+  const { t } = useTranslation();
   const { darkMode, toggleTheme } = useDarkMode();
   const navigate = useNavigate();
   const profile = useLoaderData() as ProfileDetails;
@@ -55,22 +63,22 @@ export function ProfilePage() {
       >
         <h1>{profile.full_name}</h1>
         <div>
-          <b>Name</b>: <span>{profile.full_name}</span>
+          <b>{t(I18N_PROFILE_NAME_SPAN)}</b>: <span>{profile.full_name}</span>
         </div>
         <div>
-          <b>Role</b>: <span>{profile.role}</span>
+          <b>{t(I18N_PROFILE_ROLE_SPAN)}</b>: <span>{profile.role}</span>
         </div>
         <button
           onClick={toggleTheme}
           className={`${darkMode && styles.dark_mode__button}`}
         >
-          Dark Mode
+          {t(I18N_DARK_MODE_BUTTON)}
         </button>
         <button
           onClick={onLogoutHandler}
           className={`${darkMode && styles.logout__button}`}
         >
-          Logout
+          {t(I18N_LOGOUT_BUTTON)}
         </button>
       </div>