Login logic

src/components/Login/Login.jsx

@@ -1,17 +1,29 @@
 import "./Login.scss";
+import { useState } from "react";
+import { actions } from "../../data/login";
+import { useDispatch } from "react-redux";
 
 const Login = () => {
+  const [form, setForm] = useState({ username: null, password: null });
+  const dispatch = useDispatch();
+
+  const onTextChange = (event) => {
+    const currentField = event.target.id;
+    const currentValue = event.target.value;
+    setForm({ ...form, [currentField]: currentValue });
+  }
+
   return (
     <div className="login-container">
       <div className="card-container">
         <img src={"https://t3.ftcdn.net/jpg/03/39/70/90/360_F_339709048_ZITR4wrVsOXCKdjHncdtabSNWpIhiaR7.jpg"} height="250px" />
         <div>
-          <input placeholder="Username" type={"text"} className="input-style"/>
+          <input id="username" placeholder="Username" type={"text"} className="input-style" onChange={(event) => onTextChange(event)}/>
         </div>
         <div>
-          <input placeholder="Password" type={"password"} className="input-style"/>
+          <input id="password" placeholder="Password" type={"password"} className="input-style" onChange={(event) => onTextChange(event)}/>
         </div>
-        <button className="button-style">Login</button>
+        <button className="button-style" onClick={() => {console.log(form); dispatch(actions.login(form))}}>Login</button>
       </div>
     </div>
   );

src/components/Sidebar/Sidebar.jsx

@@ -14,7 +14,7 @@ const Sidebar = () => {
       <div className="main-items-container">
         <div className="group-container">
           <div>Main</div>
-          <Link to="/">
+          <Link to="/home">
           <div className="group-item">
             <Dashboard className="group-item-icon"/>
             <div className="group-item-title">Dashboard</div>