From a2132ae9d65985bf4c67c0656a87786651e921f3 Mon Sep 17 00:00:00 2001 From: Sina Bolouri Date: Mon, 3 Nov 2025 00:09:39 -0800 Subject: [PATCH 01/14] Django Models --- server/database/app.js | 33 ++- server/database/docker-compose.yml | 43 ++- server/djangoapp/admin.py | 17 +- server/djangoapp/models.py | 113 ++++++-- server/djangoapp/populate.py | 30 +- server/djangoapp/urls.py | 38 ++- server/djangoapp/views.py | 266 +++++++++++++++--- server/djangoproj/settings.py | 13 +- server/djangoproj/urls.py | 4 + server/frontend/package-lock.json | 30 +- server/frontend/src/App.js | 5 + server/frontend/src/Navbar.jsx | 39 +++ .../frontend/src/components/Header/Header.jsx | 7 +- .../src/components/Register/Register.jsx | 86 ++++++ server/frontend/static/About.html | 12 +- server/frontend/static/Contact.html | 104 +++++++ server/frontend/static/Home.html | 186 ++++++++---- server/frontend/static/person.avif | Bin 0 -> 38907 bytes server/frontend/static/person.png | Bin 138137 -> 0 bytes server/frontend/static/person2.avif | Bin 0 -> 25911 bytes server/frontend/static/person3.avif | Bin 0 -> 76438 bytes server/frontend/static/style.css | 169 ++++++++++- server/package-lock.json | 13 + 23 files changed, 1046 insertions(+), 162 deletions(-) create mode 100644 server/frontend/src/Navbar.jsx create mode 100644 server/frontend/src/components/Register/Register.jsx create mode 100644 server/frontend/static/Contact.html create mode 100644 server/frontend/static/person.avif delete mode 100644 server/frontend/static/person.png create mode 100644 server/frontend/static/person2.avif create mode 100644 server/frontend/static/person3.avif create mode 100644 server/package-lock.json diff --git a/server/database/app.js b/server/database/app.js index 00f52b2008..124a4783c7 100644 --- a/server/database/app.js +++ b/server/database/app.js @@ -58,17 +58,42 @@ app.get('/fetchReviews/dealer/:id', async (req, res) => { // Express route to fetch all dealerships app.get('/fetchDealers', async (req, res) => { -//Write your code here + try { + const dealers = await Dealerships.find({}).lean(); + res.status(200).json(dealers); + } catch (err) { + console.error('fetchDealers error:', err); + res.status(500).json({ error: 'Error fetching dealers' }); + } }); // Express route to fetch Dealers by a particular state app.get('/fetchDealers/:state', async (req, res) => { -//Write your code here + try { + const state = req.params.state; + const dealers = await Dealerships.find({ + $or: [ + { state: new RegExp(`^${state}$`, 'i') }, // if your schema has `state` + { st: new RegExp(`^${state}$`, 'i') }, // or `st` (2-letter) + ], + }).lean(); + res.status(200).json(dealers); + } catch (err) { + console.error('fetchDealers/:state error:', err); + res.status(500).json({ error: 'Error fetching dealers by state' }); + } }); - // Express route to fetch dealer by a particular id app.get('/fetchDealer/:id', async (req, res) => { -//Write your code here + try { + const id = Number(req.params.id); + const dealer = await Dealerships.findOne({ id }).lean(); + if (!dealer) return res.status(404).json({ error: 'Dealer not found' }); + res.status(200).json(dealer); + } catch (err) { + console.error('fetchDealer/:id error:', err); + res.status(500).json({ error: 'Error fetching dealer' }); + } }); //Express route to insert review diff --git a/server/database/docker-compose.yml b/server/database/docker-compose.yml index 95c4909643..7a2b1702b8 100644 --- a/server/database/docker-compose.yml +++ b/server/database/docker-compose.yml @@ -1,22 +1,49 @@ version: '3.9' +# services: +# # Mongodb service +# mongo_db: +# container_name: db_container +# image: mongo:latest +# ports: +# - 27017:27017 +# restart: always +# volumes: +# - mongo_data:/data/db + +# # Node api service +# api: +# image: nodeapp +# ports: +# - 3030:3030 +# depends_on: +# - mongo_db + +# volumes: +# mongo_data: {} + + +# docker-compose.yml services: - # Mongodb service mongo_db: container_name: db_container - image: mongo:latest + image: mongo:6-jammy # good for Intel/Apple Silicon ports: - - 27017:27017 - restart: always + - "27017:27017" + restart: unless-stopped volumes: - mongo_data:/data/db - # Node api service api: - image: nodeapp + build: + context: . # <— build from the current folder + dockerfile: Dockerfile + image: nodemap:latest # optional: name the built image ports: - - 3030:3030 - depends_on: + - "3030:3030" + environment: + - MONGO_URL=mongodb://mongo_db:27017/dealerships # <— use service name, not localhost + depends_on: - mongo_db volumes: diff --git a/server/djangoapp/admin.py b/server/djangoapp/admin.py index 433657fc64..3626bfc82b 100644 --- a/server/djangoapp/admin.py +++ b/server/djangoapp/admin.py @@ -1,7 +1,3 @@ -# from django.contrib import admin -# from .models import related models - - # Register your models here. # CarModelInline class @@ -10,4 +6,15 @@ # CarMakeAdmin class with CarModelInline -# Register models here + + +from django.contrib import admin +from .models import CarMake, CarModel + +@admin.register(CarMake) +class CarMakeAdmin(admin.ModelAdmin): + list_display = ('name', 'description') + +@admin.register(CarModel) +class CarModelAdmin(admin.ModelAdmin): + list_display = ('name', 'make', 'type', 'year') diff --git a/server/djangoapp/models.py b/server/djangoapp/models.py index eb101a68c8..2e4bf3fc7c 100644 --- a/server/djangoapp/models.py +++ b/server/djangoapp/models.py @@ -1,25 +1,104 @@ -# Uncomment the following imports before adding the Model code - # from django.db import models # from django.utils.timezone import now # from django.core.validators import MaxValueValidator, MinValueValidator +# # Car manufacturer (e.g., Toyota, BMW) +# class CarMake(models.Model): +# name = models.CharField(max_length=100, unique=True) +# description = models.TextField(blank=True) +# headquarters = models.CharField(max_length=120, blank=True) +# founded = models.IntegerField( +# null=True, blank=True, +# help_text="Year the make was founded (optional)" +# ) +# created_at = models.DateTimeField(default=now, editable=False) + +# class Meta: +# ordering = ["name"] + +# def __str__(self): +# return self.name + + +# # Specific model of a make (e.g., Corolla, 3-Series) +# class CarModel(models.Model): +# # one make → many models +# make = models.ForeignKey(CarMake, on_delete=models.CASCADE, related_name="models") + +# # basic fields +# name = models.CharField(max_length=100) + +# # dealer id stored in Cloudant / external DB (as per lab) +# dealer_id = models.IntegerField( +# help_text="Dealer id of the model in Cloudant database" +# ) + +# # limited types +# SEDAN = "SEDAN" +# SUV = "SUV" +# WAGON = "WAGON" +# COUPE = "COUPE" +# HATCH = "HATCH" +# TRUCK = "TRUCK" + +# TYPE_CHOICES = [ +# (SEDAN, "Sedan"), +# (SUV, "SUV"), +# (WAGON, "Wagon"), +# (COUPE, "Coupe"), +# (HATCH, "Hatchback"), +# (TRUCK, "Truck"), +# ] +# type = models.CharField(max_length=10, choices=TYPE_CHOICES, default=SEDAN) + +# # year constrained to 2015–2023 per instructions +# year = models.IntegerField( +# validators=[MinValueValidator(2015), MaxValueValidator(2023)] +# ) + +# # optional extras +# color = models.CharField(max_length=40, blank=True) +# created_at = models.DateTimeField(default=now, editable=False) + +# class Meta: +# unique_together = ("make", "name", "year") +# ordering = ["make__name", "name", "-year"] + +# def __str__(self): +# return f"{self.make.name} {self.name} ({self.year})" + + + +from django.db import models +from django.core.validators import MinValueValidator, MaxValueValidator -# Create your models here. +class CarMake(models.Model): + name = models.CharField(max_length=100, unique=True) + description = models.TextField(blank=True) + # headquarters = models.CharField(max_length=120, blank=True, null=True, default="") + def __str__(self): + return self.name -# Create a Car Make model `class CarMake(models.Model)`: -# - Name -# - Description -# - Any other fields you would like to include in car make model -# - __str__ method to print a car make object +class CarModel(models.Model): + SEDAN = "SEDAN" + SUV = "SUV" + WAGON = "WAGON" + COUPE = "COUPE" + HATCH = "HATCH" + TRUCK = "TRUCK" + TYPE_CHOICES = [ + (SEDAN, "Sedan"), + (SUV, "SUV"), + (WAGON, "Wagon"), + (COUPE, "Coupe"), + (HATCH, "Hatchback"), + (TRUCK, "Truck"), + ] + make = models.ForeignKey(CarMake, on_delete=models.CASCADE, related_name="models") + name = models.CharField(max_length=100) + type = models.CharField(max_length=20, choices=TYPE_CHOICES) + year = models.IntegerField(validators=[MinValueValidator(2015), MaxValueValidator(2023)]) -# Create a Car Model model `class CarModel(models.Model):`: -# - Many-To-One relationship to Car Make model (One Car Make has many -# Car Models, using ForeignKey field) -# - Name -# - Type (CharField with a choices argument to provide limited choices -# such as Sedan, SUV, WAGON, etc.) -# - Year (IntegerField) with min value 2015 and max value 2023 -# - Any other fields you would like to include in car model -# - __str__ method to print a car make object + def __str__(self): + return f"{self.make.name} {self.name} ({self.year})" diff --git a/server/djangoapp/populate.py b/server/djangoapp/populate.py index 1927e09e18..dd0d9591a9 100644 --- a/server/djangoapp/populate.py +++ b/server/djangoapp/populate.py @@ -1,2 +1,30 @@ +from .models import CarMake, CarModel + def initiate(): - print("Populate not implemented. Add data manually") + if CarMake.objects.exists() and CarModel.objects.exists(): + return # already populated + + makes = [ + {"name": "NISSAN", "description": "Great cars. Japanese technology"}, + {"name": "Mercedes", "description": "Great cars. German technology"}, + {"name": "Audi", "description": "Great cars. German technology"}, + {"name": "Kia", "description": "Great cars. Korean technology"}, + {"name": "Toyota", "description": "Great cars. Japanese technology"}, + ] + + make_objs = {} + for m in makes: + make_objs[m["name"]] = CarMake.objects.create(**m) + + models = [ + {"name": "Pathfinder", "type": "SUV", "year": 2023, "make": make_objs["NISSAN"]}, + {"name": "Qashqai", "type": "SUV", "year": 2023, "make": make_objs["NISSAN"]}, + {"name": "A-Class", "type": "Sedan","year": 2023, "make": make_objs["Mercedes"]}, + {"name": "CLA", "type": "Coupe","year": 2023, "make": make_objs["Mercedes"]}, + {"name": "Q7", "type": "SUV", "year": 2023, "make": make_objs["Audi"]}, + {"name": "Sportage", "type": "SUV", "year": 2023, "make": make_objs["Kia"]}, + {"name": "Sorento", "type": "SUV", "year": 2023, "make": make_objs["Kia"]}, + {"name": "Camry", "type": "Sedan","year": 2023, "make": make_objs["Toyota"]}, + {"name": "Corolla", "type": "Sedan","year": 2023, "make": make_objs["Toyota"]}, + ] + CarModel.objects.bulk_create([CarModel(**row) for row in models]) diff --git a/server/djangoapp/urls.py b/server/djangoapp/urls.py index 0edc274f90..d75aaf709e 100644 --- a/server/djangoapp/urls.py +++ b/server/djangoapp/urls.py @@ -1,18 +1,36 @@ -# Uncomment the imports before you add the code -# from django.urls import path +# urls.py (inside djangoapp) + +# Uncommented imports +from django.urls import path from django.conf.urls.static import static from django.conf import settings -# from . import views +from django.views.generic import TemplateView +from . import views + +app_name = "djangoapp" -app_name = 'djangoapp' urlpatterns = [ - # # path for registration + # Home / dealerships list + path("", views.get_dealerships, name="index"), + path("dealers/", views.get_dealerships, name="dealers"), - # path for login - # path(route='login', view=views.login_user, name='login'), + # Contact page (uses a template called contact.html) + path("contact/", TemplateView.as_view(template_name="contact.html"), name="contact"), - # path for dealer reviews view + # Auth JSON endpoints + path("register", views.registration, name="register"), + path("login", views.login_user, name="login"), + path("logout", views.logout_request, name="logout"), + path("api/whoami", views.whoami, name="api-whoami"), - # path for add a review view + # Dealer details + reviews + path("dealer//", views.get_dealer_details, name="dealer_details"), + path("dealer//reviews/", views.get_dealer_reviews, name="dealer_reviews"), + path(route='get_cars', view=views.get_cars, name ='getcars'), + # Add a review (requires login in the view) + path("dealer//add-review/", views.add_review, name="add_review"), +] -] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) +# Serve static & media in development +urlpatterns += static(settings.STATIC_URL, document_root=getattr(settings, "STATIC_ROOT", None)) +urlpatterns += static(settings.MEDIA_URL, document_root=getattr(settings, "MEDIA_ROOT", None)) diff --git a/server/djangoapp/views.py b/server/djangoapp/views.py index b16409f419..59628e2d81 100644 --- a/server/djangoapp/views.py +++ b/server/djangoapp/views.py @@ -1,65 +1,239 @@ -# 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.http import JsonResponse -from django.contrib.auth import login, authenticate + + +# views.py + +# --- Required imports (uncommented) --- +from django.shortcuts import render, redirect, get_object_or_404 +from django.http import HttpResponseRedirect, HttpResponse, JsonResponse +from django.contrib.auth.models import User +from django.contrib.auth import login, authenticate, logout +from django.contrib import messages +from django.views.decorators.csrf import csrf_exempt +from django.contrib.auth.decorators import login_required +from datetime import datetime import logging import json -from django.views.decorators.csrf import csrf_exempt -# from .populate import initiate - +from django.views.decorators.http import require_http_methods +from .models import CarMake, CarModel +from .populate import initiate -# Get an instance of a logger logger = logging.getLogger(__name__) +# ----------------------------------------------------------------------------- +# TEMP STUBS so the views render without your cloud functions. +# Replace these with your actual helpers, e.g.: +# from .restapis import get_dealers_from_cf, get_dealer_reviews_from_cf, post_review +# ----------------------------------------------------------------------------- +def _stub_get_dealers_from_cf(): + # Minimal objects used by the templates. Replace with real data. + return [ + {"id": 1, "full_name": "Seattle Auto Plaza", "city": "Seattle", "state": "WA"}, + {"id": 2, "full_name": "Portland Motors", "city": "Portland", "state": "OR"}, + ] -# Create your views here. +def _stub_get_dealer_by_id(dealer_id: int): + for d in _stub_get_dealers_from_cf(): + if d["id"] == int(dealer_id): + return d + return None -# Create a `login_request` view to handle sign in request +def _stub_get_dealer_reviews_from_cf(dealer_id: int): + return [ + {"name": "Sina", "review": "Great service!", "purchase": True, "purchase_date": "2024-08-12"}, + {"name": "Alex", "review": "Nice staff, quick process.", "purchase": False}, + ] + +def _stub_post_review_to_cf(payload: dict): + logger.info("Pretend posting to cloud function: %s", payload) + return {"ok": True} +# ----------------------------------------------------------------------------- + + +# ------------------------- AUTH JSON ENDPOINTS -------------------------------- @csrf_exempt def login_user(request): - # Get username and password from request.POST dictionary - data = json.loads(request.body) - username = data['userName'] - password = data['password'] - # Try to check if provide credential can be authenticated + """ + JSON login endpoint. + Request: POST raw JSON: {"userName": "...", "password": "..."} + Response: {"userName": "...", "status": "Authenticated"} or {"userName": "..."} + """ + if request.method != "POST": + return JsonResponse({"detail": "Method not allowed"}, status=405) + + try: + data = json.loads(request.body or "{}") + username = data.get("userName", "") + password = data.get("password", "") + except json.JSONDecodeError: + return JsonResponse({"detail": "Invalid JSON"}, status=400) + + if not username or not password: + return JsonResponse({"detail": "Missing credentials"}, status=400) + user = authenticate(username=username, password=password) - data = {"userName": username} if user is not None: - # If user is valid, call login method to login current user login(request, user) - data = {"userName": username, "status": "Authenticated"} - return JsonResponse(data) + return JsonResponse({"userName": username, "status": "Authenticated"}) + return JsonResponse({"userName": username, "status": "Unauthorized"}, status=401) -# Create a `logout_request` view to handle sign out request -# def logout_request(request): -# ... -# Create a `registration` view to handle sign up request # @csrf_exempt -# def registration(request): -# ... +# def logout_request(request): +# """ +# JSON logout endpoint. +# """ +# if request.method != "POST": +# return JsonResponse({"detail": "Method not allowed"}, status=405) +# logout(request) +# return JsonResponse({"status": "Logged out"}) + +@csrf_exempt +@require_http_methods(["GET", "POST"]) +def logout_request(request): + """ + Allow logging out via GET (for anchor links) or POST (for fetch/forms). + - If it's an AJAX/JSON request, return JSON. + - Otherwise redirect to homepage. + """ + logout(request) + + wants_json = "application/json" in request.headers.get("Accept", "") + if wants_json or request.headers.get("X-Requested-With") == "XMLHttpRequest": + return JsonResponse({"status": "Logged out"}) + + # Redirect after normal GET + return redirect("djangoapp:index") + + +@csrf_exempt +def registration(request): + """ + JSON registration endpoint. + Request: POST raw JSON: {"userName": "...", "password": "...", "firstName": "...", "lastName": "..."} + """ + if request.method != "POST": + return JsonResponse({"detail": "Method not allowed"}, status=405) + + try: + data = json.loads(request.body or "{}") + except json.JSONDecodeError: + return JsonResponse({"detail": "Invalid JSON"}, status=400) + + username = data.get("userName", "") + password = data.get("password", "") + first_name = data.get("firstName", "") + last_name = data.get("lastName", "") + + if not username or not password: + return JsonResponse({"detail": "Username and password required"}, status=400) + + if User.objects.filter(username=username).exists(): + return JsonResponse({"status": "User already exists"}, status=409) + + user = User.objects.create_user(username=username, password=password, + first_name=first_name, last_name=last_name) + login(request, user) + return JsonResponse({"userName": username, "status": "Registered"}) + + + +def whoami(request): + if request.user.is_authenticated: + return JsonResponse({"isAuthenticated": True, "userName": request.user.username}) + return JsonResponse({"isAuthenticated": False, "userName": ""}) + +# ----------------------------- PAGES ------------------------------------------ +def get_dealerships(request): + """ + Render the home page with a list of dealerships. + Replace the stub with: dealers = get_dealers_from_cf() + """ + dealers = _stub_get_dealers_from_cf() # TODO: get_dealers_from_cf() + context = {"dealership_list": dealers} + return render(request, "Home.html", context) + + +def get_dealer_details(request, dealer_id: int): + """ + Render dealer details page (dealer info + reviews). + """ + dealer = _stub_get_dealer_by_id(dealer_id) # TODO: real call + if not dealer: + messages.error(request, "Dealer not found.") + return redirect("index") + + reviews = _stub_get_dealer_reviews_from_cf(dealer_id) # TODO: real call + context = {"dealer": dealer, "reviews": reviews} + return render(request, "dealer_details.html", context) + + +def get_dealer_reviews(request, dealer_id: int): + """ + If you keep a separate page just for reviews. + """ + dealer = _stub_get_dealer_by_id(dealer_id) + if not dealer: + messages.error(request, "Dealer not found.") + return redirect("index") + + reviews = _stub_get_dealer_reviews_from_cf(dealer_id) # TODO + context = {"dealer": dealer, "reviews": reviews} + return render(request, "dealer_reviews.html", context) + + +@login_required(login_url="/login") +def add_review(request, dealer_id: int): + """ + GET: render review form + POST: submit review to backend (replace stub with your POST call) + """ + dealer = _stub_get_dealer_by_id(dealer_id) + if not dealer: + messages.error(request, "Dealer not found.") + return redirect("index") + + if request.method == "GET": + return render(request, "add_review.html", {"dealer": dealer}) + + # POST + review_text = request.POST.get("review", "").strip() + purchase = request.POST.get("purchase") == "on" + purchase_date = request.POST.get("purchase_date") or None + car_make = request.POST.get("car_make") or "" + car_model = request.POST.get("car_model") or "" + car_year = request.POST.get("car_year") or "" + + payload = { + "time": datetime.utcnow().isoformat(), + "name": request.user.get_full_name() or request.user.username, + "dealership": dealer_id, + "review": review_text, + "purchase": purchase, + "purchase_date": purchase_date, + "car_make": car_make, + "car_model": car_model, + "car_year": car_year, + } + + ok = _stub_post_review_to_cf(payload) # TODO: replace with real post_review() + if ok and (ok.get("ok") or ok is True): + messages.success(request, "Thanks! Your review was submitted.") + else: + messages.error(request, "Could not submit review. Please try again.") + + return redirect("dealer_details", dealer_id=dealer_id) -# # Update the `get_dealerships` view to render the index page with -# a list of dealerships -# def get_dealerships(request): -# ... +def get_cars(request): + # populate only if empty + if CarMake.objects.count() == 0 or CarModel.objects.count() == 0: + initiate() -# Create a `get_dealer_reviews` view to render the reviews of a dealer -# def get_dealer_reviews(request,dealer_id): -# ... + # If your FK is named 'make' (as above): + qs = CarModel.objects.select_related("make").all() -# Create a `get_dealer_details` view to render the dealer details -# def get_dealer_details(request, dealer_id): -# ... + cars = [ + {"CarModel": c.name, "CarMake": c.make.name, "Type": c.type, "Year": c.year} + for c in qs + ] + return JsonResponse({"CarModels": cars}) -# Create a `add_review` view to submit a review -# def add_review(request): -# ... diff --git a/server/djangoproj/settings.py b/server/djangoproj/settings.py index e0b1092a5c..4e46da8d20 100644 --- a/server/djangoproj/settings.py +++ b/server/djangoproj/settings.py @@ -61,7 +61,9 @@ TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', - 'DIRS': [], + 'DIRS': [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': { 'context_processors': [ @@ -134,5 +136,12 @@ DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' -STATICFILES_DIRS = [] +STATICFILES_DIRS = [ + os.path.join(BASE_DIR, "frontend/static"), + os.path.join(BASE_DIR, "frontend/build"), + os.path.join(BASE_DIR, "frontend/build/static"), +] + +ALLOWED_HOSTS=['localhost','127.0.0.1','https://cnabolouri-8000.theianext-0-labs-prod-misc-tools-us-east-0.proxy.cognitiveclass.ai'] +CSRF_TRUSTED_ORIGINS=['https://cnabolouri-8000.theianext-0-labs-prod-misc-tools-us-east-0.proxy.cognitiveclass.ai'] diff --git a/server/djangoproj/urls.py b/server/djangoproj/urls.py index 6808da9141..55d29bcc86 100644 --- a/server/djangoproj/urls.py +++ b/server/djangoproj/urls.py @@ -21,6 +21,10 @@ urlpatterns = [ path('admin/', admin.site.urls), + path('login/', TemplateView.as_view(template_name="index.html")), + path('register/', TemplateView.as_view(template_name="index.html"), name='spa-register'), path('djangoapp/', include('djangoapp.urls')), + path('about/', TemplateView.as_view(template_name="About.html")), + path('contact/', TemplateView.as_view(template_name="Contact.html")), path('', TemplateView.as_view(template_name="Home.html")), ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) diff --git a/server/frontend/package-lock.json b/server/frontend/package-lock.json index 0797425307..bdb21fad35 100644 --- a/server/frontend/package-lock.json +++ b/server/frontend/package-lock.json @@ -16,6 +16,9 @@ "react-router-dom": "^6.19.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -646,9 +649,18 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1891,6 +1903,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/server/frontend/src/App.js b/server/frontend/src/App.js index aceac6974d..5e750f7646 100644 --- a/server/frontend/src/App.js +++ b/server/frontend/src/App.js @@ -1,11 +1,16 @@ import LoginPanel from "./components/Login/Login" import { Routes, Route } from "react-router-dom"; +import Register from "./components/Register/Register"; // <-- create this file function App() { return ( } /> + } /> ); } export default App; + + + diff --git a/server/frontend/src/Navbar.jsx b/server/frontend/src/Navbar.jsx new file mode 100644 index 0000000000..28a29e7432 --- /dev/null +++ b/server/frontend/src/Navbar.jsx @@ -0,0 +1,39 @@ +// Navbar.jsx +import { useEffect, useState } from "react"; +import { useLocation } from "react-router-dom"; + +export default function Navbar() { + const [me, setMe] = useState({ loading: true, isAuthenticated: false, userName: "" }); + const location = useLocation(); + + useEffect(() => { + fetch("/api/whoami", { credentials: "include" }) + .then(r => r.json()) + .then(d => setMe({ loading: false, ...d })) + .catch(() => setMe({ loading: false, isAuthenticated: false, userName: "" })); + }, []); + + // Hide username/logout while checking, and also hide on the login route + const onLoginRoute = location.pathname.startsWith("/login"); + + return ( + + ); +} diff --git a/server/frontend/src/components/Header/Header.jsx b/server/frontend/src/components/Header/Header.jsx index c46f1e3f5f..699ea43a7c 100644 --- a/server/frontend/src/components/Header/Header.jsx +++ b/server/frontend/src/components/Header/Header.jsx @@ -56,11 +56,14 @@ if ( curr_user !== null && curr_user !== "") { Contact Us - + {/* - + */} + {/* + {authArea} + */} diff --git a/server/frontend/src/components/Register/Register.jsx b/server/frontend/src/components/Register/Register.jsx new file mode 100644 index 0000000000..9d24fa050f --- /dev/null +++ b/server/frontend/src/components/Register/Register.jsx @@ -0,0 +1,86 @@ +import React, { useState } from "react"; +import "../assets/style.css"; +import "../assets/bootstrap.min.css"; + +export default function Register() { + const [form, setForm] = useState({ + firstName: "", + lastName: "", + userName: "", + password: "", + }); + const [busy, setBusy] = useState(false); + + const onChange = (e) => setForm({ ...form, [e.target.name]: e.target.value }); + + const submit = async (e) => { + e.preventDefault(); + if (!form.userName || !form.password) { + alert("Username and password are required."); + return; + } + setBusy(true); + try { + const res = await fetch("/djangoapp/register", { + method: "POST", + headers: { "Content-Type": "application/json" }, + credentials: "include", // keep cookies/session + body: JSON.stringify({ + userName: form.userName, + password: form.password, + firstName: form.firstName, + lastName: form.lastName, + }), + }); + + if (!res.ok) { + const msg = (await res.json().catch(() => ({}))).status || "Registration failed"; + alert(msg); + setBusy(false); + return; + } + + const data = await res.json(); // {"userName":"...","status":"Registered"} + // mirror the lab behavior: cache username for the header + sessionStorage.setItem("username", data.userName || form.userName); + + // go home after sign-up + window.location.href = "/"; + } catch (err) { + alert("Network error while registering."); + setBusy(false); + } + }; + + return ( +
+

SignUp

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ ); +} diff --git a/server/frontend/static/About.html b/server/frontend/static/About.html index 484efd960f..74f18324b6 100644 --- a/server/frontend/static/About.html +++ b/server/frontend/static/About.html @@ -1,9 +1,11 @@ + +
-