Hands-on Lab: Static Pages

server/djangoproj/settings.py

@@ -28,8 +28,8 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
-CSRF_TRUSTED_ORIGINS = []
+ALLOWED_HOSTS=['localhost','https://akhilsaisamm-8000.theianext-1-labs-prod-misc-tools-us-east-0.proxy.cognitiveclass.ai']
+CSRF_TRUSTED_ORIGINS=['https://akhilsaisamm-8000.theianext-1-labs-prod-misc-tools-us-east-0.proxy.cognitiveclass.ai']
 
 REST_FRAMEWORK = {
     'DEFAULT_AUTHENTICATION_CLASSES': [],
@@ -61,7 +61,9 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [
+            os.path.join(BASE_DIR,'frontend/static')
+        ],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -134,5 +136,7 @@
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-STATICFILES_DIRS = []
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR,'frontend/static')
+]
 

server/djangoproj/urls.py

@@ -20,6 +20,8 @@
 from django.conf import settings
 
 urlpatterns = [
+    path('contact/', TemplateView.as_view(template_name="Contact.html")),
+    path('about/', TemplateView.as_view(template_name="About.html")),
     path('admin/', admin.site.urls),
     path('djangoapp/', include('djangoapp.urls')),
     path('', TemplateView.as_view(template_name="Home.html")),

server/frontend/src/App.js

@@ -1,11 +1,17 @@
-import LoginPanel from "./components/Login/Login"
+// frontend/src/App.js
+
+import LoginPanel from "./components/Login/Login";
+import Register from "./components/Register/Register"; // Assuming Register is the default export
 import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
     <Routes>
+      {/* Route for the Login page */}
       <Route path="/login" element={<LoginPanel />} />
+      {/* Route for the Register page */}
+      <Route path="/register" element={<Register/>}/>
     </Routes>
   );
 }
-export default App;
+export default App

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import "./Register.css";
+import user_icon from "../assets/person.png"
+import email_icon from "../assets/email.png"
+import password_icon from "../assets/password.png"
+import close_icon from "../assets/close.png"
+
+const Register = () => {
+// State variables for form inputs
+  const [userName, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setlastName] = useState("");
+
+// Redirect to home
+  const gohome = ()=> {
+    window.location.href = window.location.origin;
+  }
+
+// Handle form submission
+  const register = async (e) => {
+    e.preventDefault();
+
+    let register_url = window.location.origin+"/djangoapp/register";
+
+// Send POST request to register endpoint
+    const res = await fetch(register_url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            "userName": userName,
+            "password": password,
+            "firstName":firstName,
+            "lastName":lastName,
+            "email":email
+        }),
+    });
+
+    const json = await res.json();
+    if (json.status) {
+    // Save username in session and reload home
+        sessionStorage.setItem('username', json.userName);
+        window.location.href = window.location.origin;
+    }
+    else if (json.error === "Already Registered") {
+      alert("The user with same username is already registered");
+      window.location.href = window.location.origin;
+    }
+};
+
+  return(
+    <div className="register_container" style={{width: "50%"}}>
+      <div className="header" style={{display: "flex",flexDirection: "row", justifyContent: "space-between"}}>
+          <span className="text" style={{flexGrow:"1"}}>SignUp</span> 
+          <div style={{display: "flex",flexDirection: "row", justifySelf: "end", alignSelf: "start" }}>
+          <a href="/" onClick={()=>{gohome()}} style={{justifyContent: "space-between", alignItems:"flex-end"}}>
+            <img style={{width:"1cm"}} src={close_icon} alt="X"/>
+          </a>
+          </div>
+          <hr/>
+        </div>
+
+        <form onSubmit={register}>
+        <div className="inputs">
+          <div className="input">
+            <img src={user_icon} className="img_icon" alt='Username'/>
+            <input type="text"  name="username" placeholder="Username" className="input_field" onChange={(e) => setUserName(e.target.value)}/>
+          </div>
+          <div>
+            <img src={user_icon} className="img_icon" alt='First Name'/>
+            <input type="text"  name="first_name" placeholder="First Name" className="input_field" onChange={(e) => setFirstName(e.target.value)}/>
+          </div>
+
+          <div>
+            <img src={user_icon} className="img_icon" alt='Last Name'/>
+            <input type="text"  name="last_name" placeholder="Last Name" className="input_field" onChange={(e) => setlastName(e.target.value)}/>
+          </div>
+
+          <div>
+            <img src={email_icon} className="img_icon" alt='Email'/>
+            <input type="email"  name="email" placeholder="email" className="input_field" onChange={(e) => setEmail(e.target.value)}/>
+          </div>
+
+          <div className="input">
+            <img src={password_icon} className="img_icon" alt='password'/>
+            <input name="psw" type="password"  placeholder="Password" className="input_field" onChange={(e) => setPassword(e.target.value)}/>
+          </div>
+
+        </div>
+        <div className="submit_panel">
+          <input className="submit" type="submit" value="Register"/>
+        </div>
+      </form>
+      </div>
+  )
+}
+
+export default Register;

server/frontend/static/About.html

@@ -1,6 +1,8 @@
 <html>
 <head>
   <!-- Link the style sheet here -->
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/bootstrap.min.css">
 </head>
 <div>
   <nav class="navbar navbar-expand-lg navbar-light" style="background-color:darkturquoise; height: 1in;">
@@ -28,6 +30,8 @@ <h2 style="padding-right: 5%;">Dealerships</h2>
     <div class="card" style="width: 80%;margin: auto; margin-top:5%;">
       <div class="banner" name="about-header">
       <!-- Insert header information here -->
+      <h1>About Us</h1>
+      Welcome to Best Cars dealership, home to the best cars in North America. We deal in sale of domestic and imported cars at reasonable prices.
       </div>
       <div style="display: flex;flex-direction: row; margin:auto">
       <div class="card" style="width: 30%;">

server/frontend/static/Contact.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <style>
+        body { font-family: sans-serif; margin: 20px; }
+        .container { max-width: 600px; margin: auto; }
+        .form-group { margin-bottom: 15px; }
+        label { display: block; margin-bottom: 5px; }
+        input[type="text"], input[type="email"], textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box; /* Ensures padding doesn't affect width */
+        }
+        button {
+            background-color: #4CAF50; /* Example color */
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Contact Us</h2>
+        <p>Please fill out the form below to get in touch with us.</p>
+        <form action="#" method="POST"> <!-- The 'action' attribute should point to your backend script -->
+            <div class="form-group">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <div class="form-group">
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+            <div class="form-group">
+                <button type="submit">Submit</button>
+            </div>
+        </form>
+        <h3>Other ways to contact us:</h3>
+        <ul>
+            <li>**Customer Service:** support@bestcars.com</li>
+            <li>**National Advertising:** NationalSales@bestcars.com</li>
+            <li>**Public Relations:** PR@bestcars.com</li>
+            <li>**Office Phone:** 312-611-1111</li>
+        </ul>
+    </div>
+</body>
+</html>

server/frontend/static/Home.html

@@ -8,6 +8,25 @@
 
 const logout = async (e) => {
 //Include the code for logout here.
+// Build logout URL and Make GET request to logout endpoint
+  let logout_url = window.location.origin+"/djangoapp/logout";
+  const res = await fetch(logout_url, {
+    method: "GET",
+  });
+
+  const json = await res.json();
+  if (json) {
+    // Clear session storage and reload page
+    let username = sessionStorage.getItem('username');
+    sessionStorage.removeItem('username');
+    window.location.href = window.location.origin;
+    window.location.reload();
+     // Notify user of logout
+    alert("Logging out "+username+"...") 
+  }
+  else {
+    alert("The user could not be logged out.")
+  }
 };
 
 let checkSession = ()=>{