Merge branch 'develop' into ui-fix

src/pages/Register.tsx

@@ -6,9 +6,16 @@ import { Box, Typography, TextField, Button, CircularProgress } from "@mui/mater
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
 import { useThemeMode } from "../context/theme-provider";
+import { useTranslation } from 'react-i18next';
+import i18n from '../i18n';
+
 
 const Register = () => {
-  const [form, setForm] = useState({ email: "", password: "" });
+  const {t} = useTranslation();
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
   const { email, password } = form;
@@ -37,11 +44,11 @@ const Register = () => {
       const { data } = await axios.post(`${apiUrl}/auth/register`, { email, password });
       console.log(data);
       dispatch({ type: "LOGIN", payload: data });
-      notify("success", "Registration Successful!");
+      notify("success", t('register.welcome_notification'));
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (error: any) {
-      notify("error", error.response?.data || "Registration Failed. Please try again.");
+    } catch (error:any) {
+      notify("error", error.response.data || t('register.error_notification'));
       setLoading(false);
     }
   };
@@ -88,11 +95,11 @@ const Register = () => {
           }}
         />
         <Typography variant="h4" gutterBottom>
-          Create an Account
+          {t('register.title')}
         </Typography>
         <TextField
           fullWidth
-          label="Email"
+          label={t('register.email')}
           name="email"
           value={email}
           onChange={handleChange}
@@ -111,7 +118,7 @@ const Register = () => {
         />
         <TextField
           fullWidth
-          label="Password"
+          label={t('register.password')}
           name="password"
           type="password"
           value={password}
@@ -150,13 +157,13 @@ const Register = () => {
               Loading
             </>
           ) : (
-            "Register"
+            t('register.button')
           )}
         </Button>
         <Typography variant="body2" align="center" sx={{ color: darkMode ? "#ffffff" : "#333333" }}>
-          Already have an account?{" "}
-          <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}>
-            Login
+          {t('register.register_prompt')}{" "}
+          <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}> 
+            {t('register.login_link')}
           </Link>
         </Typography>
       </Box>