diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/Dashboard.js | 12 | ||||
| -rw-r--r-- | src/pages/Login.js | 65 | ||||
| -rw-r--r-- | src/pages/SignUp.js | 52 |
3 files changed, 116 insertions, 13 deletions
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js new file mode 100644 index 0000000..c7f136d --- /dev/null +++ b/src/pages/Dashboard.js @@ -0,0 +1,12 @@ +import Sidebar from "../components/Sidebar"; + +const Dashboard = () => { + return ( + <> + <Sidebar /> + </> + ); +} + + +export default Dashboard;
\ No newline at end of file diff --git a/src/pages/Login.js b/src/pages/Login.js index 700de0d..2aa90f5 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -1,20 +1,73 @@ -import React from "react"; +import React, {useContext, useState} from "react"; import FlexibleForm from "../components/FlexibleForm"; import benefitTwoImg from "../assets/img/benefit-two.png"; +import { AuthContext } from '../providers/AuthContext'; +import {useNavigate} from "react-router-dom"; const Login = () => { + const navigate = useNavigate(); + const { login } = useContext(AuthContext); + const [formData, setFormData] = useState({ + email: "", + password: "", + }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + const { email, password } = formData; + const basicAuth = btoa(`${email}:${password}`) + + try { + const response = await fetch(process.env.REACT_APP_LOGIN_ROUTE, { + method: "GET", + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Basic ${basicAuth}`, + }, + }); + if (response.ok) { + const jwt = await response.text(); + const tokenParts = jwt.split(".") + const decodedPayload = atob(tokenParts[1]); + const payload = JSON.parse(decodedPayload); + const userId = payload.sub; + + const userDetailsResponse = await fetch(process.env.REACT_APP_REGISTER_ROUTE + '/' + userId , { + method: "GET", + }); + + if (userDetailsResponse.ok) { + const userDetails = await userDetailsResponse.json(); + login(userDetails, jwt); + navigate("/") + + } else { console.error("Failed to fetch details") } + + } else { console.error("Login failed") } + + } catch (error) { + console.error('Error submitting form:', error); + } + } + return ( <> <FlexibleForm - onSuccess={''} + onFormSubmit={handleSubmit} data={{ image: benefitTwoImg, title: "Sign in to your account", subtitle: "Sign in please", - formAction: "/login", - formMethod: "POST", formFields: [ - { label: "Email address", name: "email", type: "email", autoComplete: "email", required: true }, - { label: "Password", name: "password", type: "password", autoComplete: "current-password", required: true }, + { label: "Email address", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleChange }, + { label: "Password", name: "password", type: "password", autoComplete: "current-password", required: true, value: formData.password, onChange: handleChange }, ], ctaText: "Login", ctaLink: { text: "Don't have an account?", linkText: "Create an account instead!", url: "/sign-up" }, diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js index 038b75c..11ab367 100644 --- a/src/pages/SignUp.js +++ b/src/pages/SignUp.js @@ -1,23 +1,61 @@ -import React from "react"; +import React, {useState} from "react"; +import { useNavigate } from "react-router-dom"; import FlexibleForm from "../components/FlexibleForm"; import benefitTwoImg from "../assets/img/benefit-two.png"; const SignUp = () => { + const navigate = useNavigate(); + + const [formData, setFormData] = useState({ + name: "", + email: "", + password: "", + }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + + const handleSubmit = async (event) => { + event.preventDefault(); + + try { + const response = await fetch(process.env.REACT_APP_REGISTER_ROUTE, { + method: "POST", + body: JSON.stringify(formData), + headers: { + 'Content-Type': 'application/json' + }, + }); + + if (!response.ok) { + throw new Error(await response.text()); + } + + console.log('Form submitted successfully'); + navigate("/login"); + } catch (error) { + console.error('Error submitting form:', error); + } + } return ( <> <FlexibleForm - onSuccess={''} + onFormSubmit={handleSubmit} data={{ image: benefitTwoImg, title: "Create your account", subtitle: "maybe edit this text hmm", - formAction: "/register", - formMethod: "POST", formFields: [ - { label: "Full Name", name: "name", type: "text", autoComplete: "name", required: true }, - { label: "Email address", name: "email", type: "email", autoComplete: "email", required: true }, - { label: "Password", name: "password", type: "password", autoComplete: "new-password", required: true }, + { label: "Full Name", name: "name", type: "text", autoComplete: "name", required: true, value: formData.name, onChange: handleChange }, + { label: "Email address", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleChange }, + { label: "Password", name: "password", type: "password", autoComplete: "new-password", required: true, value: formData.password, onChange: handleChange }, ], ctaText: "Create Account", ctaLink: { text: "Already have an account?", linkText: "Log in instead!", url: "/login" }, |