Client - add confirmation before logout + style fix

fittrackee_client/src/components/Common/Modal.vue

@@ -21,7 +21,12 @@
             >
               {{ $t('buttons.YES') }}
             </button>
-            <button class="cancel" @click="emit('cancelAction')">
+            <button
+              tabindex="0"
+              id="cancel-button"
+              class="cancel"
+              @click="emit('cancelAction')"
+            >
               {{ $t(`buttons.${errorMessages ? 'CANCEL' : 'NO'}`) }}
             </button>
           </div>

fittrackee_client/src/components/NavBar.vue

@@ -1,5 +1,13 @@
 <template>
   <div id="nav">
+    <Modal
+      v-show="displayModal"
+      :title="$t('common.CONFIRMATION')"
+      :message="$t('user.LOGOUT_CONFIRMATION')"
+      @confirmAction="logout"
+      @cancelAction="updateDisplayModal(false)"
+      @keydown.esc="updateDisplayModal(false)"
+    />
     <div class="nav-container">
       <div class="nav-app-name">
         <router-link class="nav-item app-name" to="/">FitTrackee</router-link>
@@ -48,9 +56,13 @@
             <router-link class="nav-item" to="/profile" @click="closeMenu">
               {{ authUser.username }}
             </router-link>
-            <div class="nav-item nav-link" @click="logout">
-              {{ $t('user.LOGOUT') }}
-            </div>
+            <button
+              class="logout-button transparent"
+              @click="updateDisplayModal(true)"
+            >
+              <i class="fa fa-sign-out logout-fa" aria-hidden="true" />
+              <span class="logout-text">{{ $t('user.LOGOUT') }}</span>
+            </button>
           </div>
           <div class="nav-items-group" v-else>
             <router-link class="nav-item" to="/login" @click="closeMenu">
@@ -76,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ComputedRef, computed, ref, capitalize } from 'vue'
+  import { ComputedRef, Ref, computed, ref, capitalize } from 'vue'
 
   import UserPicture from '@/components/User/UserPicture.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
@@ -98,7 +110,8 @@
   const language: ComputedRef<string> = computed(
     () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
   )
-  const isMenuOpen = ref(false)
+  const isMenuOpen: Ref<boolean> = ref(false)
+  const displayModal: Ref<boolean> = ref(false)
 
   function openMenu() {
     isMenuOpen.value = true
@@ -116,6 +129,16 @@
   }
   function logout() {
     store.dispatch(AUTH_USER_STORE.ACTIONS.LOGOUT)
+    displayModal.value = false
+  }
+  function updateDisplayModal(display: boolean) {
+    displayModal.value = display
+    if (display) {
+      const button = document.getElementById('cancel-button')
+      if (button) {
+        button.focus()
+      }
+    }
   }
 </script>
 
@@ -220,6 +243,16 @@
       .nav-separator {
         display: none;
       }
+      .logout-button {
+        padding: $default-padding * 0.5 $default-padding * 0.75;
+        margin-left: 2px;
+        .logout-fa {
+          display: block;
+        }
+        .logout-text {
+          display: none;
+        }
+      }
     }
 
     @media screen and (max-width: $medium-limit) {
@@ -280,6 +313,19 @@
         .nav-items-group {
           display: flex;
           flex-direction: column;
+
+          .logout-button {
+            padding: $default-padding $default-padding $default-padding
+              $default-padding * 2.4;
+            color: var(--app-a-color);
+            text-align: left;
+            .logout-fa {
+              display: none;
+            }
+            .logout-text {
+              display: block;
+            }
+          }
         }
 
         .nav-item {

fittrackee_client/src/locales/en/user.json

@@ -26,6 +26,7 @@
     "LAST_PRIVACY_POLICY_TO_VALIDATE": "The privacy policy has been updated, please {0} it before proceeding.",
     "LOGIN": "Login",
     "LOGOUT": "Logout",
+    "LOGOUT_CONFIRMATION": "Are you sure you want to log out?",
     "LOG_IN": "log in",
     "NEW_PASSWORD": "New password",
     "NO_USERS_FOUND": "No users found.",

fittrackee_client/src/locales/fr/user.json

@@ -26,6 +26,7 @@
     "LAST_PRIVACY_POLICY_TO_VALIDATE": "La politique de confidentialité a été mise à jour. Veuillez l'{0} avant de poursuivre.",
     "LOGIN": "Se connecter",
     "LOGOUT": "Se déconnecter",
+    "LOGOUT_CONFIRMATION": "Etes-vous sûr de vouloir vous déconnecter",
     "LOG_IN": "connecter",
     "NEW_PASSWORD": "Nouveau mot de passe",
     "NO_USERS_FOUND": "Aucun utilisateur trouvé.",

fittrackee_client/src/scss/base.scss

@@ -57,6 +57,22 @@ button {
   color: var(--app-color);
   padding: 6px 14px;
 
+  &.transparent {
+    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+    font-size: 1em;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover {
+      background: transparent;
+      color: var(--app-color);
+    }
+
+    &:enabled:active {
+      box-shadow: none;
+    }
+  }
+
   &:hover {
     background: var(--app-color);
     color: var(--button-hover-color);