Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 16:51:38 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add forgot password page

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-05 12:50:11 +00:00
parent 447bf0cb76
commit 002b22b1a8
3 changed files with 115 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
apps/web/components/forgot-password.tsx Normal file
View File

@ -0,0 +1,77 @@
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>
</>
);
}

6
apps/web/components/login.tsx
View File

@ -111,9 +111,11 @@ export default function Login(props: any) {
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-sm"> <div className="text-sm">
<a href="#" className="hover:text-neon-700 font-medium text-gray-500"> <Link
href="/forgot-password"
className="hover:text-neon-700 font-medium text-gray-500">
Forgot your password? Forgot your password?
</a> </Link>
</div> </div>
</div> </div>
<div> <div>

34
apps/web/pages/forgot-password.tsx Normal file
View File

@ -0,0 +1,34 @@
import Head from "next/head";
import { getUserFromToken } from "@documenso/lib/server";
import ForgotPassword from "../components/forgot-password";
export default function ForgotPasswordPage(props: any) {
return (
<>
<Head>
<title>Reset Password | Documenso</title>
</Head>
<ForgotPassword allowSignup={props.ALLOW_SIGNUP}></ForgotPassword>
</>
);
}
export async function getServerSideProps(context: any) {
const user = await getUserFromToken(context.req, context.res);
if (user)
return {
redirect: {
source: "/login",
destination: "/dashboard",
permanent: false,
},
};
const ALLOW_SIGNUP = process.env.NEXT_PUBLIC_ALLOW_SIGNUP === "true";
return {
props: {
ALLOW_SIGNUP,
},
};
}