78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@documenso/ui";
|
|
import Logo from "./logo";
|
|
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
|
|
import { FormProvider, useForm } from "react-hook-form";
|
|
|
|
interface IResetPassword {
|
|
email: string;
|
|
}
|
|
|
|
export default function ForgotPassword(props: any) {
|
|
const methods = useForm<IResetPassword>();
|
|
const { register, formState, resetField } = methods;
|
|
|
|
const onSubmit = async (values: IResetPassword) => {
|
|
resetField("email");
|
|
|
|
console.log(values);
|
|
};
|
|
|
|
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)}>
|
|
<input type="hidden" name="remember" defaultValue="true" />
|
|
<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>
|
|
</>
|
|
);
|
|
}
|