feat: update signin signup ui

Signed-off-by: Adithya Krishna <adithya@documenso.com>
2025-11-17 02:01:33 +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/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>
  );
 }