diff --git a/package-lock.json b/package-lock.json
index b83b61b7590c2d9b8daa41c719fb6a7871f59697..e4b02e8b0510f33185c7a9f4f01e871659c23d40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "leaflet-test",
+  "name": "ehasa-frontend",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/src/App.js b/src/App.js
index e104c53594300b2ccb83fb07e23a9bce76835e9d..02a6ba330e465a25aa0c47894fdf58cc4ddba9af 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styles from './App.css';
 
 import UserMap from './components/UserMap.js'
+import {LoginForm} from './LoginForm';
 
 
 class App extends Component {
@@ -12,14 +13,67 @@ class App extends Component {
       lat: 62.2416479,
       lng: 25.7597186,
       zoom: 13,
+      logged: false,
+      name: ''
+    }
+
+    this.login = this.login.bind(this);
+  }
+
+  componentDidMount(){
+    // log in if cookie with username is found
+    let name = getCookie('username');
+    if(name !== ''){
+      this.login({
+        logged: true,
+        name: name
+      });
+    }
+  }
+
+  login(loginInfo){
+    if(loginInfo.logged !== this.state.logged){
+      this.setState({
+        logged: loginInfo.logged,
+        name: loginInfo.name
+      });
+      document.cookie = 'username='+loginInfo.name+';path=/;';
+    }
+    else{
+      console.log('Wrong info');
     }
   }
+
   render(){
   const initialPosition = [this.state.lat, this.state.lng];
     return (
-      <UserMap position={initialPosition} zoom={this.state.zoom}/>
+      <div>
+        <p>{this.state.logged ? 'Logged in: ' + this.state.name : ''}</p>
+        {!this.state.logged && <LoginForm onSubmit={this.login}/>}
+        {this.state.logged && <button onClick={() => this.login({
+          logged: false,
+          name: ''
+        })}>Logout</button>}
+        <UserMap position={initialPosition} zoom={this.state.zoom}/>
+      </div>
     );
   }
 }
 
+function getCookie(cname){
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === " ") {
+      c = c.substring(1);
+    }
+    if(c.indexOf(name) === 0){
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
 export default App;
diff --git a/src/LoginForm.js b/src/LoginForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..05962f75b43315b026f1d77d9945734d55273eb1
--- /dev/null
+++ b/src/LoginForm.js
@@ -0,0 +1,100 @@
+import React from "react";
+
+//TODO: remove this when not needed
+const user = {
+    name: "user",
+    password: "password"
+}
+
+const style = {
+    backgroundColor: 'red',
+    maxHeight: '100%',
+    maxWidth: '350px'
+}
+
+export class LoginForm extends React.Component{
+    constructor(props){
+        super(props);
+        this.handleLogin = this.handleLogin.bind(this);
+    }
+
+    handleLogin(e){
+        const name = e.target.elements.name.value;
+        const password = e.target.elements.password.value;
+
+        e.preventDefault();
+
+        // Don't send user info to the server if used hardcoded info
+        if(name === user.name && password === user.password){
+            this.props.onSubmit({
+                logged: true,
+                name: name
+            });
+        }else{
+            this.props.onSubmit({
+                logged: false,
+                name: ""
+            });
+
+            
+            // This did NOT work !!!!
+
+            // (async() =>{
+            //     const asd = await fetch('http://172.20.2.143:3000/user/login',{
+            //         method: 'POST',
+            //         headers: {
+            //             'Accept': 'application/json',
+            //             'Content-Type': 'application/json',
+            //         },
+            //         credentials: 'same-origin',
+            //         body: JSON.stringify({
+            //             name: name,
+            //             password: password
+            //         })
+            //     });
+            //     const content = await asd;
+            //     console.log(content);
+            // })();
+
+            // This worked :)
+            // Send login info to the server
+            fetch("http://172.20.2.143:3000/user/login",{
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: name,
+                    password: password
+                })
+            })
+            .then(res => res.json())
+            .then((result) => {
+                    console.log(result);
+                },
+                // Note: it's important to handle errors here
+                // instead of a catch() block so that we don't swallow
+                // exceptions from actual bugs in components.
+                (error) => {
+                    console.log(error);
+                }
+            )
+        }
+    }
+    
+    render(){
+        return(
+            <form onSubmit={this.handleLogin} style={style}>
+                <label>LOGIN</label>
+                <br></br>
+                <label>Name:</label>
+                <input name="name"/>
+                <br></br>
+                <label>Password:</label>
+                <input type="password" name="password"/>
+                <button type="submit">Submit</button>
+            </form>
+        );
+    }
+}
\ No newline at end of file