Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision 748b7f64447d589e9f10a24a78cda8842f65b36a)
+++ my-react-app/src/App.js	(revision a3d63eb126b369608e548cbf461b153cd008f391)
@@ -14,4 +14,5 @@
 import { CuisineContext } from './components/CuisineContext';
 import RestaurantInfo from "./components/RestaurantInfo";
+import LoginForm from "./components/Login";
 
 const App = () => {
@@ -30,4 +31,5 @@
                     <Route path="/reservationConfirmation/:tableNumber/:timeSlot/:restaurantId" element={<ReservationConfirmation />} />
                     <Route path="/reservations/reservationEdit/:reservationId" element={<ReservationEdit />} />
+                    <Route path={"/login"} exact render={() => <LoginForm login={this.login}/>}/>
                     <Route path="/error" element={<ErrorPage/>}/>
                 </Routes>
Index: my-react-app/src/components/Header.js
===================================================================
--- my-react-app/src/components/Header.js	(revision 748b7f64447d589e9f10a24a78cda8842f65b36a)
+++ my-react-app/src/components/Header.js	(revision a3d63eb126b369608e548cbf461b153cd008f391)
@@ -26,4 +26,7 @@
                             <Link className="nav-link" to="/reservations">Reservations</Link>
                         </li>
+                        <form className="form-inline mt-2 mt-md-0 ml-3">
+                            <Link className="btn btn-outline-info my-2 my-sm-0" to={"/login"}>Login</Link>
+                        </form>
                     </ul>
                 </div>
Index: my-react-app/src/components/Login.js
===================================================================
--- my-react-app/src/components/Login.js	(revision a3d63eb126b369608e548cbf461b153cd008f391)
+++ my-react-app/src/components/Login.js	(revision a3d63eb126b369608e548cbf461b153cd008f391)
@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+const AUTH_TOKEN = 'auth_token';
+
+const loginForm = (props) => {
+    const[auth, setAuth] = useState({});
+    const navigate = useNavigate();
+
+    const login = (e) => {
+        const auth = {
+            "username":e.target.username.value,
+            "password":e.target.password.value
+        }
+
+        props.login(auth, (response) => {
+            debugger;
+            localStorage.setItem(AUTH_TOKEN, response.data)
+            navigate("/");
+        })
+    }
+
+    const onChangeHandler = (e) => {
+        const name = e.target.name;
+        const value = e.target.value;
+        setAuth({name:value});
+    }
+
+    return (
+        <div>
+            <form onSubmit={login}>
+                <div className="row form-group">
+                    <div className="col-md-6 font-weight-bold"> Корисничко име:</div>
+                    <div className="col-md-6">
+                        <input name={"username"} onChange={onChangeHandler} defaultValue={auth.username} type="text"
+                               className="form-control"/>
+                    </div>
+                </div>
+                <div className="row form-group">
+                    <div className="col-md-6 font-weight-bold"> Лозинка:</div>
+                    <div className="col-md-6">
+                        <input name={"password"} onChange={onChangeHandler} defaultValue={auth.password} type="password"
+                               className="form-control"
+                               title="Лозинка"/>
+                    </div>
+                </div>
+                <div className="col-md-12 text-right">
+
+                    <button type="submit" className="btn btn-primary" title="Зачувај">
+                        <i className="fa fa-fw fa-user"></i> Логин
+                    </button>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default loginForm;