Skip to content

Commit fe50805

Browse files
Eric-Zhang-DeveloperEric-Zhang-Developer
authored
Merge pull request #16 from Eric-Zhang-Developer/login-design
Add similar themeing from landing page to login
2 parents 295e22f + 3a03a73 commit fe50805

File tree

2 files changed

+58
-78
lines changed

2 files changed

+58
-78
lines changed

‎public/geminiblurred.png‎

429 KB
Loading

‎src/app/login/page.tsx‎

Lines changed: 58 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -30,96 +30,76 @@ export default function AuthPage() {
3030
router.push("/dashboard");
3131
} catch (e: unknown) {
3232
let errorMessage = "Something went wrong. Please try again";
33-
34-
if (e instanceof Error) {
35-
errorMessage = e.message;
36-
} else if (typeof e === "string") {
37-
errorMessage = e;
38-
}
33+
if (e instanceof Error) errorMessage = e.message;
34+
else if (typeof e === "string") errorMessage = e;
3935
setErr(errorMessage);
4036
} finally {
4137
setBusy(false);
4238
}
4339
}
4440

4541
return (
46-
<main className="min-h-dvh flex items-center justify-center p-6 bg-gray-900">
47-
<div className="card w-full max-w-md bg-base-100 shadow-xl">
48-
<div className="card-body">
49-
{/* Tabs */}
50-
<div className="join w-full mb-4">
51-
<button
52-
type="button"
53-
onClick={() => setMode("login")}
54-
className={`join-item btn w-1/2 ${mode === "login" ? "btn-primary" : "btn-ghost"}`}
55-
>
56-
Login
57-
</button>
58-
<button
59-
type="button"
60-
onClick={() => setMode("signup")}
61-
className={`join-item btn w-1/2 ${mode === "signup" ? "btn-primary" : "btn-ghost"}`}
62-
>
63-
Sign up
64-
</button>
65-
</div>
42+
<main
43+
className="min-h-dvh flex items-center justify-center bg-cover bg-center bg-no-repeat p-6 font-cinzel text-white"
44+
style={{ backgroundImage: "url('/geminiblurred.png')" }}
45+
>
46+
<div className="w-full max-w-md bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl shadow-[0_0_30px_rgba(255,255,255,0.25)] p-8 transition-all">
47+
<h1 className="text-4xl text-center mb-6 font-bold drop-shadow-lg">
48+
{mode === "login" ? "Welcome Back" : "Create Your Account"}
49+
</h1>
6650

67-
{/* Optional info for signup */}
68-
{mode === "signup" && (
69-
<div role="alert" className="alert alert-soft mb-2">
70-
<span>Create an account with email & password.</span>
71-
</div>
72-
)}
51+
{err && (
52+
<div className="mb-4 text-sm text-red-400 bg-red-900/40 border border-red-400/30 p-2 rounded-md">
53+
{err}
54+
</div>
55+
)}
7356

74-
{/* Error alert */}
75-
{err && (
76-
<div role="alert" className="alert alert-error mb-2">
77-
<span>{err}</span>
78-
</div>
79-
)}
57+
<form onSubmit={onSubmit} className="space-y-4 animate-fadeIn">
58+
<div>
59+
<label className="block mb-1 text-sm">Email</label>
60+
<input
61+
type="email"
62+
required
63+
value={email}
64+
onChange={(e) => setEmail(e.target.value)}
65+
placeholder="[email protected]"
66+
className="w-full p-2 rounded-md bg-transparent border border-white/40 focus:border-indigo-400 focus:shadow-[0_0_12px_rgba(140,120,255,0.8)] outline-none transition"
67+
/>
68+
</div>
8069

81-
{/* Form */}
82-
<form onSubmit={onSubmit} className="space-y-3">
83-
<div className="form-control">
84-
<label className="label">
85-
<span className="label-text">Email</span>
86-
</label>
87-
<input
88-
type="email"
89-
required
90-
value={email}
91-
onChange={(e) => setEmail(e.target.value)}
92-
placeholder="[email protected]"
93-
className="input input-bordered w-full"
94-
autoComplete="email"
95-
/>
96-
</div>
70+
<div>
71+
<label className="block mb-1 text-sm">Password</label>
72+
<input
73+
type="password"
74+
required
75+
value={password}
76+
onChange={(e) => setPassword(e.target.value)}
77+
placeholder="••••••••"
78+
className="w-full p-2 rounded-md bg-transparent border border-white/40 focus:border-indigo-400 focus:shadow-[0_0_12px_rgba(140,120,255,0.8)] outline-none transition"
79+
/>
80+
</div>
9781

98-
<div className="form-control">
99-
<label className="label">
100-
<span className="label-text">Password</span>
101-
</label>
102-
<input
103-
type="password"
104-
required
105-
value={password}
106-
onChange={(e) => setPassword(e.target.value)}
107-
placeholder="••••••••"
108-
className="input input-bordered w-full"
109-
autoComplete={mode === "login" ? "current-password" : "new-password"}
110-
/>
111-
</div>
82+
<button
83+
type="submit"
84+
disabled={busy}
85+
className={`w-full py-2 rounded-md font-semibold mt-4 transition ${
86+
busy
87+
? "bg-indigo-700/60 cursor-not-allowed"
88+
: "bg-indigo-600 hover:bg-indigo-500 shadow-[0_0_20px_rgba(140,120,255,0.7)]"
89+
}`}
90+
>
91+
{busy ? "Loading..." : mode === "login" ? "Log In" : "Create Account"}
92+
</button>
93+
</form>
11294

113-
<div className="card-actions mt-4">
114-
<button
115-
type="submit"
116-
disabled={busy}
117-
className={`btn btn-primary w-full ${busy ? "loading" : ""}`}
118-
>
119-
{mode === "login" ? "Log in" : "Create account"}
120-
</button>
121-
</div>
122-
</form>
95+
<div className="text-center mt-6">
96+
<button
97+
type="button"
98+
onClick={() => setMode(mode === "login" ? "signup" : "login")}
99+
className="text-sm text-indigo-300 hover:text-indigo-200 transition mt-2 underline"
100+
>
101+
{mode === "login" ? "Join the Realm" : "Return to Login"}
102+
</button>
123103
</div>
124104
</div>
125105
</main>

0 commit comments

Comments
 (0)