frontend/src/pages/LoginPage.jsx

@@ -1,29 +1,39 @@
 import React, { useState } from "react";
-import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { Button, Col, Container, Form, Row, Alert} from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
 import { makeRequest } from "../utils.ts";
 
 const LoginPage = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
 
-  const sendLoginRequest = async () => {
-    // await makeRequest({
-    //   url: "http://localhost:5000/login",
-    //   method: "POST",
-    //   body: { username, password },
-    // })
-    //   .then((resp) => resp.json())
-    //   .then((data) => {
-    //     console.log(data);
-    //   });
+  const sendLoginRequest = async (e) => {
+    e.preventDefault();
+    await makeRequest({
+      url: "http://localhost:5000/login",
+      method: "POST",
+      body: { username, password },
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data.error) {
+          setError(data);
+          return;
+        }
+        console.log(data);
+        window.location.href = "/";
+      });
   };
 
   return (
     <React.Fragment>
       <MyNavbar />
+      { error && (
+          <Alert variant="danger" className="m-4 mx-auto w-25">ERROR! {error.message}</Alert>
+      )}
       <Container className="p-5">
-        <Form>
+        <Form onSubmit={sendLoginRequest}>
           <Form.Group as={Row} className="mb-3" controlId="username">
             <Form.Label column sm={2} className="me-2">
               Username

frontend/src/utils.ts

@@ -0,0 +1,11 @@
+const makeRequest = ({ url, method, body }): Promise<Response> => {
+  return fetch(url, {
+    method: method,
+    credentials: "include",
+    body: JSON.stringify(body),
+    headers: { "content-type": "application/json" },
+    mode: "cors",
+  });
+};
+
+export { makeRequest };