From 81ee4c7d8a3e9b2d552385c28b733422e47e88a0 Mon Sep 17 00:00:00 2001 From: jveebs <83558932+jveebs@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:53:11 -0400 Subject: [PATCH] Signup and Login working --- src/Main.js | 24 +++++++++------ src/components/NavBar.js | 11 +++---- src/index.js | 6 ++-- src/pages/Login.jsx | 42 ++++++++++++++++++++++++-- src/pages/Signup.jsx | 65 +++++++++++++++++++++++++++++++++++++--- src/pages/Welcome.jsx | 4 +-- 6 files changed, 125 insertions(+), 27 deletions(-) diff --git a/src/Main.js b/src/Main.js index 0878f96..31b932a 100644 --- a/src/Main.js +++ b/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; } diff --git a/src/components/NavBar.js b/src/components/NavBar.js index a07ff9d..06b0b8f 100644 --- a/src/components/NavBar.js +++ b/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() {
- {!checkLogin + {checkLogin() ? // Logged In
, rootElement); \ No newline at end of file +const root = createRoot(document.getElementById("root")); +root.render(); \ No newline at end of file diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 888e93f..f3af149 100644 --- a/src/pages/Login.jsx +++ b/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 (
-
+

Sign In

@@ -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 />
@@ -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 />
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx index 835a828..33eddbe 100644 --- a/src/pages/Signup.jsx +++ b/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 (
- +

Sign Up

setFirstName(event.target.value)} + required />
- + setLastName(event.target.value)} + required + />
@@ -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 />
@@ -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 />
diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx index 9185240..f4844a3 100644 --- a/src/pages/Welcome.jsx +++ b/src/pages/Welcome.jsx @@ -19,7 +19,7 @@ export default function Welcome() { }} >Start Building Your Wealth

BudgetBuddy’s top notch budgeting tools will help you start building wealth, no matter your income or debt.

- + @@ -50,7 +50,7 @@ export default function Welcome() {
- +
);