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..9c7734083 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,15 +120,15 @@ const NewPasswordConfirmed = () => { textAlign="center" p={theme.spacing(12)} > - Go back to — + {t("goBackTo")} - Log In + {t("authLoginTitle")} 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")}