Client - add confirmation before logout + style fix

This commit is contained in:
Sam 2023-07-12 18:14:17 +02:00
parent c062b7a049
commit 3b59c4599f
5 changed files with 75 additions and 6 deletions

View File

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

View File

@ -1,5 +1,13 @@
<template> <template>
<div id="nav"> <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-container">
<div class="nav-app-name"> <div class="nav-app-name">
<router-link class="nav-item app-name" to="/">FitTrackee</router-link> <router-link class="nav-item app-name" to="/">FitTrackee</router-link>
@ -48,9 +56,13 @@
<router-link class="nav-item" to="/profile" @click="closeMenu"> <router-link class="nav-item" to="/profile" @click="closeMenu">
{{ authUser.username }} {{ authUser.username }}
</router-link> </router-link>
<div class="nav-item nav-link" @click="logout"> <button
{{ $t('user.LOGOUT') }} class="logout-button transparent"
</div> @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>
<div class="nav-items-group" v-else> <div class="nav-items-group" v-else>
<router-link class="nav-item" to="/login" @click="closeMenu"> <router-link class="nav-item" to="/login" @click="closeMenu">
@ -76,7 +88,7 @@
</template> </template>
<script setup lang="ts"> <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 UserPicture from '@/components/User/UserPicture.vue'
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants' import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
@ -98,7 +110,8 @@
const language: ComputedRef<string> = computed( const language: ComputedRef<string> = computed(
() => store.getters[ROOT_STORE.GETTERS.LANGUAGE] () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
) )
const isMenuOpen = ref(false) const isMenuOpen: Ref<boolean> = ref(false)
const displayModal: Ref<boolean> = ref(false)
function openMenu() { function openMenu() {
isMenuOpen.value = true isMenuOpen.value = true
@ -116,6 +129,16 @@
} }
function logout() { function logout() {
store.dispatch(AUTH_USER_STORE.ACTIONS.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> </script>
@ -220,6 +243,16 @@
.nav-separator { .nav-separator {
display: none; 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) { @media screen and (max-width: $medium-limit) {
@ -280,6 +313,19 @@
.nav-items-group { .nav-items-group {
display: flex; display: flex;
flex-direction: column; 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 { .nav-item {

View File

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

View File

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

View File

@ -57,6 +57,22 @@ button {
color: var(--app-color); color: var(--app-color);
padding: 6px 14px; 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 { &:hover {
background: var(--app-color); background: var(--app-color);
color: var(--button-hover-color); color: var(--button-hover-color);