ui

client/src/Components/v2/design-elements/BasePage.tsx

@@ -247,7 +247,7 @@ export const BaseAuthPage = ({
 				>
 					{title}
 				</Typography>
-				<Typography variant="h1">{subtitle}</Typography>
+				<Typography variant="h2">{subtitle}</Typography>
 			</Stack>
 			<Stack
 				gap={theme.spacing(8)}

client/src/Pages/Auth/Login/index.tsx

@@ -1,4 +1,4 @@
-import { BaseAuthPage } from "@/Components/v2/design-elements";
+import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements";
 import { Button, TextField } from "@/Components/v2/inputs";
 
 import { useTranslation } from "react-i18next";
@@ -76,6 +76,18 @@ const LoginPage = () => {
 			>
 				{t("pages.auth.login.submit")}
 			</Button>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.login.links.forgotPassword.text")}
+				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+				href="/forgot-password"
+			/>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.login.links.register.text")}
+				linkText={t("pages.auth.login.links.register.linkText")}
+				href="/register"
+			/>
 		</BaseAuthPage>
 	);
 };

client/src/Pages/Auth/Recovery/index.tsx

@@ -0,0 +1,33 @@
+import { Button, TextField } from "@/Components/v2/inputs";
+import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements";
+
+import { useTranslation } from "react-i18next";
+const ForgotPasswordPage = () => {
+	const { t } = useTranslation();
+	return (
+		<BaseAuthPage
+			component="form"
+			title={t("pages.auth.forgotPassword.title")}
+			subtitle={t("pages.auth.forgotPassword.subtitle")}
+		>
+			<TextField
+				fieldLabel={t("pages.auth.common.form.option.email.label")}
+				placeholder={t("pages.auth.common.form.option.email.placeholder")}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+			>
+				{t("pages.auth.forgotPassword.submit")}
+			</Button>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.forgotPassword.links.login.text")}
+				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				href={"/login"}
+			/>
+		</BaseAuthPage>
+	);
+};
+
+export default ForgotPasswordPage;

client/src/Routes/index.jsx

@@ -6,10 +6,12 @@ import { useSelector } from "react-redux";
 import { Navigate, Route, Routes as LibRoutes } from "react-router";
 import HomeLayout from "@/Components/v1/Layouts/HomeLayout";
 import NotFound from "../Pages/NotFound/index.jsx";
+
 // Auth
 import AuthLogin from "../Pages/Auth/Login";
 import AuthRegister from "../Pages/Auth/Register/index.jsx";
-import AuthForgotPassword from "../Pages/Auth/ForgotPassword.jsx";
+// import AuthForgotPassword from "../Pages/Auth/ForgotPassword.jsx";
+import AuthForgotPassword from "@/Pages/Auth/Recovery";
 import AuthCheckEmail from "../Pages/Auth/CheckEmail.jsx";
 import AuthSetNewPassword from "../Pages/Auth/SetNewPassword.jsx";
 import AuthNewPasswordConfirmed from "../Pages/Auth/NewPasswordConfirmed.jsx";
@@ -382,7 +384,13 @@ const Routes = () => {
 
 			<Route
 				path="/forgot-password"
-				element={<AuthForgotPassword />}
+				element={
+					<>
+						<ThemeProvider theme={v2theme}>
+							<AuthForgotPassword />
+						</ThemeProvider>
+					</>
+				}
 			/>
 			<Route
 				path="/check-email"

client/src/locales/en.json

@@ -527,6 +527,17 @@
 						"linkText": "Register here"
 					}
 				}
+			},
+			"forgotPassword": {
+				"title": "Forgot your password?",
+				"subtitle": "No worries, we'll send you reset instructions.",
+				"submit": "Request recovery",
+				"links": {
+					"login": {
+						"text": "Go back to",
+						"linkText": "login"
+					}
+				}
 			}
 		},
 		"checks": {