fix sign-ip page and prettify with opus

src/app/sign-ip.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import { authClient } from "@/utils/auth-client";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export default function SignUp() {
-  const [isSignUp, setIsSignUp] = useState(false);
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [rememberMe, setRememberMe] = useState(false);
-
-  const handleSignUp = async () => {
-    const { data, error } = await authClient.signUp.email({
-      name,
-      email,
-      password,
-      callbackURL: "/",
-    });
-    if (error) {
-      console.error(error);
-      window.alert(error.message);
-    }
-  };
-
-  const handleSignIn = async () => {
-    const { data, error } = await authClient.signIn.email({
-      email,
-      password,
-      rememberMe,
-      callbackURL: "/",
-    });
-    if (error) {
-      console.error(error);
-      window.alert(error.message);
-    }
-  };
-
-  if (isSignUp) {
-    return (
-      <div>
-        <h1>Sign Up</h1>
-        <input
-          type="text"
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <input
-          type="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <input
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <input
-          type="checkbox"
-          checked={rememberMe}
-          onChange={(e) => setRememberMe(e.target.checked)}
-        />
-        <button onClick={handleSignUp}>Sign Up</button>
-        <button onClick={() => setIsSignUp(false)}>Sign In</button>
-      </div>
-    );
-  }
-  return (
-    <div>
-      <h1>Sign In</h1>
-      <input
-        type="email"
-        placeholder="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <input
-        type="password"
-        placeholder="Password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <input
-        type="checkbox"
-        checked={rememberMe}
-        onChange={(e) => setRememberMe(e.target.checked)}
-      />
-      <button onClick={isSignUp ? handleSignUp : handleSignIn}>
-        {isSignUp ? "Sign Up" : "Sign In"}
-      </button>
-      <button onClick={() => setIsSignUp(!isSignUp)}>
-        {isSignUp ? "Sign In" : "Sign Up"}
-      </button>
-    </div>
-  );
-}

src/app/sign-ip/page.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { authClient } from "@/utils/auth-client";
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+
+export default function SignUp() {
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSignUp = async () => {
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    const { error } = await authClient.signUp.email({
+      name,
+      email,
+      password,
+      callbackURL: "/",
+    });
+    setLoading(false);
+    if (error) {
+      setError(error.message ?? "Something went wrong");
+    }
+  };
+
+  const handleSignIn = async () => {
+    setLoading(true);
+    setError(null);
+    const { error } = await authClient.signIn.email({
+      email,
+      password,
+      rememberMe,
+      callbackURL: "/",
+    });
+    setLoading(false);
+    if (error) {
+      setError(error.message ?? "Something went wrong");
+    }
+  };
+
+  const toggle = () => {
+    setIsSignUp((v) => !v);
+    setError(null);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-lg">
+            {isSignUp ? "Create an account" : "Welcome back"}
+          </CardTitle>
+          <CardDescription>
+            {isSignUp
+              ? "Enter your details to get started"
+              : "Sign in to your account"}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="grid gap-4">
+          {error && (
+            <p className="text-xs text-destructive">{error}</p>
+          )}
+
+          {isSignUp && (
+            <div className="grid gap-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                placeholder="Jane Doe"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+          )}
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+
+          {isSignUp && (
+            <div className="grid gap-1.5">
+              <Label htmlFor="confirm">Confirm password</Label>
+              <Input
+                id="confirm"
+                type="password"
+                placeholder="••••••••"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+              />
+            </div>
+          )}
+
+          {!isSignUp && (
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="remember"
+                checked={rememberMe}
+                onCheckedChange={(v) => setRememberMe(v === true)}
+              />
+              <Label htmlFor="remember" className="text-xs font-normal">
+                Remember me
+              </Label>
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-3">
+          <Button
+            className="w-full"
+            size="lg"
+            disabled={loading}
+            onClick={isSignUp ? handleSignUp : handleSignIn}
+          >
+            {loading
+              ? "Please wait…"
+              : isSignUp
+                ? "Sign up"
+                : "Sign in"}
+          </Button>
+
+          <p className="text-center text-xs text-muted-foreground">
+            {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
+            <button
+              type="button"
+              className="text-primary underline-offset-4 hover:underline"
+              onClick={toggle}
+            >
+              {isSignUp ? "Sign in" : "Sign up"}
+            </button>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}