Client - fix modals
This commit is contained in:
parent
14e66aee04
commit
8cd2354955
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="modal">
|
<div id="modal" role="dialog">
|
||||||
<div class="custom-modal">
|
<div class="custom-modal">
|
||||||
<Card>
|
<Card>
|
||||||
<template #title>
|
<template #title>
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
<div id="user-infos" class="description-list">
|
<div id="user-infos" class="description-list">
|
||||||
<Modal
|
<Modal
|
||||||
v-if="displayModal"
|
v-if="displayModal"
|
||||||
|
name="user"
|
||||||
:title="$t('common.CONFIRMATION')"
|
:title="$t('common.CONFIRMATION')"
|
||||||
:message="
|
:message="
|
||||||
displayModal === 'delete'
|
displayModal === 'delete'
|
||||||
@ -15,6 +16,7 @@
|
|||||||
: resetUserPassword(user.username)
|
: resetUserPassword(user.username)
|
||||||
"
|
"
|
||||||
@cancelAction="updateDisplayModal('')"
|
@cancelAction="updateDisplayModal('')"
|
||||||
|
@keydown.esc="updateDisplayModal('')"
|
||||||
/>
|
/>
|
||||||
<div class="info-box success-message" v-if="isSuccess">
|
<div class="info-box success-message" v-if="isSuccess">
|
||||||
{{
|
{{
|
||||||
@ -190,6 +192,10 @@
|
|||||||
function updateDisplayModal(value: string) {
|
function updateDisplayModal(value: string) {
|
||||||
displayModal.value = value
|
displayModal.value = value
|
||||||
if (value !== '') {
|
if (value !== '') {
|
||||||
|
const button = document.getElementById('user-cancel-button')
|
||||||
|
if (button) {
|
||||||
|
button.focus()
|
||||||
|
}
|
||||||
store.commit(USERS_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
|
store.commit(USERS_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,10 +2,12 @@
|
|||||||
<div id="user-infos-edition">
|
<div id="user-infos-edition">
|
||||||
<Modal
|
<Modal
|
||||||
v-if="displayModal"
|
v-if="displayModal"
|
||||||
|
name="account"
|
||||||
:title="$t('common.CONFIRMATION')"
|
:title="$t('common.CONFIRMATION')"
|
||||||
:message="$t('user.CONFIRM_ACCOUNT_DELETION')"
|
:message="$t('user.CONFIRM_ACCOUNT_DELETION')"
|
||||||
@confirmAction="deleteAccount(user.username)"
|
@confirmAction="deleteAccount(user.username)"
|
||||||
@cancelAction="updateDisplayModal(false)"
|
@cancelAction="updateDisplayModal(false)"
|
||||||
|
@keydown.esc="updateDisplayModal(false)"
|
||||||
/>
|
/>
|
||||||
<div class="profile-form form-box">
|
<div class="profile-form form-box">
|
||||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||||
@ -62,7 +64,11 @@
|
|||||||
<button class="danger" @click.prevent="updateDisplayModal(true)">
|
<button class="danger" @click.prevent="updateDisplayModal(true)">
|
||||||
{{ $t('buttons.DELETE_MY_ACCOUNT') }}
|
{{ $t('buttons.DELETE_MY_ACCOUNT') }}
|
||||||
</button>
|
</button>
|
||||||
<button class="confirm" v-if="canRequestExport()" @click.prevent="requestExport">
|
<button
|
||||||
|
class="confirm"
|
||||||
|
v-if="canRequestExport()"
|
||||||
|
@click.prevent="requestExport"
|
||||||
|
>
|
||||||
{{ $t('buttons.REQUEST_DATA_EXPORT') }}
|
{{ $t('buttons.REQUEST_DATA_EXPORT') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -73,22 +79,22 @@
|
|||||||
{{ $t('user.EXPORT_REQUEST.ONLY_ONE_EXPORT_PER_DAY') }}
|
{{ $t('user.EXPORT_REQUEST.ONLY_ONE_EXPORT_PER_DAY') }}
|
||||||
</span>
|
</span>
|
||||||
<div v-if="exportRequest" class="data-export-archive">
|
<div v-if="exportRequest" class="data-export-archive">
|
||||||
{{$t('user.EXPORT_REQUEST.DATA_EXPORT')}}
|
{{ $t('user.EXPORT_REQUEST.DATA_EXPORT') }}
|
||||||
({{ exportRequestDate }}):
|
({{ exportRequestDate }}):
|
||||||
<span
|
<span
|
||||||
v-if="exportRequest.status=== 'successful'"
|
v-if="exportRequest.status === 'successful'"
|
||||||
class="archive-link"
|
class="archive-link"
|
||||||
@click.prevent="downloadArchive(exportRequest.file_name)"
|
@click.prevent="downloadArchive(exportRequest.file_name)"
|
||||||
>
|
>
|
||||||
<i class="fa fa-download" aria-hidden="true" />
|
<i class="fa fa-download" aria-hidden="true" />
|
||||||
{{ $t("user.EXPORT_REQUEST.DOWNLOAD_ARCHIVE") }}
|
{{ $t('user.EXPORT_REQUEST.DOWNLOAD_ARCHIVE') }}
|
||||||
({{ getReadableFileSize(exportRequest.file_size) }})
|
({{ getReadableFileSize(exportRequest.file_size) }})
|
||||||
</span>
|
</span>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
{{ $t(`user.EXPORT_REQUEST.STATUS.${exportRequest.status}`)}}
|
{{ $t(`user.EXPORT_REQUEST.STATUS.${exportRequest.status}`) }}
|
||||||
</span>
|
</span>
|
||||||
<span v-if="generatingLink">
|
<span v-if="generatingLink">
|
||||||
{{ $t(`user.EXPORT_REQUEST.GENERATING_LINK`)}}
|
{{ $t(`user.EXPORT_REQUEST.GENERATING_LINK`) }}
|
||||||
<i class="fa fa-spinner fa-pulse" aria-hidden="true" />
|
<i class="fa fa-spinner fa-pulse" aria-hidden="true" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -111,11 +117,15 @@
|
|||||||
onUnmounted,
|
onUnmounted,
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
|
||||||
import authApi from "@/api/authApi";
|
import authApi from '@/api/authApi'
|
||||||
import PasswordInput from '@/components/Common/PasswordInput.vue'
|
import PasswordInput from '@/components/Common/PasswordInput.vue'
|
||||||
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
||||||
import { TAppConfig } from '@/types/application'
|
import { TAppConfig } from '@/types/application'
|
||||||
import {IAuthUserProfile, IUserAccountPayload, IExportRequest} from '@/types/user'
|
import {
|
||||||
|
IAuthUserProfile,
|
||||||
|
IUserAccountPayload,
|
||||||
|
IExportRequest,
|
||||||
|
} from '@/types/user'
|
||||||
import { useStore } from '@/use/useStore'
|
import { useStore } from '@/use/useStore'
|
||||||
import { formatDate } from '@/utils/dates'
|
import { formatDate } from '@/utils/dates'
|
||||||
import { getReadableFileSize } from '@/utils/files'
|
import { getReadableFileSize } from '@/utils/files'
|
||||||
@ -150,8 +160,8 @@
|
|||||||
const exportRequest: ComputedRef<IExportRequest | null> = computed(
|
const exportRequest: ComputedRef<IExportRequest | null> = computed(
|
||||||
() => store.getters[AUTH_USER_STORE.GETTERS.EXPORT_REQUEST]
|
() => store.getters[AUTH_USER_STORE.GETTERS.EXPORT_REQUEST]
|
||||||
)
|
)
|
||||||
const exportRequestDate: ComputedRef<string | null> = computed(
|
const exportRequestDate: ComputedRef<string | null> = computed(() =>
|
||||||
() => getExportRequestDate()
|
getExportRequestDate()
|
||||||
)
|
)
|
||||||
const generatingLink: Ref<boolean> = ref(false)
|
const generatingLink: Ref<boolean> = ref(false)
|
||||||
|
|
||||||
@ -175,19 +185,22 @@
|
|||||||
userForm.new_password = new_password
|
userForm.new_password = new_password
|
||||||
}
|
}
|
||||||
function getExportRequestDate() {
|
function getExportRequestDate() {
|
||||||
return exportRequest.value ? formatDate(
|
return exportRequest.value
|
||||||
exportRequest.value.created_at,
|
? formatDate(
|
||||||
user.value.timezone,
|
exportRequest.value.created_at,
|
||||||
user.value.date_format,
|
user.value.timezone,
|
||||||
true,
|
user.value.date_format,
|
||||||
null, true
|
true,
|
||||||
) : null
|
null,
|
||||||
|
true
|
||||||
|
)
|
||||||
|
: null
|
||||||
}
|
}
|
||||||
|
|
||||||
function canRequestExport() {
|
function canRequestExport() {
|
||||||
return exportRequestDate.value
|
return exportRequestDate.value
|
||||||
? isBefore(new Date(exportRequestDate.value), subDays(new Date(), 1))
|
? isBefore(new Date(exportRequestDate.value), subDays(new Date(), 1))
|
||||||
: true
|
: true
|
||||||
}
|
}
|
||||||
function updateProfile() {
|
function updateProfile() {
|
||||||
const payload: IUserAccountPayload = {
|
const payload: IUserAccountPayload = {
|
||||||
@ -202,6 +215,12 @@
|
|||||||
}
|
}
|
||||||
function updateDisplayModal(value: boolean) {
|
function updateDisplayModal(value: boolean) {
|
||||||
displayModal.value = value
|
displayModal.value = value
|
||||||
|
if (displayModal.value) {
|
||||||
|
const button = document.getElementById('account-cancel-button')
|
||||||
|
if (button) {
|
||||||
|
button.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
function deleteAccount(username: string) {
|
function deleteAccount(username: string) {
|
||||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||||
@ -225,7 +244,7 @@
|
|||||||
document.body.appendChild(archive_link)
|
document.body.appendChild(archive_link)
|
||||||
archive_link.click()
|
archive_link.click()
|
||||||
})
|
})
|
||||||
.finally(() => generatingLink.value = false)
|
.finally(() => (generatingLink.value = false))
|
||||||
}
|
}
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@ -284,8 +303,8 @@
|
|||||||
.data-export {
|
.data-export {
|
||||||
padding: $default-padding 0;
|
padding: $default-padding 0;
|
||||||
.data-export-archive {
|
.data-export-archive {
|
||||||
padding-top: $default-padding*2;
|
padding-top: $default-padding * 2;
|
||||||
font-size: .9em;
|
font-size: 0.9em;
|
||||||
|
|
||||||
.archive-link {
|
.archive-link {
|
||||||
color: var(--app-a-color);
|
color: var(--app-a-color);
|
||||||
|
@ -2,10 +2,12 @@
|
|||||||
<div id="oauth2-app" class="description-list">
|
<div id="oauth2-app" class="description-list">
|
||||||
<Modal
|
<Modal
|
||||||
v-if="displayModal"
|
v-if="displayModal"
|
||||||
|
name="app"
|
||||||
:title="$t('common.CONFIRMATION')"
|
:title="$t('common.CONFIRMATION')"
|
||||||
:message="$t(messageToDisplay)"
|
:message="$t(messageToDisplay)"
|
||||||
@confirmAction="confirmAction(client.id)"
|
@confirmAction="confirmAction(client.id)"
|
||||||
@cancelAction="updateDisplayModal(false)"
|
@cancelAction="updateDisplayModal(false)"
|
||||||
|
@keydown.esc="updateDisplayModal(false)"
|
||||||
/>
|
/>
|
||||||
<div v-if="client && client.client_id">
|
<div v-if="client && client.client_id">
|
||||||
<div
|
<div
|
||||||
@ -178,6 +180,11 @@
|
|||||||
displayModal.value = value
|
displayModal.value = value
|
||||||
if (!value) {
|
if (!value) {
|
||||||
messageToDisplay.value = null
|
messageToDisplay.value = null
|
||||||
|
} else {
|
||||||
|
const button = document.getElementById('app-cancel-button')
|
||||||
|
if (button) {
|
||||||
|
button.focus()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function confirmAction(clientId: number) {
|
function confirmAction(clientId: number) {
|
||||||
|
Loading…
Reference in New Issue
Block a user