gabehf
/
BudgetBuddy
mirror of https://github.com/gabehf/BudgetBuddy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Nav fixes & Error messages

Browse Source
main
jveebs 3 years ago
parent 077e515dfb
commit edf43f30da
21 changed files with 135 additions and 103 deletions
Show Stats Download Patch File Download Diff File

8
settings/js/settings.js
Unescape View File

@ -3,9 +3,9 @@ const nameAlertPlaceholder = document.getElementById('nameAlert')
const nameAppendAlert = (message, type) => { const nameAppendAlert = (message, type) => {
const wrapper = document.createElement('div') const wrapper = document.createElement('div')
wrapper.innerHTML = [ wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`, `<div className"alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`, ` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>', ' <button type="button" className"btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>' '</div>'
].join('') ].join('')
@ -24,9 +24,9 @@ const passwordAlertPlaceholder = document.getElementById('passwordAlert')
const passwordAppendAlert = (message, type) => { const passwordAppendAlert = (message, type) => {
const wrapper = document.createElement('div') const wrapper = document.createElement('div')
wrapper.innerHTML = [ wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`, `<div className"alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`, ` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>', ' <button type="button" className"btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>' '</div>'
].join('') ].join('')

8
src/Main.js
Unescape View File

@ -12,7 +12,7 @@ import ContactUs from './pages/Contact-Us'
import Welcome from './pages/Welcome' import Welcome from './pages/Welcome'
import Error from './pages/Error-Page' import Error from './pages/Error-Page'
import checkLogin from './utils/utils.js' import {checkLogin} from './utils/utils.js'
import './styles.css' import './styles.css'
@ -65,13 +65,13 @@ export default function Main() {
} }
return ( return (
<div> <div className="full-page">
<NavBar /> <NavBar />
{checkLogin() ? {checkLogin() ?
<ProSidebarProvider> <ProSidebarProvider>
<div class="main-body"> <div className="main-body">
<SideNav /> <SideNav />
<div class="page-display"> <div className="page-display elevated">
<Layout /> <Layout />
</div> </div>
</div> </div>

26
src/components/AddExpenseForm.js
Unescape View File

@ -28,14 +28,14 @@ const AddExpenseForm = (props) => {
return ( return (
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<div class='row alert alert-secondary'> <div className='row alert alert-secondary'>
{/* <div class='col-sm col-lg-4'> {/* <div className='col-sm col-lg-4'>
<form for="name"> <form htmlFor="name">
<label >Choose a category:</label> <label >Choose a category:</label>
<select> <select>
<option required='required' <option required='required'
type='text' type='text'
class='form-control' className='form-control'
id='name' id='name'
value={name} value={name}
onChange={(event) => setName(event.target.value)}>Rent</option> onChange={(event) => setName(event.target.value)}>Rent</option>
@ -43,32 +43,32 @@ const AddExpenseForm = (props) => {
</form> </form>
</div> */} </div> */}
<h3>Add Expense</h3> <h3>Add Expense</h3>
<div class='col-sm col-lg-4'> <div className='col-sm col-lg-4'>
<label for='name'>Name</label> <label htmlFor='name'>Name</label>
<input <input
required='required' required='required'
type='text' type='text'
class='form-control' className='form-control'
id='name' id='name'
value={name} value={name}
onChange={(event) => setName(event.target.value)} onChange={(event) => setName(event.target.value)}
></input> ></input>
</div> </div>
<div class='col-sm col-lg-4'> <div className='col-sm col-lg-4'>
<label for='cost'>Cost</label> <label htmlFor='cost'>Cost</label>
<input <input
required='required' required='required'
type='number' type='number'
class='form-control' className='form-control'
id='cost' id='cost'
value={cost} value={cost}
onChange={(event) => setCost(event.target.value)} onChange={(event) => setCost(event.target.value)}
/> />
</div> </div>
<div class='row mt-3'> <div className='row mt-3'>
<div class='col-sm'> <div className='col-sm'>
<button type='submit' class='btn btn-primary'> <button type='submit' className='btn btn-primary'>
Save Save
</button> </button>
</div> </div>

14
src/components/AddIncome.js
Unescape View File

@ -27,22 +27,22 @@ const AddExpenseForm = (props) => {
return ( return (
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<div class='row'> <div className='row'>
<div class='col-lg-3'> <div className='col-lg-3'>
<label for='cost'>Income</label> <label htmlFor='cost'>Income</label>
<input <input
required='required' required='required'
type='number' type='number'
class='form-control' className='form-control'
id='cost' id='cost'
value={cost} value={cost}
onChange={(event) => setCost(event.target.value)} onChange={(event) => setCost(event.target.value)}
/> />
</div> </div>
</div> </div>
<div class='row mt-3'> <div className='row mt-3'>
<div class='col-sm'> <div className='col-sm'>
<button type='submit' class='btn btn-primary'> <button type='submit' className='btn btn-primary'>
Save Save
</button> </button>
</div> </div>

4
src/components/EditBudget.js
Unescape View File

@ -7,14 +7,14 @@ const EditBudget = (props) => {
<input <input
required='required' required='required'
type='number' type='number'
class='form-control mr-3' className='form-control mr-3'
id='name' id='name'
value={value} value={value}
onChange={(event) => setValue(event.target.value)} onChange={(event) => setValue(event.target.value)}
/> />
<button <button
type='button' type='button'
class='btn btn-primary' className='btn btn-primary'
onClick={() => props.handleSaveClick(value)} onClick={() => props.handleSaveClick(value)}
> >
Save Save

4
src/components/ExpenseItem.js
Unescape View File

@ -12,10 +12,10 @@ const ExpenseItem = (props) => {
}; };
return ( return (
<li class='list-group-item d-flex justify-content-between align-items-center'> <li className='list-group-item d-flex justify-content-between align-items-center'>
{props.name} {props.name}
<div> <div>
<span class='text-primary badge badge-primary badge-pill mr-3'>${props.cost}</span> <span className='text-primary badge badge-primary badge-pill mr-3'>${props.cost}</span>
</div> </div>
</li> </li>
); );

4
src/components/ExpenseList.js
Unescape View File

@ -22,11 +22,11 @@ const ExpenseList = () => {
<> <>
{/* <input {/* <input
type='text' type='text'
class='form-control mb-2 mr-sm-2' className='form-control mb-2 mr-sm-2'
placeholder='Type to search...' placeholder='Type to search...'
onChange={handleChange} onChange={handleChange}
/> */} /> */}
<ul class='list-group mt-3 mb-3'> <ul className='list-group mt-3 mb-3'>
{filteredExpenses.map((expense) => ( {filteredExpenses.map((expense) => (
<ExpenseItem <ExpenseItem
id={expense.id} id={expense.id}

2
src/components/ExpenseTotal.js
Unescape View File

@ -11,7 +11,7 @@ const ExpenseTotal = () => {
}, 0); }, 0);
return ( return (
<div class='alert alert-secondary p-4'> <div className='alert alert-secondary p-4'>
<img src={logo}></img> <img src={logo}></img>
<span>This Month's Expenses: ${total}</span> <span>This Month's Expenses: ${total}</span>
</div> </div>

57
src/components/NavBar.js
Unescape View File

@ -4,39 +4,28 @@ import { Toolbar, Typography, Button, IconButton, Link } from "@material-ui/core
import AccountCircle from '@mui/icons-material/AccountCircle'; import AccountCircle from '@mui/icons-material/AccountCircle';
import logo from "../assets/BudgetBuddyLogo.png" import logo from "../assets/BudgetBuddyLogo.png"
import "./NavBar.css" import "./NavBar.css"
import checkLogin from "../utils/utils"; import {checkLogin, getFirstName} from "../utils/utils";
import NavDropdown from 'react-bootstrap/NavDropdown';
export default function NavBar() { export default function NavBar() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleLogin = () => { const handleLogin = () => {
handleClose();
window.location.href='/login'; window.location.href='/login';
} }
const handleSignup = () => { const handleSignup = () => {
handleClose();
window.location.href='/signup'; window.location.href='/signup';
} }
const handleLogout= () => { const handleLogout= () => {
handleClose();
document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); }); document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
window.location.href='/welcome'; window.location.href='/welcome';
} }
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return ( return (
<Toolbar position="sticky" className="bar"> <Toolbar position="sticky" className="bar">
<Link href="/" class="nav-brand"> <Link href="/" className="nav-brand">
<img src={logo} className="logo"/> <img src={logo} className="logo w-100"/>
<Typography <Typography
className="nav-header" className="nav-header"
variant="h5" > variant="h5" >
@ -47,39 +36,17 @@ export default function NavBar() {
{checkLogin() {checkLogin()
? // Logged In ? // Logged In
<div> <div>
<IconButton <NavDropdown title={`Logged in as ${getFirstName()}`}>
size="large" <NavDropdown.Item>Profile</NavDropdown.Item>
aria-label="account of current user" <NavDropdown.Item>My account</NavDropdown.Item>
aria-controls="menu-appbar" <NavDropdown.Item onClick={handleLogout}>Sign Out</NavDropdown.Item>
aria-haspopup="true" </NavDropdown>
onClick={handleMenu}
color="inherit" >
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose} >
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleLogout}>Log Out</MenuItem>
</Menu>
</div> </div>
: // Logged Out : // Logged Out
<span style={{display: "flex"}}> <span className="mx-0" style={{display: "flex"}}>
<Button onClick={handleLogin}>Login</Button> <Button className="mx-0" onClick={handleLogin}>Login</Button>
<p style={{marginTop: "9px"}}>or</p> <p style={{marginTop: "9px"}}>or</p>
<Button onClick={handleSignup}>Signup</Button> <Button className="mx-0" onClick={handleSignup}>Signup</Button>
</span> </span>
} }
</div> </div>

2
src/components/Remaining.js
Unescape View File

@ -13,7 +13,7 @@ const RemainingBudget = () => {
const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success'; const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';
return ( return (
<div class={`alert p-4 ${alertType}`}> <div className={`alert p-4 ${alertType}`}>
<img src={logo}></img> <img src={logo}></img>
<span>Budget Remaining: ${budget - totalExpenses}</span> <span>Budget Remaining: ${budget - totalExpenses}</span>
</div> </div>

8
src/components/SideNav.css
Unescape View File

@ -1,3 +1,7 @@
.sidebar {
height: 100vh;
}
.sidebar-header { .sidebar-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -8,3 +12,7 @@
.sidebar-avatar { .sidebar-avatar {
justify-content: center; justify-content: center;
} }
.sidebar-welcome {
font-weight: bold;
}

15
src/components/SideNav.js
Unescape View File

@ -5,20 +5,21 @@ import ContactSupportOutlinedIcon from '@mui/icons-material/ContactSupportOutlin
import PrivacyTipOutlinedIcon from '@mui/icons-material/PrivacyTipOutlined'; import PrivacyTipOutlinedIcon from '@mui/icons-material/PrivacyTipOutlined';
import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined'; import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined';
import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined'; import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';
import LogoutIcon from '@mui/icons-material/Logout';
import { Avatar, Typography } from '@material-ui/core'; import { Avatar, Typography } from '@material-ui/core';
import { Link } from '@material-ui/core'; import { Link, Divider } from '@material-ui/core';
import './SideNav.css' import './SideNav.css'
export default function SideNav() { export default function SideNav() {
return( return(
<Sidebar backgroundColor='transparent'> <Sidebar className="sidebar" backgroundColor='transparent' style={{border:"none"}}>
<div className='sidebar-header'> <div className='sidebar-header'>
<div className='sidebar-avatar'> <div className='sidebar-avatar'>
<Avatar /> <Avatar />
</div> </div>
<div className='sidebar-text'> <div className='sidebar-text'>
<Typography variant='h6'>Welcome, Jacob</Typography> <Typography className='sidebar-welcome' variant='h6'>Welcome, Jacob</Typography>
<Typography variant='subtitle2'> Your Budget Overiew</Typography> <Typography variant='subtitle2'> Your Budget Overiew</Typography>
</div> </div>
</div> </div>
@ -40,21 +41,29 @@ export default function SideNav() {
Support Support
</MenuItem> </MenuItem>
*/} */}
{/*
<MenuItem <MenuItem
component={<Link href="/privacy" />} component={<Link href="/privacy" />}
icon={<PrivacyTipOutlinedIcon/>}> icon={<PrivacyTipOutlinedIcon/>}>
Privacy Privacy
</MenuItem> </MenuItem>
*/}
<MenuItem <MenuItem
component={<Link href="/about-us" />} component={<Link href="/about-us" />}
icon={<SupervisedUserCircleOutlinedIcon/>}> icon={<SupervisedUserCircleOutlinedIcon/>}>
About Us About Us
</MenuItem> </MenuItem>
{/*
<MenuItem <MenuItem
component={<Link href="/contact-us" />} component={<Link href="/contact-us" />}
icon={<ContactPageOutlinedIcon/>}> icon={<ContactPageOutlinedIcon/>}>
Contact Us Contact Us
</MenuItem> </MenuItem>
*/}
<MenuItem
icon={<LogoutIcon/>}>
Sign Out
</MenuItem>
</Menu> </Menu>
</Sidebar> </Sidebar>
); );

2
src/components/ViewBudget.js
Unescape View File

@ -7,7 +7,7 @@ const ViewBudget = (props) => {
<> <>
<img src={logo}></img> <img src={logo}></img>
<span>Current Balance: ${props.budget}</span> <span>Current Balance: ${props.budget}</span>
<button type='button' class='btn btn-primary' onClick={props.handleEditClick}> <button type='button' className='btn btn-primary' onClick={props.handleEditClick}>
Edit Edit
</button> </button>
</> </>

2
src/components/budget.js
Unescape View File

@ -20,7 +20,7 @@ const Budget = () => {
}; };
return ( return (
<div class='alert alert-secondary d-flex align-items-center justify-content-between'> <div className='alert alert-secondary d-flex align-items-center justify-content-between'>
{isEditing ? ( {isEditing ? (
<EditBudget handleSaveClick={handleSaveClick} budget={budget} /> <EditBudget handleSaveClick={handleSaveClick} budget={budget} />
) : ( ) : (

3
src/components/css/ViewBudget.css
Unescape View File

@ -1,4 +1,7 @@
/* MAKE SURE TO BE SPECIFIC WITH STYLING CUZ THIS CHANGED DIFFERENT SPANS
span { span {
float: right; float: right;
margin-right: 50px; margin-right: 50px;
} }
*/

2
src/index.js
Unescape View File

@ -10,7 +10,7 @@ import Main from './Main.js'
function App() { function App() {
return ( return (
<React.StrictMode> <React.StrictMode>
<div className="App"> <div className="app">
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Main/> <Main/>
</ThemeProvider> </ThemeProvider>

3
src/pages/Login.jsx
Unescape View File

@ -5,6 +5,7 @@ import './Login.css'
export default function Login() { export default function Login() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [errorText, setErrorText] = useState(null);
function handleSubmit(event) { function handleSubmit(event) {
event.preventDefault(); event.preventDefault();
@ -22,6 +23,7 @@ export default function Login() {
.then((data) => { .then((data) => {
if (data.status != 200) { if (data.status != 200) {
console.log(data.error); console.log(data.error);
setErrorText(data.error);
} else { } else {
const session = data.session; const session = data.session;
document.cookie = `session=${session}; path=/;` document.cookie = `session=${session}; path=/;`
@ -79,6 +81,7 @@ export default function Login() {
Submit Submit
</button> </button>
</div> </div>
{errorText && <div className='alert alert-danger p-2 mb-1'>{errorText}</div>}
<p className="forgot-password"> <p className="forgot-password">
Don't have an account? <a href="/signup">sign up</a> Don't have an account? <a href="/signup">sign up</a>
</p> </p>

5
src/pages/Signup.jsx
Unescape View File

@ -1,5 +1,6 @@
import './Login.css' import './Login.css'
import React, { useState } from 'react' import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css';
export default function SignUp() { export default function SignUp() {
const [firstName, setFirstName] = useState(''); const [firstName, setFirstName] = useState('');
@ -7,6 +8,7 @@ export default function SignUp() {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [errorText, setErrorText] = useState(null);
function handleSubmit(event) { function handleSubmit(event) {
@ -30,6 +32,7 @@ export default function SignUp() {
.then((data) => { .then((data) => {
if (data.status != 200) { if (data.status != 200) {
console.log(data.error); console.log(data.error);
setErrorText(data.error);
} else { } else {
const session = data.session; const session = data.session;
document.cookie = `session=${session}; path=/;` document.cookie = `session=${session}; path=/;`
@ -40,6 +43,7 @@ export default function SignUp() {
}) })
.catch((error) => { .catch((error) => {
console.error(error); // Log any errors console.error(error); // Log any errors
setErrorText(error);
}); });
} }
@ -96,6 +100,7 @@ export default function SignUp() {
<button type="submit" className="btn btn-primary mb-3"> <button type="submit" className="btn btn-primary mb-3">
Sign Up Sign Up
</button> </button>
{errorText && <div className='alert alert-danger p-2 mb-1'>{errorText}</div>}
</div> </div>
<p className="forgot-password text-right"> <p className="forgot-password text-right">
Already registered? <a href="/login">log in</a> Already registered? <a href="/login">log in</a>

2
src/pages/Welcome.jsx
Unescape View File

@ -22,7 +22,7 @@ export default function Welcome() {
<Button className='mx-0 mb-4' variant="outline-success" href="/signup">Get Started</Button> <Button className='mx-0 mb-4' variant="outline-success" href="/signup">Get Started</Button>
</Col> </Col>
<Col className='d-flex' md={4}> <Col className='d-flex' md={4}>
<Image className='align-self-end' src={budgethero} fluid /> <Image className='align-self-end w-100' src={budgethero} fluid />
</Col> </Col>
</Row> </Row>
</Container> </Container>

14
src/styles.css
Unescape View File

@ -5,7 +5,6 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
@ -13,6 +12,12 @@ code {
monospace; monospace;
} }
.app {
background-color: #F7F7F2;
color: #444444;
min-height: 100vh;
}
.main-body { .main-body {
display: flex; display: flex;
width: 100vw; width: 100vw;
@ -20,10 +25,11 @@ code {
.page-display { .page-display {
margin: 0 40px; margin: 0 40px;
border: 2px solid black; margin-bottom: 30px;
border-radius: 20px; border-radius: 20px;
padding: 20px 30px; padding: 20px 30px;
width: 100vw; width: 100vw;
background-color: #FFFFFF;
/*display: grid; COMMENTED OUT BY CHRIS FOR PUSH ON WIDGETS, not sure if need for welcome page or not, do not need anymore for widgets /*display: grid; COMMENTED OUT BY CHRIS FOR PUSH ON WIDGETS, not sure if need for welcome page or not, do not need anymore for widgets
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: 125px 250px 100px 100px; grid-template-rows: 125px 250px 100px 100px;
@ -32,6 +38,10 @@ code {
box-sizing: border-box; */ box-sizing: border-box; */
} }
.elevated {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.page-display div { .page-display div {
padding: 10px; padding: 10px;
} }

29
src/utils/utils.js
Unescape View File

@ -1,4 +1,4 @@
export default function checkLogin() { export function checkLogin() {
var cookies = document.cookie.split(';'); var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) { for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim(); var cookie = cookies[i].trim();
@ -10,3 +10,30 @@ export default function checkLogin() {
// The "session" cookie doesn't exist // The "session" cookie doesn't exist
return false; return false;
} }
function getSessionKey() {
var cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim(); // Remove any leading or trailing whitespace
if (cookie.startsWith('session=')) {
console.log(cookie.substring('session='.length, cookie.length));
return cookie.substring('session='.length, cookie.length); // Extract the value of the cookie
}
}
return null;
}
export function getFirstName() {
fetch('http://127.0.0.1:3030/userinfo', {
method: 'GET',
headers: {
'x-session-key' : "b36efa01-7824-4f61-a274-63131b58d8fe",
}
})
.then(response => response.json())
.then(data => {
const name = data.name;
return name; // Return firstname
})
.catch(error => console.error(error));
}
Write Preview
Loading…
Cancel
Save