Merge branch 'feat/refresh' into feat/reveal-password

apps/web/src/app/(unauthenticated)/check-email/page.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ForgotPasswordPage() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Email sent!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        A password reset email has been sent, if you have an account you should see it in your inbox
+        shortly.
+      </p>
+
+      <Button asChild>
+        <Link href="/signin">Return to sign in</Link>
+      </Button>
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+import { ForgotPasswordForm } from '~/components/forms/forgot-password';
+
+export default function ForgotPasswordPage() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Forgotten your password?</h1>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        No worries, it happens! Enter your email and we'll email you a special link to reset your
+        password.
+      </p>
+
+      <ForgotPasswordForm className="mt-4" />
+
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Remembered your password?{' '}
+        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+          Sign In
+        </Link>
+      </p>
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/layout.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+type UnauthenticatedLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
+  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-full max-w-md 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">{children}</div>
+      </div>
+    </main>
+  );
+}

apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { getResetTokenValidity } from '@documenso/lib/server-only/user/get-reset-token-validity';
+
+import { ResetPasswordForm } from '~/components/forms/reset-password';
+
+type ResetPasswordPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function ResetPasswordPage({ params: { token } }: ResetPasswordPageProps) {
+  const isValid = await getResetTokenValidity({ token });
+
+  if (!isValid) {
+    redirect('/reset-password');
+  }
+
+  return (
+    <div className="w-full">
+      <h1 className="text-4xl font-semibold">Reset Password</h1>
+
+      <p className="text-muted-foreground mt-2 text-sm">Please choose your new password </p>
+
+      <ResetPasswordForm token={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>
+  );
+}

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

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ResetPasswordPage() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Unable to reset password</h1>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        The token you have used to reset your password is either expired or it never existed. If you
+        have still forgotten your password, please request a new reset link.
+      </p>
+
+      <Button className="mt-4" asChild>
+        <Link href="/signin">Return to sign in</Link>
+      </Button>
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -1,43 +1,33 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import connections from '~/assets/card-sharing-figure.png';
 import { SignInForm } from '~/components/forms/signin';
 
 export default function SignInPage() {
   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 max-w-4xl 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>
+      <h1 className="text-4xl font-semibold">Sign in to your account</h1>
 
-        <div className="max-w-md">
-          <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+      <p className="text-muted-foreground/60 mt-2 text-sm">
+        Welcome back, we are lucky to have you.
+      </p>
 
-          <p className="text-muted-foreground/60 mt-2 text-sm">
-            Welcome back, we are lucky to have you.
-          </p>
+      <SignInForm className="mt-4" />
 
-          <SignInForm 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>
 
-          <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 className="hidden flex-1 lg:block">
-          <Image src={connections} alt="documenso connections" />
-        </div>
-      </div>
-    </main>
+      <p className="mt-2.5 text-center">
+        <Link
+          href="/forgot-password"
+          className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+        >
+          Forgotten your password?
+        </Link>
+      </p>
+    </div>
   );
 }

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -1,44 +1,25 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import connections from '~/assets/connections.png';
 import { SignUpForm } from '~/components/forms/signup';
 
 export default function SignUpPage() {
   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 max-w-4xl 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>
+      <h1 className="text-4xl font-semibold">Create a new account</h1>
 
-        <div className="max-w-md">
-          <h1 className="text-4xl font-semibold">Create a shiny, new Documenso Account ✨</h1>
+      <p className="text-muted-foreground/60 mt-2 text-sm">
+        Create your account and start using state-of-the-art document signing. Open and beautiful
+        signing is within your grasp.
+      </p>
 
-          <p className="text-muted-foreground/60 mt-2 text-sm">
-            Create your account and start using state-of-the-art document signing. Open and
-            beautiful signing is within your grasp.
-          </p>
+      <SignUpForm className="mt-4" />
 
-          <SignUpForm className="mt-4" />
-
-          <p className="text-muted-foreground mt-6 text-center text-sm">
-            Already have an account?{' '}
-            <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
-              Sign in instead
-            </Link>
-          </p>
-        </div>
-
-        <div className="hidden flex-1 lg:block">
-          <Image src={connections} alt="documenso connections" />
-        </div>
-      </div>
-    </main>
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Already have an account?{' '}
+        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+          Sign in instead
+        </Link>
+      </p>
+    </div>
   );
 }

apps/web/src/components/forms/forgot-password.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+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 { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZForgotPasswordFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;
+
+export type ForgotPasswordFormProps = {
+  className?: string;
+};
+
+export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<TForgotPasswordFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZForgotPasswordFormSchema),
+  });
+
+  const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation();
+
+  const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
+    await forgotPassword({ email }).catch(() => null);
+
+    toast({
+      title: 'Reset email sent',
+      description:
+        'A password reset email has been sent, if you have an account you should see it in your inbox shortly.',
+      duration: 5000,
+    });
+
+    reset();
+
+    router.push('/check-email');
+  };
+
+  return (
+    <form
+      className={cn('flex w-full flex-col gap-y-4', className)}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div>
+        <Label htmlFor="email" className="text-muted-foreground">
+          Email
+        </Label>
+
+        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
+
+        <FormErrorMessage className="mt-1.5" error={errors.email} />
+      </div>
+
+      <Button size="lg" loading={isSubmitting}>
+        Reset Password
+      </Button>
+    </form>
+  );
+};

apps/web/src/components/forms/password.tsx

@@ -92,7 +92,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="password" className="text-slate-500">
+        <Label htmlFor="password" className="text-muted-foreground">
           Password
         </Label>
 
@@ -126,7 +126,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="repeated-password" className="text-slate-500">
+        <Label htmlFor="repeated-password" className="text-muted-foreground">
           Repeat Password
         </Label>
 

apps/web/src/components/forms/profile.tsx

@@ -89,7 +89,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="full-name" className="text-slate-500">
+        <Label htmlFor="full-name" className="text-muted-foreground">
           Full Name
         </Label>
 
@@ -99,7 +99,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-foreground">
           Email
         </Label>
 
@@ -107,7 +107,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="signature" className="text-slate-500">
+        <Label htmlFor="signature" className="text-muted-foreground">
           Signature
         </Label>
 

apps/web/src/components/forms/reset-password.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+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({
+    password: z.string().min(6).max(72),
+    repeatedPassword: z.string().min(6).max(72),
+  })
+  .refine((data) => data.password === data.repeatedPassword, {
+    path: ['repeatedPassword'],
+    message: "Passwords don't match",
+  });
+
+export type TResetPasswordFormSchema = z.infer<typeof ZResetPasswordFormSchema>;
+
+export type ResetPasswordFormProps = {
+  className?: string;
+  token: string;
+};
+
+export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TResetPasswordFormSchema>({
+    values: {
+      password: '',
+      repeatedPassword: '',
+    },
+    resolver: zodResolver(ZResetPasswordFormSchema),
+  });
+
+  const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
+
+  const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
+    try {
+      await resetPassword({
+        password,
+        token,
+      });
+
+      reset();
+
+      toast({
+        title: 'Password updated',
+        description: 'Your password has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.push('/signin');
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to reset your password. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <form
+      className={cn('flex w-full flex-col gap-y-4', className)}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div>
+        <Label htmlFor="password" className="text-muted-foreground">
+          <span>Password</span>
+        </Label>
+
+        <Input
+          id="password"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="current-password"
+          className="bg-background mt-2"
+          {...register('password')}
+        />
+
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
+      </div>
+
+      <div>
+        <Label htmlFor="repeatedPassword" className="text-muted-foreground">
+          <span>Repeat Password</span>
+        </Label>
+
+        <Input
+          id="repeatedPassword"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="current-password"
+          className="bg-background mt-2"
+          {...register('repeatedPassword')}
+        />
+
+        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
+      </div>
+
+      <Button size="lg" loading={isSubmitting}>
+        Reset Password
+      </Button>
+    </form>
+  );
+};

apps/web/src/components/forms/signin.tsx

@@ -14,6 +14,7 @@ import { z } from 'zod';
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -114,18 +115,18 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-forground">
           Email
         </Label>
 
         <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
 
-        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
+        <FormErrorMessage className="mt-1.5" error={errors.email} />
       </div>
 
       <div>
-        <Label htmlFor="password" className="text-slate-500">
-          Password
+        <Label htmlFor="password" className="text-muted-forground">
+          <span>Password</span>
         </Label>
 
         <div className="relative">
@@ -154,9 +155,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           </Button>
         </div>
 
-        {errors.password && (
-          <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
-        )}
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
       <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">