feat: update signin signup ui

Signed-off-by: Adithya Krishna <adithya@documenso.com>
2025-11-13 16:23:06 +10:00 · 2024-02-22 01:57:46 +05:30
parent deea6b1535
commit 65d762dd4b
24 changed files with 889 additions and 207 deletions
--- a/apps/marketing/src/components/(marketing)/widget.tsx
+++ b/apps/marketing/src/components/(marketing)/widget.tsx
@ -199,7 +199,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
            className="bg-foreground/5 col-span-12 flex flex-col rounded-2xl p-6 lg:col-span-5"
            onSubmit={handleSubmit(onFormSubmit)}
          >
-            <h3 className="text-2xl font-semibold">Sign up to Community Plan</h3>
+            <h3 className="text-xl font-semibold">Sign up to Community Plan</h3>
            <p className="text-muted-foreground mt-2 text-xs">
              with Timur Ercan & Lucas Smith from Documenso
            </p>
--- a/apps/web/src/app/(dashboard)/settings/public-profile/layout.tsx
+++ b/apps/web/src/app/(dashboard)/settings/public-profile/layout.tsx
@ -0,0 +1,9 @@
+import React from 'react';
+
+export type PublicProfileSettingsLayout = {
+  children: React.ReactNode;
+};
+
+export default function PublicProfileSettingsLayout({ children }: PublicProfileSettingsLayout) {
+  return <div className="col-span-12 md:col-span-9">{children}</div>;
+}
--- a/apps/web/src/app/(dashboard)/settings/public-profile/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/public-profile/page.tsx
@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import type { Metadata } from 'next';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { Switch } from '@documenso/ui/primitives/switch';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { PublicProfileForm } from '~/components/forms/public-profile';
+
+export const metadata: Metadata = {
+  title: 'Public Profile',
+};
+
+export default async function PublicProfilePage() {
+  const { user } = await getRequiredServerComponentSession();
+
+  return (
+    <>
+      <SettingsHeader
+        title="Public profile"
+        subtitle="You can choose to enable/disable your profile for public view"
+        titleChildren={<Switch></Switch>}
+        className="max-w-xl"
+      />
+
+      <PublicProfileForm user={user} className="max-w-xl" />
+    </>
+  );
+}
--- a/apps/web/src/app/(dashboard)/settings/security/activity/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/activity/page.tsx
@ -1,5 +1,8 @@
 import type { Metadata } from 'next';

+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import ActivityPageBackButton from '../../../../../components/(dashboard)/settings/layout/activity-back';
 import { UserSecurityActivityDataTable } from './user-security-activity-data-table';

 export const metadata: Metadata = {
@ -9,11 +12,11 @@ export const metadata: Metadata = {
 export default function SettingsSecurityActivityPage() {
  return (
    <div>
-      <h3 className="text-2xl font-semibold">Security activity</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        View all recent security activity related to your account.
-      </p>
+      <SettingsHeader
+        title="Security activity"
+        subtitle="View all recent security activity related to your account."
+        titleChildren={<ActivityPageBackButton />}
+      />

      <hr className="my-4" />

--- a/apps/web/src/app/(unauthenticated)/layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/layout.tsx
@ -3,6 +3,9 @@ import React from 'react';
 import Image from 'next/image';

 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../components/(dashboard)/layout/new/new-header';

 type UnauthenticatedLayoutProps = {
  children: React.ReactNode;
@ -10,18 +13,22 @@ type UnauthenticatedLayoutProps = {

 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:contrast-[70%] dark:invert dark:sepia"
-          />
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <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:contrast-[70%] dark:invert dark:sepia"
+            />
+          </div>
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
        </div>
-
-        <div className="w-full">{children}</div>
-      </div>
-    </main>
+      </main>
+    </>
  );
 }
--- a/apps/web/src/app/(unauthenticated)/signin/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signin/page.tsx
@ -30,36 +30,31 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
  }

  return (
-    <div>
-      <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+    <>
+      <div>
+        <h1 className="text-3xl 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>
-
-      <SignInForm
-        className="mt-4"
-        initialEmail={email || undefined}
-        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
-      />
-
-      {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
-        <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 className="text-muted-foreground/60 mt-2 text-sm">
+          Welcome back, we are lucky to have you.
        </p>
-      )}

-      <p className="mt-2.5 text-center">
-        <Link
-          href="/forgot-password"
-          className="text-muted-foreground text-sm duration-200 hover:opacity-70"
-        >
-          Forgot your password?
-        </Link>
-      </p>
-    </div>
+        <hr className="my-4" />
+
+        <SignInForm
+          className="mt-0"
+          initialEmail={email || undefined}
+          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+        />
+
+        {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
+          <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>
+    </>
  );
 }
--- a/apps/web/src/app/(unauthenticated)/signup-layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/signup-layout.tsx
@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../components/(dashboard)/layout/new/new-header';
+
+type SignUpLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function SignUpLayout({ children }: SignUpLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <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:contrast-[70%] dark:invert dark:sepia"
+            />
+          </div>
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}
--- a/apps/web/src/app/(unauthenticated)/signup/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signup/page.tsx
@ -9,6 +9,8 @@ import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt'

 import { SignUpForm } from '~/components/forms/signup';

+import SignUpLayout from '../signup-layout';
+
 export const metadata: Metadata = {
  title: 'Sign Up',
 };
@ -34,26 +36,28 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {
  }

  return (
-    <div>
-      <h1 className="text-4xl font-semibold">Create a new account</h1>
+    <SignUpLayout>
+      <>
+        <h1 className="text-3xl font-semibold">Create a new 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"
-        initialEmail={email || undefined}
-        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
-      />
+        <SignUpForm
+          className="mt-1"
+          initialEmail={email || undefined}
+          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+        />

-      <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>
+        <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>
+      </>
+    </SignUpLayout>
  );
 }
--- a/apps/web/src/components/(dashboard)/layout/new/new-header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/new/new-header.tsx
@ -0,0 +1,87 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { NewHamburgerMenu } from './new-mobile-hamburger';
+import { NewMobileNavigation } from './new-mobile-navigation';
+
+export type HeaderProps = HTMLAttributes<HTMLElement>;
+
+export const NewHeader = ({ className, ...props }: HeaderProps) => {
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
+
+  return (
+    <header className={cn('flex items-center justify-between', className)} {...props}>
+      <div className="flex items-center space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+      </div>
+
+      <div className="hidden items-center gap-x-6 md:flex">
+        <Link
+          href="https://documenso.com/pricing"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Pricing
+        </Link>
+
+        <Link
+          href="https://documenso.com/blog"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Blog
+        </Link>
+
+        <Link
+          href="https://documenso.com/open"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Open Startup
+        </Link>
+
+        <Link
+          href="/signin"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Sign in
+        </Link>
+        <Link
+          href="/signup"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xs">
+            Sign up
+          </span>
+        </Link>
+      </div>
+
+      <NewHamburgerMenu
+        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
+        isMenuOpen={isHamburgerMenuOpen}
+      />
+      <NewMobileNavigation
+        isMenuOpen={isHamburgerMenuOpen}
+        onMenuOpenChange={setIsHamburgerMenuOpen}
+      />
+    </header>
+  );
+};
--- a/apps/web/src/components/(dashboard)/layout/new/new-mobile-hamburger.tsx
+++ b/apps/web/src/components/(dashboard)/layout/new/new-mobile-hamburger.tsx
@ -0,0 +1,20 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export interface HamburgerMenuProps {
+  isMenuOpen: boolean;
+  onToggleMenuOpen?: () => void;
+}
+
+export const NewHamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
+  return (
+    <div className="flex md:hidden">
+      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
+        {isMenuOpen ? <X /> : <Menu />}
+      </Button>
+    </div>
+  );
+};
--- a/apps/web/src/components/(dashboard)/layout/new/new-mobile-navigation.tsx
+++ b/apps/web/src/components/(dashboard)/layout/new/new-mobile-navigation.tsx
@ -0,0 +1,151 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { motion, useReducedMotion } from 'framer-motion';
+import { FaXTwitter } from 'react-icons/fa6';
+import { LiaDiscord } from 'react-icons/lia';
+import { LuGithub } from 'react-icons/lu';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MENU_NAVIGATION_LINKS = [
+  {
+    href: 'https://documenso.com/singleplayer',
+    text: 'Singleplayer',
+  },
+  {
+    href: 'https://documenso.com/blog',
+    text: 'Blog',
+  },
+  {
+    href: 'https://documenso.com/pricing',
+    text: 'Pricing',
+  },
+  {
+    href: 'https://documenso.com/open',
+    text: 'Open Startup',
+  },
+  {
+    href: 'https://status.documenso.com',
+    text: 'Status',
+  },
+  {
+    href: 'mailto:support@documenso.com',
+    text: 'Support',
+    target: '_blank',
+  },
+  {
+    href: 'https://documenso.com/privacy',
+    text: 'Privacy',
+  },
+  {
+    href: '/signin',
+    text: 'Sign in',
+  },
+  {
+    href: '/signup',
+    text: 'Sign up',
+  },
+];
+
+export const NewMobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const shouldReduceMotion = useReducedMotion();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="w-full max-w-[400px]">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <motion.div
+          className="mt-12 flex w-full flex-col items-start gap-y-4"
+          initial="initial"
+          animate="animate"
+          transition={{
+            staggerChildren: 0.03,
+          }}
+        >
+          {MENU_NAVIGATION_LINKS.map(({ href, text, target }) => (
+            <motion.div
+              key={href}
+              variants={{
+                initial: {
+                  opacity: 0,
+                  x: shouldReduceMotion ? 0 : 100,
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
+                  transition: {
+                    duration: 0.5,
+                    ease: 'backInOut',
+                  },
+                },
+              }}
+            >
+              <Link
+                className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+                href={href}
+                onClick={() => handleMenuItemClick()}
+                target={target}
+              >
+                {href === 'https://app.documenso.com/signup' ? (
+                  <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xl">
+                    {text}
+                  </span>
+                ) : (
+                  text
+                )}
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <div className="mx-auto mt-8 flex w-full flex-wrap items-center gap-x-4 gap-y-4 ">
+          <Link
+            href="https://twitter.com/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <FaXTwitter className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://github.com/documenso/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <LuGithub className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://documen.so/discord"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <LiaDiscord className="h-7 w-7" />
+          </Link>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
--- a/apps/web/src/components/(dashboard)/settings/layout/activity-back.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/activity-back.tsx
@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ActivityPageBackButton() {
+  const router = useRouter();
+  return (
+    <div>
+      <Button
+        className="flex-shrink-0"
+        variant="secondary"
+        onClick={() => {
+          void router.back();
+        }}
+      >
+        Back
+      </Button>
+    </div>
+  );
+}
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

-import { Braces, CreditCard, Lock, User, Users } from 'lucide-react';
+import { Braces, CreditCard, Globe2, Lock, User, Users } from 'lucide-react';

 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@ -91,6 +91,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
          </Button>
        </Link>
      )}
+
+      <Link href="/settings/public-profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2 className="mr-2 h-5 w-5" />
+          Public profile
+        </Button>
+      </Link>
    </div>
  );
 };
--- a/apps/web/src/components/(dashboard)/settings/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/header.tsx
@ -1,21 +1,33 @@
 import React from 'react';

+import { cn } from '@documenso/ui/lib/utils';
+
 export type SettingsHeaderProps = {
  title: string;
  subtitle: string;
  children?: React.ReactNode;
+  titleChildren?: React.ReactNode;
+  className?: string;
 };

-export const SettingsHeader = ({ children, title, subtitle }: SettingsHeaderProps) => {
+export const SettingsHeader = ({
+  children,
+  title,
+  subtitle,
+  titleChildren,
+  className,
+}: SettingsHeaderProps) => {
  return (
    <>
-      <div className="flex flex-row items-center justify-between">
+      <div className={cn('flex flex-row items-center justify-between', className)}>
        <div>
          <h3 className="text-lg font-medium">{title}</h3>

          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
        </div>

+        <div>{titleChildren}</div>
+
        {children}
      </div>

--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

-import { Braces, CreditCard, Lock, User, Users } from 'lucide-react';
+import { Braces, CreditCard, Globe2, Lock, User, Users } from 'lucide-react';

 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@ -94,6 +94,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
          </Button>
        </Link>
      )}
+
+      <Link href="/settings/public-profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2 className="mr-2 h-5 w-5" />
+          Public profile
+        </Button>
+      </Link>
    </div>
  );
 };
--- a/apps/web/src/components/forms/public-profile.tsx
+++ b/apps/web/src/components/forms/public-profile.tsx
@ -0,0 +1,165 @@
+'use client';
+
+import { useRef } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Copy } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { User } from '@documenso/prisma/client';
+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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZPublicProfileFormSchema = z.object({
+  profileURL: z.string().trim().min(1, { message: 'Please enter a valid URL slug.' }),
+  profileBio: z
+    .string()
+    .max(256, { message: 'Profile bio must not exceed 256 characters' })
+    .optional(),
+});
+
+export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
+
+export type PublicProfileFormProps = {
+  className?: string;
+  user: User;
+};
+
+export const PublicProfileForm = ({ user, className }: PublicProfileFormProps) => {
+  const textRef = useRef<HTMLSpanElement>(null);
+
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const form = useForm<TPublicProfileFormSchema>({
+    values: {
+      profileURL: user.profileURL || '',
+    },
+    resolver: zodResolver(ZPublicProfileFormSchema),
+  });
+
+  const isSaving = form.formState.isSubmitting;
+
+  const { mutateAsync: updatePublicProfile, data: profileURL } =
+    trpc.profile.updatePublicProfile.useMutation();
+
+  const copyTextToClipboard = async () => {
+    if (textRef.current) {
+      try {
+        await navigator.clipboard.writeText(textRef.current.textContent || '');
+      } catch (err) {
+        console.log('Failed to copy: ', err);
+      }
+    }
+  };
+
+  const onFormSubmit = async ({ profileURL, profileBio }: TPublicProfileFormSchema) => {
+    try {
+      await updatePublicProfile({
+        profileURL,
+        profileBio: profileBio || '',
+      });
+
+      toast({
+        title: 'Public profile updated',
+        description: 'Your public profile has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } 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 save your details. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={(cn('flex w-full flex-col gap-y-4'), className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSaving}>
+          <FormField
+            control={form.control}
+            name="profileURL"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Public profile URL</FormLabel>
+                <FormControl>
+                  <>
+                    <Input type="text" className="mb-2 mt-2" {...field} />
+                    {profileURL && (
+                      <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                        <span ref={textRef} id="textToCopy">
+                          {profileURL}
+                        </span>
+                        <Button
+                          className="pointer-events-none w-12 px-0"
+                          onClick={copyTextToClipboard}
+                          variant="ghost"
+                          asChild
+                        >
+                          <Copy className="h-8 w-8" />
+                        </Button>
+                      </code>
+                    )}
+                  </>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="profileBio"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Bio</FormLabel>
+                <FormControl>
+                  <Textarea className="mt-2" placeholder="Write about yourself..." {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <div className="ml-auto mt-4">
+          <Button type="submit" loading={isSaving}>
+            {isSaving ? 'Saving changes...' : 'Save changes'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@ -2,6 +2,7 @@

 import { useState } from 'react';

+import Link from 'next/link';
 import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
@ -183,135 +184,147 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
  };

  return (
-    <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
-        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input type="email" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Password</FormLabel>
-                <FormControl>
-                  <PasswordInput {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </fieldset>
-
-        <Button
-          type="submit"
-          size="lg"
-          loading={isSubmitting}
-          className="dark:bg-documenso dark:hover:opacity-90"
+    <div className={cn('mt-1')}>
+      <Form {...form}>
+        <form
+          className={cn('flex w-full flex-col gap-y-4', className)}
+          onSubmit={form.handleSubmit(onFormSubmit)}
        >
-          {isSubmitting ? 'Signing in...' : 'Sign In'}
-        </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 continue with</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={onSignInWithGoogleClick}
-            >
-              <FcGoogle className="mr-2 h-5 w-5" />
-              Google
-            </Button>
-          </>
-        )}
-      </form>
-
-      <Dialog
-        open={isTwoFactorAuthenticationDialogOpen}
-        onOpenChange={onCloseTwoFactorAuthenticationDialog}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Two-Factor Authentication</DialogTitle>
-          </DialogHeader>
-
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={isSubmitting}>
-              {twoFactorAuthenticationMethod === 'totp' && (
-                <FormField
-                  control={form.control}
-                  name="totpCode"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Authentication Token</FormLabel>
-                      <FormControl>
-                        <Input type="text" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+          <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="john@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
              )}
+            />

-              {twoFactorAuthenticationMethod === 'backup' && (
-                <FormField
-                  control={form.control}
-                  name="backupCode"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel> Backup Code</FormLabel>
-                      <FormControl>
-                        <Input type="text" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <>
+                      <PasswordInput placeholder="Password" {...field} />
+                      <p className="mt-2.5 text-right">
+                        <Link
+                          href="/forgot-password"
+                          className="text-muted-foreground/60 text-sm duration-200 hover:opacity-70"
+                        >
+                          Forgot your password?
+                        </Link>
+                      </p>
+                    </>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
              )}
+            />
+          </fieldset>

-              <DialogFooter className="mt-4">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onToggleTwoFactorAuthenticationMethodClick}
-                >
-                  {twoFactorAuthenticationMethod === 'totp'
-                    ? 'Use Backup Code'
-                    : 'Use Authenticator'}
-                </Button>
+          <Button
+            type="submit"
+            size="lg"
+            loading={isSubmitting}
+            className="dark:bg-documenso dark:hover:opacity-90"
+          >
+            {isSubmitting ? 'Signing in...' : 'Sign In'}
+          </Button>

-                <Button type="submit" loading={isSubmitting}>
-                  {isSubmitting ? 'Signing in...' : 'Sign In'}
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </Form>
+          {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 continue with</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={onSignInWithGoogleClick}
+              >
+                <FcGoogle className="mr-2 h-5 w-5" />
+                Google
+              </Button>
+            </>
+          )}
+        </form>
+
+        <Dialog
+          open={isTwoFactorAuthenticationDialogOpen}
+          onOpenChange={onCloseTwoFactorAuthenticationDialog}
+        >
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Two-Factor Authentication</DialogTitle>
+            </DialogHeader>
+
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset disabled={isSubmitting}>
+                {twoFactorAuthenticationMethod === 'totp' && (
+                  <FormField
+                    control={form.control}
+                    name="totpCode"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Authentication Token</FormLabel>
+                        <FormControl>
+                          <Input type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                {twoFactorAuthenticationMethod === 'backup' && (
+                  <FormField
+                    control={form.control}
+                    name="backupCode"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Backup Code</FormLabel>
+                        <FormControl>
+                          <Input type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                <DialogFooter className="mt-4">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={onToggleTwoFactorAuthenticationMethodClick}
+                  >
+                    {twoFactorAuthenticationMethod === 'totp'
+                      ? 'Use Backup Code'
+                      : 'Use Authenticator'}
+                  </Button>
+
+                  <Button type="submit" loading={isSubmitting}>
+                    {isSubmitting ? 'Signing in...' : 'Sign In'}
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </Form>
+    </div>
  );
 };
--- a/packages/lib/server-only/user/get-public-profile.ts
+++ b/packages/lib/server-only/user/get-public-profile.ts
@ -0,0 +1,14 @@
+import { prisma } from '@documenso/prisma';
+import type { UserProfile } from '@documenso/prisma/client';
+
+export interface GetPublicProfileByURLOptions {
+  profileURL: UserProfile['profileURL'];
+}
+
+export const getPublicProfileByURL = async ({ profileURL }: GetPublicProfileByURLOptions) => {
+  return await prisma.userProfile.findFirstOrThrow({
+    where: {
+      profileURL: profileURL,
+    },
+  });
+};
--- a/packages/lib/server-only/user/update-public-profile.ts
+++ b/packages/lib/server-only/user/update-public-profile.ts
@ -0,0 +1,32 @@
+import { prisma } from '@documenso/prisma';
+import type { User, UserProfile } from '@documenso/prisma/client';
+
+import { getUserById } from './get-user-by-id';
+
+export type UpdatePublicProfileOptions = {
+  id: User['id'];
+  userProfile: UserProfile;
+};
+
+export const updatePublicProfile = async ({ id, userProfile }: UpdatePublicProfileOptions) => {
+  const user = await getUserById({ id });
+  console.log('Adi', user);
+  // Existence check
+  await prisma.userProfile.findFirstOrThrow({
+    where: {
+      profileURL: user.profileURL ?? '',
+    },
+  });
+
+  return await prisma.$transaction(async (tx) => {
+    await tx.userProfile.update({
+      where: {
+        profileURL: user.profileURL!,
+      },
+      data: {
+        profileURL: userProfile.profileURL,
+        profileBio: userProfile.profileBio,
+      },
+    });
+  });
+};
--- a/packages/prisma/migrations/20240220115435_add_public_profile_url_bio/migration.sql
+++ b/packages/prisma/migrations/20240220115435_add_public_profile_url_bio/migration.sql
@ -0,0 +1,25 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[profileURL]` on the table `User` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "profileURL" TEXT;
+
+-- CreateTable
+CREATE TABLE "UserProfile" (
+    "profileURL" TEXT NOT NULL,
+    "profileBio" TEXT,
+
+    CONSTRAINT "UserProfile_pkey" PRIMARY KEY ("profileURL")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserProfile_profileURL_key" ON "UserProfile"("profileURL");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_profileURL_key" ON "User"("profileURL");
+
+-- AddForeignKey
+ALTER TABLE "User" ADD CONSTRAINT "User_profileURL_fkey" FOREIGN KEY ("profileURL") REFERENCES "UserProfile"("profileURL") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@ -19,19 +19,19 @@ enum Role {
 }

 model User {
-  id                   Int                    @id @default(autoincrement())
+  id                   Int                  @id @default(autoincrement())
  name                 String?
-  customerId           String?                @unique
-  email                String                 @unique
+  customerId           String?              @unique
+  email                String               @unique
  emailVerified        DateTime?
  password             String?
  source               String?
  signature            String?
-  createdAt            DateTime               @default(now())
-  updatedAt            DateTime               @default(now()) @updatedAt
-  lastSignedIn         DateTime               @default(now())
-  roles                Role[]                 @default([USER])
-  identityProvider     IdentityProvider       @default(DOCUMENSO)
+  createdAt            DateTime             @default(now())
+  updatedAt            DateTime             @default(now()) @updatedAt
+  lastSignedIn         DateTime             @default(now())
+  roles                Role[]               @default([USER])
+  identityProvider     IdentityProvider     @default(DOCUMENSO)
  accounts             Account[]
  sessions             Session[]
  Document             Document[]
@ -41,9 +41,11 @@ model User {
  ownedPendingTeams    TeamPending[]
  teamMembers          TeamMember[]
  twoFactorSecret      String?
-  twoFactorEnabled     Boolean                @default(false)
+  twoFactorEnabled     Boolean              @default(false)
  twoFactorBackupCodes String?
+  profileURL           String?              @unique

+  UserProfile       UserProfile?           @relation(fields: [profileURL], references: [profileURL], onDelete: Cascade)
  VerificationToken VerificationToken[]
  ApiToken          ApiToken[]
  Template          Template[]
@ -53,6 +55,13 @@ model User {
  @@index([email])
 }

+model UserProfile {
+  profileURL String  @id @unique
+  profileBio String?
+
+  User User?
+}
+
 enum UserSecurityAuditLogType {
  ACCOUNT_PROFILE_UPDATE
  ACCOUNT_SSO_LINK
--- a/packages/trpc/server/profile-router/router.ts
+++ b/packages/trpc/server/profile-router/router.ts
@ -8,6 +8,7 @@ import { resetPassword } from '@documenso/lib/server-only/user/reset-password';
 import { sendConfirmationToken } from '@documenso/lib/server-only/user/send-confirmation-token';
 import { updatePassword } from '@documenso/lib/server-only/user/update-password';
 import { updateProfile } from '@documenso/lib/server-only/user/update-profile';
+import { updatePublicProfile } from '@documenso/lib/server-only/user/update-public-profile';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';

 import { adminProcedure, authenticatedProcedure, procedure, router } from '../trpc';
@ -19,6 +20,7 @@ import {
  ZRetrieveUserByIdQuerySchema,
  ZUpdatePasswordMutationSchema,
  ZUpdateProfileMutationSchema,
+  ZUpdatePublicProfileMutationSchema,
 } from './schema';

 export const profileRouter = router({
@ -74,6 +76,27 @@ export const profileRouter = router({
      }
    }),

+  updatePublicProfile: authenticatedProcedure
+    .input(ZUpdatePublicProfileMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { profileURL, profileBio } = input;
+
+        return await updatePublicProfile({
+          id: ctx.user.id,
+          userProfile: { profileURL, profileBio },
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message:
+            'We were unable to update your public profile. Please review the information you provided and try again.',
+        });
+      }
+    }),
+
  updatePassword: authenticatedProcedure
    .input(ZUpdatePasswordMutationSchema)
    .mutation(async ({ input, ctx }) => {
--- a/packages/trpc/server/profile-router/schema.ts
+++ b/packages/trpc/server/profile-router/schema.ts
@ -16,6 +16,11 @@ export const ZUpdateProfileMutationSchema = z.object({
  signature: z.string(),
 });

+export const ZUpdatePublicProfileMutationSchema = z.object({
+  profileURL: z.string().min(1),
+  profileBio: z.string().max(256, { message: 'Profile bio must not exceed 256 characters' }),
+});
+
 export const ZUpdatePasswordMutationSchema = z.object({
  currentPassword: ZCurrentPasswordSchema,
  password: ZPasswordSchema,
--- a/packages/ui/primitives/announcement-bar.tsx
+++ b/packages/ui/primitives/announcement-bar.tsx
@ -17,11 +17,7 @@ export const AnnouncementBar: React.FC<AnnouncementBarProps> = ({ isShown }) =>

        <div className="flex items-center justify-center gap-4 rounded-lg bg-white px-3 py-1">
          <div className="text-xs text-gray-900">
-            <Link
-              href="https://app.documenso.com"
-            >
-              Claim now
-            </Link>
+            <Link href="https://app.documenso.com">Claim now</Link>
          </div>
        </div>
      </div>