style: restyling login form page

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",

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",

src/app/auth/login/lib/actions.ts

@@ -1,3 +0,0 @@
-export const login = ()=>{
-    
-}

src/app/auth/login/page.tsx

@@ -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} />;
-}

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="flex min-h-svh w-full bg-[#F8FBFF] items-center justify-center p-6 md:p-10 ">
-      <div className="w-full max-w-sm">
+      <div className="w-full max-w-sm ">
         <LoginForm />
       </div>
     </div>

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 {
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+  Card,
-import { Field, FieldDescription, FieldGroup, FieldLabel } from "../ui/field";
+  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({
+export function LoginForm() {
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
+    <Card>
-      <Card>
+      <CardHeader className="text-center">
-        <CardHeader className="text-center">
+        <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
-          <CardTitle>Login to SENTILAISES.</CardTitle>
+          <BarChart3 className="h-5 w-5" />
-        </CardHeader>
+        </div>
-        <CardContent>
+        <CardTitle>Login to SENTILAISES.</CardTitle>
-          <form>
+        <CardDescription className="mt-2">
-            <FieldGroup>
+          Masuk dengan menggunakan akun Google Anda untuk mengakses beranda
-              <Field>
+          SENTILAISES.
-                <FieldLabel htmlFor="email">Email</FieldLabel>
+        </CardDescription>
-                <Input
+      </CardHeader>
-                  id="email"
+      <CardContent>
-                  type="email"
+        <form>
-                  placeholder="m@example.com"
+          <FieldGroup>
-                  required
+            <Field>
-                />
+              <Button
-              </Field>
+                variant="outline"
-              <Field>
+                type="button"
-                <div className="flex items-center">
+                onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
-                  <FieldLabel htmlFor="password">Password</FieldLabel>
+              >
-                  <a
+                <FcGoogle />
-                    href="#"
+                Login with Google
-                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+              </Button>
-                  >
+            </Field>
-                    Forgot your password?
+          </FieldGroup>
-                  </a>
+        </form>
-                </div>
+      </CardContent>
-                <Input
+    </Card>
-                  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>
   );
 }

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: