Skip to content

Commit 13de86d

Browse files
harshitap1305harshitap1305
authored
Merge pull request #106 from harshitap1305/UI_redesign_ls
[SPRINT-M25] redesign: redesigned Login and Signup Pages acc to figma design
2 parents 25c9bea + 26c6f98 commit 13de86d

4 files changed

Lines changed: 294 additions & 198 deletions

File tree

‎frontend/src/App.js‎

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { getStudentRoutes } from "./routes/StudentRoutes";
1111
import OnboardingForm from "./Components/UserOnboarding";
1212
import RoleRedirect from "./Components/Auth/RoleRedirect";
1313
import Unauthorised from "./Components/Unauthorised";
14+
import "react-toastify/dist/ReactToastify.css";
15+
import { ToastContainer } from "react-toastify";
1416

1517
function App() {
1618
const authData = useAuth();
@@ -22,31 +24,48 @@ function App() {
2224
}
2325

2426
return (
25-
<AdminContext.Provider value={authData}>
26-
<BrowserRouter>
27-
<Routes>
28-
{/* Public Routes */}
29-
{getPublicRoutes(isUserLoggedIn)}
30-
31-
{/* Admin Routes */}
32-
{getAdminRoutes()}
33-
34-
{/* Student Routes */}
35-
{getStudentRoutes(isUserLoggedIn, isOnboardingComplete)}
36-
37-
{/* Special Routes */}
38-
<Route path="/" element={<RoleRedirect />} />
39-
<Route path="/onboarding" element={<OnboardingForm />} />
40-
<Route path="/unauthorised" element={<Unauthorised />} />
41-
42-
{/* Catch-all route */}
43-
<Route
44-
path="*"
45-
element={<Navigate to={isUserLoggedIn ? "/" : "/login"} replace />}
46-
/>
47-
</Routes>
48-
</BrowserRouter>
49-
</AdminContext.Provider>
27+
<>
28+
<AdminContext.Provider value={authData}>
29+
<BrowserRouter>
30+
<Routes>
31+
{/* Public Routes */}
32+
{getPublicRoutes(isUserLoggedIn)}
33+
34+
{/* Admin Routes */}
35+
{getAdminRoutes()}
36+
37+
{/* Student Routes */}
38+
{getStudentRoutes(isUserLoggedIn, isOnboardingComplete)}
39+
40+
{/* Special Routes */}
41+
<Route path="/" element={<RoleRedirect />} />
42+
<Route path="/onboarding" element={<OnboardingForm />} />
43+
<Route path="/unauthorised" element={<Unauthorised />} />
44+
45+
{/* Catch-all route */}
46+
<Route
47+
path="*"
48+
element={
49+
<Navigate to={isUserLoggedIn ? "/" : "/login"} replace />
50+
}
51+
/>
52+
</Routes>
53+
</BrowserRouter>
54+
</AdminContext.Provider>
55+
<ToastContainer
56+
position="top-right"
57+
autoClose={3000}
58+
hideProgressBar={false}
59+
newestOnTop={false}
60+
closeOnClick
61+
rtl={false}
62+
pauseOnFocusLoss
63+
draggable
64+
pauseOnHover
65+
style={{ zIndex: 9999 }} // Add this
66+
toastStyle={{ zIndex: 9999 }} // And this
67+
/>
68+
</>
5069
);
5170
}
5271

‎frontend/src/Components/Auth/Login.jsx‎

Lines changed: 118 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,151 @@
11
import React, { useState, useContext } from "react";
22
import { AdminContext } from "../../context/AdminContext";
3-
import { Button, Form, FormGroup, Label, Input, Container } from "reactstrap";
4-
import GoogleIcon from "@mui/icons-material/Google";
53
import { loginUser } from "../../services/auth";
64
import { useNavigate } from "react-router-dom";
7-
function Login() {
5+
import GoogleIcon from "@mui/icons-material/Google";
6+
import cosa from "../../assets/COSA.png";
7+
import { toast } from "react-toastify";
8+
9+
export default function Login() {
810
const { handleLogin } = useContext(AdminContext);
911
const [email, setEmail] = useState("");
1012
const [password, setPassword] = useState("");
13+
const [loading, setLoading] = useState(false);
1114
const navigate = useNavigate();
12-
const handleSubmit = async (event) => {
13-
event.preventDefault();
15+
16+
const handleSubmit = async (e) => {
17+
e.preventDefault();
18+
setLoading(true);
19+
1420
try {
1521
const userObject = await loginUser(email, password);
1622
if (userObject) {
1723
handleLogin(userObject);
24+
toast.success("Login successful! 🎉");
1825
navigate("/", { replace: true });
26+
} else {
27+
toast.error("Login failed. Please check your credentials.");
1928
}
2029
} catch (error) {
2130
console.error("Login failed:", error);
22-
alert("Login failed. Please check your credentials.");
31+
toast.error("Login failed. Please check your credentials.");
32+
} finally {
33+
setLoading(false);
2334
}
2435
};
2536

2637
return (
27-
<Container
28-
className="d-flex flex-column justify-content-center align-items-center"
29-
style={{ height: "100vh" }}
30-
>
31-
<img
32-
src="/Logo_of_IIT_Bhilai.png"
33-
width={100}
34-
alt="IIT-Bhilai-Logo"
35-
style={{ position: "relative", bottom: 20 }}
36-
/>
37-
<Container className="d-flex justify-content-center align-items-center">
38-
<Form onSubmit={handleSubmit} style={{ width: "30%" }}>
39-
<FormGroup className="text-center">
40-
<h2>Login</h2>
41-
</FormGroup>
42-
<FormGroup>
43-
<Label for="email">Email</Label>
44-
<Input
38+
<div className="min-h-screen w-full bg-[#0A0F08] flex items-center justify-center p-4">
39+
{/* Main container */}
40+
<div className="flex flex-col-reverse lg:flex-row items-center justify-center gap-12 lg:gap-16 w-full max-w-7xl">
41+
{/* Cream Login Box */}
42+
<div
43+
className="bg-[#FDFAE2] rounded-[30px] p-6 sm:p-8 w-[700px] min-h-[650px] flex items-center justify-center max-w-full sm:max-w-full"
44+
style={{
45+
boxShadow: `
46+
inset 0 10px 40px rgba(0, 0, 0, 0.2),
47+
inset 0 15px 20px rgba(0, 0, 0, 0.3),
48+
inset 0 10px 20px rgba(0, 0, 0, 0.2),
49+
inset 4px 4px 4px rgba(0, 0, 0, 0.1),
50+
inset -4px -4px 4px rgba(255, 255, 255, 0.3)
51+
`,
52+
}}
53+
>
54+
<form
55+
onSubmit={handleSubmit}
56+
className="bg-white p-8 rounded-xl shadow-md w-[480px] h-[530px]"
57+
style={{
58+
boxShadow: `
59+
0 20px 40px rgba(0, 0, 0, 0.15),
60+
0 10px 20px rgba(0, 0, 0, 0.1),
61+
0 4px 8px rgba(0, 0, 0, 0.08),
62+
inset 0 1px 0 rgba(255, 255, 255, 0.8)
63+
`,
64+
}}
65+
>
66+
<h2 className="text-2xl font-bold text-center mb-6">Login</h2>
67+
<hr className="mb-6" />
68+
69+
{/* Email */}
70+
<label className="block text-sm mb-2 font-medium">Email</label>
71+
<input
4572
type="email"
46-
name="email"
47-
id="email"
48-
placeholder="Email"
4973
value={email}
5074
onChange={(e) => setEmail(e.target.value)}
75+
className="w-full border border-gray-300 rounded-md p-2 mb-4 focus:outline-none focus:ring-2 focus:ring-black"
76+
required
5177
/>
52-
</FormGroup>
53-
<FormGroup>
54-
<Label for="password">Password</Label>
55-
<Input
78+
79+
{/* Password */}
80+
<label className="block text-sm mb-2 font-medium">Password</label>
81+
<input
5682
type="password"
57-
name="password"
58-
id="password"
59-
placeholder="Password"
6083
value={password}
6184
onChange={(e) => setPassword(e.target.value)}
85+
className="w-full border border-gray-300 rounded-md p-2 mb-2 focus:outline-none focus:ring-2 focus:ring-black"
86+
required
6287
/>
63-
</FormGroup>
64-
<div className="d-flex justify-content-end mt-2">
88+
89+
<div className="flex justify-end mb-6">
90+
<a
91+
href="/forgot-password"
92+
className="text-xs text-[#24648B] hover:underline font-medium"
93+
>
94+
Forgot password?
95+
</a>
96+
</div>
97+
98+
{/* Login Button */}
99+
<button
100+
type="submit"
101+
disabled={loading}
102+
className={`w-full py-2 rounded-md mb-4 font-medium ${
103+
loading
104+
? "bg-gray-400 cursor-not-allowed"
105+
: "bg-black text-white hover:opacity-90"
106+
}`}
107+
>
108+
{loading ? "Logging in..." : "Login"}
109+
</button>
110+
111+
<div className="flex items-center my-1">
112+
<hr className="flex-1 border-gray-300" />
113+
<span className="mx-3 text-gray-500 text-sm">OR</span>
114+
<hr className="flex-1 border-gray-300" />
115+
</div>
116+
117+
{/* Google Login */}
65118
<a
66-
href="/forgot-password"
67-
style={{
68-
fontSize: "0.9rem",
69-
textDecoration: "none",
70-
color: "#007bff",
71-
}}
119+
href={`${process.env.REACT_APP_BACKEND_URL}/auth/google`}
120+
className="block"
72121
>
73-
{" "}
74-
Forgot Password?{" "}
122+
<button
123+
type="button"
124+
className="w-full bg-[#23659C] text-white py-2 rounded-md flex items-center justify-center space-x-2 hover:opacity-90 font-medium"
125+
>
126+
<span>Sign in with Google</span>
127+
<GoogleIcon />
128+
</button>
75129
</a>
76-
</div>
77-
<FormGroup className="text-center">
78-
<Button type="submit" style={{ width: "100%" }} color="success">
79-
Login
80-
</Button>
81-
</FormGroup>
82-
<div
83-
style={{
84-
display: "flex",
85-
alignItems: "center",
86-
justifyContent: "center",
87-
marginBottom: "10px",
88-
}}
89-
>
90-
<hr style={{ width: "40%" }} />
91-
<p style={{ margin: "0 10px" }}>OR</p>
92-
<hr style={{ width: "40%" }} />
93-
</div>
94-
<FormGroup className="text-center">
95-
<a href={`${process.env.REACT_APP_BACKEND_URL}/auth/google`}>
96-
<Button type="button" style={{ width: "100%" }} color="primary">
97-
Sign in with Google <GoogleIcon />
98-
</Button>
99-
</a>
100-
</FormGroup>
101-
<FormGroup className="text-center">
102-
<Label>
103-
Don't have an Account? <a href="/register">Register</a>
104-
</Label>
105-
</FormGroup>
106-
</Form>
107-
</Container>
108-
</Container>
130+
131+
<p className="text-center text-sm mt-4">
132+
Don’t have an account?{" "}
133+
<a
134+
href="/register"
135+
className="text-[#23659C] hover:underline font-medium"
136+
>
137+
Sign Up
138+
</a>
139+
</p>
140+
</form>
141+
</div>
142+
143+
{/* CoSA Logo outside cream box */}
144+
<div className="flex flex-col items-center text-white">
145+
<img src={cosa} alt="CoSA Logo" className="w-52 h-52 mb-6" />
146+
<h1 className="text-2xl font-semibold">CoSA</h1>
147+
</div>
148+
</div>
149+
</div>
109150
);
110151
}
111-
112-
export default Login;

0 commit comments

Comments
 (0)