Client - add link to users in admin

fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue

@@ -1,5 +1,13 @@
 <template>
   <div id="user-infos" class="description-list">
+    <Modal
+      v-if="displayModal"
+      :title="$t('common.CONFIRMATION')"
+      message="admin.CONFIRM_USER_ACCOUNT_DELETION"
+      :strongMessage="user.username"
+      @confirmAction="deleteUserAccount(user.username)"
+      @cancelAction="updateDisplayModal(false)"
+    />
     <dl>
       <dt>{{ $t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
       <dd>{{ registrationDate }}</dd>
@@ -16,7 +24,17 @@
         {{ user.bio }}
       </dd>
     </dl>
-    <div class="profile-buttons">
+    <div class="profile-buttons" v-if="fromAdmin">
+      <button
+        class="danger"
+        v-if="authUser.username !== user.username"
+        @click.prevent="updateDisplayModal(true)"
+      >
+        {{ $t('admin.DELETE_USER') }}
+      </button>
+      <button @click="$router.go(-1)">{{ $t('buttons.BACK') }}</button>
+    </div>
+    <div class="profile-buttons" v-else>
       <button @click="$router.push('/profile/edit')">
         {{ $t('user.PROFILE.EDIT') }}
       </button>
@@ -27,9 +45,18 @@
 
 <script lang="ts">
   import { format } from 'date-fns'
-  import { PropType, computed, defineComponent } from 'vue'
+  import {
+    ComputedRef,
+    PropType,
+    Ref,
+    computed,
+    defineComponent,
+    ref,
+  } from 'vue'
 
+  import { USER_STORE } from '@/store/constants'
   import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
 
   export default defineComponent({
     name: 'UserInfos',
@@ -38,8 +65,16 @@
         type: Object as PropType<IUserProfile>,
         required: true,
       },
+      fromAdmin: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
+      const store = useStore()
+      const authUser: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
       const registrationDate = computed(() =>
         props.user.created_at
           ? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
@@ -50,7 +85,23 @@
           ? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
           : ''
       )
-      return { birthDate, registrationDate }
+      let displayModal: Ref<boolean> = ref(false)
+
+      function updateDisplayModal(value: boolean) {
+        displayModal.value = value
+      }
+      function deleteUserAccount(username: string) {
+        store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
+      }
+
+      return {
+        authUser,
+        birthDate,
+        displayModal,
+        registrationDate,
+        deleteUserAccount,
+        updateDisplayModal,
+      }
     },
   })
 </script>