Revize a12a4e99

re #58 mostly css edited, also login/logout

client/src/App.css

@@ -15 +15 @@
 
 /* --------------APP------------------*/
 
+.App {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
 .permissionText {
     text-align: center;
     justify-content: center;
@@ -35 +41 @@
 /* ------------- 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 +92 @@
     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 +248 @@
     padding: 10px;
 }
 
-/* table td {
-    width: 50px;
-} */
-
 .side-content table td {
     height: 50px;
 }
@@ -279 +296 @@
     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 +401 @@
 /* -------------------LogOut------------------- */
 
 .logout p {
-    font-size: 48px;
+    font-size: 38px;
     text-align: center;
     padding: 40px;
     color: #ffffff;
@@ -421 +438 @@
 
 @media only screen and (max-width: 792px) {
     .container {
-    height: 100vh;
     flex-direction: column;
     }
 
@@ -502 +518 @@
 }
 
 @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 +618 @@
         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;

client/src/App.js

@@ -15 +15 @@
 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);

client/src/Nav.js

@@ -1 +1 @@
 import React from 'react';
 import './App.css';
 import { Link } from 'react-router-dom';
+import * as api_fetch from './api'
 
 function Nav(props) {
 
@@ -8 +9 @@
     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 +29 @@
               </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>

client/src/api.js

@@ -1 +1 @@
 // ******************** 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 +33 @@
   try {
     response = await fetch(
       `${window.config.baseUrl}/users/current/profile`, {
-        headers: {},
+
         credentials: 'include'
       }
     );