commit a12a4e9980cbffd010014e5d786812cfda0e002f
Author: plundrichov <monika.plundrichova@yoso.fi>
Date:   Mon Jul 13 16:26:27 2020 +0200

    re #58 mostly css edited, also login/logout

diff --git a/client/src/App.css b/client/src/App.css
index fb6517b..1569585 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -15,6 +15,12 @@
 
 /* --------------APP------------------*/
 
+.App {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
 .permissionText {
     text-align: center;
     justify-content: center;
@@ -35,13 +41,13 @@
 /* ------------- Navbar --------------- */
 
 .top-nav {
-    width: 100vw;
     height: 60px;
     background-color: #393d3f;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: white;
+    padding: 10px 0;
 }
 
 .img-avatar {
@@ -86,12 +92,27 @@
     color: rgb(57, 184, 177);
 }
 
+.btn-logout {
+    background-color: none;
+    background: none;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+}
+.btn-logout:focus {
+    outline: none;
+}
+
+.profile-comp svg:focus {
+    outline: none;
+}
+
 /* --------- MAIN CONTAINER ------------ */
 
 .container {
     width: 100%;
-    min-height: 100vh;
     display: flex;
+    flex-grow: 1;
     background-color: rgb(129, 168, 162);
     /* background: linear-gradient(#689c94, #0f546b); */
     position: relative;
@@ -227,10 +248,6 @@ table {
     padding: 10px;
 }
 
-/* table td {
-    width: 50px;
-} */
-
 .side-content table td {
     height: 50px;
 }
@@ -279,8 +296,8 @@ input {
     position: absolute;
     justify-content: center;
     align-items: center;
-    width: 480px;
-    height: 480px;
+    width: 430px;
+    height: 430px;
     background-color: rgba(255, 255, 255, 0.075);
     /* border: 2px solid white; */
     border-radius: 50%;
@@ -384,7 +401,7 @@ input {
 /* -------------------LogOut------------------- */
 
 .logout p {
-    font-size: 48px;
+    font-size: 38px;
     text-align: center;
     padding: 40px;
     color: #ffffff;
@@ -421,7 +438,6 @@ input {
 
 @media only screen and (max-width: 792px) {
     .container {
-    height: 100vh;
     flex-direction: column;
     }
 
@@ -502,27 +518,25 @@ input {
 }
 
 @media only screen and (max-width: 480px) {
-    .top-nav h3 {
-        margin-right: 30px;
+    .top-nav h1 {
+        margin-right: 20px;
+        margin-left: 30px;
     }
 
     .login-container {
         width: 300px;
         height: 300px;
     }
-    .login-container h1 {
+    .login-container p {
         color: white;
         font-size: 60px;
     }
 
-    .logout h1 {
-        font-size: 22px;
+    .logout p {
+        font-size: 24px;
         text-align: center;
         padding: 20px;
     }
-    .logout h4 {
-        font-size: 14px;
-    }
 
     .profile-comp {
         margin-right: 20px;
@@ -604,19 +618,16 @@ input {
         width: 250px;
         height: 250px;
     }
-    .login-container h1 {
+    .login-container p {
         color: white;
         font-size: 50px;
     }
 
-    .logout h1 {
+    .logout p {
         font-size: 22px;
         text-align: center;
         padding: 20px;
     }
-    .logout h4 {
-        font-size: 12px;
-    }
 
     .offs-item {
         flex-direction: column;
diff --git a/client/src/App.js b/client/src/App.js
index 8b2750f..cb57759 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -15,7 +15,7 @@ import * as api_fetch from './api'
 function App() {
 
   useEffect(() => {
-    if (window.location.pathname === '/login') return;
+    if (window.location.pathname === '/login' || window.location.pathname === '/logout') return;
 
     api_fetch.getCurrentProfile().then(currentProfile => {
       setCurrentUser(currentProfile);
diff --git a/client/src/Nav.js b/client/src/Nav.js
index ce5f7fb..122bad8 100644
--- a/client/src/Nav.js
+++ b/client/src/Nav.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
 import { Link } from 'react-router-dom';
+import * as api_fetch from './api'
 
 function Nav(props) {
 
@@ -8,7 +9,7 @@ function Nav(props) {
     props.currentUser === undefined
   ?
       <nav className="top-nav">
-        <Link className="link-nav" to="/"><h1>YOSO</h1></Link>
+        <Link className="link-nav" to="/login"><h1>YOSO</h1></Link>
       </nav>
   :
       <nav className="top-nav">
@@ -28,12 +29,12 @@ function Nav(props) {
               </li>
               :  null }
               <li>
-                <Link to="/logout">
+                <button className="btn-logout" onClick={() => api_fetch.logOut()}>
                   <svg className="bi bi-power navIcon" width="20px" height="20px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd" d="M5.578 4.437a5 5 0 1 0 4.922.044l.5-.866a6 6 0 1 1-5.908-.053l.486.875z"/>
                     <path fillRule="evenodd" d="M7.5 8V1h1v7h-1z"/>
                   </svg>
-                </Link>
+                </button>
               </li>
           </ul>
         </div>
diff --git a/client/src/api.js b/client/src/api.js
index bf8753c..a44fef3 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -1,5 +1,31 @@
 // ******************** GET DATA APP getCurrentProfile ********************
 
+export const logOut = async () => {
+
+  let response;
+
+  try {
+    response = await fetch(
+      `${window.config.baseUrl}/logout`, {
+        credentials: 'include'
+      }
+    );    
+  } catch (e) {
+    throw 'Server is not available'
+    }
+
+  if (response.ok) {
+        window.location.replace(`/logout`)
+  } else {
+      switch (response.status) {
+        case 500:
+          throw new Error('Internal server error.')
+        default:
+          throw new Error(response.statusText)
+      }
+    }
+}
+
 export const getCurrentProfile = async () => {
 
   let response;
@@ -7,7 +33,7 @@ export const getCurrentProfile = async () => {
   try {
     response = await fetch(
       `${window.config.baseUrl}/users/current/profile`, {
-        headers: {},
+
         credentials: 'include'
       }
     );    
