Skip to content

Commit 000033a

Browse files
author
Aysel
committed
onboarding and signup components, login placeholders, linting
1 parent c66cff3 commit 000033a

5 files changed

Lines changed: 155 additions & 141 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: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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-black p-8">
6+
<h1 className="mb-8 text-center text-4xl">Register</h1>
7+
<div className="space-y-4">
8+
<div>
9+
<label className="mb-1 block text-sm font-medium">Email</label>
10+
<input type="email" className="w-full rounded-sm border border-black p-2" />
11+
</div>
12+
<div>
13+
<label className="mb-1 block text-sm font-medium">Password</label>
14+
<input type="password" className="w-full rounded-sm border border-black p-2" />
15+
</div>
16+
</div>
17+
<button
18+
onClick={onSignupSuccess}
19+
className="w-full rounded bg-gray-200 py-3 text-lg transition-colors hover:bg-gray-300"
20+
>
21+
Register
22+
</button>
23+
<p className="mt-4 text-center text-sm">
24+
Have an account?{" "}
25+
<Link href="/login" className="font-semibold hover:underline">
26+
Login
27+
</Link>
28+
</p>
29+
</div>
30+
);
31+
}

‎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: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,53 @@
1-
// apps/frontend/app/login/page.tsx
1+
"use client";
2+
import Link from "next/link";
3+
24
export default function LoginPage() {
5+
const handleLogin = () => console.log("Standard login triggered");
6+
const handleGithubLogin = () => console.log("Github OAuth triggered");
7+
const handleGoogleLogin = () => console.log("Google OAuth triggered");
8+
39
return (
410
<div className="flex min-h-screen items-center justify-center bg-white p-4">
5-
<div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
6-
<h1 className="text-4xl text-center mb-8">Login</h1>
7-
8-
<div className="space-y-4">
9-
<div>
10-
<label className="block text-sm font-medium mb-1">Email</label>
11-
<input type="email" className="w-full p-2 border border-black rounded-sm" />
12-
</div>
13-
14-
<div>
15-
<label className="block text-sm font-medium mb-1">Password</label>
16-
<input type="password" className="w-full p-2 border border-black rounded-sm" />
17-
<div className="text-right mt-1">
18-
<button className="text-xs hover:underline">Forgot Password?</button>
19-
</div>
20-
</div>
21-
</div>
22-
23-
<button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg">
11+
<div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
12+
<h1 className="mb-8 text-center text-4xl">Login</h1>
13+
{/* ... Email/Password inputs ... */}
14+
<button
15+
onClick={handleLogin}
16+
className="w-full rounded bg-gray-200 py-3 text-lg hover:bg-gray-300"
17+
>
2418
Login
2519
</button>
26-
27-
<div className="relative border-t border-gray-400 my-8">
28-
<span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-2"></span>
20+
<div className="text-right">
21+
<Link
22+
href="/forgot-password"
23+
title="Forgot Password?"
24+
className="text-xs hover:underline"
25+
>
26+
Forgot Password?
27+
</Link>
2928
</div>
30-
29+
{/* ... Divider ... */}
3130
<div className="space-y-3">
32-
<button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
31+
<button
32+
onClick={handleGithubLogin}
33+
className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
34+
>
3335
Login with Github
3436
</button>
35-
<button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
37+
<button
38+
onClick={handleGoogleLogin}
39+
className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
40+
>
3641
Login with Google
3742
</button>
3843
</div>
39-
40-
<p className="text-center text-sm mt-4">
41-
Dont have an account? <a href="/signup" className="hover:underline font-semibold">Register</a>
44+
<p className="mt-4 text-center text-sm">
45+
Don&apos;t have an account?{" "}
46+
<Link href="/signup" className="font-semibold hover:underline">
47+
Register
48+
</Link>
4249
</p>
4350
</div>
4451
</div>
4552
);
46-
}
53+
}

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

Lines changed: 8 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,18 @@
11
"use client";
2-
32
import { useState } from "react";
4-
import Link from "next/link";
3+
import SignUpForm from "../components/SignUpForm";
4+
import Onboarding from "../components/Onboarding";
55

66
export default function SignupPage() {
77
const [isSignedUp, setIsSignedUp] = useState(false);
88

9-
// --- Onboarding View (Matches Figma) ---
10-
if (isSignedUp) {
11-
return (
12-
<div className="flex min-h-screen items-center justify-center bg-white p-4">
13-
<div className="w-full max-w-lg border border-black rounded-lg p-8 relative">
14-
{/* Back Arrow to return to Register */}
15-
<button
16-
onClick={() => setIsSignedUp(false)}
17-
className="absolute top-8 left-8 text-xl"
18-
>
19-
←
20-
</button>
21-
22-
<div className="text-center mb-8">
23-
<h1 className="text-3xl font-medium">Welcome to CS+SG</h1>
24-
<p className="text-sm">Set up your basic profile</p>
25-
</div>
26-
27-
<div className="flex gap-8 mb-6">
28-
{/* Avatar Section */}
29-
<div className="relative">
30-
<div className="w-32 h-32 rounded-full border border-black flex items-center justify-center overflow-hidden">
31-
<div className="relative w-full h-full">
32-
<div className="absolute inset-0 border-t border-black rotate-45 origin-center scale-150"></div>
33-
<div className="absolute inset-0 border-t border-black -rotate-45 origin-center scale-150"></div>
34-
</div>
35-
</div>
36-
<button className="absolute bottom-0 right-0 bg-white border border-black rounded-full p-1 w-8 h-8 flex items-center justify-center">
37-
✎
38-
</button>
39-
</div>
40-
41-
{/* Identity Fields */}
42-
<div className="flex-1 space-y-4">
43-
<div>
44-
<label className="block text-sm mb-1">First Name</label>
45-
<input type="text" className="w-full border border-black p-2 rounded-sm" />
46-
</div>
47-
<div>
48-
<label className="block text-sm mb-1">Last Name</label>
49-
<input type="text" className="w-full border border-black p-2 rounded-sm" />
50-
</div>
51-
<div>
52-
<label className="block text-sm mb-1">Pronouns</label>
53-
<select className="w-full border border-black p-2 rounded-sm bg-white">
54-
<option value=""></option>
55-
<option value="he-him">He/Him</option>
56-
<option value="she-her">She/Her</option>
57-
<option value="they-them">They/Them</option>
58-
</select>
59-
</div>
60-
</div>
61-
</div>
62-
63-
{/* Links Section */}
64-
<div className="space-y-2">
65-
<label className="block text-sm">Links</label>
66-
<div className="flex gap-2">
67-
<input type="text" className="flex-1 border border-black p-2 rounded-sm" />
68-
<button className="border border-black px-4 py-2 hover:bg-gray-100 transition-colors">
69-
Add
70-
</button>
71-
</div>
72-
<div className="space-y-1">
73-
<div className="flex items-center gap-2 border-b border-gray-400 py-2">
74-
<span className="text-sm cursor-pointer hover:text-red-500">✕</span>
75-
</div>
76-
<div className="flex items-center gap-2 border-b border-gray-400 py-2">
77-
<span className="text-sm cursor-pointer hover:text-red-500">✕</span>
78-
</div>
79-
</div>
80-
</div>
81-
82-
<button className="w-full mt-8 text-center font-medium hover:underline">
83-
Done
84-
</button>
85-
</div>
86-
</div>
87-
);
88-
}
89-
90-
// --- Register View ---
919
return (
9210
<div className="flex min-h-screen items-center justify-center bg-white p-4">
93-
<div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
94-
<h1 className="text-4xl text-center mb-8">Register</h1>
95-
96-
<div className="space-y-4">
97-
<div>
98-
<label className="block text-sm font-medium mb-1">Email</label>
99-
<input type="email" className="w-full p-2 border border-black rounded-sm" />
100-
</div>
101-
102-
<div>
103-
<label className="block text-sm font-medium mb-1">Password</label>
104-
<input type="password" className="w-full p-2 border border-black rounded-sm" />
105-
</div>
106-
</div>
107-
108-
<button
109-
onClick={() => setIsSignedUp(true)}
110-
className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg"
111-
>
112-
Register
113-
</button>
114-
115-
<p className="text-center text-sm mt-4">
116-
Have an account? <Link href="/login" className="hover:underline font-semibold">Login</Link>
117-
</p>
118-
</div>
11+
{isSignedUp ? (
12+
<Onboarding onBack={() => setIsSignedUp(false)} />
13+
) : (
14+
<SignUpForm onSignupSuccess={() => setIsSignedUp(true)} />
15+
)}
11916
</div>
12017
);
121-
}
18+
}

0 commit comments

Comments
 (0)