Client - allow user to change email

2022-03-12 08:59:22 +01:00 · 2022-03-12 08:59:22 +01:00 · ae0b9c36b2
commit ae0b9c36b2
parent 42dfeee283
15 changed files with 247 additions and 49 deletions
--- a/fittrackee_client/src/components/Common/Images/ErrorImg.vue
+++ b/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>
--- a/fittrackee_client/src/components/NoConfig.vue
+++ b/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">
-          <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>
+        <ErrorImg />
      </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;
--- a/fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue
+++ b/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') }}
-          <input id="email" :value="user.email" disabled />
+          {{ $t('user.EMAIL') }}*
+          <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>
--- a/fittrackee_client/src/components/User/UserAuthForm.vue
+++ b/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) {
--- a/fittrackee_client/src/locales/en/error.json
+++ b/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"
 }
--- a/fittrackee_client/src/locales/en/user.json
+++ b/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)",
--- a/fittrackee_client/src/locales/fr/error.json
+++ b/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"
 }
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/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",
--- a/fittrackee_client/src/router/index.ts
+++ b/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)
      ) {
--- a/fittrackee_client/src/scss/base.scss
+++ b/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;
 }
--- a/fittrackee_client/src/store/modules/authUser/actions.ts
+++ b/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 {
--- a/fittrackee_client/src/store/modules/authUser/enums.ts
+++ b/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',
--- a/fittrackee_client/src/store/modules/authUser/types.ts
+++ b/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
--- a/fittrackee_client/src/types/user.ts
+++ b/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 {
--- a/fittrackee_client/src/views/user/EmailUpdateView.vue
+++ b/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>