refactor: Add API request functionality to file and rework to utilize basic auth header

1 files changed, 42 insertions, 6 deletions

diff --git a/src/pages/Login.js b/src/pages/Login.js
index 700de0d..07f9b78 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,20 +1,56 @@
-import React from "react";
+import React, {useState} from "react";
 import FlexibleForm from "../components/FlexibleForm";
 import benefitTwoImg from "../assets/img/benefit-two.png";
 const Login = () => {
+    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}`)
+        console.log(basicAuth)
+
+        try {
+            const response = await fetch(process.env.REACT_APP_LOGIN_ROUTE, {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Basic ${basicAuth}`,
+                },
+            });
+            if (response.ok) {
+                const data = await response
+                console.log("Login successful", data)
+            } 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" },