Added initial login logic

src/App.tsx

@@ -8,6 +8,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Store from "./Plugins/Redux/Store/Store";
 import { Provider } from "react-redux";
 import Inventory from "./Routes/Inventory/Inventory";
+import Login from "./Routes/Login/Login";
 
 const router = createBrowserRouter([
   {
@@ -47,6 +48,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Login",
+    element: (
+      <Container>
+        <Login />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/Components/Icons/LoginIcon/LoginIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LoginIcon(props: props) {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke={props.color}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
+      <path d="M20 12h-13l3 -3m0 6l-3 -3"></path>
+    </svg>
+  );
+}

src/Components/Login/Login.tsx

@@ -1,7 +1,8 @@
 import { useSelector, useDispatch } from "react-redux";
-import { toggle } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Login/LoginSlice";
 import { Button } from "@mui/material";
 import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
 
 export interface state {
   logged_in: {
@@ -10,9 +11,10 @@ export interface state {
 }
 export default function Login() {
   const logged_in = useSelector((state: state) => state.logged_in.value);
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   async function login() {
-    await dispatch(toggle());
+    await dispatch(toggle_login());
     await console.log("Login State Toggled " + logged_in);
   }
 
@@ -24,7 +26,7 @@ export default function Login() {
     return (
       <div>
         <Button
-          onClick={login}
+          onClick={() => navigate("/Login")}
           value="Login"
           variant="contained"
           style={styles.login_button}

src/Components/Logout/Logout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { toggle } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Login/LoginSlice";
 import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
@@ -19,7 +19,7 @@ export default function Logout(props: props) {
   const navigate = useNavigate();
 
   async function logout() {
-    await dispatch(toggle());
+    await dispatch(toggle_login());
     navigate("/");
   }
 

src/Features/Login/LoginSlice.tsx

@@ -6,12 +6,12 @@ export const loginSlice = createSlice({
     value: false,
   },
   reducers: {
-    toggle: (state) => {
+    toggle_login: (state) => {
       state.value = !state.value;
     },
   },
 });
 
-export const { toggle } = loginSlice.actions;
+export const { toggle_login } = loginSlice.actions;
 
 export default loginSlice.reducer;

src/Routes/Login/Login.tsx

@@ -1,11 +1,94 @@
 import * as React from "react";
 import styles from "../../styles";
+import LoginIcon from "../../Components/Icons/LoginIcon/LoginIcon";
+import { Button } from "@mui/material";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+
+import { UserLogin } from "../../Components/Api/Api";
+import { toggle_login } from "../../Features/Login/LoginSlice";
 
 export default function Login() {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [user, setUser] = useState({
+    username: "",
+    password: "",
+  });
+  const [error, setError] = useState("");
   return (
     <div style={{ margin: 32, height: "100%" }}>
-      <div style={styles.flex_row}>
-        <h1 style={styles.text_large}>Login</h1>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+        }}
+      >
+        <div style={styles.flex_row}>
+          <LoginIcon size={64} color="white" />
+          <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+            Login to Ivy
+          </h1>
+        </div>
+        <div style={styles.flex_row}>
+          <p style={{ ...styles.text_white, ...styles.text_M }}>Username</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, username: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <div style={styles.flex_row}>
+          <p style={{ ...styles.text_white, ...styles.text_M }}>Password</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            type="password"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, password: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <Button
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#80b38b" },
+          }}
+          variant="contained"
+          onClick={async () => {
+            setUser({
+              username: "",
+              password: "",
+            });
+            if (await UserLogin(user)) {
+              await dispatch(toggle_login());
+              // await dispatch(SetUser(await UserInfo()));
+              navigate("/");
+            } else {
+              setError("Invalid Login");
+            }
+          }}
+        >
+          Login
+        </Button>
+        <Button
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#80b38b" },
+          }}
+          variant="contained"
+          onClick={() => {
+            navigate("/Register");
+          }}
+        >
+          Register
+        </Button>
       </div>
     </div>
   );

src/styles.tsx

@@ -94,6 +94,14 @@ const styles: { [key: string]: React.CSSProperties } = {
     borderRadius: 16,
     gap: 4,
   },
+  button_baseline: {
+    width: "8rem",
+    height: 32,
+    border: "none",
+    padding: 8,
+    borderRadius: 16,
+    margin: 4,
+  },
   logout_button: {
     backgroundColor: "#0b2322",
     width: "30vh",