Client - allow user to change email

fittrackee_client/src/components/Common/Images/ErrorImg.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -51 512 512">
+    <g id="error">
+      <path
+        class="error-page-img"
+        d="M 0 0 C 0 11.300781 0 399.777344 0 410 L 512 410 C 512 402.324219 512 2.425781 512 0 Z M 370 71 L 370 30 L 411 30 L 411 71 Z M 30 30 L 340 30 L 340 71 L 30 71 Z M 482 380 L 30 380 L 30 101 L 482 101 Z M 441 71 L 441 30 L 482 30 L 482 71 Z M 441 71 "
+      />
+      <path
+        class="error-page-img"
+        d="M 325.519531 297.070312 C 294.328125 265.878906 294.328125 215.125 325.519531 183.929688 L 304.304688 162.71875 C 261.417969 205.605469 261.417969 275.390625 304.304688 318.28125 Z M 325.519531 297.070312 "
+      />
+      <path
+        class="error-page-img"
+        d="M 197.089844 180 L 237.089844 180 L 237.089844 220 L 197.089844 220 Z M 197.089844 180 "
+      />
+      <path
+        class="error-page-img"
+        d="M 197.089844 261 L 237.089844 261 L 237.089844 301 L 197.089844 301 Z M 197.089844 261 "
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'ErrorImg',
+  }
+</script>

fittrackee_client/src/components/NoConfig.vue

@@ -2,32 +2,17 @@
   <div id="no-config">
     <div class="error-page">
       <div class="error-img">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -51 512 512">
+        <ErrorImg />
-          <g id="error">
-            <path
-              class="error-page-img"
-              d="M 0 0 C 0 11.300781 0 399.777344 0 410 L 512 410 C 512 402.324219 512 2.425781 512 0 Z M 370 71 L 370 30 L 411 30 L 411 71 Z M 30 30 L 340 30 L 340 71 L 30 71 Z M 482 380 L 30 380 L 30 101 L 482 101 Z M 441 71 L 441 30 L 482 30 L 482 71 Z M 441 71 "
-            />
-            <path
-              class="error-page-img"
-              d="M 325.519531 297.070312 C 294.328125 265.878906 294.328125 215.125 325.519531 183.929688 L 304.304688 162.71875 C 261.417969 205.605469 261.417969 275.390625 304.304688 318.28125 Z M 325.519531 297.070312 "
-            />
-            <path
-              class="error-page-img"
-              d="M 197.089844 180 L 237.089844 180 L 237.089844 220 L 197.089844 220 Z M 197.089844 180 "
-            />
-            <path
-              class="error-page-img"
-              d="M 197.089844 261 L 237.089844 261 L 237.089844 301 L 197.089844 301 Z M 197.089844 261 "
-            />
-          </g>
-        </svg>
       </div>
       <p class="error-message" v-html="$t('error.APP_ERROR')" />
     </div>
   </div>
 </template>
 
+<script lang="ts" setup>
+  import ErrorImg from '@/components/Common/Images/ErrorImg.vue'
+</script>
+
 <style scoped lang="scss">
   @import '~@/scss/vars.scss';
 
@@ -49,14 +34,12 @@
         width: 150px;
 
         svg {
-          .error-page-img {
           stroke: none;
           fill-rule: nonzero;
           fill: var(--app-color);
           filter: var(--svg-filter);
         }
       }
-      }
 
       .error-message {
         font-size: 1.2em;

fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue

@@ -10,12 +10,18 @@
     <div class="profile-form form-box">
       <ErrorMessage :message="errorMessages" v-if="errorMessages" />
       <div class="info-box success-message" v-if="isSuccess">
-        {{ $t('user.PROFILE.SUCCESSFUL_UPDATE') }}
+        {{ $t(`user.PROFILE.SUCCESSFUL_${emailUpdate ? 'EMAIL_' : ''}UPDATE`) }}
       </div>
       <form :class="{ errors: formErrors }" @submit.prevent="updateProfile">
         <label class="form-items" for="email">
-          {{ $t('user.EMAIL') }}
+          {{ $t('user.EMAIL') }}*
-          <input id="email" :value="user.email" disabled />
+          <input
+            id="email"
+            v-model="userForm.email"
+            :disabled="loading"
+            :required="true"
+            @invalid="invalidateForm"
+          />
         </label>
         <label class="form-items" for="password-field">
           {{ $t('user.CURRENT_PASSWORD') }}*
@@ -29,14 +35,13 @@
           />
         </label>
         <label class="form-items" for="new-password-field">
-          {{ $t('user.NEW_PASSWORD') }}*
+          {{ $t('user.NEW_PASSWORD') }}
           <PasswordInput
             id="new-password-field"
             :disabled="loading"
             :checkStrength="true"
             :password="userForm.new_password"
             :isSuccess="false"
-            :required="true"
             @updatePassword="updateNewPassword"
             @passwordError="invalidateForm"
           />
@@ -93,6 +98,7 @@
   const isSuccess: ComputedRef<boolean> = computed(
     () => store.getters[AUTH_USER_STORE.GETTERS.IS_SUCCESS]
   )
+  const emailUpdate = ref(false)
   const errorMessages: ComputedRef<string | string[] | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
   )
@@ -118,10 +124,15 @@
     userForm.new_password = new_password
   }
   function updateProfile() {
-    store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_ACCOUNT, {
+    const payload: IUserAccountPayload = {
+      email: userForm.email,
       password: userForm.password,
-      new_password: userForm.new_password,
+    }
-    })
+    if (userForm.new_password) {
+      payload.new_password = userForm.new_password
+    }
+    emailUpdate.value = userForm.email !== user.value.email
+    store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_ACCOUNT, payload)
   }
   function updateDisplayModal(value: boolean) {
     displayModal.value = value
@@ -141,10 +152,17 @@
       if (isSuccessValue) {
         updatePassword('')
         updateNewPassword('')
+        updateUserForm(user.value)
         formErrors.value = false
       }
     }
   )
+  watch(
+    () => user.value.email,
+    async () => {
+      updateUserForm(user.value)
+    }
+  )
 </script>
 
 <style lang="scss" scoped>
@@ -175,10 +193,4 @@
       flex-direction: column;
     }
   }
-
-  .success-message {
-    margin: $default-margin * 2 0;
-    background-color: var(--success-background-color);
-    color: var(--success-color);
-  }
 </style>

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -16,6 +16,9 @@
           message="user.REGISTER_DISABLED"
           v-if="registration_disabled"
         />
+        <div class="info-box success-message" v-if="isSuccess">
+          {{ $t('user.PROFILE.SUCCESSFUL_UPDATE') }}
+        </div>
         <form
           :class="{ errors: formErrors }"
           @submit.prevent="onSubmit(action)"
@@ -135,6 +138,9 @@
   const errorMessages: ComputedRef<string | string[] | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
   )
+  const isSuccess: ComputedRef<boolean> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.IS_SUCCESS]
+  )
   const appConfig: ComputedRef<TAppConfig> = computed(
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
   )
@@ -197,6 +203,7 @@
     () => route.path,
     async () => {
       store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+      store.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
       formErrors.value = false
       resetFormData()
     }
@@ -230,6 +237,9 @@
           border-color: var(--disabled-color);
         }
       }
+      .success-message {
+        margin: $default-margin;
+      }
     }
 
     @media screen and (max-width: $medium-limit) {

fittrackee_client/src/locales/en/error.json

@@ -4,5 +4,6 @@
   "NOT_FOUND": {
     "PAGE": "Page not found",
     "WORKOUT": "Workout not found"
-  }
+  },
+  "SOMETHING_WRONG": "Something went wrong"
 }

fittrackee_client/src/locales/en/user.json

@@ -9,6 +9,7 @@
   "HIDE_PASSWORD": "hide password",
   "INVALID_TOKEN": "Invalid token, please request a new password reset.",
   "LANGUAGE": "Language",
+  "LOG_IN": "log in",
   "LOGIN": "Login",
   "LOGOUT": "Logout",
   "NEW_PASSWORD": "New password",
@@ -49,6 +50,7 @@
     "EDIT": "Edit profile",
     "EDIT_PREFERENCES": "Edit preferences",
     "EDIT_SPORTS_PREFERENCES": "Edit sports preferences",
+    "ERRORED_EMAIL_UPDATE": "Please {0} to change your email address again or contact the administrator",
     "FIRST_NAME": "First name",
     "FIRST_DAY_OF_WEEK": "First day of week",
     "LANGUAGE": "Language",
@@ -79,7 +81,8 @@
       "LABEL": "label",
       "STOPPED_SPEED_THRESHOLD": "stopped speed threshold"
     },
-    "SUCCESSFUL_UPDATE": "Your account has been updated successfully",
+    "SUCCESSFUL_EMAIL_UPDATE": "Your account has been updated successfully. Please check your email to confirm your new email address.",
+    "SUCCESSFUL_UPDATE": "Your account has been updated successfully.",
     "UNITS": {
       "LABEL": "Units for distance",
       "IMPERIAL": "Imperial system (ft, mi)",

fittrackee_client/src/locales/fr/error.json

@@ -4,5 +4,6 @@
   "NOT_FOUND": {
     "PAGE": "Page introuvable",
     "WORKOUT": "Séance introuvable"
-  }
+  },
+  "SOMETHING_WRONG": "Une erreur s'est produite"
 }

fittrackee_client/src/locales/fr/user.json

@@ -1,14 +1,15 @@
 {
   "ADMIN": "Admin",
   "ALREADY_HAVE_ACCOUNT": "Vous avez déjà un compte ?",
-  "CONFIRM_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
+  "CONFIRM_ACCOUNT_DELETION": "Êtes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
   "CURRENT_PASSWORD": "Mot de passe actuel",
   "EMAIL": "Email",
   "EMAIL_INFO": "Saisir une adresse email valide.",
   "ENTER_PASSWORD": "Saisir un mot de passe",
   "HIDE_PASSWORD": "masquer le mot de passe",
-  "INVALID_TOKEN": "Jeton invalide, veullez demander une nouvelle réinitialisation de mot de passe.",
+  "INVALID_TOKEN": "Jeton invalide, veuillez demander une nouvelle réinitialisation de mot de passe.",
   "LANGUAGE": "Langue",
+  "LOG_IN": "connecter",
   "LOGIN": "Se connecter",
   "LOGOUT": "Se déconnecter",
   "NEW_PASSWORD": "Nouveau mot de passe",
@@ -48,6 +49,7 @@
     "EDIT": "Modifier le profil",
     "EDIT_PREFERENCES": "Modifier les préférences",
     "EDIT_SPORTS_PREFERENCES": "Modifier les préférences des sports",
+    "ERRORED_EMAIL_UPDATE": "Veuillez vous {0} pour changer de nouveau votre adresse email ou contacter l'administrateur",
     "FIRST_DAY_OF_WEEK": "Premier jour de la semaine",
     "FIRST_NAME": "Prénom",
     "LANGUAGE": "Langue",
@@ -83,7 +85,8 @@
       "LABEL": "label",
       "STOPPED_SPEED_THRESHOLD": "seuil de vitesse arrêtée"
     },
-    "SUCCESSFUL_UPDATE": "Votre compte a été modifié avec succès",
+    "SUCCESSFUL_EMAIL_UPDATE": "Votre compte a été modifié avec succès. Veuillez vérifier votre boite email pour valider votre nouvelle adresse email.",
+    "SUCCESSFUL_UPDATE": "Votre compte a été modifié avec succès.",
     "TIMEZONE": "Fuseau horaire"
   },
   "REGISTER": "S'inscrire",

fittrackee_client/src/router/index.ts

@@ -79,6 +79,14 @@ const routes: Array<RouteRecordRaw> = [
       ),
     props: { action: 'reset' },
   },
+  {
+    path: '/email-update',
+    name: 'EmailUpdate',
+    component: () =>
+      import(
+        /* webpackChunkName: 'profile' */ '@/views/user/EmailUpdateView.vue'
+      ),
+  },
   {
     path: '/profile',
     name: 'Profile',
@@ -254,16 +262,22 @@ const pathsWithoutAuthentication = [
   '/register',
 ]
 
+const paths = ['/email-update']
+
 router.beforeEach((to, from, next) => {
   store
     .dispatch(AUTH_USER_STORE.ACTIONS.CHECK_AUTH_USER)
     .then(() => {
+      if (paths.includes(to.path)) {
+        return next()
+      }
       if (
         store.getters[AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED] &&
         pathsWithoutAuthentication.includes(to.path)
       ) {
         return next('/')
-      } else if (
+      }
+      if (
         !store.getters[AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED] &&
         !pathsWithoutAuthentication.includes(to.path)
       ) {

fittrackee_client/src/scss/base.scss

@@ -150,6 +150,12 @@ button {
   padding: 0 $default-padding * 1.5;
 }
 
+.success-message {
+  margin: $default-margin * 2 0;
+  background-color: var(--success-background-color);
+  color: var(--success-color);
+}
+
 .upper {
   text-transform: uppercase;
 }

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

@@ -22,6 +22,7 @@ import {
   ILoginOrRegisterData,
   IUserAccountPayload,
   IUserDeletionPayload,
+  IUserEmailUpdatePayload,
   IUserPasswordPayload,
   IUserPasswordResetPayload,
   IUserPayload,
@@ -62,6 +63,33 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
       context.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
     }
   },
+  [AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
+    context: ActionContext<IAuthUserState, IRootState>,
+    payload: IUserEmailUpdatePayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
+    api
+      .post('/auth/email/update', { token: payload.token })
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, true)
+          if (payload.refreshUser) {
+            context
+              .dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
+              .then(() => {
+                return router.push('/profile/edit/account')
+              })
+          }
+          router.push('/profile/edit/account')
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => {
+        handleError(context, error)
+      })
+  },
   [AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE](
     context: ActionContext<IAuthUserState, IRootState>
   ): void {

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

@@ -1,5 +1,6 @@
 export enum AuthUserActions {
   CHECK_AUTH_USER = 'CHECK_AUTH_USER',
+  CONFIRM_EMAIL = 'CONFIRM_EMAIL',
   DELETE_ACCOUNT = 'DELETE_ACCOUNT',
   DELETE_PICTURE = 'DELETE_PICTURE',
   GET_USER_PROFILE = 'GET_USER_PROFILE',

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

@@ -18,6 +18,7 @@ import {
   IUserPreferencesPayload,
   IUserSportPreferencesPayload,
   IUserAccountPayload,
+  IUserEmailUpdatePayload,
 } from '@/types/user'
 
 export interface IAuthUserState {
@@ -32,6 +33,11 @@ export interface IAuthUserActions {
     context: ActionContext<IAuthUserState, IRootState>
   ): void
 
+  [AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
+    context: ActionContext<IAuthUserState, IRootState>,
+    payload: IUserEmailUpdatePayload
+  ): void
+
   [AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE](
     context: ActionContext<IAuthUserState, IRootState>
   ): void

fittrackee_client/src/types/user.ts

@@ -34,9 +34,14 @@ export interface IUserPayload {
 }
 
 export interface IUserAccountPayload {
-  email?: string
+  email: string
   password: string
-  new_password: string
+  new_password?: string
+}
+
+export interface IUserEmailUpdatePayload {
+  token: LocationQueryValue | LocationQueryValue[]
+  refreshUser: boolean
 }
 
 export interface IAdminUserPayload {

fittrackee_client/src/views/user/EmailUpdateView.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    id="email-update"
+    class="center-card with-margin"
+    v-if="errorMessages && !authUser.username"
+  >
+    <ErrorImg />
+    <p class="error-message">
+      <span>{{ $t('error.SOMETHING_WRONG') }}.</span>
+      <span>
+        <i18n-t keypath="user.PROFILE.ERRORED_EMAIL_UPDATE">
+          <router-link to="/login">
+            {{ $t('user.LOG_IN') }}
+          </router-link>
+        </i18n-t>
+      </span>
+    </p>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ComputedRef, onBeforeMount, onUnmounted, watch } from 'vue'
+  import { useRoute, LocationQueryValue, useRouter } from 'vue-router'
+
+  import ErrorImg from '@/components/Common/Images/ErrorImg.vue'
+  import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
+  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  const route = useRoute()
+  const router = useRouter()
+  const store = useStore()
+
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
+  const isAuthenticated: ComputedRef<boolean> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED]
+  )
+  const errorMessages: ComputedRef<string | string[] | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+  )
+  const token: ComputedRef<LocationQueryValue | LocationQueryValue[]> =
+    computed(() => route.query.token)
+
+  onBeforeMount(() => confirmEmail())
+
+  function confirmEmail() {
+    if (token.value) {
+      store.dispatch(AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL, {
+        token: token.value,
+        refreshUser: isAuthenticated.value,
+      })
+    } else {
+      router.push('/')
+    }
+  }
+
+  onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
+
+  watch(
+    () => errorMessages.value,
+    (newValue) => {
+      if (authUser.value.username && newValue) {
+        router.push('/')
+      }
+    }
+  )
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+
+  #email-update {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    svg {
+      stroke: none;
+      fill-rule: nonzero;
+      fill: var(--app-color);
+      filter: var(--svg-filter);
+      width: 100px;
+    }
+
+    .error-message {
+      font-size: 1.1em;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+
+      @media screen and (max-width: $medium-limit) {
+        font-size: 1em;
+      }
+    }
+  }
+</style>