From 677ac27aedaeb558856a9dde56de16db6a92348e Mon Sep 17 00:00:00 2001
From: Mahen <mahennekkers27@gmail.com>
Date: Tue, 17 Feb 2026 12:56:35 +0700
Subject: [PATCH] style: restyling login form page

---
 package-lock.json                 |  10 +++
 package.json                      |   1 +
 src/app/auth/login/lib/actions.ts |   3 -
 src/app/auth/login/page.tsx       |  17 -----
 src/app/page.tsx                  |   4 +-
 src/components/auth/LoginForm.tsx | 101 ++++++++++++------------------
 src/components/ui/button.tsx      |   2 +-
 7 files changed, 53 insertions(+), 85 deletions(-)
 delete mode 100644 src/app/auth/login/lib/actions.ts
 delete mode 100644 src/app/auth/login/page.tsx

diff --git a/package-lock.json b/package-lock.json
index c4871b2..032ea75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "radix-ui": "^1.4.3",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "react-icons": "^5.5.0",
         "recharts": "^3.7.0",
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
@@ -11879,6 +11880,15 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
diff --git a/package.json b/package.json
index 53e2073..3d72051 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-icons": "^5.5.0",
     "recharts": "^3.7.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/app/auth/login/lib/actions.ts b/src/app/auth/login/lib/actions.ts
deleted file mode 100644
index e21ed0e..0000000
--- a/src/app/auth/login/lib/actions.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const login = ()=>{
-    
-}
\ No newline at end of file
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
deleted file mode 100644
index e64f9e1..0000000
--- a/src/app/auth/login/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { redirect } from "next/navigation";
-import { LoginForm } from "@/src/components/auth/LoginForm";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../api/auth/[...nextauth]/route";
-
-export default async function LoginPage({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  const session = await getServerSession(authOptions);
-
-  if (session) {
-    redirect("/dashboard");
-  }
-
-  return <LoginForm className={className} {...props} />;
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 037b505..53f6844 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,8 +10,8 @@ export default async function Home() {
     redirect("/dashboard");
   }
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-svh w-full bg-[#F8FBFF] items-center justify-center p-6 md:p-10 ">
+      <div className="w-full max-w-sm ">
         <LoginForm />
       </div>
     </div>
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index bd8a6a9..6e827d7 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -1,70 +1,47 @@
 "use client";
 
 import { signIn } from "next-auth/react";
-import { Input } from "../ui/input";
 import { Button } from "../ui/button";
-import { cn } from "@/lib/utils";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { Field, FieldDescription, FieldGroup, FieldLabel } from "../ui/field";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import { Field, FieldGroup } from "../ui/field";
+import { FcGoogle } from "react-icons/fc";
+import { BarChart3 } from "lucide-react";
 
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+export function LoginForm() {
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle>Login to SENTILAISES.</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="email">Email</FieldLabel>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="m@example.com"
-                  required
-                />
-              </Field>
-              <Field>
-                <div className="flex items-center">
-                  <FieldLabel htmlFor="password">Password</FieldLabel>
-                  <a
-                    href="#"
-                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
-                  >
-                    Forgot your password?
-                  </a>
-                </div>
-                <Input
-                  id="password"
-                  type="password"
-                  placeholder="********"
-                  required
-                />
-              </Field>
-              <Field>
-                <Button type="submit">Login</Button>
-                <Button
-                  variant="outline"
-                  type="button"
-                  onClick={() =>
-                    signIn("google", { callbackUrl: "/dashboard" })
-                  }
-                >
-                  Login with Google
-                </Button>
-                <FieldDescription className="text-center">
-                  Don&apos;t have an account? <a href="#">Sign up</a>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
+    <Card>
+      <CardHeader className="text-center">
+        <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+          <BarChart3 className="h-5 w-5" />
+        </div>
+        <CardTitle>Login to SENTILAISES.</CardTitle>
+        <CardDescription className="mt-2">
+          Masuk dengan menggunakan akun Google Anda untuk mengakses beranda
+          SENTILAISES.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <FieldGroup>
+            <Field>
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
+              >
+                <FcGoogle />
+                Login with Google
+              </Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index fbe0fe7..b0f700b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-primary text-white",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: