From 8cd235495552bf1da77e45ec9acc6788cbdd227c Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Thu, 13 Jul 2023 16:35:11 +0200
Subject: [PATCH] Client - fix modals

---
 .../src/components/Common/Modal.vue           |  2 +-
 .../User/ProfileDisplay/UserInfos.vue         |  6 ++
 .../ProfileEdition/UserAccountEdition.vue     | 63 ++++++++++++-------
 .../src/components/User/UserApps/UserApp.vue  |  7 +++
 4 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/fittrackee_client/src/components/Common/Modal.vue b/fittrackee_client/src/components/Common/Modal.vue
index 4d59dc80..d0f08bbf 100644
--- a/fittrackee_client/src/components/Common/Modal.vue
+++ b/fittrackee_client/src/components/Common/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="modal">
+  <div id="modal" role="dialog">
     <div class="custom-modal">
       <Card>
         <template #title>
diff --git a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
index 748be5db..d771f271 100644
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
@@ -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)
     }
   }
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue b/fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue
index 9662ba37..41e1982e 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue
@@ -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);
diff --git a/fittrackee_client/src/components/User/UserApps/UserApp.vue b/fittrackee_client/src/components/User/UserApps/UserApp.vue
index 6a9ef46b..b958d841 100644
--- a/fittrackee_client/src/components/User/UserApps/UserApp.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserApp.vue
@@ -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) {