Add internationalization support to LoginForm and Profile components

Sources/octockup.client/src/components/LoginForm/LoginForm.tsx

@@ -1,12 +1,14 @@
 import { useState } from "react";
 import styles from "./LoginForm.module.css";
 import { Button, Input } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 interface LoginFormProps {
   onLogin: (username: string, password: string) => void;
 }
 
 const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
+  const { t } = useTranslation();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
@@ -21,20 +23,20 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
       <Input
         type="text"
         className={styles.input}
-        placeholder="Username"
+        placeholder={t("login.username")}
         value={username}
         required
         onChange={(e) => setUsername(e.target.value)}
       />
       <Input
         type="password"
         className={styles.input}
-        placeholder="Password"
+        placeholder={t("login.password")}
         value={password}
         required
         onChange={(e) => setPassword(e.target.value)}
       />
-      <Button type="submit">Login</Button>
+      <Button type="submit">{t("login.login")}</Button>
     </form>
   );
 };

Sources/octockup.client/src/components/Profile/Profile.tsx

@@ -46,10 +46,16 @@ const Profile: React.FC = () => {
       </Card>
       <Card sx={{ my: 2, p: 2 }}>
         <CardContent>
-          <Typography variant="h2" component="h2">
-            {t("profile.language")}
-          </Typography>
-          <LanguageSwitcher />
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Typography variant="h6" component="h6">
+              {t("profile.language")}
+            </Typography>
+            <LanguageSwitcher />
+          </Box>
         </CardContent>
       </Card>
     </Box>

Sources/octockup.client/src/locales/en.json

@@ -5,5 +5,13 @@
     "changePassword": "Change Password",
     "logout": "Logout",
     "language": "Language"
+  },
+  "login": {
+    "username": "Username",
+    "password": "Password",
+    "login": "Login",
+    "success": "Login successful",
+    "error": "Login error: {{error}}",
+    "failed": "Login failed"
   }
 }

Sources/octockup.client/src/locales/ru.json

@@ -5,5 +5,13 @@
     "changePassword": "Изменить пароль",
     "logout": "Выйти",
     "language": "Язык"
+  },
+  "login": {
+    "username": "Имя пользователя",
+    "password": "Пароль",
+    "login": "Войти",
+    "success": "Вход выполнен успешно",
+    "error": "Ошибка входа: {{error}}",
+    "failed": "Вход не выполнен"
   }
 }

Sources/octockup.client/src/pages/LoginPage.tsx

@@ -2,11 +2,13 @@ import { login } from "../api/api";
 import { toast } from "react-toastify";
 import { LoginForm } from "../components";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import useSignIn from "react-auth-kit/hooks/useSignIn";
 
 const LoginPage: React.FC = () => {
   const signIn = useSignIn();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const onLogin = (email: string, password: string) => {
     login(email, password)
@@ -17,21 +19,17 @@ const LoginPage: React.FC = () => {
             type: "Bearer",
           },
           refresh: response.refreshToken,
-
-          userState: {
-            name: "React User",
-            id: 1,
-          },
+          userState: response.user,
         });
         if (signedIn) {
-          toast.success("Login successful");
+          toast.success(t("login.success"));
           navigate("/");
         } else {
-          toast.error("Login failed");
+          toast.error(t("login.failed"));
         }
       })
       .catch((error) => {
-        toast.error("Login failed: " + error.message);
+        toast.error(t("login.error", { error: error.message }));
       });
   };
   return <LoginForm onLogin={onLogin} />;