Feat: Migrate Hardcoded Strings in Auth and About

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 (
 		<div>
 			<AppBar />
-			<h1>About Us</h1>
+			<h1>{t("aboutus")}</h1>
 			<Footer />
 		</div>
 	);

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 = () => {
 								<EmailIcon alt="email icon" />
 							</IconBox>
 						</Stack>
-						<Typography component="h1">Check your email</Typography>
+						<Typography component="h1">{t("authCheckEmailTitle")}</Typography>
 						<Typography>
-							We sent a password reset link to{" "}
+							{t("authCheckEmailDescription")}{" "}
 							<Typography
 								className="email-sent-to"
 								component="span"
@@ -181,22 +183,22 @@ const CheckEmail = () => {
 							maxWidth: 400,
 						}}
 					>
-						Open email app
+						{t("authCheckEmailOpenEmailButton")}
 					</Button>
 					<Typography sx={{ alignSelf: "center", mt: theme.spacing(6) }}>
-						Didn&apos;t receive the email?{" "}
+						{t("authCheckEmailDidntReceiveEmail")}{" "}
 						<Typography
 							component="span"
 							onClick={resendToken}
 							sx={{
-								color: theme.palette.primary.main,
+								color: theme.palette.accent.main,
 								userSelect: "none",
 								pointerEvents: disabled ? "none" : "auto",
 								cursor: disabled ? "default" : "pointer",
 								opacity: disabled ? 0.5 : 1,
 							}}
 						>
-							Click to resend
+							{t("authCheckEmailClickToResend")}
 						</Typography>
 					</Typography>
 				</Stack>
@@ -205,15 +207,15 @@ const CheckEmail = () => {
 				textAlign="center"
 				p={theme.spacing(12)}
 			>
-				<Typography display="inline-block">Go back to —</Typography>
+				<Typography display="inline-block">{t("goBackTo")}</Typography>
 				<Typography
 					component="span"
 					ml={theme.spacing(2)}
-					color={theme.palette.primary.main}
+					color={theme.palette.accent.main}
 					onClick={handleNavigate}
 					sx={{ userSelect: "none" }}
 				>
-					Log In
+					{t("authLoginTitle")}
 				</Typography>
 			</Box>
 		</Stack>

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 = () => {
 								<Key alt="password key icon" />
 							</IconBox>
 						</Stack>
-						<Typography component="h1">Forgot password?</Typography>
+						<Typography component="h1">{t("authForgotPasswordTitle")}</Typography>
 						<Typography>No worries, we&apos;ll send you reset instructions.</Typography>
 					</Box>
 					<Box
@@ -195,7 +198,7 @@ const ForgotPassword = () => {
 								mt: theme.spacing(15),
 							}}
 						>
-							Send instructions
+							{t("continue")}
 						</Button>
 					</Box>
 				</Stack>
@@ -204,15 +207,15 @@ const ForgotPassword = () => {
 				textAlign="center"
 				p={theme.spacing(12)}
 			>
-				<Typography display="inline-block">Go back to —</Typography>
+				<Typography display="inline-block">{t("goBackTo")}</Typography>
 				<Typography
 					component="span"
-					color={theme.palette.primary.main}
+					color={theme.palette.accent.main}
 					ml={theme.spacing(2)}
 					onClick={handleNavigate}
 					sx={{ userSelect: "none" }}
 				>
-					Log In
+					{t("authLoginTitle")}
 				</Typography>
 			</Box>
 		</Stack>

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 = () => {
 								<ConfirmIcon alt="password confirm icon" />
 							</IconBox>
 						</Stack>
-						<Typography component="h1">Password reset</Typography>
+						<Typography component="h1">{t("passwordreset")}</Typography>
 						<Typography mb={theme.spacing(2)}>
-							Your password has been successfully reset. Click below to log in magically.
+							{t("authNewPasswordConfirmed")}
 						</Typography>
 					</Box>
 					<Button
@@ -110,7 +112,7 @@ const NewPasswordConfirmed = () => {
 							maxWidth: 400,
 						}}
 					>
-						Continue
+						{t("continue")}
 					</Button>
 				</Stack>
 			</Stack>
@@ -118,7 +120,7 @@ const NewPasswordConfirmed = () => {
 				textAlign="center"
 				p={theme.spacing(12)}
 			>
-				<Typography display="inline-block">Go back to —</Typography>
+				<Typography display="inline-block">{t("goBack-")}</Typography>
 				<Typography
 					component="span"
 					color={theme.palette.primary.main}
@@ -126,7 +128,7 @@ const NewPasswordConfirmed = () => {
 					onClick={handleNavigate}
 					sx={{ userSelect: "none" }}
 				>
-					Log In
+					{t("authLoginTitle")}
 				</Typography>
 			</Box>
 		</Stack>

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",