From db9a02b84724c621a37ec161b8cebc0b313985fb Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 12 Jul 2025 09:45:41 +0000
Subject: feat(ui): Revamp the signin/signup page

---
 apps/web/app/signin/page.tsx                       |  11 +-
 apps/web/app/signup/page.tsx                       |  22 ++
 apps/web/components/signin/CredentialsForm.tsx     | 295 +++++++--------------
 apps/web/components/signin/SignInForm.tsx          |  74 ++++--
 .../web/components/signin/SignInProviderButton.tsx |   1 +
 apps/web/components/signup/SignUpForm.tsx          | 228 ++++++++++++++++
 6 files changed, 393 insertions(+), 238 deletions(-)
 create mode 100644 apps/web/app/signup/page.tsx
 create mode 100644 apps/web/components/signup/SignUpForm.tsx

diff --git a/apps/web/app/signin/page.tsx b/apps/web/app/signin/page.tsx
index 372429e8..a784dd7e 100644
--- a/apps/web/app/signin/page.tsx
+++ b/apps/web/app/signin/page.tsx
@@ -10,12 +10,11 @@ export default async function SignInPage() {
   }
 
   return (
-    <div className="grid min-h-screen grid-rows-6 justify-center">
-      <span className="row-span-1" />
-      <div className="row-span-1 flex w-96 items-center justify-center space-x-2">
-        <KarakeepLogo height={100} />
-      </div>
-      <div className="row-span-4 px-3">
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div className="flex items-center justify-center">
+          <KarakeepLogo height={80} />
+        </div>
         <SignInForm />
       </div>
     </div>
diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx
new file mode 100644
index 00000000..841c07a8
--- /dev/null
+++ b/apps/web/app/signup/page.tsx
@@ -0,0 +1,22 @@
+import { redirect } from "next/dist/client/components/navigation";
+import KarakeepLogo from "@/components/KarakeepIcon";
+import SignUpForm from "@/components/signup/SignUpForm";
+import { getServerAuthSession } from "@/server/auth";
+
+export default async function SignUpPage() {
+  const session = await getServerAuthSession();
+  if (session) {
+    redirect("/");
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div className="flex items-center justify-center">
+          <KarakeepLogo height={80} />
+        </div>
+        <SignUpForm />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/signin/CredentialsForm.tsx b/apps/web/components/signin/CredentialsForm.tsx
index 05aa1cef..1ad240a7 100644
--- a/apps/web/components/signin/CredentialsForm.tsx
+++ b/apps/web/components/signin/CredentialsForm.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
+import { Alert, AlertTitle } from "@/components/ui/alert";
 import {
   Form,
   FormControl,
@@ -12,17 +14,13 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useClientConfig } from "@/lib/clientConfig";
-import { api } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TRPCClientError } from "@trpc/client";
+import { AlertCircle, Lock } from "lucide-react";
 import { signIn } from "next-auth/react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { zSignUpSchema } from "@karakeep/shared/types/users";
-
 const signInSchema = z.object({
   email: z.string().email(),
   password: z.string(),
@@ -33,7 +31,7 @@ const OAUTH_FAILED = "OAuth login failed: ";
 
 const VERIFY_EMAIL_ERROR = "Please verify your email address before signing in";
 
-function SignIn() {
+export default function CredentialsForm() {
   const [signinError, setSigninError] = useState("");
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -50,229 +48,114 @@ function SignIn() {
 
   if (clientConfig.auth.disablePasswordAuth) {
     return (
-      <>
+      <div className="space-y-4">
         {signinError && (
-          <p className="w-full text-center text-destructive">{signinError}</p>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{signinError}</AlertTitle>
+          </Alert>
         )}
-        <p className="text-center">
-          Password authentication is currently disabled.
-        </p>
-      </>
+        <Alert>
+          <Lock className="h-4 w-4" />
+          <AlertTitle>
+            Password authentication is currently disabled.
+          </AlertTitle>
+        </Alert>
+      </div>
     );
   }
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(async (value) => {
-          const resp = await signIn("credentials", {
-            redirect: false,
-            email: value.email.trim(),
-            password: value.password,
-          });
-          if (!resp || !resp?.ok || resp.error) {
-            if (resp?.error === "CredentialsSignin") {
-              setSigninError(SIGNIN_FAILED);
-            } else if (resp?.error === VERIFY_EMAIL_ERROR) {
-              router.replace(
-                `/check-email?email=${encodeURIComponent(value.email.trim())}`,
-              );
-            } else {
-              setSigninError(resp?.error ?? SIGNIN_FAILED);
+    <div className="space-y-6">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(async (value) => {
+            const resp = await signIn("credentials", {
+              redirect: false,
+              email: value.email.trim(),
+              password: value.password,
+            });
+            if (!resp || !resp?.ok || resp.error) {
+              if (resp?.error === "CredentialsSignin") {
+                setSigninError(SIGNIN_FAILED);
+              } else if (resp?.error === VERIFY_EMAIL_ERROR) {
+                router.replace(
+                  `/check-email?email=${encodeURIComponent(value.email.trim())}`,
+                );
+              } else {
+                setSigninError(resp?.error ?? SIGNIN_FAILED);
+              }
+              return;
             }
-            return;
-          }
-          router.replace("/");
-        })}
-      >
-        <div className="flex w-full flex-col space-y-2">
+            router.replace("/");
+          })}
+          className="space-y-4"
+        >
           {signinError && (
-            <p className="w-full text-center text-destructive">{signinError}</p>
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>{signinError}</AlertTitle>
+            </Alert>
           )}
+
           <FormField
             control={form.control}
             name="email"
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input type="text" placeholder="Email" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="Enter your email"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
           />
+
           <FormField
             control={form.control}
             name="password"
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" placeholder="Password" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Enter your password"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
           />
+
           <ActionButton
             ignoreDemoMode
             type="submit"
             loading={form.formState.isSubmitting}
+            className="w-full"
           >
             Sign In
           </ActionButton>
-        </div>
-      </form>
-    </Form>
-  );
-}
-
-function SignUp() {
-  const form = useForm<z.infer<typeof zSignUpSchema>>({
-    resolver: zodResolver(zSignUpSchema),
-  });
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const router = useRouter();
-
-  const createUserMutation = api.users.create.useMutation();
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(async (value) => {
-          try {
-            await createUserMutation.mutateAsync(value);
-          } catch (e) {
-            if (e instanceof TRPCClientError) {
-              setErrorMessage(e.message);
-            }
-            return;
-          }
-          const resp = await signIn("credentials", {
-            redirect: false,
-            email: value.email.trim(),
-            password: value.password,
-          });
-          if (!resp || !resp.ok || resp.error) {
-            if (resp?.error === VERIFY_EMAIL_ERROR) {
-              router.replace(
-                `/check-email?email=${encodeURIComponent(value.email.trim())}`,
-              );
-            } else {
-              setErrorMessage(
-                resp?.error ?? "Hit an unexpected error while signing in",
-              );
-            }
-            return;
-          }
-          router.replace("/");
-        })}
-      >
-        <div className="flex w-full flex-col space-y-2">
-          {errorMessage && (
-            <p className="w-full text-center text-destructive">
-              {errorMessage}
-            </p>
-          )}
-          <FormField
-            control={form.control}
-            name="name"
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input type="text" placeholder="Name" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input type="text" placeholder="Email" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" placeholder="Password" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name="confirmPassword"
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>Confirm Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder="Confirm Password"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
-          />
-          <ActionButton type="submit" loading={form.formState.isSubmitting}>
-            Sign Up
-          </ActionButton>
-        </div>
-      </form>
-    </Form>
-  );
-}
-
-export default function CredentialsForm() {
-  const clientConfig = useClientConfig();
-
-  return (
-    <Tabs defaultValue="signin" className="w-full">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="signin">Sign In</TabsTrigger>
-        <TabsTrigger value="signup">Sign Up</TabsTrigger>
-      </TabsList>
-      <TabsContent value="signin">
-        <SignIn />
-      </TabsContent>
-      <TabsContent value="signup">
-        {clientConfig.auth.disableSignups ||
-        clientConfig.auth.disablePasswordAuth ? (
-          <p className="text-center">Signups are currently disabled.</p>
-        ) : (
-          <SignUp />
-        )}
-      </TabsContent>
-    </Tabs>
+        </form>
+      </Form>
+
+      <div className="text-center">
+        <p className="text-sm text-gray-600">
+          Don&apos;t have an account?{" "}
+          <Link
+            href="/signup"
+            className="font-medium text-blue-600 hover:text-blue-500"
+          >
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </div>
   );
 }
diff --git a/apps/web/components/signin/SignInForm.tsx b/apps/web/components/signin/SignInForm.tsx
index ca8f3137..8ad39f8f 100644
--- a/apps/web/components/signin/SignInForm.tsx
+++ b/apps/web/components/signin/SignInForm.tsx
@@ -1,4 +1,13 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { authOptions } from "@/server/auth";
+import { Info } from "lucide-react";
 
 import serverConfig from "@karakeep/shared/config";
 
@@ -16,34 +25,47 @@ export default async function SignInForm() {
   }
 
   return (
-    <div className="flex flex-col items-center space-y-2">
-      {serverConfig.demoMode && (
-        <div className="mb-1 w-full items-start space-y-1 rounded bg-accent p-3">
-          <p className="text-center font-bold">Demo Mode</p>
-          <p>Email: {serverConfig.demoMode.email} </p>
-          <p>Password: {serverConfig.demoMode.password} </p>
-        </div>
-      )}
-      <CredentialsForm />
+    <div className="w-full">
+      <Card className="w-full">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+          <CardDescription>Sign in to your Karakeep account</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {serverConfig.demoMode && (
+            <Alert>
+              <Info className="h-4 w-4" />
+              <AlertDescription>
+                <div className="space-y-1">
+                  <p className="font-semibold">Demo Mode</p>
+                  <p>Email: {serverConfig.demoMode.email}</p>
+                  <p>Password: {serverConfig.demoMode.password}</p>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
 
-      {providerValues && providerValues.length > 0 && (
-        <>
-          <div className="flex w-full items-center">
-            <div className="flex-1 grow border-t-2 border-gray-200"></div>
-            <span className="bg-white px-3 text-gray-500">Or</span>
-            <div className="flex-1 grow border-t-2 border-gray-200"></div>
-          </div>
-          <div className="space-y-2">
-            {providerValues.map((provider) => (
-              <div key={provider.id}>
-                <SignInProviderButton
-                  provider={{ id: provider.id, name: provider.name }}
-                />
+          <CredentialsForm />
+
+          {providerValues && providerValues.length > 0 && (
+            <>
+              <div className="flex w-full items-center">
+                <div className="flex-1 grow border-t border-gray-200"></div>
+                <span className="bg-white px-3 text-sm text-gray-500">Or</span>
+                <div className="flex-1 grow border-t border-gray-200"></div>
+              </div>
+              <div className="space-y-2">
+                {providerValues.map((provider) => (
+                  <SignInProviderButton
+                    key={provider.id}
+                    provider={{ id: provider.id, name: provider.name }}
+                  />
+                ))}
               </div>
-            ))}
-          </div>
-        </>
-      )}
+            </>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/apps/web/components/signin/SignInProviderButton.tsx b/apps/web/components/signin/SignInProviderButton.tsx
index e866c878..edb411e6 100644
--- a/apps/web/components/signin/SignInProviderButton.tsx
+++ b/apps/web/components/signin/SignInProviderButton.tsx
@@ -18,6 +18,7 @@ export default function SignInProviderButton({
           callbackUrl: "/",
         })
       }
+      className="w-full"
     >
       Sign in with {provider.name}
     </Button>
diff --git a/apps/web/components/signup/SignUpForm.tsx b/apps/web/components/signup/SignUpForm.tsx
new file mode 100644
index 00000000..85346f98
--- /dev/null
+++ b/apps/web/components/signup/SignUpForm.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useClientConfig } from "@/lib/clientConfig";
+import { api } from "@/lib/trpc";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TRPCClientError } from "@trpc/client";
+import { AlertCircle, UserX } from "lucide-react";
+import { signIn } from "next-auth/react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { zSignUpSchema } from "@karakeep/shared/types/users";
+
+const VERIFY_EMAIL_ERROR = "Please verify your email address before signing in";
+
+export default function SignUpForm() {
+  const form = useForm<z.infer<typeof zSignUpSchema>>({
+    resolver: zodResolver(zSignUpSchema),
+  });
+  const [errorMessage, setErrorMessage] = useState("");
+  const router = useRouter();
+  const clientConfig = useClientConfig();
+
+  const createUserMutation = api.users.create.useMutation();
+
+  if (
+    clientConfig.auth.disableSignups ||
+    clientConfig.auth.disablePasswordAuth
+  ) {
+    return (
+      <Card className="w-full">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">
+            Sign Up Unavailable
+          </CardTitle>
+          <CardDescription>
+            Account registration is currently disabled
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <Alert>
+              <UserX className="h-4 w-4" />
+              <AlertDescription>
+                Signups are currently disabled. Please contact an administrator
+                for access.
+              </AlertDescription>
+            </Alert>
+            <Button asChild className="w-full">
+              <Link href="/signin">Back to Sign In</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="text-center">
+        <CardTitle className="text-2xl font-bold">
+          Create Your Account
+        </CardTitle>
+        <CardDescription>
+          Join Karakeep to start organizing your bookmarks
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(async (value) => {
+              try {
+                await createUserMutation.mutateAsync(value);
+              } catch (e) {
+                if (e instanceof TRPCClientError) {
+                  setErrorMessage(e.message);
+                }
+                return;
+              }
+              const resp = await signIn("credentials", {
+                redirect: false,
+                email: value.email.trim(),
+                password: value.password,
+              });
+              if (!resp || !resp.ok || resp.error) {
+                if (resp?.error === VERIFY_EMAIL_ERROR) {
+                  router.replace(
+                    `/check-email?email=${encodeURIComponent(value.email.trim())}`,
+                  );
+                } else {
+                  setErrorMessage(
+                    resp?.error ?? "Hit an unexpected error while signing in",
+                  );
+                }
+                return;
+              }
+              router.replace("/");
+            })}
+            className="space-y-4"
+          >
+            {errorMessage && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{errorMessage}</AlertDescription>
+              </Alert>
+            )}
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Full Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="text"
+                      placeholder="Enter your full name"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder="Enter your email"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Create a password"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="confirmPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Confirm your password"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <ActionButton
+              type="submit"
+              loading={
+                form.formState.isSubmitting || createUserMutation.isPending
+              }
+              className="w-full"
+            >
+              Create Account
+            </ActionButton>
+          </form>
+        </Form>
+
+        <div className="text-center">
+          <p className="text-sm text-gray-600">
+            Already have an account?{" "}
+            <Link
+              href="/signin"
+              className="font-medium text-blue-600 hover:text-blue-500"
+            >
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
-- 
cgit v1.2.3-70-g09d2