Skip to content

Commit 2f8fe5d

Browse files
tingkai-maitingkai-mai
committed
Update password reset validation
1 parent 8b0c94c commit 2f8fe5d

File tree

1 file changed

+91
-47
lines changed

1 file changed

+91
-47
lines changed

‎frontend/src/app/(user)/reset-password/components/ResetPassword.tsx‎

Lines changed: 91 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import { checkPasswordResetCode, resetPasswordWithCode } from "@/api/user";
44
import LoadingPage from "@/app/common/LoadingPage";
55
import Navbar from "@/app/common/Navbar";
66
import { Button } from "@/components/ui/button";
7-
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
7+
import {
8+
Form,
9+
FormControl,
10+
FormField,
11+
FormItem,
12+
FormLabel,
13+
FormMessage,
14+
} from "@/components/ui/form";
815
import { Input } from "@/components/ui/input";
916
import { zodResolver } from "@hookform/resolvers/zod";
1017
import { useSearchParams } from "next/navigation";
@@ -13,9 +20,17 @@ import { useForm } from "react-hook-form";
1320
import { z } from "zod";
1421

1522
const formSchema = z.object({
16-
password: z.string()
23+
password: z
24+
.string()
1725
.min(8, "Password must be at least 8 characters")
18-
.max(100, "Password must be at most 100 characters"),
26+
.max(100, "Password must be at most 100 characters")
27+
.regex(/[a-z]/, "Password must contain at least one lowercase letter")
28+
.regex(/[A-Z]/, "Password must contain at least one uppercase letter")
29+
.regex(/\d/, "Password must contain at least one number")
30+
.regex(
31+
/[@$!%*?&]/,
32+
"Password must contain at least one special character (@, $, !, %, *, ?, &)"
33+
),
1934
});
2035

2136
const ResetPassword = () => {
@@ -44,8 +59,8 @@ const ResetPassword = () => {
4459
}
4560
setIsValidCode(true);
4661
setUsername(data.username);
47-
})
48-
}, [searchParams])
62+
});
63+
}, [searchParams]);
4964

5065
const onSubmit = async (data: z.infer<typeof formSchema>) => {
5166
if (!searchParams) return;
@@ -55,52 +70,81 @@ const ResetPassword = () => {
5570
resetPasswordWithCode(code, data.password).then((data) => {
5671
if (!data) return;
5772
setChangeIsSuccessful(true);
58-
})
73+
});
5974
};
6075

6176
return (
6277
<>
63-
<Navbar/>
64-
{!isValidCode && !isInvalidCode && <LoadingPage/>}
65-
{isValidCode && !changeIsSuccessful && <div className="max-w-xl mx-auto my-10 p-2">
66-
<h1 className="text-white font-extrabold text-h1">Reset Password</h1>
67-
<p className="text-primary-300 text-lg">
68-
Welcome, {username}! Please enter your new password.
69-
</p>
70-
<Form {...form}>
71-
<form className="my-10 grid gap-4" onSubmit={form.handleSubmit(onSubmit)} noValidate>
72-
<FormField
73-
control={form.control}
74-
name="password"
75-
render={({ field }) => (
76-
<FormItem>
77-
<FormLabel className="text-yellow-500 text-lg">PASSWORD</FormLabel>
78-
<FormControl>
79-
<Input placeholder="password" type="password" {...field} className="focus:border-yellow-500 text-white"/>
80-
</FormControl>
81-
{/* <FormDescription>This is your public display name.</FormDescription> */}
82-
<FormMessage/>
83-
</FormItem>
84-
)}
85-
/>
86-
<Button type="submit" className="bg-yellow-500 hover:bg-yellow-300 px-4 py-2 my-2 rounded-md text-black">Change Password</Button>
87-
</form>
88-
</Form>
89-
</div>}
90-
{isInvalidCode && <div className="max-w-xl mx-auto my-10 p-2">
91-
<h1 className="text-white font-extrabold text-h1">Invalid Code</h1>
92-
<p className="text-primary-300 text-lg">
93-
The code you entered is invalid. Please check your email for the correct code.
94-
</p>
95-
</div>}
96-
{changeIsSuccessful && <div className="max-w-xl mx-auto my-10 p-2">
97-
<h1 className="text-white font-extrabold text-h1">Password Changed</h1>
98-
<p className="text-primary-300 text-lg">
99-
Your password has been changed successfully. You can now <a href="/login" className="text-yellow-500 hover:underline">login</a> with your new password.
100-
</p>
101-
</div>}
78+
<Navbar />
79+
{!isValidCode && !isInvalidCode && <LoadingPage />}
80+
{isValidCode && !changeIsSuccessful && (
81+
<div className="max-w-xl mx-auto my-10 p-2">
82+
<h1 className="text-white font-extrabold text-h1">Reset Password</h1>
83+
<p className="text-primary-300 text-lg">
84+
Welcome, {username}! Please enter your new password.
85+
</p>
86+
<Form {...form}>
87+
<form
88+
className="my-10 grid gap-4"
89+
onSubmit={form.handleSubmit(onSubmit)}
90+
noValidate
91+
>
92+
<FormField
93+
control={form.control}
94+
name="password"
95+
render={({ field }) => (
96+
<FormItem>
97+
<FormLabel className="text-yellow-500 text-lg">
98+
PASSWORD
99+
</FormLabel>
100+
<FormControl>
101+
<Input
102+
placeholder="password"
103+
type="password"
104+
{...field}
105+
className="focus:border-yellow-500 text-white"
106+
/>
107+
</FormControl>
108+
{/* <FormDescription>This is your public display name.</FormDescription> */}
109+
<FormMessage />
110+
</FormItem>
111+
)}
112+
/>
113+
<Button
114+
type="submit"
115+
className="bg-yellow-500 hover:bg-yellow-300 px-4 py-2 my-2 rounded-md text-black"
116+
>
117+
Change Password
118+
</Button>
119+
</form>
120+
</Form>
121+
</div>
122+
)}
123+
{isInvalidCode && (
124+
<div className="max-w-xl mx-auto my-10 p-2">
125+
<h1 className="text-white font-extrabold text-h1">Invalid Code</h1>
126+
<p className="text-primary-300 text-lg">
127+
The code you entered is invalid. Please check your email for the
128+
correct code.
129+
</p>
130+
</div>
131+
)}
132+
{changeIsSuccessful && (
133+
<div className="max-w-xl mx-auto my-10 p-2">
134+
<h1 className="text-white font-extrabold text-h1">
135+
Password Changed
136+
</h1>
137+
<p className="text-primary-300 text-lg">
138+
Your password has been changed successfully. You can now{" "}
139+
<a href="/login" className="text-yellow-500 hover:underline">
140+
login
141+
</a>{" "}
142+
with your new password.
143+
</p>
144+
</div>
145+
)}
102146
</>
103147
);
104-
}
148+
};
105149

106-
export default ResetPassword;
150+
export default ResetPassword;

0 commit comments

Comments
 (0)