Merge pull request #3253 from bluewave-labs/feat/v2/password-reset

feat: v2/password reset

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/Hooks/useRecoveryForm.ts

@@ -0,0 +1,12 @@
+import { recoverySchema } from "@/Validation/recovery";
+
+export const useRecoveryForm = () => {
+	const defaults = {
+		email: "",
+	};
+
+	return {
+		schema: recoverySchema,
+		defaults,
+	};
+};

client/src/Pages/Auth/ForgotPassword.jsx

@@ -1,243 +0,0 @@
-import { Box, Stack, Typography, Button } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import { createToast } from "../../Utils/toastUtils.jsx";
-import { useDispatch, useSelector } from "react-redux";
-import { forgotPassword } from "../../Features/Auth/authSlice.js";
-import { useEffect, useState } from "react";
-import { newOrChangedCredentials } from "../../Validation/validation.js";
-import { useNavigate, useLocation } from "react-router-dom";
-import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
-import Logo from "@/assets/icons/checkmate-icon.svg?react";
-import Background from "@/assets/Images/background-grid.svg?react";
-import IconBox from "@/Components/v1/IconBox/index.jsx";
-import Icon from "@/Components/v1/Icon";
-import { Trans, useTranslation } from "react-i18next";
-import "./index.css";
-
-const ForgotPassword = () => {
-	const navigate = useNavigate();
-	const dispatch = useDispatch();
-	const theme = useTheme();
-	const location = useLocation();
-
-	const { isLoading } = useSelector((state) => state.auth);
-	const [errors, setErrors] = useState({});
-	const [form, setForm] = useState({
-		email: "",
-	});
-
-	useEffect(() => {
-		const email = sessionStorage.getItem("email");
-		email && setForm({ email: sessionStorage.getItem("email") });
-	}, []);
-
-	const { t } = useTranslation();
-
-	const handleSubmit = async (event) => {
-		event.preventDefault();
-
-		const { error } = newOrChangedCredentials.validate(form, { abortEarly: false });
-
-		if (error) {
-			// validation errors
-			const err =
-				error.details && error.details.length > 0
-					? error.details[0].message // FIXME: Possibly untranslated string
-					: t("auth.common.errors.validation");
-			setErrors({ email: err });
-			createToast({
-				body: err,
-			});
-		} else {
-			const action = await dispatch(forgotPassword(form));
-			if (action.payload.success) {
-				sessionStorage.setItem("email", form.email);
-				navigate("/check-email", {
-					state: location.state || { from: "/login" }, // Preserve original from, fallback to login
-				});
-				createToast({
-					body: t("auth.forgotPassword.toasts.sent").replace("<email/>", form.email),
-				});
-			} else {
-				if (action.payload) {
-					// dispatch errors
-					createToast({
-						body: action.payload.msg, // FIXME: Potentially untranslated string
-					});
-				} else {
-					// unknown errors
-					createToast({
-						body: t("common.toasts.unknownError"),
-					});
-				}
-			}
-		}
-	};
-
-	const handleChange = (event) => {
-		const { value } = event.target;
-		setForm({ email: value });
-
-		const { error } = newOrChangedCredentials.validate(
-			{ email: value },
-			{ abortEarly: false }
-		);
-
-		if (error) setErrors({ email: error.details[0].message });
-		else delete errors.email;
-	};
-
-	const handleNavigate = () => {
-		sessionStorage.removeItem("email");
-		location.state?.from
-			? navigate(location.state.from, { replace: true })
-			: navigate("/login");
-	};
-
-	return (
-		<Stack
-			className="forgot-password-page auth"
-			overflow="hidden"
-			sx={{
-				"& h1": {
-					color: theme.palette.primary.main,
-					fontWeight: 600,
-					fontSize: 21,
-				},
-				"& p": {
-					/* TODO font size from theme */
-					fontSize: 14,
-					color: theme.palette.primary.contrastTextSecondary,
-				},
-			}}
-		>
-			<Box
-				className="background-pattern-svg"
-				sx={{
-					"& svg g g:last-of-type path": {
-						stroke: theme.palette.primary.lowContrast,
-					},
-				}}
-			>
-				<Background style={{ width: "100%" }} />
-			</Box>
-			<Stack
-				direction="row"
-				alignItems="center"
-				px={theme.spacing(12)}
-				gap={theme.spacing(4)}
-			>
-				<Logo style={{ borderRadius: theme.shape.borderRadius }} />
-				<Typography sx={{ userSelect: "none" }}>{t("common.appName")}</Typography>
-			</Stack>
-			<Stack
-				width="100%"
-				maxWidth={600}
-				flex={1}
-				justifyContent="center"
-				px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
-				pb={theme.spacing(20)}
-				mx="auto"
-				sx={{
-					"& > .MuiStack-root": {
-						border: 1,
-						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.primary.lowContrast,
-						backgroundColor: theme.palette.primary.main,
-						padding: {
-							xs: theme.spacing(12),
-							sm: theme.spacing(20),
-						},
-					},
-				}}
-			>
-				<Stack
-					gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
-					alignItems="center"
-					textAlign="center"
-				>
-					<Box>
-						<Stack
-							direction="row"
-							justifyContent="center"
-						>
-							<IconBox
-								height={48}
-								width={48}
-								minWidth={48}
-								borderRadius={12}
-								svgWidth={24}
-								svgHeight={24}
-								mb={theme.spacing(4)}
-							>
-								<Icon name="Key" />
-							</IconBox>
-						</Stack>
-						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>
-						<Typography>{t("auth.forgotPassword.subheadings.stepOne")}</Typography>
-					</Box>
-					<Box
-						component="form"
-						width="95%"
-						textAlign="left"
-						noValidate
-						spellCheck={false}
-						onSubmit={handleSubmit}
-					>
-						<TextInput
-							type="email"
-							id="forgot-password-email-input"
-							label={t("auth.common.inputs.email.label")}
-							isRequired={true}
-							placeholder={t("auth.common.inputs.email.placeholder")}
-							value={form.email}
-							onChange={handleChange}
-							error={errors.email ? true : false}
-							helperText={t(errors.email)} // Localization keys are in validation.js
-						/>
-						<Button
-							variant="contained"
-							color="accent"
-							loading={isLoading}
-							disabled={errors.email !== undefined}
-							onClick={handleSubmit}
-							sx={{
-								width: "100%",
-								mt: theme.spacing(15),
-							}}
-						>
-							{t("auth.common.navigation.continue")}
-						</Button>
-					</Box>
-				</Stack>
-			</Stack>
-			<Box
-				textAlign="center"
-				p={theme.spacing(12)}
-			>
-				<Typography display="inline-block">
-					<Trans
-						i18nKey={
-							location.state?.from
-								? "Go back to <a>Account Password</a>"
-								: "auth.forgotPassword.links.login"
-						}
-						components={{
-							a: (
-								<Typography
-									component="span"
-									color={theme.palette.accent.main}
-									ml={theme.spacing(2)}
-									onClick={handleNavigate}
-									sx={{ userSelect: "none" }}
-								/>
-							),
-						}}
-					/>
-				</Typography>
-			</Box>
-		</Stack>
-	);
-};
-
-export default ForgotPassword;

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,69 @@
+import { Button, TextField } from "@/Components/v2/inputs";
+import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements";
+
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
+import { useRecoveryForm } from "@/Hooks/useRecoveryForm";
+import type { RecoveryFormData } from "@/Validation/recovery";
+import { usePost } from "@/Hooks/UseApi";
+import { useTranslation } from "react-i18next";
+
+const ForgotPasswordPage = () => {
+	const { t } = useTranslation();
+	const { post, loading } = usePost();
+
+	const { schema, defaults } = useRecoveryForm();
+
+	const { control, handleSubmit } = useForm<RecoveryFormData>({
+		resolver: zodResolver(schema),
+		defaultValues: defaults,
+	});
+
+	const onSubmit = async (data: RecoveryFormData) => {
+		if (loading) return;
+
+		const result = await post("/auth/recovery/request", data);
+
+		if (result?.success) {
+			// Navigate to Check email page
+		}
+	};
+
+	return (
+		<BaseAuthPage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+			title={t("pages.auth.forgotPassword.title")}
+			subtitle={t("pages.auth.forgotPassword.subtitle")}
+		>
+			<Controller
+				name="email"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						fieldLabel={t("pages.auth.common.form.option.email.label")}
+						placeholder={t("pages.auth.common.form.option.email.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
+					/>
+				)}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+				loading={loading}
+			>
+				{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,11 @@ 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/Recovery";
 import AuthCheckEmail from "../Pages/Auth/CheckEmail.jsx";
 import AuthSetNewPassword from "../Pages/Auth/SetNewPassword.jsx";
 import AuthNewPasswordConfirmed from "../Pages/Auth/NewPasswordConfirmed.jsx";
@@ -382,7 +383,13 @@ const Routes = () => {
 
 			<Route
 				path="/forgot-password"
-				element={<AuthForgotPassword />}
+				element={
+					<>
+						<ThemeProvider theme={v2theme}>
+							<AuthForgotPassword />
+						</ThemeProvider>
+					</>
+				}
 			/>
 			<Route
 				path="/check-email"

client/src/Validation/recovery.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const recoverySchema = z.object({
+	email: z
+		.string()
+		.min(1, "auth.common.inputs.email.errors.empty")
+		.email("auth.common.inputs.email.errors.invalid")
+		.transform((val) => val.toLowerCase().trim()),
+});
+
+export type RecoveryFormData = z.infer<typeof recoverySchema>;

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": {

server/src/routes/settingsRoute.ts

@@ -13,7 +13,7 @@ class SettingsRoutes {
 
 	initRoutes() {
 		this.router.get("/", this.settingsController.getAppSettings);
-		this.router.put("/", isAllowed(["admin", "superadmin"]), this.settingsController.updateAppSettings);
+		this.router.patch("/", isAllowed(["admin", "superadmin"]), this.settingsController.updateAppSettings);
 		this.router.post("/test-email", isAllowed(["admin", "superadmin"]), this.settingsController.sendTestEmail);
 	}
 

server/src/service/infrastructure/emailService.ts

@@ -29,18 +29,18 @@ class EmailService {
 		this.mjml2html = mjml2html;
 		this.nodemailer = nodemailer;
 		this.logger = logger;
-		this.init();
 		this.templateLookup = {};
 		this.loadTemplate = () => {
 			return () => {};
 		};
+		this.init();
 	}
 
 	get serviceName() {
 		return EmailService.SERVICE_NAME;
 	}
 
-	init = async () => {
+	init = () => {
 		this.loadTemplate = (templateName) => {
 			try {
 				const templatePath = this.path.join(__dirname, `../../templates/${templateName}.mjml`);