Skip to content

Commit f314ff2

Browse files
RishabhJain0721RishabhJain0721
committed
Made seperate pages for student and teacher signup and made API endpoints to send details to backend
1 parent fa32187 commit f314ff2

File tree

6 files changed

+213
-28
lines changed

6 files changed

+213
-28
lines changed

‎frontend/package-lock.json‎

Lines changed: 38 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"@testing-library/jest-dom": "^5.17.0",
1010
"@testing-library/react": "^13.4.0",
1111
"@testing-library/user-event": "^13.5.0",
12+
"axios": "^1.6.5",
13+
"bcryptjs": "^2.4.3",
1214
"react": "^18.2.0",
1315
"react-dom": "^18.2.0",
1416
"react-loader-spinner": "^6.1.6",

‎frontend/src/App.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
33
import { Layout } from "./Layout";
44
import { Home } from "./Pages/Home";
55
import { Login } from "./Pages/Login";
6-
import { Signup } from "./Pages/Signup";
6+
import { StudentSignup } from "./Pages/StudentSignup";
7+
import { TeacherSignup } from "./Pages/TeacherSignup";
78
import { TeacherOrStudent } from "./Pages/TeacherOrStudent";
89

910
function App() {
1011
return (
11-
<div >
12+
<div>
1213
<Router>
1314
<Layout>
1415
<Routes>
1516
<Route path="/" element={<Home />} />
1617
<Route path="/teacherorstudent" element={<TeacherOrStudent />} />
17-
<Route path="/signup" element={<Signup />} />
18+
<Route path="/studentSignup" element={<StudentSignup />} />
19+
<Route path="/teacherSignup" element={<TeacherSignup />} />
1820
<Route path="/login" element={<Login />} />
1921
</Routes>
2022
</Layout>

‎frontend/src/Pages/Signup.js‎ renamed to ‎frontend/src/Pages/StudentSignup.js‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,48 @@
11
import React, { useState } from "react";
2+
import bcrypt from "bcryptjs";
3+
import axios from "axios";
24
import { Link } from "react-router-dom";
35
import { Input } from "../Components/Input";
46
import { BlueButton } from "../Components/Buttons";
57

6-
const Signup = () => {
8+
const StudentSignup = () => {
79
const [name, setName] = useState("");
810
const [email, setEmail] = useState("");
11+
const [roll, setRoll] = useState();
912
const [branch, setBranch] = useState("");
1013
const [year, setYear] = useState("");
1114
const [password, setPassword] = useState("");
1215
const [loading, setLoading] = useState(false);
1316

1417
// Function to handle signup
15-
const handleSignup = (e) => {
18+
const handleSignup = async (e) => {
1619
e.preventDefault();
1720
setLoading(true);
18-
console.log(name, email, branch, year, password);
21+
const hashedPassword = bcrypt.hashSync(password, 10);
22+
console.log(name, email, roll, branch, year, hashedPassword);
23+
try {
24+
const res = await axios.post("/api/studentSignup", {
25+
name: name,
26+
email: email,
27+
roll: roll,
28+
branch: branch,
29+
year: year,
30+
password: hashedPassword,
31+
});
32+
console.log(res);
33+
setLoading(false);
34+
alert("Email verification link sent. Click to verify.");
35+
} catch (error) {
36+
console.error("Error during post request:", error);
37+
}
1938
};
2039

2140
return (
2241
<div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
2342
<div className="bg-gray-800 p-8 rounded-lg shadow-md w-96">
24-
<h2 className="text-2xl font-semibold mb-4 text-center">Sign Up</h2>
43+
<h2 className="text-2xl font-semibold mb-4 text-center">
44+
Student Sign Up
45+
</h2>
2546
<form onSubmit={handleSignup}>
2647
<Input
2748
label="Name"
@@ -37,6 +58,13 @@ const Signup = () => {
3758
value={email}
3859
onChange={(e) => setEmail(e.target.value)}
3960
/>
61+
<Input
62+
label="RollNumber"
63+
type="number"
64+
placeholder="Enter your roll number"
65+
value={roll}
66+
onChange={(e) => setRoll(e.target.value)}
67+
/>
4068
<div className="mb-4">
4169
<label className="block text-sm font-medium text-gray-700">
4270
Branch
@@ -49,17 +77,14 @@ const Signup = () => {
4977
value={branch}
5078
onChange={(e) => setBranch(e.target.value)}
5179
>
52-
<option value="" disabled >
53-
Select Branch
80+
<option value="" disabled selected>
81+
Select branch
5482
</option>
5583
<option value="CSE">CSE</option>
56-
<option value="IT">IT</option>
57-
<option value="ECE">ECE</option>
84+
<option value="DS&AI">DS & AI</option>
5885
<option value="EE">EE</option>
59-
<option value="MECH">MECH</option>
60-
<option value="CIVIL">CIVIL</option>
61-
<option value="CHEM">CHEM</option>
62-
<option value="BIOTECH">BIOTECH</option>
86+
<option value="Mechanical">Mechanical</option>
87+
<option value="Mechatronics">Mechatronics</option>
6388
</select>
6489
</div>
6590
</div>
@@ -94,4 +119,4 @@ const Signup = () => {
94119
);
95120
};
96121

97-
export { Signup };
122+
export { StudentSignup };

‎frontend/src/Pages/TeacherOrStudent.js‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
11
import React from "react";
2+
import { useNavigate } from "react-router-dom";
23
import Student from "../Assets/Student.svg";
34
import Teacher from "../Assets/Teacher.svg";
45

56
const TeacherOrStudent = () => {
7+
const navigate = useNavigate();
8+
9+
const studentSignup = () => {
10+
navigate("/studentSignup");
11+
};
12+
const teacherSignup = () => {
13+
navigate("/teacherSignup");
14+
};
15+
616
return (
7-
<div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
8-
<h1>Are you a teacher or a student?</h1>
9-
<div className="flex flex-row">
10-
<div className="flex flex-col">
11-
<img src={Student} alt="Student" />
12-
<button>Student</button>
17+
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white">
18+
<h1 className=" text-3xl">Are you a student or a teacher?</h1>
19+
<div className="flex flex-row ">
20+
<div className="flex flex-col items-center">
21+
<img
22+
src={Student}
23+
alt="Student"
24+
className="h-52 mt-5 mx-10 cursor-pointer"
25+
onClick={studentSignup}
26+
/>
27+
<p className="text-xl cursor-pointer" onClick={studentSignup}>
28+
Student
29+
</p>
1330
</div>
14-
<div className="flex flex-col">
15-
<img src={Teacher} alt="Teacher" />
16-
<button>Teacher</button>
31+
<div className="flex flex-col items-center">
32+
<img
33+
src={Teacher}
34+
alt="Teacher"
35+
className="h-52 mt-5 mx-10 cursor-pointer"
36+
onClick={teacherSignup}
37+
/>
38+
<p className="text-xl cursor-pointer" onClick={teacherSignup}>
39+
Teacher
40+
</p>
1741
</div>
1842
</div>
1943
</div>

‎frontend/src/Pages/TeacherSignup.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React, { useState } from "react";
2+
import bcrypt from "bcryptjs";
3+
import axios from "axios";
4+
import { Link } from "react-router-dom";
5+
import { Input } from "../Components/Input";
6+
import { BlueButton } from "../Components/Buttons";
7+
8+
const TeacherSignup = () => {
9+
const [name, setName] = useState("");
10+
const [email, setEmail] = useState("");
11+
const [teacherId, setTeacherId] = useState("");
12+
const [dept, setDept] = useState("");
13+
const [password, setPassword] = useState("");
14+
const [loading, setLoading] = useState(false);
15+
16+
// Function to handle signup
17+
const handleSignup = async (e) => {
18+
e.preventDefault();
19+
setLoading(true);
20+
const hashedPassword = bcrypt.hashSync(password, 10);
21+
console.log(name, email, teacherId, dept, hashedPassword);
22+
try {
23+
const res = await axios.post("/api/teacherSignup", {
24+
name: name,
25+
email: email,
26+
teacherId: teacherId,
27+
dept: dept,
28+
password: hashedPassword,
29+
});
30+
console.log(res);
31+
setLoading(false);
32+
alert("Email verification link sent. Click to verify.");
33+
} catch (error) {
34+
console.error("Error during post request:", error);
35+
}
36+
};
37+
38+
return (
39+
<div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
40+
<div className="bg-gray-800 p-8 rounded-lg shadow-md w-96">
41+
<h2 className="text-2xl font-semibold mb-4 text-center">
42+
Teacher Sign Up
43+
</h2>
44+
<form onSubmit={handleSignup}>
45+
<Input
46+
label="Name"
47+
type="text"
48+
placeholder="Enter your name"
49+
value={name}
50+
onChange={(e) => setName(e.target.value)}
51+
/>
52+
<Input
53+
label="Email"
54+
type="email"
55+
placeholder="Enter your email"
56+
value={email}
57+
onChange={(e) => setEmail(e.target.value)}
58+
/>
59+
<Input
60+
label="TeacherId"
61+
type="text"
62+
placeholder="Enter teacher ID"
63+
value={teacherId}
64+
onChange={(e) => setTeacherId(e.target.value)}
65+
/>
66+
67+
<Input
68+
label="Dept"
69+
type="text"
70+
placeholder="Enter department name"
71+
value={dept}
72+
onChange={(e) => setDept(e.target.value)}
73+
/>
74+
75+
<Input
76+
label="Password"
77+
type="password"
78+
placeholder="Enter your password"
79+
value={password}
80+
onChange={(e) => setPassword(e.target.value)}
81+
/>
82+
<div className="text-center">
83+
<BlueButton val="Sign Up" loading={loading} />
84+
</div>
85+
</form>
86+
<p className="mt-4 text-center">
87+
Already have an account?{" "}
88+
<Link to="/login" className="text-blue-500 hover:underline">
89+
Log In
90+
</Link>
91+
</p>
92+
</div>
93+
</div>
94+
);
95+
};
96+
97+
export { TeacherSignup };

0 commit comments

Comments
 (0)