blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

Refactor forgot password and reset component

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-07 10:33:05 +00:00
parent f08836216e
commit 7cc1ae2de0
4 changed files with 119 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
apps/web/components/forgot-password.tsx
View File

@@ -57,19 +57,53 @@ export default function ForgotPassword() {
resetField("email"); resetField("email");
}; };
if (resetSuccessful) { return (
return ( <>
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8"> <div className="w-full max-w-md space-y-8">
<div> <div>
<Logo className="mx-auto h-20 w-auto"></Logo> <Logo className="mx-auto h-20 w-auto"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"> <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Reset Password {resetSuccessful ? "Reset Password" : "Forgot Password?"}
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600"> <p className="mt-2 text-center text-sm text-gray-600">
Please check your email for reset instructions. {resetSuccessful
? "Please check your email for reset instructions."
: "No worries, we'll send you reset instructions."}
</p> </p>
</div> </div>
{resetSuccessful ? null : (
<FormProvider {...methods}>
<form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
<div className="-space-y-px rounded-md shadow-sm">
<div>
<label htmlFor="email-address" className="sr-only">
Email
</label>
<input
{...register("email")}
id="email-address"
name="email"
type="email"
autoComplete="email"
required
className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
placeholder="Email"
/>
</div>
</div>
<div>
<Button
type="submit"
disabled={formState.isSubmitting}
className="group relative flex w-full">
Reset password
</Button>
</div>
</form>
</FormProvider>
)}
<div> <div>
<Link href="/login"> <Link href="/login">
<div className="relative mt-10 flex items-center justify-center gap-2 text-sm text-gray-500 hover:cursor-pointer hover:text-gray-900"> <div className="relative mt-10 flex items-center justify-center gap-2 text-sm text-gray-500 hover:cursor-pointer hover:text-gray-900">
@@ -80,62 +114,6 @@ export default function ForgotPassword() {
</div> </div>
</div> </div>
</div> </div>
);
}
return (
<>
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div>
<Logo className="mx-auto h-20 w-auto"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Forgot Password?
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
No worries, we'll send you reset instructions.
</p>
</div>
<FormProvider {...methods}>
<form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
<div className="-space-y-px rounded-md shadow-sm">
<div>
<label htmlFor="email-address" className="sr-only">
Email
</label>
<input
{...register("email")}
id="email-address"
name="email"
type="email"
autoComplete="email"
required
className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
placeholder="Email"
/>
</div>
</div>
<div>
<Button
type="submit"
disabled={formState.isSubmitting}
className="group relative flex w-full">
Reset password
</Button>
</div>
<div>
<Link href="/login">
<div className="relative mt-10 flex items-center justify-center gap-2 text-sm text-gray-500 hover:cursor-pointer hover:text-gray-900">
<ArrowLeftIcon className="h-4 w-4" />
Back to log in
</div>
</Link>
</div>
</form>
</FormProvider>
</div>
</div>
</> </>
); );
} }

152
apps/web/components/reset-password.tsx
View File

@@ -7,7 +7,7 @@ import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import { FormProvider, useForm } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
interface ForgotPasswordForm { interface ResetPasswordForm {
password: string; password: string;
confirmPassword: string; confirmPassword: string;
} }
@@ -16,13 +16,13 @@ export default function ResetPassword(props: any) {
const router = useRouter(); const router = useRouter();
const { token } = router.query; const { token } = router.query;
const methods = useForm<ForgotPasswordForm>(); const methods = useForm<ResetPasswordForm>();
const { register, formState, watch } = methods; const { register, formState, watch } = methods;
const password = watch("password", ""); const password = watch("password", "");
const [resetSuccessful, setResetSuccessful] = useState(false); const [resetSuccessful, setResetSuccessful] = useState(false);
const onSubmit = async (values: ForgotPasswordForm) => { const onSubmit = async (values: ResetPasswordForm) => {
const response = await toast.promise( const response = await toast.promise(
fetch(`/api/auth/reset-password`, { fetch(`/api/auth/reset-password`, {
method: "POST", method: "POST",
@@ -52,40 +52,6 @@ export default function ResetPassword(props: any) {
} }
}; };
if (!token) {
return (
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div>
<Logo className="mx-auto h-20 w-auto"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Reset Password
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
The token you provided is invalid. Please try again.
</p>
</div>
</div>
</div>
);
}
if (resetSuccessful) {
return (
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div>
<Logo className="mx-auto h-20 w-auto"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Reset Password
</h2>
<p className="mt-2 text-center text-sm text-gray-600">Your password has been reset.</p>
</div>
</div>
</div>
);
}
return ( return (
<> <>
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -95,63 +61,67 @@ export default function ResetPassword(props: any) {
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"> <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Reset Password Reset Password
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600">Please chose your new password</p> <p className="mt-2 text-center text-sm text-gray-600">
{resetSuccessful ? "Your password has been reset." : "Please chose your new password"}
</p>
</div> </div>
<FormProvider {...methods}> {resetSuccessful ? null : (
<form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}> <FormProvider {...methods}>
<div className="-space-y-px rounded-md shadow-sm"> <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
<div> <div className="-space-y-px rounded-md shadow-sm">
<label htmlFor="password" className="sr-only"> <div>
Password <label htmlFor="password" className="sr-only">
</label> Password
<input </label>
{...register("password", { required: "Password is required" })} <input
id="password" {...register("password", { required: "Password is required" })}
name="password" id="password"
type="password" name="password"
autoComplete="current-password" type="password"
required autoComplete="current-password"
className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm" required
placeholder="New password" className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
/> placeholder="New password"
</div> />
<div>
<label htmlFor="confirmPassword" className="sr-only">
Password
</label>
<input
{...register("confirmPassword", {
required: "Please confirm password",
validate: (value) => value === password || "The passwords do not match",
})}
id="confirmPassword"
name="confirmPassword"
type="password"
required
className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
placeholder="Confirm new password"
/>
</div>
</div>
<div>
<Button
type="submit"
disabled={formState.isSubmitting}
className="group relative flex w-full">
Reset password
</Button>
</div>
<div>
<Link href="/login">
<div className="relative mt-10 flex items-center justify-center gap-2 text-sm text-gray-500 hover:cursor-pointer hover:text-gray-900">
<ArrowLeftIcon className="h-4 w-4" />
Back to log in
</div> </div>
</Link> <div>
<label htmlFor="confirmPassword" className="sr-only">
Password
</label>
<input
{...register("confirmPassword", {
required: "Please confirm password",
validate: (value) => value === password || "The passwords do not match",
})}
id="confirmPassword"
name="confirmPassword"
type="password"
required
className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
placeholder="Confirm new password"
/>
</div>
</div>
<div>
<Button
type="submit"
disabled={formState.isSubmitting}
className="group relative flex w-full">
Reset password
</Button>
</div>
</form>
</FormProvider>
)}
<div>
<Link href="/login">
<div className="relative mt-10 flex items-center justify-center gap-2 text-sm text-gray-500 hover:cursor-pointer hover:text-gray-900">
<ArrowLeftIcon className="h-4 w-4" />
Back to log in
</div> </div>
</form> </Link>
</FormProvider> </div>
</div> </div>
</div> </div>
</> </>

0
apps/web/pages/auth/reset.tsx
View File

20
apps/web/pages/auth/reset/index.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
import Logo from "../../../components/logo";
export default function ResetPage() {
return (
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div>
<Logo className="mx-auto h-20 w-auto"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Reset Password
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
The token you provided is invalid. Please try again.
</p>
</div>
</div>
</div>
);
}