Skip to content

Commit 202ec54

Browse files
mrepol742mrepol742
committed
refactor: rename dashboard routes, extract oauth
- wrap mobile logo with link and remove desktop back link - add name and autocomplete attributes to email and password fields - create empty kanban page at app/d/kanban/page.tsx - update footer copy and github link to hallofcodes - tweak navbar and profile dropdown links/icons and import paths - minor jsx formatting and cleanup
1 parent c15c7b3 commit 202ec54

21 files changed

Lines changed: 149 additions & 132 deletions

File tree

app/(auth)/login/page.tsx renamed to app/(public)/(auth)/login/page.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,6 @@ export default async function Login(props: {
6969

7070
return (
7171
<div className="min-h-screen flex bg-[#0a0a1a] text-white relative">
72-
<Link
73-
href="/"
74-
className="absolute top-5 left-5 sm:top-6 sm:left-6 z-40 inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors"
75-
>
76-
<FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
77-
Back
78-
</Link>
79-
8072
{/* Left Side - Visual / Branding */}
8173
<div className="hidden lg:flex lg:w-1/2 relative flex-col justify-between p-12 md:p-16 xl:p-24 border-r border-white/5 bg-gradient-to-br from-[#0a0a1a] to-[#0a0a1a] overflow-hidden">
8274
{/* Background elements */}
@@ -148,10 +140,13 @@ export default async function Login(props: {
148140
<div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
149141

150142
<div className="w-full max-w-sm relative z-10">
151-
<div className="lg:hidden flex items-center justify-center gap-3 mb-10">
143+
<Link
144+
href="/"
145+
className="lg:hidden flex items-center justify-center gap-3 mb-10"
146+
>
152147
<Image src="/logo.svg" alt="Devpulse Logo" width={40} height={40} />
153148
<h2 className="text-3xl font-bold text-white">Devpulse</h2>
154-
</div>
149+
</Link>
155150

156151
<div className="mb-8 text-left">
157152
<h2 className="text-3xl font-bold text-white mb-2">Log in</h2>

app/(auth)/signup/page.tsx renamed to app/(public)/(auth)/signup/page.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,6 @@ export default async function Signup(props: {
5656

5757
return (
5858
<div className="min-h-screen flex bg-[#0a0a1a] text-white relative">
59-
<Link
60-
href="/"
61-
className="absolute top-5 left-5 sm:top-6 sm:left-6 z-40 inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors"
62-
>
63-
<FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
64-
Back
65-
</Link>
66-
6759
{/* Left Side - Visual / Branding */}
6860
<div className="hidden lg:flex lg:w-1/2 relative flex-col justify-between p-12 md:p-16 xl:p-24 border-r border-white/5 bg-gradient-to-br from-[#0a0a1a] to-[#0a0a1a] overflow-hidden">
6961
{/* Background elements */}
@@ -135,10 +127,13 @@ export default async function Signup(props: {
135127
<div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
136128

137129
<div className="w-full max-w-sm relative z-10">
138-
<div className="lg:hidden flex items-center justify-center gap-3 mb-10">
130+
<Link
131+
href="/"
132+
className="lg:hidden flex items-center justify-center gap-3 mb-10"
133+
>
139134
<Image src="/logo.svg" alt="Devpulse Logo" width={40} height={40} />
140135
<h2 className="text-3xl font-bold text-white">Devpulse</h2>
141-
</div>
136+
</Link>
142137

143138
<div className="mb-8 text-left">
144139
<h2 className="text-3xl font-bold text-white mb-2">

‎app/components/auth/LoginForm.tsx‎

Lines changed: 6 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
faGoogle,
1313
faMicrosoft,
1414
} from "@fortawesome/free-brands-svg-icons";
15+
import Oauth2 from "./Oauth2";
1516

1617
export default function LoginForm() {
1718
const supabase = createClient();
@@ -35,16 +36,6 @@ export default function LoginForm() {
3536
setShowCaptcha(true);
3637
};
3738

38-
const handleOAuthSignIn = async (provider: "google" | "azure" | "github") => {
39-
document.cookie = `devpulse_redirect=${encodeURIComponent(redirectTo)}; path=/; max-age=600; samesite=lax`;
40-
await supabase.auth.signInWithOAuth({
41-
provider: provider,
42-
options: {
43-
redirectTo: `${location.origin}/api/auth/callback`,
44-
},
45-
});
46-
};
47-
4839
const handleCaptchaVerify = async (token: string) => {
4940
setShowCaptcha(false);
5041
setLoading(true);
@@ -84,15 +75,13 @@ export default function LoginForm() {
8475
});
8576
};
8677

87-
const handleGoogleSignIn = () => handleOAuthSignIn("google");
88-
const handleMicrosoftSignIn = () => handleOAuthSignIn("azure");
89-
const handleGitHubSignIn = () => handleOAuthSignIn("github");
90-
9178
return (
9279
<>
9380
<form onSubmit={handleLogin} className="space-y-4">
9481
<input
9582
type="email"
83+
name="email"
84+
autoComplete="email"
9685
placeholder="Email"
9786
className="input-field"
9887
onChange={(e) => setEmail(e.target.value)}
@@ -101,6 +90,8 @@ export default function LoginForm() {
10190

10291
<input
10392
type="password"
93+
name="password"
94+
autoComplete="new-password"
10495
placeholder="Password"
10596
className="input-field"
10697
onChange={(e) => setPassword(e.target.value)}
@@ -123,34 +114,7 @@ export default function LoginForm() {
123114
<span className="text-sm text-gray-500">Or continue with</span>
124115
</div>
125116

126-
<div className="flex flex-row-321 gap-3">
127-
<button
128-
type="button"
129-
onClick={handleGoogleSignIn}
130-
className="flex items-center justify-center w-full py-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-100 transition-colors shadow-sm"
131-
>
132-
<FontAwesomeIcon icon={faGoogle} className="h-5 w-5 mr-2 text-red-500" />
133-
<span className="font-medium text-gray-700">Google</span>
134-
</button>
135-
136-
<button
137-
type="button"
138-
onClick={handleMicrosoftSignIn}
139-
className="flex items-center justify-center w-full py-3 rounded-lg bg-[#f3f3f3] border border-gray-300 hover:bg-gray-200 transition-colors shadow-sm"
140-
>
141-
<FontAwesomeIcon icon={faMicrosoft} className="h-5 w-5 mr-2 text-sky-600" />
142-
<span className="font-medium text-gray-700">Microsoft</span>
143-
</button>
144-
145-
<button
146-
type="button"
147-
onClick={handleGitHubSignIn}
148-
className="flex items-center justify-center w-full py-3 rounded-lg bg-[#f3f3f3] border border-gray-300 hover:bg-gray-200 transition-colors shadow-sm"
149-
>
150-
<FontAwesomeIcon icon={faGithub} className="h-5 w-5 mr-2 text-gray-800" />
151-
<span className="font-medium text-gray-700"> GitHub</span>
152-
</button>
153-
</div>
117+
<Oauth2 supabase={supabase} redirectTo={redirectTo} />
154118
</form>
155119

156120
{showCaptcha && (

‎app/components/auth/Oauth2.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
faGithub,
3+
faGoogle,
4+
faMicrosoft,
5+
} from "@fortawesome/free-brands-svg-icons";
6+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7+
import { SupabaseClient } from "@supabase/supabase-js";
8+
9+
export default function Oauth2({
10+
supabase,
11+
redirectTo,
12+
}: {
13+
supabase: SupabaseClient;
14+
redirectTo: string;
15+
}) {
16+
const handleOAuth = async (provider: "google" | "azure" | "github") => {
17+
document.cookie = `devpulse_redirect=${encodeURIComponent(redirectTo)}; path=/; max-age=600; samesite=lax`;
18+
await supabase.auth.signInWithOAuth({
19+
provider: provider,
20+
options: {
21+
redirectTo: `${location.origin}/api/auth/callback`,
22+
},
23+
});
24+
};
25+
26+
const handleGoogleSignUp = () => handleOAuth("google");
27+
const handleMicrosoftSignUp = () => handleOAuth("azure");
28+
const handleGitHubSignUp = () => handleOAuth("github");
29+
30+
return (
31+
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
32+
<button
33+
type="button"
34+
onClick={handleGoogleSignUp}
35+
className="flex items-center justify-center gap-2 w-full py-3 rounded-lg border border-white/10 bg-white/5 text-gray-100 hover:bg-white/10 hover:border-white/20 transition-colors shadow-[0_8px_20px_rgba(0,0,0,0.25)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60"
36+
>
37+
<FontAwesomeIcon icon={faGoogle} className="h-5 w-5 text-red-400" />
38+
<span className="text-sm font-semibold">Google</span>
39+
</button>
40+
41+
<button
42+
type="button"
43+
onClick={handleMicrosoftSignUp}
44+
className="flex items-center justify-center gap-2 w-full py-3 rounded-lg border border-white/10 bg-white/5 text-gray-100 hover:bg-white/10 hover:border-white/20 transition-colors shadow-[0_8px_20px_rgba(0,0,0,0.25)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60"
45+
>
46+
<FontAwesomeIcon icon={faMicrosoft} className="h-5 w-5 text-sky-400" />
47+
<span className="text-sm font-semibold">Microsoft</span>
48+
</button>
49+
50+
<button
51+
type="button"
52+
onClick={handleGitHubSignUp}
53+
className="flex items-center justify-center gap-2 w-full py-3 rounded-lg border border-white/10 bg-white/5 text-gray-100 hover:bg-white/10 hover:border-white/20 transition-colors shadow-[0_8px_20px_rgba(0,0,0,0.25)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60"
54+
>
55+
<FontAwesomeIcon icon={faGithub} className="h-5 w-5 text-gray-200" />
56+
<span className="text-sm font-semibold">GitHub</span>
57+
</button>
58+
</div>
59+
);
60+
}

‎app/components/auth/SignupForm.tsx‎

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import { createClient } from "../../lib/supabase/client";
55
import { toast } from "react-toastify";
66
import { useSearchParams } from "next/navigation";
77
import HCaptcha from "@hcaptcha/react-hcaptcha";
8-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
9-
import {
10-
faGithub,
11-
faGoogle,
12-
faMicrosoft,
13-
} from "@fortawesome/free-brands-svg-icons";
8+
import Oauth2 from "./Oauth2";
149

1510
export default function AuthPage() {
1611
const supabase = createClient();
@@ -34,16 +29,6 @@ export default function AuthPage() {
3429
setShowCaptcha(true);
3530
};
3631

37-
const handleOAuthSignUp = async (provider: "google" | "azure" | "github") => {
38-
document.cookie = `devpulse_redirect=${encodeURIComponent(redirectTo)}; path=/; max-age=600; samesite=lax`;
39-
await supabase.auth.signInWithOAuth({
40-
provider: provider,
41-
options: {
42-
redirectTo: `${location.origin}/api/auth/callback`,
43-
},
44-
});
45-
};
46-
4732
const handleCaptchaVerify = async (token: string) => {
4833
setShowCaptcha(false);
4934
setLoading(true);
@@ -90,15 +75,13 @@ export default function AuthPage() {
9075
});
9176
};
9277

93-
const handleGoogleSignUp = () => handleOAuthSignUp("google");
94-
const handleMicrosoftSignUp = () => handleOAuthSignUp("azure");
95-
const handleGitHubSignUp = () => handleOAuthSignUp("github");
96-
9778
return (
9879
<>
9980
<form onSubmit={handleSignup} className="space-y-4">
10081
<input
10182
type="email"
83+
name="email"
84+
autoComplete="email"
10285
placeholder="Email"
10386
className="input-field"
10487
value={email}
@@ -108,6 +91,8 @@ export default function AuthPage() {
10891

10992
<input
11093
type="password"
94+
name="password"
95+
autoComplete="new-password"
11196
placeholder="Password"
11297
className="input-field"
11398
value={password}
@@ -117,6 +102,8 @@ export default function AuthPage() {
117102

118103
<input
119104
type="password"
105+
name="confirmPassword"
106+
autoComplete="new-password"
120107
placeholder="Confirm Password"
121108
className="input-field"
122109
value={confirmPassword}
@@ -140,32 +127,7 @@ export default function AuthPage() {
140127
<span className="text-sm text-gray-500">Or continue with</span>
141128
</div>
142129

143-
<div className="flex flex-row-321 gap-3">
144-
<button
145-
type="button"
146-
onClick={handleGoogleSignUp}
147-
className="flex items-center justify-center w-full py-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-100 transition-colors shadow-sm"
148-
>
149-
<FontAwesomeIcon icon={faGoogle} className="h-5 w-5 mr-2 text-red-500" />
150-
<span className="font-medium text-gray-700">Google</span>
151-
</button>
152-
<button
153-
type="button"
154-
onClick={handleMicrosoftSignUp}
155-
className="flex items-center justify-center w-full py-3 rounded-lg bg-[#f3f3f3] border border-gray-300 hover:bg-gray-200 transition-colors shadow-sm"
156-
>
157-
<FontAwesomeIcon icon={faMicrosoft} className="h-5 w-5 mr-2 text-sky-600" />
158-
<span className="font-medium text-gray-700">Microsoft</span>
159-
</button>
160-
<button
161-
type="button"
162-
onClick={handleGitHubSignUp}
163-
className="flex items-center justify-center w-full py-3 rounded-lg bg-[#f3f3f3] border border-gray-300 hover:bg-gray-200 transition-colors shadow-sm"
164-
>
165-
<FontAwesomeIcon icon={faGithub} className="h-5 w-5 mr-2 text-gray-800" />
166-
<span className="font-medium text-gray-700"> GitHub</span>
167-
</button>
168-
</div>
130+
<Oauth2 supabase={supabase} redirectTo={redirectTo} />
169131
</form>
170132

171133
{showCaptcha && (

0 commit comments

Comments
 (0)