Skip to content

Commit 26c6f98

Browse files
harshitap1305harshitap1305
committed
signup page added
1 parent 3676fa7 commit 26c6f98

1 file changed

Lines changed: 132 additions & 94 deletions

File tree

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

Lines changed: 132 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,171 @@
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 { registerUser } from "../../services/auth";
64
import isIITBhilaiEmail from "../../utils/emailValidator";
5+
import { useNavigate } from "react-router-dom";
6+
import GoogleIcon from "@mui/icons-material/Google";
7+
import cosa from "../../assets/COSA.png";
8+
import { toast } from "react-toastify";
79

8-
function Register() {
10+
export default function Register() {
11+
const { setIsUserLoggedIn } = useContext(AdminContext);
912
const [name, setName] = useState("");
1013
const [ID, setId] = useState("");
1114
const [email, setEmail] = useState("");
1215
const [password, setPassword] = useState("");
13-
const { setIsUserLoggedIn } = useContext(AdminContext);
14-
const [error, setError] = useState("");
15-
const handleSubmit = async (event) => {
16-
event.preventDefault();
17-
setError("");
16+
const [loading, setLoading] = useState(false);
17+
const navigate = useNavigate();
18+
19+
const handleSubmit = async (e) => {
20+
e.preventDefault();
21+
setLoading(true);
22+
1823
if (!isIITBhilaiEmail(email)) {
19-
setError("Please use an @iitbhilai.ac.in email address.");
24+
toast.error("Please use an @iitbhilai.ac.in email address.");
25+
setLoading(false);
2026
return;
2127
}
2228

23-
const status = await registerUser(name, ID, email, password);
24-
if (status) {
25-
setIsUserLoggedIn(true);
29+
try {
30+
const status = await registerUser(name, ID, email, password);
31+
if (status) {
32+
setIsUserLoggedIn(true);
33+
toast.success("Registration successful! 🎉");
34+
navigate("/", { replace: true });
35+
} else {
36+
toast.error("Registration failed. Please try again.");
37+
}
38+
} catch (error) {
39+
console.error("Register failed:", error);
40+
toast.error("Something went wrong. Please try again.");
41+
} finally {
42+
setLoading(false);
2643
}
2744
};
2845

2946
return (
30-
<Container
31-
className="d-flex flex-column justify-content-center align-items-center"
32-
style={{ height: "100vh" }}
33-
>
34-
<img
35-
src="/Logo_of_IIT_Bhilai.png"
36-
width={100}
37-
alt="IIT-Bhilai-Logo"
38-
style={{ position: "relative", bottom: 20 }}
39-
/>
40-
<Container className="d-flex justify-content-center align-items-center">
41-
<Form onSubmit={handleSubmit} style={{ width: "30%" }}>
42-
<FormGroup className="text-center">
43-
<h2>Register</h2>
44-
</FormGroup>
45-
<FormGroup>
46-
<Label for="name">Details</Label>
47-
<Input
47+
<div className="min-h-screen w-full bg-[#0A0F08] flex items-center justify-center p-4">
48+
{/* Main container */}
49+
<div className="flex flex-col-reverse lg:flex-row items-center justify-center gap-12 lg:gap-16 w-full max-w-7xl">
50+
{/* Cream Register Box */}
51+
<div
52+
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"
53+
style={{
54+
boxShadow: `
55+
inset 0 10px 40px rgba(0, 0, 0, 0.2),
56+
inset 0 15px 20px rgba(0, 0, 0, 0.3),
57+
inset 0 10px 20px rgba(0, 0, 0, 0.2),
58+
inset 4px 4px 4px rgba(0, 0, 0, 0.1),
59+
inset -4px -4px 4px rgba(255, 255, 255, 0.3)
60+
`,
61+
}}
62+
>
63+
<form
64+
onSubmit={handleSubmit}
65+
className="bg-white p-6 rounded-xl shadow-md w-[480px]"
66+
style={{
67+
boxShadow: `
68+
0 20px 40px rgba(0, 0, 0, 0.15),
69+
0 10px 20px rgba(0, 0, 0, 0.1),
70+
0 4px 8px rgba(0, 0, 0, 0.08),
71+
inset 0 1px 0 rgba(255, 255, 255, 0.8)
72+
`,
73+
}}
74+
>
75+
<h2 className="text-xl font-bold text-center mb-6">Sign Up</h2>
76+
<hr className="mb-6" />
77+
78+
{/* Name */}
79+
<label className="block text-sm mb-2 font-medium">Name</label>
80+
<input
4881
type="text"
49-
name="name"
50-
id="name"
51-
placeholder="Name"
5282
value={name}
5383
onChange={(e) => setName(e.target.value)}
84+
className="w-full border border-gray-300 rounded-md px-3 py-1 mb-3 focus:outline-none focus:ring-2 focus:ring-black"
85+
required
5486
/>
55-
</FormGroup>
56-
<FormGroup>
57-
<Input
87+
88+
{/* ID */}
89+
<label className="block text-sm mb-2 font-medium">ID</label>
90+
<input
5891
type="number"
59-
name="ID"
60-
id="ID_No"
61-
placeholder="Student ID"
6292
value={ID}
6393
onChange={(e) => setId(e.target.value)}
94+
className="w-full border border-gray-300 rounded-md px-3 py-1 mb-3 focus:outline-none focus:ring-2 focus:ring-black"
95+
required
6496
/>
65-
</FormGroup>
66-
<FormGroup>
67-
<Label for="email">Email</Label>
68-
<Input
97+
98+
{/* Email */}
99+
<label className="block text-sm mb-2 font-medium">Email</label>
100+
<input
69101
type="email"
70-
name="email"
71-
id="email"
72-
placeholder="Email"
73102
value={email}
74103
onChange={(e) => setEmail(e.target.value)}
104+
className="w-full border border-gray-300 rounded-md px-3 py-1 mb-3 focus:outline-none focus:ring-2 focus:ring-black"
105+
required
75106
/>
76-
</FormGroup>
77-
<FormGroup>
78-
<Label for="password">Create Password</Label>
79-
<Input
107+
108+
{/* Password */}
109+
<label className="block text-sm mb-2 font-medium">Password</label>
110+
<input
80111
type="password"
81-
name="password"
82-
id="password"
83-
placeholder="Password"
84112
value={password}
85113
onChange={(e) => setPassword(e.target.value)}
114+
className="w-full border border-gray-300 rounded-md px-3 py-1 mb-4 focus:outline-none focus:ring-2 focus:ring-black"
115+
required
86116
/>
87-
</FormGroup>
88117

89-
{error && (
90-
<p
91-
className="text-danger text-center"
92-
style={{ fontSize: "0.9rem" }}
118+
{/* Register Button */}
119+
<button
120+
type="submit"
121+
disabled={loading}
122+
className={`w-full py-2 rounded-md mb-3 font-medium ${
123+
loading
124+
? "bg-gray-400 cursor-not-allowed"
125+
: "bg-black text-white hover:opacity-90"
126+
}`}
93127
>
94-
{error}
95-
</p>
96-
)}
128+
{loading ? "Registering..." : "Register"}
129+
</button>
97130

98-
<FormGroup className="text-center">
99-
<Button type="submit" style={{ width: "100%" }} color="success">
100-
Register
101-
</Button>
102-
</FormGroup>
103-
<div
104-
style={{
105-
display: "flex",
106-
alignItems: "center",
107-
justifyContent: "center",
108-
marginBottom: "10px",
109-
}}
110-
>
111-
<hr style={{ width: "40%" }} />
112-
<p style={{ margin: "0 10px" }}>OR</p>
113-
<hr style={{ width: "40%" }} />
114-
</div>
115-
<FormGroup className="text-center">
116-
<a href={`${process.env.REACT_APP_BACKEND_URL}/auth/google`}>
117-
<Button type="button" style={{ width: "100%" }} color="primary">
118-
Sign up with Google <GoogleIcon />
119-
</Button>
131+
<div className="flex items-center my-1">
132+
<hr className="flex-1 border-gray-300" />
133+
<span className="mx-3 text-gray-500 text-sm">OR</span>
134+
<hr className="flex-1 border-gray-300" />
135+
</div>
136+
137+
{/* Google Register */}
138+
<a
139+
href={`${process.env.REACT_APP_BACKEND_URL}/auth/google`}
140+
className="block"
141+
>
142+
<button
143+
type="button"
144+
className="w-full bg-[#23659C] text-white py-2 rounded-md flex items-center justify-center space-x-2 hover:opacity-90 font-medium"
145+
>
146+
<span>Sign up with Google</span>
147+
<GoogleIcon />
148+
</button>
120149
</a>
121-
</FormGroup>
122-
<FormGroup className="text-center">
123-
<Label>
124-
Already have an Account? <a href="/login">Login</a>
125-
</Label>
126-
</FormGroup>
127-
</Form>
128-
</Container>
129-
</Container>
150+
151+
<p className="text-center text-sm mt-4">
152+
Already have an account?{" "}
153+
<a
154+
href="/login"
155+
className="text-[#23659C] hover:underline font-medium"
156+
>
157+
Login
158+
</a>
159+
</p>
160+
</form>
161+
</div>
162+
163+
{/* CoSA Logo outside cream box */}
164+
<div className="flex flex-col items-center text-white">
165+
<img src={cosa} alt="CoSA Logo" className="w-52 h-52 mb-6" />
166+
<h1 className="text-2xl font-semibold">CoSA</h1>
167+
</div>
168+
</div>
169+
</div>
130170
);
131171
}
132-
133-
export default Register;

0 commit comments

Comments
 (0)