login is working

Fraju-pc · Jul 17, 2023 · 6f2fa3d · 6f2fa3d
1 parent c2e1e77
commit 6f2fa3d
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 34 deletions.
diff --git a/Week-16-React_Router_and_React_Bootstrap/index.html b/Week-16-React_Router_and_React_Bootstrap/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>House Chores App</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/App.jsx b/Week-16-React_Router_and_React_Bootstrap/src/App.jsx
@@ -1,33 +1,38 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
-import { useState } from 'react'
-import NavBar from './components/NavBar'
-import Home from './pages/Home/Home'
-import Login from './pages/Login/Login'
-import Admin from './pages/Admin/Admin'
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './App.css'
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+//import { useState } from "react";
+import NavBar from "./components/NavBar";
+import Home from "./pages/Home/Home";
+import Login from "./pages/Login/Login";
+import Admin from "./pages/Admin/Admin";
+import ChildA from "./pages/ChildA/ChildA"
+import ChildB from './pages/ChildB/ChildB'
+import ChildC from './pages/ChildC/ChildC'
+import ChildD from './pages/ChildD/ChildD'
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
+
+  //const [count, setCount] = useState(0);
 
+
   return (
     <>
-
       <Router>
-
         <NavBar />
 
         <Routes>
-          <Route exact path='/' element={<Home />}/> 
-          <Route path='/Login' element={<Login/>} /> 
-          <Route path='/Admin' element={<Admin />} />
+          <Route exact path="/" element={<Home />} />
+          <Route path="/Login" element={<Login />} />
+          <Route path="/Admin" element={<Admin />} />
+          <Route path="/ChildA" element={<ChildA />} />
+          <Route path="/ChildB" element={<ChildB />} />
+          <Route path="/ChildC" element={<ChildC />} />
+          <Route path="/ChildD" element={<ChildD />} />
         </Routes>
-
       </Router>
-
-
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/NavBar.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/NavBar.jsx
@@ -1,17 +1,22 @@
-import React from 'react';
-import { Navbar, Nav } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Navbar, Nav } from "react-bootstrap";
+import { Link } from "react-router-dom";
 
 const NavBar = () => {
   return (
-    <Navbar className="justify-content-center" bg="dark" data-bs-theme="dark" expand="lg">
-      <Navbar.Brand as={Link} to="/">House Chores</Navbar.Brand>
+    <Navbar className="p-3" bg="dark" data-bs-theme="dark" expand="lg">
+      <Navbar.Brand as={Link} to="/">
+        House Chores
+      </Navbar.Brand>
       <Navbar.Toggle aria-controls="navbar-nav" />
       <Navbar.Collapse id="navbar-nav">
-        <Nav className="mr-auto">
-          <Nav.Link as={Link} to="/">Home</Nav.Link>
-          <Nav.Link as={Link} to="/Login">Login</Nav.Link>
-          <Nav.Link as={Link} to="/Admin">Admin</Nav.Link>
+        <Nav className="ms-auto">
+          <Nav.Link as={Link} to="/">
+            Home
+          </Nav.Link>
+          <Nav.Link as={Link} to="/Login">
+            Login
+          </Nav.Link>
         </Nav>
       </Navbar.Collapse>
     </Navbar>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/index.css b/Week-16-React_Router_and_React_Bootstrap/src/index.css
@@ -0,0 +1,4 @@
+body {
+    background-color: #807d7f;
+    padding: 0;
+}
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/main.jsx b/Week-16-React_Router_and_React_Bootstrap/src/main.jsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
+
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
+
   <React.StrictMode>
     <App />
   </React.StrictMode>,

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildA/ChildA.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildA/ChildA.jsx
@@ -0,0 +1,8 @@
+export default function ChildA(){
+
+    return(
+        <div>
+            A's Page
+        </div>
+    )
+}
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildB/ChildB.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildB/ChildB.jsx
@@ -0,0 +1,8 @@
+export default function ChildB(){
+
+    return(
+        <div>
+            B's Page
+        </div>
+    )
+}
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildC/ChildC.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildC/ChildC.jsx
@@ -0,0 +1,8 @@
+export default function ChildC(){
+
+    return(
+        <div>
+            C's Page
+        </div>
+    )
+}
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildD/ChildD.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildD/ChildD.jsx
@@ -0,0 +1,8 @@
+export default function ChildD(){
+
+    return(
+        <div>
+            D's Page
+        </div>
+    )
+}
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/Home/Home.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/Home/Home.jsx
@@ -1,10 +1,29 @@
 import "./homeImage.jpg"
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
 
 export default function Home(){
 
     return(
-        <div>
-            <img src="../src/pages/Home/homeImage.jpg" />
+        <div className="p-4">
+            <Container>
+                <Row>
+                    <Col></Col>
+                    <Col><img src="../src/pages/Home/homeImage.jpg" /></Col>
+                    <Col></Col>
+                </Row>
+            </Container>
+            <br/><br/>
+            <Container>    
+                <Row >
+                    <Col ></Col>
+                    <Col xs lg="2"><Button variant="success" size="lg">Login</Button></Col>{' '}
+                    <Col ></Col>
+                </Row>
+            </Container>
+
         </div>
     )
 }
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/Login/Login.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/Login/Login.jsx
@@ -1,7 +1,112 @@
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
 export default function Login(){
+    //Api URL
+    const Login_Api_URL = 'https://6489d1fc5fa58521cab04f75.mockapi.io/logins'
 
-    return(
-        <div>Login Page</div>
-    )
+    //State for login Form
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const navigate = useNavigate();
+    const [logins, setLogins] = useState('[]');
+
+    //Api Pull function
+    async function getLogins() {
+      const response = await fetch(Login_Api_URL)
+      const data = await response.json();
+      //console.log(data);
+      setLogins(data)
+      console.log(logins);
+    };
+     //Useeffect to populate the page on loadin
+  useEffect(()=> {
+    getLogins()
+  }, [])
+
+    const handleLogin = (e) => {
+        e.preventDefault();
+
+        //login authentication logic 
+        let match = logins.find(function(existingUser) {
+          return existingUser.name === username && existingUser.password === password;
+
+        });
+
+        if (match) {
+          // Successful login
+          pageLogin(match);
+        } else {
+          // Invalid credentials
+          pageLogin("fail");
+        }
+      };
+
+      //function to determine which page to log into
+function pageLogin(attempt){
+  console.log(attempt.name);
+
+  switch(attempt.name){
+    case "Admin":
+      navigate(`/Admin`);
+    break;
+    case "Ayla":
+      navigate(`/ChildA`);
+    break;
+    case "Braiden":
+      navigate(`/ChildB`);
+    break;
+    case "Callan":
+      navigate(`/ChildC`);
+    break;
+    case "Delaney":
+      navigate(`/ChildD`);
+    break;
+    //default for bad Username / Password Combo
+    default:
+      alert("Username or Password Not Found");
+      //myModal.show();
+      //location.reload();
+
+  }
+  };
+
+    //HTML Output
+    return (
+      <Container>
+        <Row>
+          <Col></Col>
+          <Col>
+          <h1>Login:</h1>
+            <Form onSubmit={handleLogin}>
+              <Form.Group className="mb-3" controlId="formBasicText">
+                <Form.Label>User Name</Form.Label>
+                <Form.Control 
+                type="text" 
+                placeholder="Enter User Name"
+                value={username}
+                onChange={(e) => setUsername(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.Group>
+              <Button variant="success" type="submit">
+                Submit
+              </Button>
+            </Form>
+          </Col>
+          <Col></Col>
+        </Row>
+      </Container>
+    );
 }