refactor: update authentication layout and login page design

src/app/auth/layout.tsx

@@ -3,8 +3,6 @@ import BackButtonSmall from "@/components/shared/back-button-small";
 /**
  * auth layout is different from other public layouts,
  * so auth directory is not put in (public) directory.
- *
- * https://ui.shadcn.com/blocks#authentication-04
  */
 export default function AuthLayout({
   children,
@@ -12,9 +10,11 @@ export default function AuthLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center justify-center relative w-full h-full min-h-screen">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <BackButtonSmall className="absolute top-6 left-6" />
-      <div className="w-full max-w-md px-4">{children}</div>
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        {children}
+      </div>
     </div>
   );
 }

src/app/auth/login/page.tsx

@@ -9,7 +9,28 @@ export const metadata = constructMetadata({
 });
 
 const LoginPage = () => {
-  return <LoginForm className="border-none" />;
+  return (
+    <div className="flex h-screen flex-col items-center justify-center gap-4">
+      <LoginForm />
+      <div className="text-balance text-center text-xs text-muted-foreground">
+        By clicking continue, you agree to our{" "}
+        <a
+          href="/terms-of-service"
+          className="underline underline-offset-4 hover:text-primary"
+        >
+          Terms of Service
+        </a>{" "}
+        and{" "}
+        <a
+          href="/privacy-policy"
+          className="underline underline-offset-4 hover:text-primary"
+        >
+          Privacy Policy
+        </a>
+        .
+      </div>
+    </div>
+  );
 };
 
 export default LoginPage;

src/app/login/page.tsx

@@ -1,19 +0,0 @@
-import { GalleryVerticalEnd } from "lucide-react";
-
-import { LoginForm } from "@/components/login-form";
-
-export default function LoginPage() {
-  return (
-    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
-        <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-            <GalleryVerticalEnd className="size-4" />
-          </div>
-          Acme Inc.
-        </a>
-        <LoginForm />
-      </div>
-    </div>
-  );
-}

src/components/auth/auth-card.tsx

@@ -7,13 +7,11 @@ import {
   CardContent,
   CardDescription,
   CardFooter,
-  CardHeader,
-  CardTitle,
+  CardHeader
 } from "@/components/ui/card";
-import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { Logo } from "../logo";
+import { Logo } from "@/components/logo";
 
 interface AuthCardProps {
   children: React.ReactNode;

src/components/auth/bottom-button.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 
 interface BottomButtonProps {
   href: string;
@@ -16,7 +15,9 @@ export const BottomButton = ({ href, label }: BottomButtonProps) => {
       size="sm"
       asChild
     >
-      <Link href={href}>{label}</Link>
+      <a href={href} className="hover:underline underline-offset-4 hover:text-primary">
+        {label}
+      </a>
     </Button>
   );
 };

src/components/auth/login-form.tsx

@@ -18,9 +18,8 @@ import { authClient } from "@/lib/auth-client";
 import { LoginSchema } from "@/lib/schemas";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useState, useTransition } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import type * as z from "zod";
 
@@ -119,9 +118,12 @@ export const LoginForm = ({ className }: { className?: string }) => {
                       asChild
                       className="px-0 font-normal text-muted-foreground"
                     >
-                      <Link href="/auth/forgot-password" className="text-xs underline">
+                      <a
+                        href="/auth/forgot-password"
+                        className="text-xs hover:underline hover:underline-offset-4 hover:text-primary"
+                      >
                         Forgot password?
-                      </Link>
+                      </a>
                     </Button>
                   </div>
                   <FormControl>

src/components/login-form.tsx

@@ -1,96 +0,0 @@
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<"div">) {
-  return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome back</CardTitle>
-          <CardDescription>
-            Login with your Apple or Google account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <div className="grid gap-6">
-              <div className="flex flex-col gap-4">
-                <Button variant="outline" className="w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Login with Apple
-                </Button>
-                <Button variant="outline" className="w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Login with Google
-                </Button>
-              </div>
-              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
-                <span className="relative z-10 bg-background px-2 text-muted-foreground">
-                  Or continue with
-                </span>
-              </div>
-              <div className="grid gap-6">
-                <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="m@example.com"
-                    required
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <div className="flex items-center">
-                    <Label htmlFor="password">Password</Label>
-                    <a
-                      href="#"
-                      className="ml-auto text-sm underline-offset-4 hover:underline"
-                    >
-                      Forgot your password?
-                    </a>
-                  </div>
-                  <Input id="password" type="password" required />
-                </div>
-                <Button type="submit" className="w-full">
-                  Login
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <a href="#" className="underline underline-offset-4">
-                  Sign up
-                </a>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
-        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
-        and <a href="#">Privacy Policy</a>.
-      </div>
-    </div>
-  )
-}