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

feat: add reset functionality

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-09-18 14:03:33 +00:00
parent 29bd4cb9c3
commit f561ef3cda
7 changed files with 163 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx Normal file
View File

@ -0,0 +1,36 @@
import Image from 'next/image';
import Link from 'next/link';
import backgroundPattern from '~/assets/background-pattern.png';
import { ResetPasswordForm } from '~/components/forms/reset-password';
export default function ResetPasswordPage({ params }: { params: { token: string } }) {
return (
<main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
<div className="relative flex w-1/5 items-center gap-x-24">
<div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
<Image
src={backgroundPattern}
alt="background pattern"
className="dark:brightness-95 dark:invert dark:sepia"
/>
</div>
<div className="w-full">
<h1 className="text-4xl font-semibold">Reset Password</h1>
<p className="text-muted-foreground/60 mt-2 text-sm">Please choose your new password </p>
<ResetPasswordForm token={params.token} className="mt-4" />
<p className="text-muted-foreground mt-6 text-center text-sm">
Don't have an account?{' '}
<Link href="/signup" className="text-primary duration-200 hover:opacity-70">
Sign up
</Link>
</p>
</div>
</div>
</main>
);
}

37
apps/web/src/app/(unauthenticated)/reset-password/page.tsx
View File

@ -1,36 +1,5 @@
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import backgroundPattern from '~/assets/background-pattern.png';
import { ResetPasswordForm } from '~/components/forms/reset-password';
export default function ResetPasswordPage() {
return (
<main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
<div className="relative flex w-1/5 items-center gap-x-24">
<div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
<Image
src={backgroundPattern}
alt="background pattern"
className="dark:brightness-95 dark:invert dark:sepia"
/>
</div>
<div className="w-full">
<h1 className="text-4xl font-semibold">Reset Password</h1>
<p className="text-muted-foreground/60 mt-2 text-sm">Please choose your new password </p>
<ResetPasswordForm className="mt-4" />
<p className="text-muted-foreground mt-6 text-center text-sm">
Don't have an account?{' '}
<Link href="/signup" className="text-primary duration-200 hover:opacity-70">
Sign up
</Link>
</p>
</div>
</div>
</main>
);
export default function ResetPassword() {
return <div>ResetPassword</div>;
}

28
apps/web/src/components/forms/reset-password.tsx
View File

@ -7,10 +7,12 @@ import { Loader } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label';
import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZResetPasswordFormSchema = z
.object({
@ -26,13 +28,17 @@ export type TResetPasswordFormSchema = z.infer<typeof ZResetPasswordFormSchema>;
export type ResetPasswordFormProps = {
className?: string;
token: string;
};
export const ResetPasswordForm = ({ className }: ResetPasswordFormProps) => {
export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps) => {
const router = useRouter();
const { toast } = useToast();
const {
register,
reset,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<TResetPasswordFormSchema>({
@ -43,8 +49,24 @@ export const ResetPasswordForm = ({ className }: ResetPasswordFormProps) => {
resolver: zodResolver(ZResetPasswordFormSchema),
});
const onFormSubmit = ({ password, repeatedPassword }: TResetPasswordFormSchema) => {
console.log(password, repeatedPassword);
const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
const onFormSubmit = async ({ password, repeatedPassword }: TResetPasswordFormSchema) => {
// TODO: Handle error with try/catch
console.log(password, repeatedPassword, token);
await resetPassword({
password,
token,
});
reset();
toast({
title: 'Password updated',
description: 'Your password has been updated successfully.',
duration: 5000,
});
router.push('/signin');
};