Merge branch 'develop' into ui-fix

2025-01-08 12:50:46 +05:30
parent f11b36ba4e 73d4497b39
commit b2de5f3994
67 changed files with 7978 additions and 1189 deletions
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -5,10 +5,20 @@ import { AuthContext } from "../context/auth";
 import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
+import { useTranslation } from 'react-i18next';
+import i18n from '../i18n';
 import { useThemeMode } from "../context/theme-provider";

 const Login = () => {
-  const [form, setForm] = useState({ email: "", password: "" });
+  const { t } = useTranslation();
+  // just don't remove these logs - god knows why it's not working without them
+  console.log(i18n)
+  console.log(t)
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
  const [loading, setLoading] = useState(false);
  const { notify } = useGlobalInfoStore();
  const { email, password } = form;
@@ -40,11 +50,11 @@ const Login = () => {
        { withCredentials: true }
      );
      dispatch({ type: "LOGIN", payload: data });
-      notify("success", "Welcome to Maxun!");
+      notify("success", t('login.welcome_notification'));
      window.localStorage.setItem("user", JSON.stringify(data));
      navigate("/");
    } catch (err) {
-      notify("error", "Login Failed. Please try again.");
+      notify("error", t('login.error_notification'));
      setLoading(false);
    }
  };
@@ -79,23 +89,13 @@ const Login = () => {
          width: "100%",
        }}
      >
-        <img
-          src="../src/assets/maxunlogo.png"
-          alt="logo"
-          height={55}
-          width={60}
-          style={{
-            marginBottom: 20,
-            borderRadius: "20%",
-            alignItems: "center",
-          }}
-        />
+        <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
        <Typography variant="h4" gutterBottom>
-          Welcome Back!
+          {t('login.title')}
        </Typography>
        <TextField
          fullWidth
-          label="Email"
+          label={t('login.email')}
          name="email"
          value={email}
          onChange={handleChange}
@@ -114,7 +114,7 @@ const Login = () => {
        />
        <TextField
          fullWidth
-          label="Password"
+          label={t('login.password')}
          name="password"
          type="password"
          value={password}
@@ -149,17 +149,17 @@ const Login = () => {
        >
          {loading ? (
            <>
-              <CircularProgress size={20} sx={{ mr: 2, color: "#ffffff" }} />
-              Loading
+              <CircularProgress size={20} sx={{ mr: 2 }} />
+              {t('login.loading')}
            </>
          ) : (
-            "Login"
+            t('login.button')
          )}
        </Button>
-        <Typography variant="body2" align="center" sx={{ color: darkMode ? "#ffffff" : "#333333" }}>
-          Don’t have an account?{" "}
+        <Typography variant="body2" align="center">
+          {t('login.register_prompt')}{" "}
          <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
-            Register
+            {t('login.register_link')}
          </Link>
        </Typography>
      </Box>
@@ -167,4 +167,4 @@ const Login = () => {
  );
 };

-export default Login;
+export default Login;
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MainMenu } from "../components/organisms/MainMenu";
 import { Stack } from "@mui/material";
 import { Recordings } from "../components/organisms/Recordings";
@@ -30,7 +31,7 @@ export interface ScheduleRunResponse {
 }

 export const MainPage = ({ handleEditRecording }: MainPageProps) => {
-
+  const { t } = useTranslation();
  const [content, setContent] = React.useState('recordings');
  const [sockets, setSockets] = React.useState<Socket[]>([]);
  const [runningRecordingId, setRunningRecordingId] = React.useState('');
@@ -49,10 +50,10 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
    aborted = true;
    notifyAboutAbort(runId).then(async (response) => {
      if (response) {
-        notify('success', `Interpretation of robot ${runningRecordingName} aborted successfully`);
+        notify('success', t('main_page.notifications.abort_success', { name: runningRecordingName }));
        await stopRecording(ids.browserId);
      } else {
-        notify('error', `Failed to abort the interpretation of ${runningRecordingName} robot`);
+        notify('error', t('main_page.notifications.abort_failed', { name: runningRecordingName }));
      }
    })
  }
@@ -67,9 +68,9 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
    interpretStoredRecording(runId).then(async (interpretation: boolean) => {
      if (!aborted) {
        if (interpretation) {
-          notify('success', `Interpretation of robot ${runningRecordingName} succeeded`);
+          notify('success', t('main_page.notifications.interpretation_success', { name: runningRecordingName }));
        } else {
-          notify('success', `Failed to interpret ${runningRecordingName} robot`);
+          notify('success', t('main_page.notifications.interpretation_failed', { name: runningRecordingName }));
          // destroy the created browser
          await stopRecording(browserId);
        }
@@ -98,9 +99,9 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
      socket.on('debugMessage', debugMessageHandler);
      setContent('runs');
      if (browserId) {
-        notify('info', `Running robot: ${runningRecordingName}`);
+        notify('info', t('main_page.notifications.run_started', { name: runningRecordingName }));
      } else {
-        notify('error', `Failed to run robot: ${runningRecordingName}`);
+        notify('error', t('main_page.notifications.run_start_failed', { name: runningRecordingName }));
      }
    })
    return (socket: Socket, browserId: string, runId: string) => {
@@ -113,9 +114,9 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
    scheduleStoredRecording(runningRecordingId, settings)
      .then(({ message, runId }: ScheduleRunResponse) => {
        if (message === 'success') {
-          notify('success', `Robot ${runningRecordingName} scheduled successfully`);
+          notify('success', t('main_page.notifications.schedule_success', { name: runningRecordingName }));
        } else {
-          notify('error', `Failed to schedule robot ${runningRecordingName}`);
+          notify('error', t('main_page.notifications.schedule_failed', { name: runningRecordingName }));
        }
      });
  }
@@ -151,4 +152,4 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
      {DisplayContent()}
    </Stack>
  );
-};
+};
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -16,6 +16,7 @@ import { WhereWhatPair } from "maxun-core";
 import styled from "styled-components";
 import BrowserRecordingSave from '../components/molecules/BrowserRecordingSave';
 import { useThemeMode } from '../context/theme-provider';
+import { useTranslation } from 'react-i18next';

 interface RecordingPageProps {
  recordingName?: string;
@@ -28,6 +29,7 @@ export interface PairForEdit {

 export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
  const { darkMode } = useThemeMode();
+  const { t } = useTranslation();
  const [isLoaded, setIsLoaded] = React.useState(false);
  const [hasScrollbar, setHasScrollbar] = React.useState(false);
  const [pairForEdit, setPairForEdit] = useState<PairForEdit>({
@@ -150,7 +152,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
              </Grid>
            </>
          ) : (
-            <Loader text={`Spinning up a browser...Navigating to ${recordingUrl}`} />
+            <Loader text={t('recording_page.loader.browser_startup', { url: recordingUrl })} />
          )}
        </div>
      </BrowserStepsProvider>
--- a/src/pages/Register.tsx
+++ b/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>