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

Signup and Login working

Browse source
This commit is contained in:
jveebs 2023-04-11 17:53:11 -04:00
parent 87b444b283
commit 81ee4c7d8a
6 changed files with 125 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/Main.js
View file

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

11
src/components/NavBar.js
View file

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

6
src/index.js
View file

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

42
src/pages/Login.jsx
View file

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

65
src/pages/Signup.jsx
View file

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

4
src/pages/Welcome.jsx
View file

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