chore: merged main

apps/web/src/app/(dashboard)/settings/security/page.tsx

@@ -1,3 +1,4 @@
+import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
@@ -17,28 +18,43 @@ export default async function SecuritySettingsPage() {
 
       <hr className="my-4" />
 
-      <PasswordForm user={user} className="max-w-xl" />
+      {user.identityProvider === 'DOCUMENSO' ? (
+        <div>
+          <PasswordForm user={user} className="max-w-xl" />
 
-      <hr className="mb-4 mt-8" />
+          <hr className="mb-4 mt-8" />
 
-      <h4 className="text-lg font-medium">Two Factor Authentication</h4>
+          <h4 className="text-lg font-medium">Two Factor Authentication</h4>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add and manage your two factor security settings to add an extra layer of security to your
-        account!
-      </p>
+          <p className="text-muted-foreground mt-2 text-sm">
+            Add and manage your two factor security settings to add an extra layer of security to
+            your account!
+          </p>
 
-      <div className="mt-4 max-w-xl">
-        <h5 className="font-medium">Two-factor methods</h5>
+          <div className="mt-4 max-w-xl">
+            <h5 className="font-medium">Two-factor methods</h5>
 
-        <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-      </div>
+            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
+          </div>
 
-      {user.twoFactorEnabled && (
-        <div className="mt-4 max-w-xl">
-          <h5 className="font-medium">Recovery methods</h5>
+          {user.twoFactorEnabled && (
+            <div className="mt-4 max-w-xl">
+              <h5 className="font-medium">Recovery methods</h5>
 
-          <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
+              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
+            </div>
+          )}
+        </div>
+      ) : (
+        <div>
+          <h4 className="text-lg font-medium">
+            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
+          </h4>
+          <p className="text-muted-foreground mt-2 text-sm">
+            To update your password, enable two-factor authentication, and manage other security
+            settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
+            settings.
+          </p>
         </div>
       )}
     </div>

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

@@ -3,6 +3,8 @@ import { redirect } from 'next/navigation';
 
 import { env } from 'next-runtime-env';
 
+import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+
 import { SignUpForm } from '~/components/forms/signup';
 
 export default function SignUpPage() {
@@ -21,7 +23,7 @@ export default function SignUpPage() {
         signing is within your grasp.
       </p>
 
-      <SignUpForm className="mt-4" />
+      <SignUpForm className="mt-4" isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
 
       <p className="text-muted-foreground mt-6 text-center text-sm">
         Already have an account?{' '}

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -252,7 +252,11 @@ const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) =>
   );
 
   return THEMES.map((theme) => (
-    <CommandItem key={theme.theme} onSelect={() => setTheme(theme.theme)}>
+    <CommandItem
+      key={theme.theme}
+      onSelect={() => setTheme(theme.theme)}
+      className="mx-2 first:mt-2 last:mb-2"
+    >
       <theme.icon className="mr-2" />
       {theme.label}
     </CommandItem>

apps/web/src/components/(dashboard)/layout/verify-email-banner.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 
 import { AlertTriangle } from 'lucide-react';
 
-import { ONE_SECOND } from '@documenso/lib/constants/time';
+import { ONE_DAY, ONE_SECOND } from '@documenso/lib/constants/time';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -65,7 +65,7 @@ export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
     if (emailVerificationDialogLastShown) {
       const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
 
-      if (Date.now() - lastShownTimestamp < 24 * 60 * 60 * 1000) {
+      if (Date.now() - lastShownTimestamp < ONE_DAY) {
         return;
       }
     }

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

@@ -112,7 +112,6 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
             </Label>
             <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
           </div>
-
           <FormField
             control={form.control}
             name="signature"
@@ -122,7 +121,10 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
                 <FormControl>
                   <SignaturePad
                     className="h-44 w-full"
-                    containerClassName="rounded-lg border bg-background"
+                    containerClassName={cn(
+                      'rounded-lg border bg-background',
+                      isSubmitting ? 'pointer-events-none opacity-50' : null,
+                    )}
                     defaultValue={user.signature ?? undefined}
                     onChange={(v) => onChange(v ?? '')}
                   />

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

@@ -3,6 +3,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
@@ -23,6 +24,8 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+const SIGN_UP_REDIRECT_PATH = '/documents';
+
 export const ZSignUpFormSchema = z.object({
   name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
   email: z.string().email().min(1),
@@ -37,9 +40,10 @@ export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 
 export type SignUpFormProps = {
   className?: string;
+  isGoogleSSOEnabled?: boolean;
 };
 
-export const SignUpForm = ({ className }: SignUpFormProps) => {
+export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
 
@@ -64,7 +68,7 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
       await signIn('credentials', {
         email,
         password,
-        callbackUrl: '/',
+        callbackUrl: SIGN_UP_REDIRECT_PATH,
       });
 
       analytics.capture('App: User Sign Up', {
@@ -89,6 +93,19 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     }
   };
 
+  const onSignUpWithGoogleClick = async () => {
+    try {
+      await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -166,6 +183,28 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
         >
           {isSubmitting ? 'Signing up...' : 'Sign Up'}
         </Button>
+
+        {isGoogleSSOEnabled && (
+          <>
+            <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+              <div className="bg-border h-px flex-1" />
+              <span className="text-muted-foreground bg-transparent">Or</span>
+              <div className="bg-border h-px flex-1" />
+            </div>
+
+            <Button
+              type="button"
+              size="lg"
+              variant={'outline'}
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignUpWithGoogleClick}
+            >
+              <FcGoogle className="mr-2 h-5 w-5" />
+              Sign Up with Google
+            </Button>
+          </>
+        )}
       </form>
     </Form>
   );