Merge pull request #1 from Jugador7/retry

Retry

server/djangoapp/urls.py

@@ -1,16 +1,21 @@
 # Uncomment the imports before you add the code
-# from django.urls import path
+from django.urls import path
 from django.conf.urls.static import static
 from django.conf import settings
-# from . import views
+from django.contrib.auth import views as auth_views
+from django.http import HttpResponse
+from . import views
 
 app_name = 'djangoapp'
+
 urlpatterns = [
     # # path for registration
 
     # path for login
-    # path(route='login', view=views.login_user, name='login'),
-
+    path(route='login', view=views.login_user, name='login'),
+    path('logout/', views.logout_request, name='logout'),
+    path('register/', views.registration, name='register'),
+
     # path for dealer reviews view
 
     # path for add a review view

server/djangoapp/views.py

@@ -1,12 +1,12 @@
 # Uncomment the required imports before adding the code
 
-# from django.shortcuts import render
-# from django.http import HttpResponseRedirect, HttpResponse
-# from django.contrib.auth.models import User
-# from django.shortcuts import get_object_or_404, render, redirect
-# from django.contrib.auth import logout
-# from django.contrib import messages
-# from datetime import datetime
+from django.shortcuts import render
+from django.http import HttpResponseRedirect, HttpResponse
+from django.contrib.auth.models import User
+from django.shortcuts import get_object_or_404, render, redirect
+from django.contrib.auth import logout
+from django.contrib import messages
+from datetime import datetime
 
 from django.http import JsonResponse
 from django.contrib.auth import login, authenticate
@@ -39,13 +39,43 @@ def login_user(request):
     return JsonResponse(data)
 
 # Create a `logout_request` view to handle sign out request
-# def logout_request(request):
-# ...
+@csrf_exempt
+def logout_request(request):
+    if request.method == 'POST':
+        logout(request)
+        return JsonResponse({'status': 'success'})
+    return JsonResponse({'status': 'fail', 'message': 'Invalid request method'}, status=400)
 
 # Create a `registration` view to handle sign up request
-# @csrf_exempt
-# def registration(request):
-# ...
+@csrf_exempt
+def registration(request):
+    context = {}
+    data = json.loads(request.body)
+    username = data['userName']
+    password = data['password']
+    first_name = data['firstName']
+    last_name = data['lastName']
+    email = data['email']
+    username_exist = False
+    email_exist = False
+    try:
+        # Check if user already exists
+        User.objects.get(username=username)
+        username_exist = True
+    except:
+        # If not, simply log this is a new user
+        logger.debug("{} is new user".format(username))
+    # If it is a new user
+    if not username_exist:
+        # Create user in auth_user table
+        user = User.objects.create_user(username=username, first_name=first_name, last_name=last_name,password=password, email=email)
+        # Login the user and redirect to list page
+        login(request, user)
+        data = {"userName":username,"status":"Authenticated"}
+        return JsonResponse(data)
+    else :
+        data = {"userName":username,"error":"Already Registered"}
+        return JsonResponse(data)
 
 # # Update the `get_dealerships` view to render the index page with
 # a list of dealerships

server/djangoproj/settings.py

@@ -14,6 +14,8 @@
 from pathlib import Path
 
 
+APPEND_SLASH = True
+
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
@@ -51,6 +53,7 @@
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
@@ -62,7 +65,9 @@
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
         'DIRS': [
-            os.path.join(BASE_DIR,'frontend/static')
+            os.path.join(BASE_DIR, 'frontend/static'),
+            os.path.join(BASE_DIR, 'frontend/build'),
+            os.path.join(BASE_DIR, 'frontend/build/static'),
         ],
         'APP_DIRS': True,
         'OPTIONS': {
@@ -137,6 +142,14 @@
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
 STATICFILES_DIRS = [
-    os.path.join(BASE_DIR,'frontend/static')
+    os.path.join(BASE_DIR, 'frontend/static'),
+    os.path.join(BASE_DIR, 'frontend/build'),
+    os.path.join(BASE_DIR, 'frontend/build/static'),
 ]
 
+LOGOUT_REDIRECT_URL = '/'
+
+SESSION_COOKIE_NAME = 'sessionid'
+SESSION_EXPIRE_AT_BROWSER_CLOSE = True
+
+

server/djangoproj/urls.py

@@ -25,4 +25,6 @@
     path('', TemplateView.as_view(template_name="Home.html")),
     path('about/', TemplateView.as_view(template_name="About.html")),
     path('contact/', TemplateView.as_view(template_name="Contact.html")),
+    path('login/', TemplateView.as_view(template_name="index.html")),
+    path('register/', TemplateView.as_view(template_name="index.html")),
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

server/frontend/src/App.js

@@ -1,10 +1,12 @@
 import LoginPanel from "./components/Login/Login"
+import Register from "./components/Register/Register"
 import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
     <Routes>
       <Route path="/login" element={<LoginPanel />} />
+      <Route path="/register" element={<Register />} />
     </Routes>
   );
 }

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

@@ -0,0 +1,96 @@
+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 = () => {
+  const [userName, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setlastName] = useState("");
+
+  const gohome = () => {
+    window.location.href = window.location.origin;
+  }
+
+  const register = async (e) => {
+    e.preventDefault();
+
+    let register_url = window.location.origin + "/djangoapp/register/";  // Ensure trailing slash
+
+    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) {
+      sessionStorage.setItem('username', json.userName);
+      window.location.href = window.location.origin;
+    }
+    else if (json.error === "Already Registered") {
+      alert("The user with the 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;