Client - add link to users in admin

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -41,7 +41,9 @@
                   <span class="cell-heading">
                     {{ $t('user.USERNAME') }}
                   </span>
-                  {{ user.username }}
+                  <router-link :to="`/users/${user.username}`">
+                    {{ user.username }}
+                  </router-link>
                 </td>
                 <td>
                   <span class="cell-heading">
@@ -116,6 +118,7 @@
     watch,
     capitalize,
     onBeforeMount,
+    onUnmounted,
   } from 'vue'
   import { LocationQuery, useRoute, useRouter } from 'vue-router'
 
@@ -217,6 +220,10 @@
         }
       )
 
+      onUnmounted(() => {
+        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USERS)
+      })
+
       return {
         authUser,
         errorMessages,

fittrackee_client/src/components/Common/Modal.vue

@@ -6,7 +6,12 @@
           {{ title }}
         </template>
         <template #content>
-          <div class="modal-message">{{ message }}</div>
+          <div class="modal-message" v-if="strongMessage">
+            <i18n-t :keypath="message">
+              <span>{{ strongMessage }}</span>
+            </i18n-t>
+          </div>
+          <div class="modal-message" v-else>{{ message }}</div>
           <ErrorMessage :message="errorMessages" v-if="errorMessages" />
           <div class="modal-buttons">
             <button class="confirm" @click="emit('confirmAction')">
@@ -39,6 +44,10 @@
         type: String,
         required: true,
       },
+      strongMessage: {
+        type: String || null,
+        default: null,
+      },
     },
     emits: ['cancelAction', 'confirmAction'],
     setup(props, { emit }) {
@@ -90,6 +99,9 @@
 
           .modal-message {
             padding: $default-padding;
+            span {
+              font-weight: bold;
+            }
           }
 
           .modal-buttons {

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>