gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-07 21:48:14 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made Login and Signup pages

Browse source
This commit is contained in:
jveebs 2023-04-06 17:16:01 -04:00
parent cb53190b25
commit 36f751a69f
9 changed files with 195 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Main.js
View file

@ -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 />

4
src/components/NavBar.css
View file

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

18
src/components/NavBar.js
View file

@ -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>

2
src/components/SideNav.js
View file

@ -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/>}>

3
src/context/AppContext.js
View file

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

41
src/pages/Login.css Normal file
View file

@ -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;
}

54
src/pages/Login.jsx Normal file
View file

@ -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>
)
}

50
src/pages/Signup.jsx Normal file
View file

@ -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>
)
}

12
src/utils/utils.js Normal file
View file

@ -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;
}