Client - add account deletion

fittrackee_client/src/components/User/ProfileEdition.vue

@@ -1,5 +1,12 @@
 <template>
   <div id="user-profile-edition">
+    <Modal
+      v-if="displayModal"
+      :title="t('common.CONFIRMATION')"
+      :message="t('user.CONFIRM_ACCOUNT_DELETION')"
+      @confirmAction="deleteAccount(user.username)"
+      @cancelAction="updateDisplayModal(false)"
+    />
     <Card>
       <template #title>{{ t('user.PROFILE.EDITION') }}</template>
       <template #content>
@@ -113,6 +120,9 @@
               <button class="confirm" type="submit">
                 {{ t('buttons.SUBMIT') }}
               </button>
+              <button class="danger" @click.prevent="updateDisplayModal(true)">
+                {{ t('buttons.DELETE_MY_ACCOUNT') }}
+              </button>
               <button class="cancel" @click.prevent="$router.go(-1)">
                 {{ t('buttons.CANCEL') }}
               </button>
@@ -129,9 +139,11 @@
   import {
     ComputedRef,
     PropType,
+    Ref,
     computed,
     defineComponent,
     reactive,
+    ref,
     onMounted,
   } from 'vue'
   import { useI18n } from 'vue-i18n'
@@ -139,6 +151,7 @@
   import Card from '@/components/Common/Card.vue'
   import CustomTextArea from '@/components/Common/CustomTextArea.vue'
   import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import Modal from '@/components/Common/Modal.vue'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IAuthUserProfile, IUserPayload } from '@/types/user'
   import { useStore } from '@/use/useStore'
@@ -149,6 +162,7 @@
       Card,
       CustomTextArea,
       ErrorMessage,
+      Modal,
     },
     props: {
       user: {
@@ -195,6 +209,7 @@
       const errorMessages: ComputedRef<string | string[] | null> = computed(
         () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
       )
+      let displayModal: Ref<boolean> = ref(false)
 
       onMounted(() => {
         if (props.user) {
@@ -220,16 +235,25 @@
       function updateProfile() {
         store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
       }
+      function updateDisplayModal(value: boolean) {
+        displayModal.value = value
+      }
+      function deleteAccount(username: string) {
+        store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
+      }
 
       return {
         availableLanguages,
+        displayModal,
         errorMessages,
         loading,
         registrationDate,
         t,
         userForm,
         weekStart,
+        deleteAccount,
         updateBio,
+        updateDisplayModal,
         updateProfile,
       }
     },

fittrackee_client/src/locales/en/buttons.json

@@ -1,5 +1,6 @@
 {
   "CANCEL": "Cancel",
+  "DELETE_MY_ACCOUNT": "Delete my account",
   "FILTER": "Filter",
   "LOGIN": "Log in",
   "NO": "No",

fittrackee_client/src/locales/en/user.json

@@ -1,5 +1,6 @@
 {
   "EMAIL": "Email",
+  "CONFIRM_ACCOUNT_DELETION": "Are you sure you want to delete your account? All data will be deleted, this cannot be undone",
   "LANGUAGE": "Language",
   "LOGIN": "Login",
   "LOGOUT": "Logout",

fittrackee_client/src/locales/fr/buttons.json

@@ -1,5 +1,6 @@
 {
   "CANCEL": "Annuler",
+  "DELETE_MY_ACCOUNT": "Supprimer mon compte",
   "FILTER": "Filtrer",
   "LOGIN": "Se connecter",
   "NO": "Non",

fittrackee_client/src/locales/fr/user.json

@@ -1,5 +1,6 @@
 {
   "CONFIRM-PASSWORD": "Confirmation du mot de passe",
+  "CONFIRM_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
   "EMAIL": "Email",
   "LANGUAGE": "Langue",
   "LOGIN": "Se connecter",

fittrackee_client/src/scss/base.scss

@@ -70,8 +70,8 @@ button {
     background: var(--button-cancel-bg-color);
     color: var(--button-cancel-color);
     &:hover {
-    background: var(--app-color);
+      background: var(--app-color);
-    color: var(--button-hover-color);
+      color: var(--button-hover-color);
     }
   }
 
@@ -79,11 +79,19 @@ button {
     background: var(--button-confirm-bg-color);
     color: var(--button-confirm-color);
     &:hover {
-    background: var(--app-color);
+      background: var(--app-color);
-    color: var(--button-hover-color);
+      color: var(--button-hover-color);
     }
   }
 
+  &.danger {
+    background: var(--button-danger-bg-color);
+    color: var(--button-danger-color);
+    &:hover {
+      background: var(--button-danger-hover-bg-color);
+      color: var(--button-danger-hover-color);
+    }
+  }
 }
 
 .box {

fittrackee_client/src/scss/colors.scss

@@ -12,6 +12,10 @@
   --button-cancel-color: var(--app-color);
   --button-confirm-bg-color: #FFFFFF;
   --button-confirm-color: var(--app-color);
+  --button-danger-bg-color: #FFFFFF;
+  --button-danger-color: #dc3545;
+  --button-danger-hover-bg-color: #dc3545;
+  --button-danger-hover-color: #FFFFFF;
 
   --card-border-color: #c4c7cf;
   --input-border-color: #9da3af;

fittrackee_client/src/store/modules/user/actions.ts

@@ -12,7 +12,11 @@ import {
 } from '@/store/constants'
 import { IRootState } from '@/store/modules/root/types'
 import { IUserActions, IUserState } from '@/store/modules/user/types'
-import { ILoginOrRegisterData, IUserPayload } from '@/types/user'
+import {
+  ILoginOrRegisterData,
+  IUserDeletionPayload,
+  IUserPayload,
+} from '@/types/user'
 import { handleError } from '@/utils'
 
 export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
@@ -104,4 +108,22 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
         context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, false)
       )
   },
+  [USER_STORE.ACTIONS.DELETE_ACCOUNT](
+    context: ActionContext<IUserState, IRootState>,
+    payload: IUserDeletionPayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    authApi
+      .delete(`users/${payload.username}`)
+      .then((res) => {
+        if (res.status === 204) {
+          context
+            .dispatch(USER_STORE.ACTIONS.LOGOUT)
+            .then(() => router.push('/'))
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+  },
 }

fittrackee_client/src/store/modules/user/enums.ts

@@ -1,5 +1,6 @@
 export enum UserActions {
   CHECK_AUTH_USER = 'CHECK_AUTH_USER',
+  DELETE_ACCOUNT = 'DELETE_ACCOUNT',
   GET_USER_PROFILE = 'GET_USER_PROFILE',
   LOGIN_OR_REGISTER = 'LOGIN_OR_REGISTER',
   LOGOUT = 'LOGOUT',

fittrackee_client/src/store/modules/user/types.ts

@@ -10,6 +10,7 @@ import { IRootState } from '@/store/modules/root/types'
 import {
   IAuthUserProfile,
   ILoginOrRegisterData,
+  IUserDeletionPayload,
   IUserPayload,
 } from '@/types/user'
 
@@ -41,6 +42,11 @@ export interface IUserActions {
     context: ActionContext<IUserState, IRootState>,
     payload: IUserPayload
   ): void
+
+  [USER_STORE.ACTIONS.DELETE_ACCOUNT](
+    context: ActionContext<IUserState, IRootState>,
+    payload: IUserDeletionPayload
+  ): void
 }
 
 export interface IUserGetters {

fittrackee_client/src/types/user.ts

@@ -35,6 +35,10 @@ export interface IUserPayload {
   password_conf: string
 }
 
+export interface IUserDeletionPayload {
+  username: string
+}
+
 export interface ILoginRegisterFormData {
   username: string
   email: string