login page added

src/components/Login.jsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { useGlobalContext } from "./context";
+import { Button, Container, Form } from "react-bootstrap";
+import { useCookies } from "react-cookie";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const Login = () => {
+  const { bgColor, setBgColor } = useGlobalContext();
+  const [cookies, setCookie] = useCookies(["jwtToken"]);
+  const { dark, setDark } = useGlobalContext();
+  const navigate = useNavigate();
+
+  function login(event) {
+    event.preventDefault();
+    const userData = {
+      username: event.currentTarget.elements.formUserName.value,
+      password: event.currentTarget.elements.formPassword.value,
+    };
+    try {
+      axios
+        .post(
+          "https://gameapiauth-acakapc8cxadgtf5.swedencentral-01.azurewebsites.net/api/Authentication/login",
+          {
+            userName: userData.username,
+            password: userData.password,
+          }
+        )
+        .then((response) => {
+          setCookie("jwtToken", response.data.jwtToken, { path: "/" });
+          navigate("/");
+        });
+    } catch (error) {
+      console.log("Error logging in: " + error);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        background: bgColor,
+        height: "calc(100vh - 60px)",
+      }}
+    >
+      <Container
+        style={{
+          width: "50%",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingTop: "40px",
+        }}
+      >
+        {dark == "dark" ? (
+          <h1 style={{ color: "whitesmoke" }}>Login</h1>
+        ) : (
+          <h1 style={{ color: "black" }}>Login</h1>
+        )}
+
+        <br />
+        <br />
+        <Form onSubmit={login}>
+          <Form.Group className="mb-3" controlId="formUserName">
+            <Form.Label>
+              {dark == "dark" ? (
+                <b style={{ color: "whitesmoke" }}>UserName</b>
+              ) : (
+                <b style={{ color: "black" }}>UserName</b>
+              )}
+            </Form.Label>
+            <Form.Control type="text" placeholder="Enter username" />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formPassword">
+            <Form.Label>
+              {dark == "dark" ? (
+                <b style={{ color: "whitesmoke" }}>Password</b>
+              ) : (
+                <b style={{ color: "black" }}>Password</b>
+              )}
+            </Form.Label>
+            <Form.Control type="password" placeholder="Enter password" />
+          </Form.Group>
+          <Button
+            style={{ marginTop: "40px" }}
+            variant="primary"
+            type="submit"
+            className="extButton"
+          >
+            Login
+          </Button>
+        </Form>
+      </Container>
+    </div>
+  );
+};
+
+export default Login;

src/components/NavbarComp.jsx

@@ -35,6 +35,9 @@ const NavbarComp = () => {
               {cookies.jwtToken == "" || cookies.jwtToken == null ?(
                 <Nav.Link as={Link} to="/register">Register</Nav.Link>
               ) : "" }
+              {cookies.jwtToken == "" || cookies.jwtToken == null ?(
+                <Nav.Link as={Link} to="/login">Login</Nav.Link>
+              ) : "" }
             </Nav>
           </Navbar.Collapse>
       </Navbar>

src/components/Register.jsx

@@ -3,13 +3,15 @@ import { useGlobalContext } from "./context";
 import { Button, Container, Form } from "react-bootstrap";
 import { useCookies } from "react-cookie";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 const Register = () => {
   const { bgColor, setBgColor } = useGlobalContext();
   const [cookies, setCookie] = useCookies(["jwtToken"]);
   const { dark, setDark } = useGlobalContext();
+  const navigate = useNavigate();
+
 
-
   function register(event) {
     event.preventDefault();
     const userData = {

src/main.jsx

@@ -10,6 +10,7 @@ import { CookiesProvider } from "react-cookie";
 import GamePage from "./components/GamePage";
 import { GlobalProvider } from "./components/context.jsx";
 import Register from "./components/Register.jsx";
+import Login from "./components/Login.jsx";
 
 createRoot(document.getElementById("root")).render(
   <BrowserRouter>
@@ -22,6 +23,7 @@ createRoot(document.getElementById("root")).render(
           <Route path="/gamepage" element={<GamePage />} />
           <Route path="/about" element={<About />} />
           <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
         </Routes>
       </CookiesProvider>
     </GlobalProvider>