Client - add confirmation before logout + style fix
This commit is contained in:
parent
c062b7a049
commit
3b59c4599f
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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.",
|
||||||
|
@ -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é.",
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user