From 6835671e0d4b41dc8798ac43bbe9b6a274a9c253 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Sat, 8 Mar 2025 00:40:08 +0530 Subject: [PATCH 1/3] Feat: Migrate Hardcoded Strings in Auth and About --- src/Pages/About/index.jsx | 5 ++++- src/Pages/Auth/CheckEmail.jsx | 20 +++++++++++--------- src/Pages/Auth/ForgotPassword.jsx | 13 ++++++++----- src/Pages/Auth/NewPasswordConfirmed.jsx | 12 +++++++----- src/locales/gb.json | 6 +++++- 5 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/Pages/About/index.jsx b/src/Pages/About/index.jsx index 84b90af55..dcb9d3f43 100644 --- a/src/Pages/About/index.jsx +++ b/src/Pages/About/index.jsx @@ -1,12 +1,15 @@ import React from 'react'; import AppBar from '../../Components/Common/AppBar'; import Footer from '../../Components/Common/Footer'; +import { useTranslation } from "react-i18next"; const AboutUs = () => { + const { t } = useTranslation(); + return (
-

About Us

+

{t("aboutus")}

); diff --git a/src/Pages/Auth/CheckEmail.jsx b/src/Pages/Auth/CheckEmail.jsx index 7d7a6af64..695be62b0 100644 --- a/src/Pages/Auth/CheckEmail.jsx +++ b/src/Pages/Auth/CheckEmail.jsx @@ -5,6 +5,7 @@ import { useDispatch } from "react-redux"; import { useNavigate } from "react-router"; import { createToast } from "../../Utils/toastUtils"; import { forgotPassword } from "../../Features/Auth/authSlice"; +import { useTranslation } from "react-i18next"; import Background from "../../assets/Images/background-grid.svg?react"; import EmailIcon from "../../assets/icons/email.svg?react"; import Logo from "../../assets/icons/checkmate-icon.svg?react"; @@ -15,6 +16,7 @@ const CheckEmail = () => { const theme = useTheme(); const navigate = useNavigate(); const dispatch = useDispatch(); + const { t } = useTranslation(); const [email, setEmail] = useState(); const [disabled, setDisabled] = useState(false); @@ -161,9 +163,9 @@ const CheckEmail = () => { - Check your email + {t("authCheckEmailTitle")} - We sent a password reset link to{" "} + {t("authCheckEmailDescription")}{" "} { maxWidth: 400, }} > - Open email app + {t("authCheckEmailOpenEmailButton")} - Didn't receive the email?{" "} + {t("authCheckEmailDidntReceiveEmail")}{" "} - Click to resend + {t("authCheckEmailClickToResend")} @@ -205,15 +207,15 @@ const CheckEmail = () => { textAlign="center" p={theme.spacing(12)} > - Go back to — + {t("goBackTo")} - Log In + {t("authLoginTitle")} diff --git a/src/Pages/Auth/ForgotPassword.jsx b/src/Pages/Auth/ForgotPassword.jsx index 61234db73..a67f67c14 100644 --- a/src/Pages/Auth/ForgotPassword.jsx +++ b/src/Pages/Auth/ForgotPassword.jsx @@ -11,6 +11,7 @@ import Logo from "../../assets/icons/checkmate-icon.svg?react"; import Key from "../../assets/icons/key.svg?react"; import Background from "../../assets/Images/background-grid.svg?react"; import IconBox from "../../Components/IconBox"; +import { useTranslation } from "react-i18next"; import "./index.css"; const ForgotPassword = () => { @@ -29,6 +30,8 @@ const ForgotPassword = () => { email && setForm({ email: sessionStorage.getItem("email") }); }, []); + const { t } = useTranslation(); + const handleSubmit = async (event) => { event.preventDefault(); @@ -162,7 +165,7 @@ const ForgotPassword = () => { - Forgot password? + {t("authForgotPasswordTitle")} No worries, we'll send you reset instructions. { mt: theme.spacing(15), }} > - Send instructions + {t("continue")} @@ -204,15 +207,15 @@ const ForgotPassword = () => { textAlign="center" p={theme.spacing(12)} > - Go back to — + {t("goBackTo")} - Log In + {t("authLoginTitle")} diff --git a/src/Pages/Auth/NewPasswordConfirmed.jsx b/src/Pages/Auth/NewPasswordConfirmed.jsx index 6258e0fa5..6667b1ace 100644 --- a/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -8,12 +8,14 @@ import Background from "../../assets/Images/background-grid.svg?react"; import ConfirmIcon from "../../assets/icons/check-outlined.svg?react"; import Logo from "../../assets/icons/checkmate-icon.svg?react"; import IconBox from "../../Components/IconBox"; +import { useTranslation } from "react-i18next"; import "./index.css"; const NewPasswordConfirmed = () => { const theme = useTheme(); const navigate = useNavigate(); const dispatch = useDispatch(); + const { t } = useTranslation(); const handleNavigate = () => { dispatch(clearAuthState()); @@ -97,9 +99,9 @@ const NewPasswordConfirmed = () => { - Password reset + {t("passwordreset")} - Your password has been successfully reset. Click below to log in magically. + {t("authNewPasswordConfirmed")} @@ -118,7 +120,7 @@ const NewPasswordConfirmed = () => { textAlign="center" p={theme.spacing(12)} > - Go back to — + {t("goBack-")} { onClick={handleNavigate} sx={{ userSelect: "none" }} > - Log In + {t("authLoginTitle")} diff --git a/src/locales/gb.json b/src/locales/gb.json index cf7711fa8..c3d36d352 100644 --- a/src/locales/gb.json +++ b/src/locales/gb.json @@ -1,5 +1,6 @@ { "dontHaveAccount": "Don't have account", + "aboutus": "About Us", "email": "E-mail", "forgotPassword": "Forgot Password", "password": "password", @@ -16,6 +17,7 @@ "commonBack": "Back", "authForgotPasswordTitle": "Forgot password?", "authForgotPasswordResetPassword": "Reset password", + "passwordreset": "Password Reset", "authRegisterAlreadyHaveAccount": "Already have an account?", "commonAppName": "Checkmate", "authLoginEnterEmail": "Enter your email", @@ -30,9 +32,10 @@ "authForgotPasswordSendInstructions": "Send instructions", "authForgotPasswordBackTo": "Back to", "authCheckEmailTitle": "Check your email", - "authCheckEmailDescription": "We sent a password reset link to {{email}}", + "authCheckEmailDescription": "We sent a password reset link to", "authCheckEmailResendEmail": "Resend email", "authCheckEmailBackTo": "Back to", + "authCheckEmailOpenEmailButton": "Open email app", "goBackTo": "Go back to", "authCheckEmailDidntReceiveEmail": "Didn't receive the email?", "authCheckEmailClickToResend": "Click to resend", @@ -42,6 +45,7 @@ "authSetNewPasswordConfirmPassword": "Confirm password", "confirmPassword": "Confirm your password", "authSetNewPasswordResetPassword": "Reset password", + "authNewPasswordConfirmed": "Your password has been successfully reset. Click below to log in magically.", "authSetNewPasswordBackTo": "Back to", "authPasswordMustBeAtLeast": "Must be at least", "authPasswordCharactersLong": "8 characters long", From 57469a2510431e29217ef038875ae7a4bd136b3f Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Sat, 8 Mar 2025 00:45:08 +0530 Subject: [PATCH 2/3] Feat: Migrate Hardcoded Strings in Auth and About --- src/Pages/Auth/NewPasswordConfirmed.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Pages/Auth/NewPasswordConfirmed.jsx b/src/Pages/Auth/NewPasswordConfirmed.jsx index 6667b1ace..9c7734083 100644 --- a/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -120,10 +120,10 @@ const NewPasswordConfirmed = () => { textAlign="center" p={theme.spacing(12)} > - {t("goBack-")} + {t("goBackTo")} Date: Sun, 9 Mar 2025 11:36:21 +0530 Subject: [PATCH 3/3] Feat: Migrate Hardcoded Strings in Auth and About --- src/Pages/Auth/Register/Register.jsx | 4 +-- src/Pages/Auth/Register/StepOne/index.jsx | 10 ++++--- src/Pages/DistributedUptime/Create/index.jsx | 22 +++++++------- .../Details/Components/Chatbot/index.jsx | 4 ++- .../Components/ControlsHeader/index.jsx | 9 +++--- .../Details/Components/DeviceTicker/index.jsx | 12 ++++---- .../Helpers/ToolTip.jsx | 7 +++-- .../DistributedUptimeResponseChart/index.jsx | 7 +++-- .../Details/Components/Footer/index.jsx | 9 ++++-- .../Components/MonitorHeader/index.jsx | 4 ++- .../Details/Components/StatusHeader/index.jsx | 6 ++-- src/Pages/DistributedUptime/Details/index.jsx | 8 +++-- .../DistributedUptime/Monitors/index.jsx | 6 ++-- src/locales/gb.json | 30 +++++++++++++++++++ 14 files changed, 97 insertions(+), 41 deletions(-) diff --git a/src/Pages/Auth/Register/Register.jsx b/src/Pages/Auth/Register/Register.jsx index 9f93cc821..b3dfd214b 100644 --- a/src/Pages/Auth/Register/Register.jsx +++ b/src/Pages/Auth/Register/Register.jsx @@ -35,7 +35,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { textAlign="center" > - Sign Up + {t("signUP")} {isSuperAdmin ? t("authRegisterCreateSuperAdminAccount") @@ -67,7 +67,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { - {t("authRegisterBySigningUp")} + {t("authRegisterBySigningUp")}{" "} { diff --git a/src/Pages/Auth/Register/StepOne/index.jsx b/src/Pages/Auth/Register/StepOne/index.jsx index 42e547b62..248f57f69 100644 --- a/src/Pages/Auth/Register/StepOne/index.jsx +++ b/src/Pages/Auth/Register/StepOne/index.jsx @@ -4,6 +4,7 @@ import { useTheme } from "@emotion/react"; import { Box, Button, Stack, Typography } from "@mui/material"; import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; import TextInput from "../../../../Components/Inputs/TextInput"; +import { useTranslation } from "react-i18next"; StepOne.propTypes = { form: PropTypes.object, @@ -28,6 +29,7 @@ StepOne.propTypes = { function StepOne({ form, errors, onSubmit, onChange, onBack }) { const theme = useTheme(); const inputRef = useRef(null); + const { t } = useTranslation(); useEffect(() => { if (inputRef.current) { @@ -43,8 +45,8 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) { textAlign="center" > - Sign Up - Enter your personal details + {t("signUp")} + {t("authRegisterStepOnePersonalDetails")} - Back + {t("commonBack")} diff --git a/src/Pages/DistributedUptime/Create/index.jsx b/src/Pages/DistributedUptime/Create/index.jsx index 57160d2ab..458aa011f 100644 --- a/src/Pages/DistributedUptime/Create/index.jsx +++ b/src/Pages/DistributedUptime/Create/index.jsx @@ -19,6 +19,7 @@ import { monitorValidation } from "../../../Validation/validation"; import { useParams } from "react-router-dom"; import { useCreateDistributedUptimeMonitor } from "./Hooks/useCreateDistributedUptimeMonitor"; import { useMonitorFetch } from "./Hooks/useMonitorFetch"; +import { useTranslation } from "react-i18next"; // Constants const MS_PER_MINUTE = 60000; @@ -41,6 +42,7 @@ const parseUrl = (url) => { const CreateDistributedUptime = () => { const { monitorId } = useParams(); const isCreate = typeof monitorId === "undefined"; + const { t } = useTranslation(); let BREADCRUMBS = [ { name: `distributed uptime`, path: "/distributed-uptime" }, @@ -191,14 +193,14 @@ const CreateDistributedUptime = () => { fontSize="inherit" fontWeight="inherit" > - monitor + {t("monitor")} - General settings + {t("settingsGeneralSettings")} - Here you can select the URL of the host, together with the type of monitor. + {t("distributedUptimeCreateSelectURL")} @@ -232,9 +234,9 @@ const CreateDistributedUptime = () => { - Checks to perform + {t("distributedUptimeCreateChecks")} - You can always add or remove checks after adding your site. + {t("distributedUptimeCreateChecksDescription")} @@ -259,14 +261,14 @@ const CreateDistributedUptime = () => { filled={https.toString()} onClick={() => setHttps(true)} > - HTTPS + {t("https")} ) : ( @@ -291,9 +293,9 @@ const CreateDistributedUptime = () => { - Incident notifications + {t("distributedUptimeCreateIncidentNotification")} - When there is an incident, notify users. + {t("distributedUptimeCreateIncidentDescription")} @@ -310,7 +312,7 @@ const CreateDistributedUptime = () => { - Advanced settings + {t("distributedUptimeCreateAdvancedSettings")}