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