Skip to content

Commit 65e470b

Browse files
BobbyAlBobbyAl
committed
Update Login and Added Middleware for route protection
1 parent f493ceb commit 65e470b

File tree

4 files changed

+149
-150
lines changed

4 files changed

+149
-150
lines changed

‎src/app/login/page.jsx

+42-60
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33

44
import { useState } from "react";
55
import { signInWithEmailAndPassword } from "firebase/auth";
6-
import { auth } from "@/firebase/config";
6+
import { auth } from "../firebase";
77
import { useRouter } from "next/navigation";
88
import Link from "next/link";
9-
import { FaEnvelope, FaLock, FaSignInAlt } from "react-icons/fa";
9+
import { FaEnvelope, FaLock } from "react-icons/fa";
1010

1111
export default function LoginPage() {
1212
const [email, setEmail] = useState("");
1313
const [password, setPassword] = useState("");
1414
const [error, setError] = useState("");
1515
const [loading, setLoading] = useState(false);
1616
const router = useRouter();
17+
const basePath = "/crypt-webapp";
1718

1819
const handleSubmit = async (e) => {
1920
e.preventDefault();
@@ -22,95 +23,76 @@ export default function LoginPage() {
2223

2324
try {
2425
await signInWithEmailAndPassword(auth, email, password);
25-
router.push("/dashboard");
26-
} catch (error) {
27-
console.error("Login error:", error);
28-
setError(error.message);
29-
} finally {
30-
setLoading(false);
26+
router.push(`${basePath}/dashboard`);
27+
} catch (err) {
28+
setError("Failed to sign in. Please check your credentials.");
29+
console.error(err);
3130
}
31+
32+
setLoading(false);
3233
};
3334

3435
return (
35-
<div className="flex items-center justify-center min-h-screen py-12 px-4 sm:px-6 lg:px-8">
36-
<div className="max-w-md w-full space-y-8 bg-[#111827] p-8 rounded-2xl shadow-xl">
36+
<div className="min-h-screen flex items-center justify-center bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
37+
<div className="max-w-md w-full space-y-8">
3738
<div>
3839
<h2 className="mt-6 text-center text-3xl font-extrabold text-white">
3940
Sign in to your account
4041
</h2>
4142
</div>
4243

4344
{error && (
44-
<div className="bg-red-500/10 text-red-500 p-3 rounded-lg text-sm">
45-
{error}
46-
</div>
45+
<div className="text-red-500 text-sm text-center">{error}</div>
4746
)}
4847

4948
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
50-
<div className="rounded-md shadow-sm space-y-4">
51-
<div>
52-
<label htmlFor="email" className="sr-only">
53-
Email address
54-
</label>
55-
<div className="relative">
56-
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
57-
<FaEnvelope className="h-5 w-5 text-gray-400" />
58-
</div>
59-
<input
60-
id="email"
61-
name="email"
62-
type="email"
63-
autoComplete="email"
64-
required
65-
value={email}
66-
onChange={(e) => setEmail(e.target.value)}
67-
className="appearance-none relative block w-full px-3 py-2 pl-10 bg-gray-900 border border-gray-600 placeholder-gray-400 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
68-
placeholder="Email address"
69-
/>
70-
</div>
49+
<div className="rounded-md shadow-sm -space-y-px">
50+
<div className="relative">
51+
<FaEnvelope className="absolute left-3 top-3 text-gray-400" />
52+
<input
53+
id="email-address"
54+
name="email"
55+
type="email"
56+
autoComplete="email"
57+
required
58+
className="appearance-none rounded-none relative block w-full px-10 py-2 border border-gray-600 placeholder-gray-400 text-white bg-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
59+
placeholder="Email address"
60+
value={email}
61+
onChange={(e) => setEmail(e.target.value)}
62+
/>
7163
</div>
72-
<div>
73-
<label htmlFor="password" className="sr-only">
74-
Password
75-
</label>
76-
<div className="relative">
77-
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
78-
<FaLock className="h-5 w-5 text-gray-400" />
79-
</div>
80-
<input
81-
id="password"
82-
name="password"
83-
type="password"
84-
autoComplete="current-password"
85-
required
86-
value={password}
87-
onChange={(e) => setPassword(e.target.value)}
88-
className="appearance-none relative block w-full px-3 py-2 pl-10 bg-gray-900 border border-gray-600 placeholder-gray-400 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
89-
placeholder="Password"
90-
/>
91-
</div>
64+
<div className="relative">
65+
<FaLock className="absolute left-3 top-3 text-gray-400" />
66+
<input
67+
id="password"
68+
name="password"
69+
type="password"
70+
autoComplete="current-password"
71+
required
72+
className="appearance-none rounded-none relative block w-full px-10 py-2 border border-gray-600 placeholder-gray-400 text-white bg-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
73+
placeholder="Password"
74+
value={password}
75+
onChange={(e) => setPassword(e.target.value)}
76+
/>
9277
</div>
9378
</div>
9479

9580
<div>
9681
<button
9782
type="submit"
9883
disabled={loading}
99-
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
84+
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
10085
>
101-
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
102-
<FaSignInAlt className="h-5 w-5 text-blue-500 group-hover:text-blue-400" />
103-
</span>
10486
{loading ? "Signing in..." : "Sign in"}
10587
</button>
10688
</div>
10789

10890
<div className="text-center">
10991
<Link
110-
href="/register"
92+
href={`${basePath}/register`}
11193
className="font-medium text-blue-400 hover:text-blue-500"
11294
>
113-
Don't have an account? Register
95+
Don't have an account? Register here
11496
</Link>
11597
</div>
11698
</form>

‎src/app/register/page.jsx

+57-81
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33

44
import { useState } from "react";
55
import { createUserWithEmailAndPassword } from "firebase/auth";
6-
import { auth } from "@/firebase/config";
6+
import { auth } from "../firebase";
77
import { useRouter } from "next/navigation";
88
import Link from "next/link";
9-
import { FaEnvelope, FaLock, FaUserPlus } from "react-icons/fa";
9+
import { FaEnvelope, FaLock } from "react-icons/fa";
1010

1111
export default function RegisterPage() {
1212
const [email, setEmail] = useState("");
@@ -15,6 +15,7 @@ export default function RegisterPage() {
1515
const [error, setError] = useState("");
1616
const [loading, setLoading] = useState(false);
1717
const router = useRouter();
18+
const basePath = "/crypt-webapp";
1819

1920
const handleSubmit = async (e) => {
2021
e.preventDefault();
@@ -26,118 +27,93 @@ export default function RegisterPage() {
2627
}
2728

2829
setLoading(true);
30+
2931
try {
3032
await createUserWithEmailAndPassword(auth, email, password);
31-
router.push("/dashboard");
32-
} catch (error) {
33-
console.error("Registration error:", error);
34-
setError(error.message);
35-
} finally {
36-
setLoading(false);
33+
router.push(`${basePath}/dashboard`);
34+
} catch (err) {
35+
setError("Failed to create an account. Please try again.");
36+
console.error(err);
3737
}
38+
39+
setLoading(false);
3840
};
3941

4042
return (
41-
<div className="flex items-center justify-center min-h-screen py-12 px-4 sm:px-6 lg:px-8">
42-
<div className="max-w-md w-full space-y-8 bg-[#111827] p-8 rounded-2xl shadow-xl">
43+
<div className="min-h-screen flex items-center justify-center bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
44+
<div className="max-w-md w-full space-y-8">
4345
<div>
4446
<h2 className="mt-6 text-center text-3xl font-extrabold text-white">
45-
Create your account
47+
Create an account
4648
</h2>
4749
</div>
4850

4951
{error && (
50-
<div className="bg-red-500/10 text-red-500 p-3 rounded-lg text-sm">
51-
{error}
52-
</div>
52+
<div className="text-red-500 text-sm text-center">{error}</div>
5353
)}
5454

5555
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
56-
<div className="rounded-md shadow-sm space-y-4">
57-
<div>
58-
<label htmlFor="email" className="sr-only">
59-
Email address
60-
</label>
61-
<div className="relative">
62-
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
63-
<FaEnvelope className="h-5 w-5 text-gray-400" />
64-
</div>
65-
<input
66-
id="email"
67-
name="email"
68-
type="email"
69-
autoComplete="email"
70-
required
71-
value={email}
72-
onChange={(e) => setEmail(e.target.value)}
73-
className="appearance-none relative block w-full px-3 py-2 pl-10 bg-gray-900 border border-gray-600 placeholder-gray-400 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
74-
placeholder="Email address"
75-
/>
76-
</div>
56+
<div className="rounded-md shadow-sm -space-y-px">
57+
<div className="relative">
58+
<FaEnvelope className="absolute left-3 top-3 text-gray-400" />
59+
<input
60+
id="email-address"
61+
name="email"
62+
type="email"
63+
autoComplete="email"
64+
required
65+
className="appearance-none rounded-none relative block w-full px-10 py-2 border border-gray-600 placeholder-gray-400 text-white bg-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
66+
placeholder="Email address"
67+
value={email}
68+
onChange={(e) => setEmail(e.target.value)}
69+
/>
7770
</div>
78-
<div>
79-
<label htmlFor="password" className="sr-only">
80-
Password
81-
</label>
82-
<div className="relative">
83-
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
84-
<FaLock className="h-5 w-5 text-gray-400" />
85-
</div>
86-
<input
87-
id="password"
88-
name="password"
89-
type="password"
90-
autoComplete="new-password"
91-
required
92-
value={password}
93-
onChange={(e) => setPassword(e.target.value)}
94-
className="appearance-none relative block w-full px-3 py-2 pl-10 bg-gray-900 border border-gray-600 placeholder-gray-400 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
95-
placeholder="Password"
96-
/>
97-
</div>
71+
<div className="relative">
72+
<FaLock className="absolute left-3 top-3 text-gray-400" />
73+
<input
74+
id="password"
75+
name="password"
76+
type="password"
77+
autoComplete="new-password"
78+
required
79+
className="appearance-none rounded-none relative block w-full px-10 py-2 border border-gray-600 placeholder-gray-400 text-white bg-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
80+
placeholder="Password"
81+
value={password}
82+
onChange={(e) => setPassword(e.target.value)}
83+
/>
9884
</div>
99-
<div>
100-
<label htmlFor="confirm-password" className="sr-only">
101-
Confirm Password
102-
</label>
103-
<div className="relative">
104-
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
105-
<FaLock className="h-5 w-5 text-gray-400" />
106-
</div>
107-
<input
108-
id="confirm-password"
109-
name="confirm-password"
110-
type="password"
111-
autoComplete="new-password"
112-
required
113-
value={confirmPassword}
114-
onChange={(e) => setConfirmPassword(e.target.value)}
115-
className="appearance-none relative block w-full px-3 py-2 pl-10 bg-gray-900 border border-gray-600 placeholder-gray-400 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
116-
placeholder="Confirm password"
117-
/>
118-
</div>
85+
<div className="relative">
86+
<FaLock className="absolute left-3 top-3 text-gray-400" />
87+
<input
88+
id="confirm-password"
89+
name="confirm-password"
90+
type="password"
91+
autoComplete="new-password"
92+
required
93+
className="appearance-none rounded-none relative block w-full px-10 py-2 border border-gray-600 placeholder-gray-400 text-white bg-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
94+
placeholder="Confirm password"
95+
value={confirmPassword}
96+
onChange={(e) => setConfirmPassword(e.target.value)}
97+
/>
11998
</div>
12099
</div>
121100

122101
<div>
123102
<button
124103
type="submit"
125104
disabled={loading}
126-
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
105+
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
127106
>
128-
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
129-
<FaUserPlus className="h-5 w-5 text-blue-500 group-hover:text-blue-400" />
130-
</span>
131107
{loading ? "Creating account..." : "Create account"}
132108
</button>
133109
</div>
134110

135111
<div className="text-center">
136112
<Link
137-
href="/login"
113+
href={`${basePath}/login`}
138114
className="font-medium text-blue-400 hover:text-blue-500"
139115
>
140-
Already have an account? Sign in
116+
Already have an account? Sign in here
141117
</Link>
142118
</div>
143119
</form>

0 commit comments

Comments
 (0)