Skip to content

Commit bbd8ec4

Browse files
ayselomerAyselpmoharana-cmd
authored
[CSSG-13]: Added login and signup page (#7)
* completed static onboarding page * onboarding and signup components, login placeholders, linting * Fix login styling and add email/password fields --------- Co-authored-by: Aysel <aysel_omer@icloud.com> Co-authored-by: pmoharana-cmd <pmoharana032474@gmail.com>
1 parent 5afabd2 commit bbd8ec4

5 files changed

Lines changed: 226 additions & 0 deletions

File tree

‎apps/frontend/app/components/Onboarding.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
export default function Onboarding({ onBack }: { onBack: () => void }) {
2+
return (
3+
<div className="relative w-full max-w-lg rounded-lg border border-black p-8">
4+
<button onClick={onBack} className="absolute left-8 top-8 text-xl">
5+
←
6+
</button>
7+
8+
<div className="mb-8 text-center">
9+
<h1 className="text-3xl font-medium">Welcome to CS+SG</h1>
10+
<p className="text-sm">Set up your basic profile</p>
11+
</div>
12+
13+
{/* Avatar and Identity Fields */}
14+
<div className="mb-6 flex gap-8">
15+
<div className="relative">
16+
<div className="flex h-32 w-32 items-center justify-center overflow-hidden rounded-full border border-black">
17+
<div className="relative h-full w-full">
18+
<div className="absolute inset-0 origin-center rotate-45 scale-150 border-t border-black"></div>
19+
<div className="absolute inset-0 origin-center -rotate-45 scale-150 border-t border-black"></div>
20+
</div>
21+
</div>
22+
<button className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full border border-black bg-white p-1">
23+
✎
24+
</button>
25+
</div>
26+
27+
<div className="flex-1 space-y-4">
28+
<div>
29+
<label className="mb-1 block text-sm">First Name</label>
30+
<input type="text" className="w-full rounded-sm border border-black p-2" />
31+
</div>
32+
<div>
33+
<label className="mb-1 block text-sm">Last Name</label>
34+
<input type="text" className="w-full rounded-sm border border-black p-2" />
35+
</div>
36+
<div>
37+
<label className="mb-1 block text-sm">Pronouns</label>
38+
<select className="w-full rounded-sm border border-black bg-white p-2">
39+
<option value=""></option>
40+
<option value="he-him">He/Him</option>
41+
<option value="she-her">She/Her</option>
42+
<option value="they-them">They/Them</option>
43+
</select>
44+
</div>
45+
</div>
46+
</div>
47+
48+
{/* Links Section */}
49+
<div className="space-y-2">
50+
<label className="block text-sm">Links</label>
51+
<div className="flex gap-2">
52+
<input type="text" className="flex-1 rounded-sm border border-black p-2" />
53+
<button className="border border-black px-4 py-2 transition-colors hover:bg-gray-100">
54+
Add
55+
</button>
56+
</div>
57+
<div className="space-y-1">
58+
<div className="flex items-center gap-2 border-b border-gray-400 py-2">
59+
<span className="cursor-pointer text-sm hover:text-red-500">✕</span>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<button className="mt-8 w-full text-center font-medium hover:underline">Done</button>
65+
</div>
66+
);
67+
}

‎apps/frontend/app/components/SignUpForm.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Link from "next/link";
2+
3+
export default function SignupForm({ onSignupSuccess }: { onSignupSuccess: () => void }) {
4+
return (
5+
<div className="w-full max-w-md space-y-6 rounded-lg border border-slate-300 bg-white p-8 text-slate-900 shadow-lg">
6+
<h1 className="mb-8 text-center text-4xl font-semibold text-slate-900">Register</h1>
7+
<div className="space-y-4">
8+
<div>
9+
<label className="mb-1 block text-sm font-medium text-slate-800">Email</label>
10+
<input
11+
type="email"
12+
className="w-full rounded-sm border border-slate-300 bg-white p-2 text-slate-900 placeholder:text-slate-400"
13+
/>
14+
</div>
15+
<div>
16+
<label className="mb-1 block text-sm font-medium text-slate-800">Password</label>
17+
<input
18+
type="password"
19+
className="w-full rounded-sm border border-slate-300 bg-white p-2 text-slate-900 placeholder:text-slate-400"
20+
/>
21+
</div>
22+
</div>
23+
<button
24+
onClick={onSignupSuccess}
25+
className="w-full rounded bg-slate-200 py-3 text-lg font-medium text-slate-900 transition-colors hover:bg-slate-300"
26+
>
27+
Register
28+
</button>
29+
<p className="mt-4 text-center text-sm text-slate-700">
30+
Have an account?{" "}
31+
<Link href="/login" className="font-semibold text-slate-900 hover:underline">
32+
Login
33+
</Link>
34+
</p>
35+
</div>
36+
);
37+
}

‎apps/frontend/app/forgot-password/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function ForgotPasswordPage() {
2+
return (
3+
<div className="flex min-h-screen items-center justify-center bg-white p-4 text-black">
4+
<div className="w-full max-w-md rounded-lg border border-black p-8 text-center">
5+
<h1 className="mb-4 text-2xl">Forgot Password</h1>
6+
<p className="mb-6">Enter your email to reset your password.</p>
7+
<input type="email" className="mb-4 w-full border border-black p-2" placeholder="Email" />
8+
<button className="w-full rounded bg-gray-200 py-2">Send Reset Link</button>
9+
</div>
10+
</div>
11+
);
12+
}

‎apps/frontend/app/login/page.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
"use client";
2+
import { useState } from "react";
3+
import Link from "next/link";
4+
5+
export default function LoginPage() {
6+
const [email, setEmail] = useState("");
7+
const [password, setPassword] = useState("");
8+
9+
const logLoginAttempt = (method: "standard" | "github" | "google") => {
10+
console.log("Login attempt", {
11+
method,
12+
email,
13+
password,
14+
});
15+
};
16+
17+
const handleLogin = () => logLoginAttempt("standard");
18+
const handleGithubLogin = () => logLoginAttempt("github");
19+
const handleGoogleLogin = () => logLoginAttempt("google");
20+
21+
return (
22+
<div className="flex min-h-screen items-center justify-center bg-white p-4 text-slate-900">
23+
<div className="w-full max-w-md space-y-6 rounded-lg border border-slate-300 bg-white p-8 shadow-lg">
24+
<h1 className="mb-8 text-center text-4xl font-semibold text-slate-900">Login</h1>
25+
<div className="space-y-4">
26+
<div>
27+
<label htmlFor="email" className="mb-1 block text-sm font-medium text-slate-800">
28+
Email
29+
</label>
30+
<input
31+
id="email"
32+
type="email"
33+
value={email}
34+
onChange={(event) => setEmail(event.target.value)}
35+
className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-400"
36+
placeholder="you@example.com"
37+
/>
38+
</div>
39+
<div>
40+
<label htmlFor="password" className="mb-1 block text-sm font-medium text-slate-800">
41+
Password
42+
</label>
43+
<input
44+
id="password"
45+
type="password"
46+
value={password}
47+
onChange={(event) => setPassword(event.target.value)}
48+
className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-400"
49+
placeholder="Enter your password"
50+
/>
51+
</div>
52+
</div>
53+
<button
54+
onClick={handleLogin}
55+
className="w-full rounded bg-slate-200 py-3 text-lg font-medium text-slate-900 transition hover:bg-slate-300"
56+
>
57+
Login
58+
</button>
59+
<div className="text-right">
60+
<Link
61+
href="/forgot-password"
62+
title="Forgot Password?"
63+
className="text-xs text-slate-700 hover:text-slate-900 hover:underline"
64+
>
65+
Forgot Password?
66+
</Link>
67+
</div>
68+
{/* ... Divider ... */}
69+
<div className="space-y-3">
70+
<button
71+
onClick={handleGithubLogin}
72+
className="w-full rounded bg-slate-200 py-3 font-medium text-slate-900 transition hover:bg-slate-300"
73+
>
74+
Login with Github
75+
</button>
76+
<button
77+
onClick={handleGoogleLogin}
78+
className="w-full rounded bg-slate-200 py-3 font-medium text-slate-900 transition hover:bg-slate-300"
79+
>
80+
Login with Google
81+
</button>
82+
</div>
83+
<p className="mt-4 text-center text-sm text-slate-700">
84+
Don&apos;t have an account?{" "}
85+
<Link href="/signup" className="font-semibold text-slate-900 hover:underline">
86+
Register
87+
</Link>
88+
</p>
89+
</div>
90+
</div>
91+
);
92+
}

‎apps/frontend/app/signup/page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use client";
2+
import { useState } from "react";
3+
import SignUpForm from "../components/SignUpForm";
4+
import Onboarding from "../components/Onboarding";
5+
6+
export default function SignupPage() {
7+
const [isSignedUp, setIsSignedUp] = useState(false);
8+
9+
return (
10+
<div className="flex min-h-screen items-center justify-center bg-white p-4 text-slate-900">
11+
{isSignedUp ? (
12+
<Onboarding onBack={() => setIsSignedUp(false)} />
13+
) : (
14+
<SignUpForm onSignupSuccess={() => setIsSignedUp(true)} />
15+
)}
16+
</div>
17+
);
18+
}

0 commit comments

Comments
 (0)