Skip to content

Commit 50e7b8f

Browse files
iintiiiintii
committed
y
1 parent bb7d0a1 commit 50e7b8f

File tree

3 files changed

+168
-68
lines changed

3 files changed

+168
-68
lines changed

‎server/frontend/src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import LoginPanel from "./components/Login/Login"
22
import { Routes, Route } from "react-router-dom";
3+
import Register from "./components/Register/Register";
34

45
function App() {
56
return (
67
<Routes>
78
<Route path="/login" element={<LoginPanel />} />
9+
<Route path="/register" element = {<Register/>}/>
810
</Routes>
911
);
1012
}

‎server/frontend/src/components/Register/Register.jsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { useState } from "react";
2+
import "./Register.css";
3+
import user_icon from "../assets/person.png"
4+
import email_icon from "../assets/email.png"
5+
import password_icon from "../assets/password.png"
6+
import close_icon from "../assets/close.png"
7+
8+
const Register = () => {
9+
// State variables for form inputs
10+
const [userName, setUserName] = useState("");
11+
const [password, setPassword] = useState("");
12+
const [email, setEmail] = useState("");
13+
const [firstName, setFirstName] = useState("");
14+
const [lastName, setlastName] = useState("");
15+
16+
// Redirect to home
17+
const gohome = ()=> {
18+
window.location.href = window.location.origin;
19+
}
20+
21+
// Handle form submission
22+
const register = async (e) => {
23+
e.preventDefault();
24+
25+
let register_url = window.location.origin+"/djangoapp/register";
26+
27+
// Send POST request to register endpoint
28+
const res = await fetch(register_url, {
29+
method: "POST",
30+
headers: {
31+
"Content-Type": "application/json",
32+
},
33+
body: JSON.stringify({
34+
"userName": userName,
35+
"password": password,
36+
"firstName":firstName,
37+
"lastName":lastName,
38+
"email":email
39+
}),
40+
});
41+
42+
const json = await res.json();
43+
if (json.status) {
44+
// Save username in session and reload home
45+
sessionStorage.setItem('username', json.userName);
46+
window.location.href = window.location.origin;
47+
}
48+
else if (json.error === "Already Registered") {
49+
alert("The user with same username is already registered");
50+
window.location.href = window.location.origin;
51+
}
52+
};
53+
54+
return(
55+
<div className="register_container" style={{width: "50%"}}>
56+
<div className="header" style={{display: "flex",flexDirection: "row", justifyContent: "space-between"}}>
57+
<span className="text" style={{flexGrow:"1"}}>SignUp</span>
58+
<div style={{display: "flex",flexDirection: "row", justifySelf: "end", alignSelf: "start" }}>
59+
<a href="/" onClick={()=>{gohome()}} style={{justifyContent: "space-between", alignItems:"flex-end"}}>
60+
<img style={{width:"1cm"}} src={close_icon} alt="X"/>
61+
</a>
62+
</div>
63+
<hr/>
64+
</div>
65+
66+
<form onSubmit={register}>
67+
<div className="inputs">
68+
<div className="input">
69+
<img src={user_icon} className="img_icon" alt='Username'/>
70+
<input type="text" name="username" placeholder="Username" className="input_field" onChange={(e) => setUserName(e.target.value)}/>
71+
</div>
72+
<div>
73+
<img src={user_icon} className="img_icon" alt='First Name'/>
74+
<input type="text" name="first_name" placeholder="First Name" className="input_field" onChange={(e) => setFirstName(e.target.value)}/>
75+
</div>
76+
77+
<div>
78+
<img src={user_icon} className="img_icon" alt='Last Name'/>
79+
<input type="text" name="last_name" placeholder="Last Name" className="input_field" onChange={(e) => setlastName(e.target.value)}/>
80+
</div>
81+
82+
<div>
83+
<img src={email_icon} className="img_icon" alt='Email'/>
84+
<input type="email" name="email" placeholder="email" className="input_field" onChange={(e) => setEmail(e.target.value)}/>
85+
</div>
86+
87+
<div className="input">
88+
<img src={password_icon} className="img_icon" alt='password'/>
89+
<input name="psw" type="password" placeholder="Password" className="input_field" onChange={(e) => setPassword(e.target.value)}/>
90+
</div>
91+
92+
</div>
93+
<div className="submit_panel">
94+
<input className="submit" type="submit" value="Register"/>
95+
</div>
96+
</form>
97+
</div>
98+
)
99+
}
100+
101+
export default Register;

‎server/frontend/static/Home.html

Lines changed: 65 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,84 @@
11
<html>
22
<head>
3-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
4-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
5-
<link rel="stylesheet" href="static/style.css">
6-
<link rel="stylesheet" href="static/bootstrap.min.css">
3+
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
4+
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
5+
  <link rel="stylesheet" href="static/style.css">
6+
  <link rel="stylesheet" href="static/bootstrap.min.css">
77
<script>
88

9-
const logout = async (e) => {
10-
//Include the code for logout here.
11-
};
9+
const logout = async (e) => { // This function should contain the logout logic
10+
// Build logout URL and Make GET request to logout endpoint
11+
let logout_url = window.location.origin+"/djangoapp/logout";
12+
const res = await fetch(logout_url, {
13+
method: "GET",
14+
});
1215

13-
let checkSession = ()=>{
14-
let curr_user = sessionStorage.getItem("username");
15-
16-
if (curr_user && curr_user !== "") {
17-
document.getElementById("loginlogout").innerHTML =
18-
'<span class="homepage_links">' + curr_user +'</span>' +
19-
'<a class="homepage_links" onclick="logout()" href="/">Logout</a>'
20-
} else {
21-
document.getElementById("loginlogout").innerHTML =
22-
'<a class="homepage_links" href="/login">Login</a>'+
23-
'<a class="homepage_links" href="/register">Register</a>'
24-
}
25-
}
16+
const json = await res.json();
17+
if (json) {
18+
// Clear session storage and reload page
19+
let username = sessionStorage.getItem('username'); // Get username before removing it
20+
sessionStorage.removeItem('username');
21+
window.location.href = window.location.origin; // Redirect to home page
22+
window.location.reload(); // Reload the page to update UI
23+
// Notify user of logout
24+
alert("Logging out "+username+"...")
25+
}
26+
else {
27+
alert("The user could not be logged out.")
28+
}
29+
}; // End of the logout function
2630

31+
let checkSession = ()=>{
32+
  let curr_user = sessionStorage.getItem("username");
2733

28-
// Build logout URL and Make GET request to logout endpoint
29-
let logout_url = window.location.origin+"/djangoapp/logout";
30-
const res = await fetch(logout_url, {
31-
method: "GET",
32-
});
33-
34-
const json = await res.json();
35-
if (json) {
36-
// Clear session storage and reload page
37-
let username = sessionStorage.getItem('username');
38-
sessionStorage.removeItem('username');
39-
window.location.href = window.location.origin;
40-
window.location.reload();
41-
// Notify user of logout
42-
alert("Logging out "+username+"...")
43-
}
44-
else {
45-
alert("The user could not be logged out.")
46-
}
34+
  if (curr_user && curr_user !== "") {
35+
    document.getElementById("loginlogout").innerHTML =
36+
    '<span class="homepage_links">' + curr_user +'</span>' +
37+
    '<a class="homepage_links" onclick="logout()" href="#">Logout</a>' // Changed href to # since JS handles navigation
38+
  } else {
39+
    document.getElementById("loginlogout").innerHTML =
40+
    '<a class="homepage_links" href="/login">Login</a>'+
41+
    '<a class="homepage_links"  href="/register">Register</a>'
42+
  }
43+
}
4744

4845

4946
</script>
5047
</head>
5148
<body onload="checkSession()">
5249
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:darkturquoise; height: 1in;">
53-
<div class="container-fluid">
54-
<h2 style="padding-right: 5%;">Dealerships</h2>
55-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
56-
<span class="navbar-toggler-icon"></span>
57-
</button>
58-
<div class="collapse navbar-collapse" id="navbarText">
59-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
60-
<li class="nav-item">
61-
<a class="nav-link active" style="font-size: larger;" aria-current="page" href="#">Home</a>
62-
</li>
63-
<li class="nav-item">
64-
<a class="nav-link" style="font-size: larger;" href="/about">About Us</a>
65-
</li>
66-
<li class="nav-item">
67-
<a class="nav-link" style="font-size: larger;" href="/contact">Contact Us</a>
68-
</li>
69-
</ul>
70-
<span class="navbar-text">
71-
<div class="loginlink" id="loginlogout">
72-
</div>
73-
</span>
74-
</div>
75-
</div>
50+
  <div class="container-fluid">
51+
    <h2 style="padding-right: 5%;">Dealerships</h2>
52+
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
53+
      <span class="navbar-toggler-icon"></span>
54+
    </button>
55+
    <div class="collapse navbar-collapse" id="navbarText">
56+
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
57+
        <li class="nav-item">
58+
          <a class="nav-link active" style="font-size: larger;" aria-current="page" href="#">Home</a>
59+
        </li>
60+
        <li class="nav-item">
61+
          <a class="nav-link" style="font-size: larger;" href="/about">About Us</a>
62+
        </li>
63+
        <li class="nav-item">
64+
          <a class="nav-link" style="font-size: larger;" href="/contact">Contact Us</a>
65+
        </li>
66+
      </ul>
67+
      <span class="navbar-text">
68+
        <div class="loginlink" id="loginlogout">
69+
        </div>
70+
        </span>
71+
    </div>
72+
  </div>
7673
</nav>
7774
<div style="display: flex;flex-direction: column;">
7875
<div class="card" style="width: 50%;margin-top: 50px;align-self: center;">
79-
<img src="static/car_dealership.jpg" class="card-img-top" alt="...">
80-
<div class="banner">
81-
<h5>Welcome to our Dealerships!</h5>
82-
<a href="/dealers" class="btn" style="background-color: aqua;margin:10px">View Dealerships</a>
83-
</div>
76+
  <img src="static/car_dealership.jpg" class="card-img-top" alt="...">
77+
  <div class="banner">
78+
    <h5>Welcome to our Dealerships!</h5>
79+
    <a href="/dealers" class="btn" style="background-color: aqua;margin:10px">View Dealerships</a>
80+
  </div>
8481
</div>
8582
</div>
8683
</body>
87-
</html>
84+
</html>

0 commit comments

Comments
 (0)