submit

Author: ajhollid

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

@@ -177,7 +177,7 @@ export const MonitorBasePageWithStates = ({
 				error={error}
 				{...props}
 			>
-				{priorityFallback}
+				<Stack height={"100%"}>{priorityFallback}</Stack>
 			</BasePage>
 		);
 	}

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

@@ -27,6 +27,7 @@ export const BulletPointCheck = ({
 			<Check
 				size={16}
 				strokeWidth={1.5}
+				color={variant === "info" ? theme.palette.text.secondary : colors[variant]}
 				style={{
 					flexShrink: 0,
 				}}

client/src/Hooks/useSetNewPasswordForm.ts

@@ -0,0 +1,16 @@
+import {
+	setNewPasswordSchema,
+	type SetNewPasswordFormData,
+} from "@/Validation/setNewPassword";
+
+export const useSetNewPasswordForm = () => {
+	const defaults: SetNewPasswordFormData = {
+		password: "",
+		confirm: "",
+	};
+
+	return {
+		schema: setNewPasswordSchema,
+		defaults,
+	};
+};

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

@@ -7,56 +7,125 @@ import { Button, TextField } from "@/Components/v2/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
+import { useSetNewPasswordForm } from "@/Hooks/useSetNewPasswordForm";
+import type { SetNewPasswordFormData } from "@/Validation/setNewPassword";
+import { specialCharPattern } from "@/Validation/patterns";
+import { useParams, useNavigate } from "react-router-dom";
+import { usePost } from "@/Hooks/UseApi";
+import { useDispatch } from "react-redux";
+import { setAuthState } from "@/Features/Auth/authSlice";
 
 const SetNewPasswordPage = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const { token } = useParams<{ token: string }>();
+	const navigate = useNavigate();
+	const dispatch = useDispatch();
+	const { post, loading } = usePost();
+
+	const { schema, defaults } = useSetNewPasswordForm();
+
+	const { control, handleSubmit, watch } = useForm<SetNewPasswordFormData>({
+		resolver: zodResolver(schema),
+		defaultValues: defaults,
+	});
+
+	const password = watch("password");
+	const confirm = watch("confirm");
+
+	const getVariant = (condition: boolean): "success" | "info" => {
+		return condition ? "success" : "info";
+	};
+
+	const hasLength = password.length >= 8;
+	const hasSpecial = specialCharPattern.test(password);
+	const hasNumber = /\d/.test(password);
+	const hasUppercase = /[A-Z]/.test(password);
+	const hasLowercase = /[a-z]/.test(password);
+	const passwordsMatch = password.length > 0 && password === confirm;
+
+	const onSubmit = async (data: SetNewPasswordFormData) => {
+		if (loading) return;
+
+		const result = await post("/auth/recovery/reset", {
+			password: data.password,
+			recoveryToken: token,
+		});
+
+		if (result?.success) {
+			dispatch(setAuthState(result));
+			navigate("/uptime");
+		}
+	};
 
 	return (
 		<BaseAuthPage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
 			title={t("pages.auth.setNewPassword.title")}
 			subtitle={t("pages.auth.setNewPassword.subtitle")}
 		>
-			<TextField
-				type="password"
-				fieldLabel={t("pages.auth.common.form.option.password.label")}
-				placeholder={t("pages.auth.common.form.option.password.placeholder")}
+			<Controller
+				name="password"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.password.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
 			/>
-			<TextField
-				type="password"
-				fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-				placeholder={t("pages.auth.common.form.option.password.placeholder")}
+			<Controller
+				name="confirm"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
 			/>
 			<Stack gap={theme.spacing(4)}>
 				<BulletPointCheck
 					text={t("auth.common.passwordRules.length")}
-					variant="info"
+					variant={getVariant(hasLength)}
 				/>
 				<BulletPointCheck
 					text={t("auth.common.passwordRules.special")}
-					variant="info"
+					variant={getVariant(hasSpecial)}
 				/>
 				<BulletPointCheck
 					text={t("auth.common.passwordRules.number")}
-					variant="info"
+					variant={getVariant(hasNumber)}
 				/>
 				<BulletPointCheck
 					text={t("auth.common.passwordRules.uppercase")}
-					variant="info"
+					variant={getVariant(hasUppercase)}
 				/>
 				<BulletPointCheck
 					text={t("auth.common.passwordRules.lowercase")}
-					variant="info"
+					variant={getVariant(hasLowercase)}
 				/>
 				<BulletPointCheck
 					text={t("auth.common.passwordRules.match")}
-					variant="info"
+					variant={getVariant(passwordsMatch)}
 				/>
 			</Stack>
 			<Button
 				variant="contained"
 				type="submit"
 				fullWidth
+				loading={loading}
 			>
 				{t("auth.forgotPassword.buttons.resetPassword")}
 			</Button>

client/src/Validation/setNewPassword.ts

@@ -0,0 +1,24 @@
+import { z } from "zod";
+import { specialCharPattern } from "@/Validation/patterns";
+
+export const setNewPasswordSchema = z
+	.object({
+		password: z
+			.string()
+			.min(1, "Password is required")
+			.min(8, "Password must be at least 8 characters")
+			.refine((val) => /[A-Z]/.test(val), "Password must contain an uppercase letter")
+			.refine((val) => /[a-z]/.test(val), "Password must contain a lowercase letter")
+			.refine((val) => /\d/.test(val), "Password must contain a number")
+			.refine(
+				(val) => specialCharPattern.test(val),
+				"Password must contain a special character"
+			),
+		confirm: z.string().min(1, "Please confirm your password"),
+	})
+	.refine((data) => data.password === data.confirm, {
+		message: "Passwords do not match",
+		path: ["confirm"],
+	});
+
+export type SetNewPasswordFormData = z.infer<typeof setNewPasswordSchema>;