Signup and Login working

src/Main.js

@@ -20,17 +20,23 @@ export default function Main() {
     let Layout
     switch (window.location.pathname) {
         case "/":
+            if (checkLogin()) {
+                Layout = Dashboard;
+            } else {
+                Layout = Welcome;
+            }
+            break;
         case "/dashboard":
-            Layout = Dashboard
+            Layout = Dashboard;
             break;
         case "/about-us":
-            Layout = AboutUs
+            Layout = AboutUs;
             break;
         case "/privacy":
-            Layout = Privacy
+            Layout = Privacy;
             break;
         case "/settings":
-            Layout = Settings
+            Layout = Settings;
             break;
         /*
         case "/support":
@@ -38,23 +44,23 @@ export default function Main() {
             break;
         */
         case "/contact-us":
-            Layout = ContactUs
+            Layout = ContactUs;
             break;
 
         case "/welcome":
-            Layout = Welcome
+            Layout = Welcome;
             break;
         
         case "/login":
-            Layout = Login
+            Layout = Login;
             break;
         
         case "/signup":
-            Layout = Signup
+            Layout = Signup;
             break;
 
         default:
-            Layout = Error
+            Layout = Error;
             break;
     }
 

src/components/NavBar.js

@@ -7,25 +7,22 @@ import "./NavBar.css"
 import checkLogin from "../utils/utils";
 
 export default function NavBar() {
-    const [auth, setAuth] = React.useState(true);
     const [anchorEl, setAnchorEl] = React.useState(null);
 
     const handleLogin = () => {
-        setAuth(true);
         handleClose();
         window.location.href='/login';
     }
 
     const handleSignup = () => {
-        setAuth(true);
         handleClose();
-        window.location.href='/signup'
+        window.location.href='/signup';
     }
     
     const handleLogout= () => {
-        setAuth(false);
         handleClose();
-        window.location.href='/welcome'
+        document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
+        window.location.href='/welcome';
     }
 
     const handleMenu = (event) => {
@@ -47,7 +44,7 @@ export default function NavBar() {
                 </Typography>
             </Link>
             <div className="nav-login-control">
-                {!checkLogin
+                {checkLogin()
                     ? // Logged In
                         <div>
                             <IconButton

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot }  from 'react-dom/client';
 import reportWebVitals from './utils/reportWebVitals';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { theme } from './assets/theme.js'
@@ -24,5 +24,5 @@ function App() {
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
 
-const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);

src/pages/Login.jsx

@@ -1,12 +1,44 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { Container } from 'react-bootstrap'
 import './Login.css'
 
 export default function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    function handleSubmit(event) {
+        event.preventDefault();
+
+        const formData = new FormData();
+        formData.append('email', email);
+        formData.append('password', password);
+
+        // Send the form data via HTTP using Fetch API
+        fetch(`http://127.0.0.1:3030/auth/login?email=${email}&password=${password}`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then((response) => response.json())
+        .then((data) => {
+            if (data.status != 200) {
+                console.log(data.error);
+            } else {
+                const session = data.session;
+                document.cookie = `session=${session}; path=/;`
+                window.location.href = '/dashboard';
+            }
+
+            console.log(data); // Log the response from the server
+        })
+        .catch((error) => {
+            console.error(error); // Log any errors
+        });
+    }
+
     return (
         <div className="auth-wrapper">
             <div className="auth-inner">
-                <form>
+                <form id="form" onSubmit={handleSubmit}>
                     <h3>Sign In</h3>
                     <div className="mb-3">
                     <label>Email address</label>
@@ -14,6 +46,9 @@ export default function Login() {
                         type="email"
                         className="form-control"
                         placeholder="Enter email"
+                        value={email}
+                        onChange={(event) => setEmail(event.target.value)}
+                        required
                     />
                     </div>
                     <div className="mb-3">
@@ -22,6 +57,9 @@ export default function Login() {
                         type="password"
                         className="form-control"
                         placeholder="Enter password"
+                        value={password}
+                        onChange={(event) => setPassword(event.target.value)}
+                        required
                     />
                     </div>
                     <div className="mb-3">

src/pages/Signup.jsx

@@ -1,23 +1,74 @@
 import './Login.css'
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 
 export default function SignUp() {
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+
+    function handleSubmit(event) {
+        event.preventDefault();
+
+        // Combine firstname and lastname into name field
+        const name = `${firstName} ${lastName}`;
+        setName(name);
+
+        const formData = new FormData();
+        formData.append('name', name);
+        formData.append('email', email);
+        formData.append('password', password);
+
+        // Send the form data via HTTP using Fetch API
+        fetch(`http://127.0.0.1:3030/auth/createaccount?name=${name}&email=${email}&password=${password}`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then((response) => response.json())
+        .then((data) => {
+            if (data.status != 200) {
+                console.log(data.error);
+            } else {
+                const session = data.session;
+                document.cookie = `session=${session}; path=/;`
+                window.location.href = '/dashboard';
+            }
+
+            console.log(data); // Log the response from the server
+        })
+        .catch((error) => {
+            console.error(error); // Log any errors
+        });
+    }
+
     return (
         <div className="auth-wrapper">
             <div className="auth-inner">
-                <form>
+                <form id="form" onSubmit={handleSubmit}>
                     <h3>Sign Up</h3>
                     <div className="mb-3">
                     <label>First name</label>
                     <input
                         type="text"
                         className="form-control"
-                        placeholder="First name"
+                        placeholder='First Name'
+                        value={firstName}
+                        onChange={(event) => setFirstName(event.target.value)}
+                        required
                     />
                     </div>
                     <div className="mb-3">
                     <label>Last name</label>
-                    <input type="text" className="form-control" placeholder="Last name" />
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Last name"
+                        value={lastName}
+                        onChange={(event) => setLastName(event.target.value)}
+                        required
+                    />
                     </div>
                     <div className="mb-3">
                     <label>Email address</label>
@@ -25,6 +76,9 @@ export default function SignUp() {
                         type="email"
                         className="form-control"
                         placeholder="Enter email"
+                        value={email}
+                        onChange={(event) => setEmail(event.target.value)}
+                        required
                     />
                     </div>
                     <div className="mb-3">
@@ -33,6 +87,9 @@ export default function SignUp() {
                         type="password"
                         className="form-control"
                         placeholder="Enter password"
+                        value={password}
+                        onChange={(event) => setPassword(event.target.value)}
+                        required
                     />
                     </div>
                     <div className="d-grid">

src/pages/Welcome.jsx

@@ -19,7 +19,7 @@ export default function Welcome() {
                     }}
                         >Start Building Your Wealth</h1>
                     <p className="mb-4">BudgetBuddy’s top notch budgeting tools will help you start building wealth, no matter your income or debt.</p>
-                    <Button className='mx-0 mb-4' variant="outline-success">Get Started</Button>
+                    <Button className='mx-0 mb-4' variant="outline-success" href="/signup">Get Started</Button>
                 </Col>
                 <Col className='d-flex' md={4}>
                     <Image className='align-self-end' src={budgethero} fluid />
@@ -50,7 +50,7 @@ export default function Welcome() {
                     </div>
                 </Col>
             </Row>
-            <Button className="mx-auto" variant="outline-success">Create an account for free</Button>
+            <Button className="mx-auto" variant="outline-success" href="/signup">Create an account for free</Button>
         </Container>
     </div>
   );