Skip to content

Commit 2196e8d

Browse files
04shubham704shubham7
authored
Merge pull request #50 from SHIVA00202/feat/Add_Loader_Spinner_Component
feat: Add Loader Spinner
2 parents 9e2881e + c2251a3 commit 2196e8d

6 files changed

Lines changed: 63 additions & 45 deletions

File tree

‎backend/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.env

‎backend/src/routes/authRoutes.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import express from "express";
2-
import { registerUser, loginUser, getUserProfile } from "../controllers/authController.js";
2+
import { registerUser, loginUser, getUserProfile} from "../controllers/authController.js";
33
import passport from "passport";
44
import { protect } from "../middleware/authMiddleware.js";
55

@@ -17,7 +17,7 @@ router.get(
1717
router.get(
1818
"/google/callback",
1919
passport.authenticate("google", { session: false, failureRedirect: process.env.FRONTEND_URL ? `${process.env.FRONTEND_URL}/signin` : "/signin" }),
20-
oauthCallback
20+
2121
);
2222

2323
// GitHub OAuth
@@ -28,7 +28,7 @@ router.get(
2828
router.get(
2929
"/github/callback",
3030
passport.authenticate("github", { session: false, failureRedirect: process.env.FRONTEND_URL ? `${process.env.FRONTEND_URL}/signin` : "/signin" }),
31-
oauthCallback
31+
3232
);
3333

3434
export default router;

‎frontend/src/assets/loader.gif‎

20.8 KB
Loading

‎frontend/src/pages/RoomActions.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export default function RoomActions() {
2323
});
2424
setUser(res.data.user);
2525
} catch (err) {
26-
// invalid token or user not found
2726
localStorage.removeItem("token");
2827
navigate("/signin");
2928
} finally {
@@ -41,34 +40,46 @@ export default function RoomActions() {
4140
navigate("/");
4241
};
4342

44-
if (loading) return <div className="p-6">Loading...</div>;
43+
if (loading)
44+
return (
45+
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100">
46+
<p className="text-gray-600 text-lg animate-pulse">Loading...</p>
47+
</div>
48+
);
4549

4650
return (
47-
<div className="container mx-auto px-6 py-10">
48-
<div className="max-w-md mx-auto bg-white shadow rounded-lg p-6">
49-
<h2 className="text-xl font-semibold mb-4 ">Room Actions</h2>
50-
<p className="text-sm text-gray-600 mb-6">Hello {user?.name ?? "user"}, choose an action:</p>
51+
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
52+
<div className="max-w-md w-full bg-white/80 backdrop-blur-md shadow-xl rounded-2xl border border-green-100 p-8 transition-transform hover:scale-[1.01] duration-300">
53+
<h2 className="text-3xl font-bold text-green-600 text-center mb-4">
54+
Room Actions
55+
</h2>
56+
<p className="text-gray-600 text-center mb-8">
57+
👋 Hello <span className="font-semibold">{user?.name ?? "Guest"}</span>, what would you like to do today?
58+
</p>
5159

52-
<div className="space-y-3">
60+
<div className="space-y-4">
61+
{/* Join Room */}
5362
<Button
54-
className="w-full justify-center bg-green-600 hover:bg-green-700 text-white"
5563
onClick={handleJoin}
64+
className="w-full justify-center bg-green-600 text-white font-medium py-3 rounded-lg shadow-md hover:bg-green-700 hover:shadow-lg transition-all"
5665
>
57-
<LogIn className="mr-2 h-4 w-4" /> Join Room
66+
<LogIn className="mr-2 h-5 w-5" /> Join a Room
5867
</Button>
5968

69+
{/* Create Room */}
6070
<Button
61-
className="w-full justify-center bg-blue-600 hover:bg-blue-700 text-white"
6271
onClick={handleCreate}
72+
className="w-full justify-center bg-blue-600 text-white font-medium py-3 rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg transition-all"
6373
>
64-
<PlusSquare className="mr-2 h-4 w-4" /> Create Room
74+
<PlusSquare className="mr-2 h-5 w-5" /> Create a Room
6575
</Button>
6676

77+
{/* Logout */}
6778
<Button
68-
className="w-full justify-center bg-red-600 hover:bg-red-700 text-white"
6979
onClick={handleLogout}
80+
className="w-full justify-center bg-red-600 text-white font-medium py-3 rounded-lg shadow-md hover:bg-red-700 hover:shadow-lg transition-all"
7081
>
71-
<LogOut className="mr-2 h-4 w-4" /> Logout
82+
<LogOut className="mr-2 h-5 w-5" /> Logout
7283
</Button>
7384
</div>
7485
</div>

‎frontend/src/pages/Signin.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ interface SignInData {
2424
const SignIn = () => {
2525
const [isLoading, setIsLoading] = useState(false);
2626
const navigate = useNavigate();
27-
const { register, handleSubmit, formState: { errors }, reset } = useForm<SignInData>();
27+
const {
28+
register,
29+
handleSubmit,
30+
formState: { errors },
31+
reset,
32+
} = useForm<SignInData>();
2833

2934
const onSubmit = async (data: SignInData) => {
3035
setIsLoading(true);
@@ -40,7 +45,6 @@ const SignIn = () => {
4045
description: response.data.message || "Login successful",
4146
});
4247

43-
// store JWT token in localStorage
4448
if (response.data.token) {
4549
localStorage.setItem("token", response.data.token);
4650
}
@@ -50,7 +54,9 @@ const SignIn = () => {
5054
} catch (error: any) {
5155
toast({
5256
title: "Error",
53-
description: error.response?.data?.message || "Login failed. Please try again.",
57+
description:
58+
error.response?.data?.message ||
59+
"Login failed. Please try again.",
5460
variant: "destructive",
5561
});
5662
} finally {
@@ -59,19 +65,19 @@ const SignIn = () => {
5965
};
6066

6167
return (
62-
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-8">
63-
<Card className="w-full max-w-md bg-white shadow-lg rounded-xl">
68+
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
69+
<Card className="w-full max-w-md bg-white/80 backdrop-blur-md shadow-xl border border-green-100 rounded-2xl p-6 animate-fadeIn">
6470
<CardHeader className="space-y-1 text-center">
65-
<CardTitle className="text-3xl font-bold text-green-600">
71+
<CardTitle className="text-4xl font-extrabold text-green-600 tracking-tight">
6672
PeerCall
6773
</CardTitle>
6874
<CardDescription className="text-gray-600 text-base">
69-
Sign in to your account
75+
Sign in to continue to your account
7076
</CardDescription>
7177
</CardHeader>
7278

7379
<CardContent>
74-
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
80+
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
7581
<InputField
7682
label="Email"
7783
id="email"
@@ -104,13 +110,13 @@ const SignIn = () => {
104110

105111
<Button
106112
type="submit"
107-
className="w-full bg-green-600 text-white hover:bg-green-700 transition-colors rounded-lg py-3"
113+
className="w-full bg-green-600 text-white hover:bg-green-700 transition-all duration-300 rounded-lg py-3 font-medium shadow-md hover:shadow-lg"
108114
size="lg"
109115
disabled={isLoading}
110116
>
111117
{isLoading ? (
112118
<>
113-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
119+
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
114120
Signing in...
115121
</>
116122
) : (
@@ -119,20 +125,20 @@ const SignIn = () => {
119125
</Button>
120126
</form>
121127

122-
<div className="mt-6">
128+
<div className="mt-8">
123129
<div className="text-center text-sm text-gray-500 mb-3">
124-
Or continue with
130+
— Or continue with —
125131
</div>
126132
<SocialLogin />
127133
</div>
128134
</CardContent>
129135

130-
<CardFooter className="flex flex-col space-y-2">
131-
<div className="text-sm text-gray-500 text-center">
132-
Don't have an account?{" "}
136+
<CardFooter className="flex flex-col space-y-2 mt-4">
137+
<div className="text-sm text-gray-600 text-center">
138+
Don’t have an account?{" "}
133139
<Link
134140
to="/signup"
135-
className="text-green-600 hover:underline font-medium transition-colors"
141+
className="text-green-600 font-medium hover:underline hover:text-green-700 transition-colors"
136142
>
137143
Sign Up
138144
</Link>

‎frontend/src/pages/Signup.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ const SignUp = () => {
4747

4848
setIsLoading(true);
4949
try {
50-
// Derive name from email (part before @)
5150
const name = data.email.split("@")[0];
5251

5352
const response = await axios.post(
@@ -64,10 +63,10 @@ const SignUp = () => {
6463

6564
toast({
6665
title: "Success!",
67-
description: response.data.message || "Registration successful",
66+
description:
67+
response.data.message || "Account created successfully. Welcome!",
6868
});
6969

70-
// Optional: save token for auto-login
7170
if (response.data.token) {
7271
localStorage.setItem("token", response.data.token);
7372
}
@@ -78,7 +77,8 @@ const SignUp = () => {
7877
toast({
7978
title: "Error",
8079
description:
81-
error.response?.data?.message || "Registration failed. Please try again.",
80+
error.response?.data?.message ||
81+
"Registration failed. Please try again.",
8282
variant: "destructive",
8383
});
8484
} finally {
@@ -87,10 +87,10 @@ const SignUp = () => {
8787
};
8888

8989
return (
90-
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-8">
91-
<Card className="w-full max-w-md bg-white shadow-lg rounded-xl">
90+
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
91+
<Card className="w-full max-w-md bg-white/80 backdrop-blur-md shadow-xl border border-green-100 rounded-2xl p-6 animate-fadeIn">
9292
<CardHeader className="space-y-1 text-center">
93-
<CardTitle className="text-3xl font-bold text-green-600">
93+
<CardTitle className="text-4xl font-extrabold text-green-600 tracking-tight">
9494
PeerCall
9595
</CardTitle>
9696
<CardDescription className="text-gray-600 text-base">
@@ -99,7 +99,7 @@ const SignUp = () => {
9999
</CardHeader>
100100

101101
<CardContent>
102-
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
102+
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
103103
<InputField
104104
label="Email"
105105
id="email"
@@ -143,13 +143,13 @@ const SignUp = () => {
143143

144144
<Button
145145
type="submit"
146-
className="w-full bg-green-600 text-white hover:bg-green-700 transition-colors rounded-lg py-3"
146+
className="w-full bg-green-600 text-white hover:bg-green-700 transition-all duration-300 rounded-lg py-3 font-medium shadow-md hover:shadow-lg"
147147
size="lg"
148148
disabled={isLoading}
149149
>
150150
{isLoading ? (
151151
<>
152-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
152+
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
153153
Creating account...
154154
</>
155155
) : (
@@ -159,12 +159,12 @@ const SignUp = () => {
159159
</form>
160160
</CardContent>
161161

162-
<CardFooter className="flex flex-col space-y-2">
163-
<div className="text-sm text-gray-500 text-center">
162+
<CardFooter className="flex flex-col space-y-2 mt-4">
163+
<div className="text-sm text-gray-600 text-center">
164164
Already have an account?{" "}
165165
<Link
166166
to="/signin"
167-
className="text-green-600 hover:underline font-medium transition-colors"
167+
className="text-green-600 font-medium hover:underline hover:text-green-700 transition-colors"
168168
>
169169
Sign In
170170
</Link>

0 commit comments

Comments
 (0)