Made Login and Signup pages

src/Main.js

@@ -6,10 +6,14 @@ import Dashboard from './pages/Dashboard'
 import AboutUs from './pages/About-Us'
 import Privacy from './pages/Privacy'
 import Settings from './pages/Settings'
-import Support from './pages/Support'
+import Login from './pages/Login'
+import Signup from './pages/Signup'
 import ContactUs from './pages/Contact-Us'
 import Welcome from './pages/Welcome'
 import Error from './pages/Error-Page'
+
+import checkLogin from './utils/utils.js'
+
 import './styles.css'
 
 export default function Main() {
@@ -40,7 +44,15 @@ export default function Main() {
         case "/welcome":
             Layout = Welcome
             break;
-            
+        
+        case "/login":
+            Layout = Login
+            break;
+        
+        case "/signup":
+            Layout = Signup
+            break;
+
         default:
             Layout = Error
             break;
@@ -49,7 +61,7 @@ export default function Main() {
     return (
         <div>
             <NavBar />
-            {window.location.pathname != "/welcome" ?
+            {checkLogin() ?
                 <ProSidebarProvider>
                     <div class="main-body">
                         <SideNav />

src/components/NavBar.css

@@ -15,6 +15,10 @@
     color: inherit;
 }
 
+.nav-brand:hover {
+    color: inherit;
+}
+
 .nav-login-control {
     display: flex;
     margin-left: auto;

src/components/NavBar.js

@@ -4,6 +4,7 @@ import { Toolbar, Typography, Button, IconButton, Link } from "@material-ui/core
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import logo from "../assets/BudgetBuddyLogo.png"
 import "./NavBar.css"
+import checkLogin from "../utils/utils";
 
 export default function NavBar() {
     const [auth, setAuth] = React.useState(true);
@@ -12,11 +13,19 @@ export default function NavBar() {
     const handleLogin = () => {
         setAuth(true);
         handleClose();
+        window.location.href='/login';
+    }
+
+    const handleSignup = () => {
+        setAuth(true);
+        handleClose();
+        window.location.href='/signup'
     }
     
     const handleLogout= () => {
         setAuth(false);
         handleClose();
+        window.location.href='/welcome'
     }
 
     const handleMenu = (event) => {
@@ -38,7 +47,7 @@ export default function NavBar() {
                 </Typography>
             </Link>
             <div className="nav-login-control">
-                {auth
+                {!checkLogin
                     ? // Logged In
                         <div>
                             <IconButton
@@ -69,7 +78,12 @@ export default function NavBar() {
                                 <MenuItem onClick={handleLogout}>Log Out</MenuItem>
                             </Menu>
                         </div>
-                    : <Button onClick={handleLogin}>Login or Sign Up</Button>  // Logged Out
+                    : // Logged Out
+                    <span style={{display: "flex"}}> 
+                        <Button onClick={handleLogin}>Login</Button>
+                        <p style={{marginTop: "9px"}}>or</p>
+                        <Button onClick={handleSignup}>Signup</Button>
+                    </span>
                 }
             </div>
         </Toolbar>

src/components/SideNav.js

@@ -33,11 +33,13 @@ export default function SideNav() {
                     icon={<SettingsOutlinedIcon/>}>
                     Settings
                 </MenuItem>
+                {/*
                 <MenuItem 
                     component={<Link href="/support" />}
                     icon={<ContactSupportOutlinedIcon/>}>
                     Support
                 </MenuItem>
+                */}
                 <MenuItem 
                     component={<Link href="/privacy" />}
                     icon={<PrivacyTipOutlinedIcon/>}>

src/context/AppContext.js

@@ -48,8 +48,7 @@ export const AppProvider = (props) => {
 				expenses: state.expenses,
 				budget: state.budget,
 				dispatch,
-			}}
-		>
+			}}>
 			{props.children}
 		</AppContext.Provider>
 	);

src/pages/Login.css

@@ -0,0 +1,41 @@
+.auth-wrapper {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: left;
+  }
+  .auth-inner {
+    width: 450px;
+    margin: auto;
+    background: #ffffff;
+    box-shadow: 0px 14px 60px rgba(34, 35, 58, 0.1);
+    padding: 40px 55px 45px 55px;
+    border-radius: 15px;
+    transition: all .3s;
+  }
+  .auth-wrapper .form-control:focus {
+    border-color: #167bff;
+    box-shadow: none;
+  }
+  .auth-wrapper h3 {
+    text-align: center;
+    margin: 0;
+    line-height: 1;
+    padding-bottom: 20px;
+  }
+  .custom-control-label {
+    font-weight: 400;
+  }
+  .forgot-password,
+  .forgot-password a {
+    font-size: 13px;
+    color: #7f7d7d;
+    margin: 0;
+  }
+  .forgot-password a {
+    color: #167bff;
+  }
+
+  #remember-me {
+    margin-left: 10px;
+  }

src/pages/Login.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import { Container } from 'react-bootstrap'
+import './Login.css'
+
+export default function Login() {
+    return (
+        <div className="auth-wrapper">
+            <div className="auth-inner">
+                <form>
+                    <h3>Sign In</h3>
+                    <div className="mb-3">
+                    <label>Email address</label>
+                    <input
+                        type="email"
+                        className="form-control"
+                        placeholder="Enter email"
+                    />
+                    </div>
+                    <div className="mb-3">
+                    <label>Password</label>
+                    <input
+                        type="password"
+                        className="form-control"
+                        placeholder="Enter password"
+                    />
+                    </div>
+                    <div className="mb-3">
+                    <div className="custom-control custom-checkbox">
+                        <input
+                        type="checkbox"
+                        className="custom-control-input"
+                        id="customCheck1"
+                        />
+                         <label id="remember-me" className="custom-control-label" htmlFor="customCheck1">
+                        Remember me
+                        </label>
+                    </div>
+                    </div>
+                    <div className="d-grid">
+                    <button type="submit" className="btn btn-primary mb-3">
+                        Submit
+                    </button>
+                    </div>
+                    <p className="forgot-password">
+                        Don't have an account? <a href="/signup">sign up</a>
+                    </p>
+                    <p className="forgot-password">
+                    Forgot <a href="#">password?</a>
+                    </p>
+                </form>
+            </div>
+        </div>
+    )
+}

src/pages/Signup.jsx

@@ -0,0 +1,50 @@
+import './Login.css'
+import React, { Component } from 'react'
+
+export default function SignUp() {
+    return (
+        <div className="auth-wrapper">
+            <div className="auth-inner">
+                <form>
+                    <h3>Sign Up</h3>
+                    <div className="mb-3">
+                    <label>First name</label>
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="First name"
+                    />
+                    </div>
+                    <div className="mb-3">
+                    <label>Last name</label>
+                    <input type="text" className="form-control" placeholder="Last name" />
+                    </div>
+                    <div className="mb-3">
+                    <label>Email address</label>
+                    <input
+                        type="email"
+                        className="form-control"
+                        placeholder="Enter email"
+                    />
+                    </div>
+                    <div className="mb-3">
+                    <label>Password</label>
+                    <input
+                        type="password"
+                        className="form-control"
+                        placeholder="Enter password"
+                    />
+                    </div>
+                    <div className="d-grid">
+                    <button type="submit" className="btn btn-primary mb-3">
+                        Sign Up
+                    </button>
+                    </div>
+                    <p className="forgot-password text-right">
+                    Already registered? <a href="/login">log in</a>
+                    </p>
+                </form>
+            </div>
+        </div>
+    )
+}

src/utils/utils.js

@@ -0,0 +1,12 @@
+export default function checkLogin() {
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+      var cookie = cookies[i].trim();
+      if (cookie.indexOf('session=') === 0) {
+        // The "session" cookie exists
+        return true;
+      }
+    }
+    // The "session" cookie doesn't exist
+    return false;
+  }