Removed login modal and changed login button to redirect to login page

emmanueposu · May 30, 2024 · be77af7 · be77af7
1 parent 929ff3c
commit be77af7
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 43 deletions.
diff --git a/trivia-forge/frontend/src/Components/Nav.jsx b/trivia-forge/frontend/src/Components/Nav.jsx
@@ -1,19 +1,14 @@
 import React from "react";
 import { Navbar } from "react-bootstrap";
-import { Nav, Button, Modal, Form } from "react-bootstrap";
-import { useState } from 'react';
-import { Link, useNavigate } from "react-router-dom";
+import { Nav, Button} from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
 import useStore from './useStore';
 
 function Navigation() {
-    const [show, setShow] = useState(false);
     const currentUser = useStore(state => state.currentUser);
     const logout = useStore(state => state.logout);
     const navigate = useNavigate();
 
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
-
     const handleLogout = () => {
         logout();
         navigate('/');
@@ -23,7 +18,6 @@ function Navigation() {
     return (
         <>
             <Navbar bg="dark" data-bs-theme="dark">
-
                 <Nav className="me-auto">
                     <Nav.Link className="navbar-brand" href="/">Home</Nav.Link>
                     <Nav.Link href="/triviaGen">Create New Trivia</Nav.Link>
@@ -35,41 +29,12 @@ function Navigation() {
                             <i className="bi bi-person-circle me-2"></i>Logout: {currentUser.username}
                         </Button>
                     ) : (
-                        <Button onClick={handleShow}>
+                        <Button onClick={() => navigate('/login')}>
                             <i className="bi bi-person-circle me-2"></i>Log In
                         </Button>
                     )}
                 </Nav>
-
             </Navbar>
-            <Modal show={show} onHide={handleClose}>
-
-                <Modal.Header closeButton>
-                    <Modal.Title>Sign In</Modal.Title>
-                </Modal.Header>
-
-                <Modal.Body>
-                    <Form>
-                        <Form.Label htmlFor="inputEmail">Email</Form.Label>
-                        <Form.Control
-                            type="email"
-                            id="inputEmail"
-                        />
-                        <Form.Label htmlFor="inputPassword">Password</Form.Label>
-                        <Form.Control
-                            type="password"
-                            id="inputPassword"
-                        />
-                    </Form>
-                    <p>Not a member? <Link onClick={handleClose} to="/signUp">Sign Up</Link></p>
-                </Modal.Body>
-
-                <Modal.Footer>
-                    <Button onClick={handleClose} variant="secondary">Close</Button>
-                    <Button variant="primary">Sign In</Button>
-
-                </Modal.Footer>
-            </Modal>
         </>
     );
 }

diff --git a/trivia-forge/frontend/src/Components/Questions.jsx b/trivia-forge/frontend/src/Components/Questions.jsx
@@ -20,7 +20,7 @@ function Questions({ data, path, index, changeValue, isMultipleChoice }) {
         <div>
             <Card className="CardPadding">
                 <h2 className="centered">Question</h2>
-                //Button to generate new question somewhere in here
+                {/* //Button to generate new question somewhere in here */}
                 <div className="card-body">
                     <textarea className="form-control" defaultValue={data.problem || data.question} onChange={(e) => {changeValue(newPath, "problem", e.target.value)}}></textarea>
                 </div>

diff --git a/trivia-forge/frontend/src/Components/Slideshow.jsx b/trivia-forge/frontend/src/Components/Slideshow.jsx
@@ -46,7 +46,7 @@ function Slideshow(game) {
                                     ) : (
                                         <div className="d-flex flex-column align-items-center h-100">
                                             <h1 className="p-4">{item.problem}</h1>
-                                            <div className="w-75">
+                                            <div className="w-100">
                                                 {item.choices.map((c, j) => (
                                                     <h4 key={j} className="rounded-5 p-2 w-25 m-auto mt-4" style={{border: "2px solid orange"}}>{c.text}</h4>
                                                 ))}

diff --git a/trivia-forge/frontend/src/Pages/LoginPage.jsx b/trivia-forge/frontend/src/Pages/LoginPage.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Form, Button, Card } from "react-bootstrap";
 import { getUser, getGames } from '../Services/TF-db_services';
 import useStore from '../Components/useStore';
@@ -47,14 +47,15 @@ function LoginPage() {
             <Card style={{ width: '35rem'}}>
                 <Form onSubmit={handleSubmit} className="form-group">
                     <Form.Group className="mb-3" controlId="formBasicEmail">
-                        <Form.Label>Email address</Form.Label>
+                        <Form.Label>Email</Form.Label>
                         <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
                     </Form.Group>
 
                     <Form.Group className="mb-3" controlId="formBasicPassword">
                         <Form.Label>Password</Form.Label>
-                        <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                        <Form.Control type="password" placeholder="Enter Password" value={password} onChange={(e) => setPassword(e.target.value)} />
                     </Form.Group>
+                    <p>Not a member? <Link to="/signUp">Sign Up</Link></p>
                     <div className="d-flex justify-content-center">
                         <Button variant="primary" type="submit">
                             Login