Merge pull request #110 from UNLV-CS472-672/frontend_backend_link

Jose 4th PR: Login/Signup Frontend/backend link

Author: Jose-Alarcon1

backend/apps/users/views.py

@@ -4,6 +4,7 @@
 from django.contrib.auth import authenticate
 from django.http import JsonResponse, HttpResponse
 from django.middleware.csrf import get_token
+from .models import Profile
 from apps.users.models import Profile, TutorProfile
 from apps.uploads.models import UploadRecord, ProfilePicture
 from rest_framework import status
@@ -62,7 +63,9 @@ def register_profile(request):
   first_name = request.data["firstName"]
   last_name = request.data["lastName"]
   password = request.data["password"]
-  role = request.data["role"]  # Get the selected role
+  # TODO: replace "1" with "role" once that is handled by the frontend
+  # role = request.data["role"]  # Get the selected role
+  role = 3
   # Create user
   user = User.objects.create_user(
     username=username,
@@ -73,6 +76,7 @@ def register_profile(request):
   )
   # Create associated Profile
   profile = Profile.objects.create(user, role)
+  
 
   image=request.data.get("image") #For now, get an optional image
 
@@ -92,7 +96,6 @@ def register_profile(request):
       bio=request.data["bio"]
       hourly_rate=request.data["hourly_rate"]
       tutor = TutorProfile.objects.create(profile, city, state, bio, hourly_rate)
-
   return Response({"message": "User registered successfully"}, status=status.HTTP_201_CREATED)
 
 @api_view(['POST'])

frontend/package-lock.json

@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.5",
+    "axios": "^1.8.4",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "react": "^19.0.0",
     "react-calendar": "^5.1.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.0",
     "tailwindcss": "^4.0.5"
   },
   "devDependencies": {

frontend/package.json

@@ -1,10 +1,52 @@
 import "../Styles/Login.css";
+// import {useLocation} from "react-router-dom";
+import {useState} from "react";
+import axios from "axios";
 
-export default function Login() {
-    const handleSubmit = (e) => {
+// export default function Login() {
+//     const handleSubmit = (e) => {
+//         e.preventDefault();
+//         // Add your login logic here
+//         console.log("Login form submitted");
+//     };
+
+export default function SignUp() {
+    // const location = useLocation();
+    // this will help later for the back end
+
+    const [formData, setFormData] = useState({
+        username: "",
+        password: "",
+    });
+
+    const handleChanges = (e) => {
+        const { name, value, type, checked } = e.target;
+        setFormData({
+            ...formData,
+            [name]: type === "checkbox" ? checked : value,
+        });
+    };
+
+    const handleLogin = async (e) => {
         e.preventDefault();
-        // Add your login logic here
-        console.log("Login form submitted");
+
+        console.log("Login form submitted", formData);
+
+        try {
+            const response = await axios.post("http://127.0.0.1:8000/users/login/", formData);
+
+
+            // Do this for login
+            // Store only the access and refresh tokens
+            localStorage.setItem("accessToken", response.data.accessToken);
+            localStorage.setItem("refreshToken", response.data.refreshToken);
+            localStorage.setItem("username", response.data.username);
+
+            alert("Login successful!");
+
+        } catch (error) {
+            alert("Login failed! " + (error.response?.data?.message || error.message));
+        }
     };
 
     return (
@@ -33,13 +75,14 @@ export default function Login() {
                     <h1>LessonConnect</h1>
                     <h2>Welcome to LessonConnect</h2>
 
-                    <form className="login-form" onSubmit={handleSubmit}>
-                        <label htmlFor="email">Username or Email</label>
+                    <form className="login-form" onSubmit={handleLogin}>
+                        <label htmlFor="username">Username</label>
                         <input
                             type="text"
-                            id="email"
-                            name="email"
-                            placeholder="e.g., David Brooks"
+                            id="username"
+                            name="username"
+                            onChange={handleChanges}
+                            placeholder="Username"
                             required
                         />
 
@@ -48,6 +91,7 @@ export default function Login() {
                             type="password"
                             id="password"
                             name="password"
+                            onChange={handleChanges}
                             placeholder="********"
                             required
                         />

frontend/src/Components/Login.jsx

@@ -1,11 +1,12 @@
-// import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useState } from "react";
 import "../Styles/SignUp.css"; // Import the CSS file
+import axios from "axios";
 
 export default function SignUp() {
-    // const location = useLocation(); // Uncomment if you are going use it (Ashley helped by Frank)
+    const location = useLocation(); // Uncomment if you are going use it (Ashley helped by Frank)
     // this will help later for the back end
-    // const dob = location.state || {};
+    const dob = location.state || {};
 
     const [formData, setFormData] = useState({
         country: "",
@@ -14,6 +15,7 @@ export default function SignUp() {
         lastName: "",
         displayName: "",
         password: "",
+        dateOfBirth: dob,
         termsAccepted: false,
     });
 
@@ -25,16 +27,32 @@ export default function SignUp() {
         });
     };
 
-    const handleSubmit = (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
+
         if (!formData.termsAccepted) {
             alert("You must accept the Terms of Service.");
             return;
         }
         console.log("Sign-Up form submitted", formData);
-        // here is where we add any sign-up logic or API calls
+
+        try {
+            const response = await axios.post("http://127.0.0.1:8000/users/register/", formData);
+
+
+            // Do this for login
+            // Store only the access and refresh tokens
+            // localStorage.setItem("accessToken", response.data.accessToken);
+            // localStorage.setItem("refreshToken", response.data.refreshToken);
+
+
+            alert("Registration successful!\n" + response.data.message);
+        } catch (error) {
+            alert("Registration failed! " + (error.response?.data?.message || error.message));
+        }
     };
 
+
     return (
         <div className="signup-page">
             {/* Left Panel */}