sign up page functionality

trivia-forge/frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
+    "node-datetime": "^2.1.2",
     "openai": "^4.38.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",

trivia-forge/frontend/src/Pages/SignUpPage.jsx

@@ -1,36 +1,61 @@
+import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { Form, Button, Card } from "react-bootstrap";
+import { addUser } from '../Services/TF-db_services';
 
 function SignUpPage() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const navigate = useNavigate();
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (password !== confirmPassword) {
+            alert('Passwords do not match');
+            return;
+        }
+        const user = {
+            email: email,
+            password: password
+        };
+        const addedUser = await addUser(user);
+        if (addedUser) {
+            alert('User added:', addedUser);
+            navigate('/');
+        } else {
+            console.error('Error adding user');
+        }
+    }
 
     return (
         <>
             <Card style={{ width: '35rem', margin: '0 auto', float: 'none' }}>
-                <Form className="form-group">
+                <Form onSubmit={handleSubmit} className="form-group">
                     <Form.Group className="mb-3" controlId="formBasicEmail">
                         <Form.Label>Email address</Form.Label>
-                        <Form.Control className="Form-Control" type="email" placeholder="Enter email" />
+                        <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
                         <Form.Text className="text-muted">
                             We'll never share your email with anyone else.
                         </Form.Text>
                     </Form.Group>
 
                     <Form.Group className="mb-3" controlId="formBasicPassword">
                         <Form.Label>Password</Form.Label>
-                        <Form.Control type="password" placeholder="Password" />
+                        <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
                     </Form.Group>
-                    <Form.Group className="mb-3" controlId="formBasicPassword">
+
+                    <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
                         <Form.Label>Confirm Password</Form.Label>
-                        <Form.Control type="password" placeholder="Confirm Password" />
+                        <Form.Control type="password" placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
                     </Form.Group>
+
                     <Button variant="primary" type="submit">
                         Create Account
                     </Button>
                 </Form>
             </Card>
         </>
-
     );
-
 }
 export default SignUpPage;

trivia-forge/frontend/src/Pages/TriviaGenPage.jsx

@@ -76,12 +76,12 @@ function TriviaGenPage() {
         }
         //create a new game and category object and add category to game
         let game = new Game(Title, Theme);
-
+        
         for (let i = 0; i < categories.length; i++) {
             let newCategory = new Category(categories[i].name);
             console.log(newCategory.name);
             game.addCategory(newCategory);
-
+              
             //parse response from API
             let sections = responses[i]; // store trivia questions
             for (let i = 0; i < sections.length; i++) {

trivia-forge/frontend/src/Services/TF-db_services.jsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import User from '../Models/User';
-import Game from '../Models/Game';
-import Question from '../Models/Question';
+import User from '../Model/User';
+import Game from '../Model/Game';
+import Question from '../Model/Question';
 
 const API_URL = 'http://localhost:5000/api';