Client - add account confirmation (WIP)

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -16,8 +16,17 @@
           message="user.REGISTER_DISABLED"
           v-if="registration_disabled"
         />
-        <div class="info-box success-message" v-if="isSuccess">
+        <div
-          {{ $t('user.PROFILE.SUCCESSFUL_UPDATE') }}
+          class="info-box success-message"
+          v-if="isSuccess || isRegistrationSuccess"
+        >
+          {{
+            $t(
+              `user.PROFILE.SUCCESSFUL_${
+                isRegistrationSuccess ? 'REGISTRATION' : 'UPDATE'
+              }`
+            )
+          }}
         </div>
         <form
           :class="{ errors: formErrors }"
@@ -138,6 +147,9 @@
   const errorMessages: ComputedRef<string | string[] | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
   )
+  const isRegistrationSuccess: ComputedRef<boolean> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.IS_REGISTRATION_SUCCESS]
+  )
   const isSuccess: ComputedRef<boolean> = computed(
     () => store.getters[AUTH_USER_STORE.GETTERS.IS_SUCCESS]
   )
@@ -204,6 +216,10 @@
     async () => {
       store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
       store.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
+      store.commit(
+        AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS,
+        false
+      )
       formErrors.value = false
       resetFormData()
     }

fittrackee_client/src/locales/en/api.json

@@ -17,7 +17,7 @@
     "no selected file": "No selected file.",
     "password: password and password confirmation do not match": "Password: password and password confirmation don't match.",
     "provide a valid auth token": "Provide a valid auth token.",
-    "sorry, that user already exists": "Sorry, that user already exists.",
+    "sorry, that username is already taken": "Sorry, that username is already taken.",
     "sport does not exist": "Sport does not exist.",
     "signature expired, please log in again": "Signature expired. Please log in again.",
     "successfully registered": "Successfully registered.",

fittrackee_client/src/locales/en/user.json

@@ -84,6 +84,7 @@
       "STOPPED_SPEED_THRESHOLD": "stopped speed threshold"
     },
     "SUCCESSFUL_EMAIL_UPDATE": "Your account has been updated successfully. Please check your email to confirm your new email address.",
+    "SUCCESSFUL_REGISTRATION": "A link to activate your account has been emailed to the address provided.",
     "SUCCESSFUL_UPDATE": "Your account has been updated successfully.",
     "UNITS": {
       "LABEL": "Units for distance",

fittrackee_client/src/locales/fr/api.json

@@ -19,7 +19,7 @@
     "provide a valid auth token": "Merci de fournir un jeton de connexion valide.",
     "sport does not exist": "Ce sport n'existe pas.",
     "signature expired, please log in again": "Signature expirée. Merci de vous reconnecter.",
-    "sorry, that user already exists": "Désolé, cet utilisateur existe déjà.",
+    "sorry, that username is already taken": "Désolé, ce nom d'utilisateur est déjà utilisé.",
     "successfully registered": "Inscription validée.",
     "user does not exist": "L'utilisateur n'existe pas",
     "you can not delete your account, no other user has admin rights": "Vous ne pouvez pas supprimer votre compte, aucun autre utilisateur n'a des droits d'administration.",

fittrackee_client/src/locales/fr/user.json

@@ -88,6 +88,7 @@
       "STOPPED_SPEED_THRESHOLD": "seuil de vitesse arrêtée"
     },
     "SUCCESSFUL_EMAIL_UPDATE": "Votre compte a été modifié avec succès. Veuillez vérifier votre boite email pour valider votre nouvelle adresse email.",
+    "SUCCESSFUL_REGISTRATION": "Un lien pour activer votre compte a été envoyé à l'adresse email fournie.",
     "SUCCESSFUL_UPDATE": "Votre compte a été modifié avec succès.",
     "TIMEZONE": "Fuseau horaire"
   },

fittrackee_client/src/router/index.ts

@@ -79,6 +79,14 @@ const routes: Array<RouteRecordRaw> = [
       ),
     props: { action: 'reset' },
   },
+  {
+    path: '/account-confirmation',
+    name: 'AccountConfirmation',
+    component: () =>
+      import(
+        /* webpackChunkName: 'profile' */ '@/views/user/AccountConfirmation.vue'
+      ),
+  },
   {
     path: '/email-update',
     name: 'EmailUpdate',
@@ -267,15 +275,16 @@ const pathsWithoutAuthentication = [
   '/password-reset/request',
   '/password-reset/sent',
   '/register',
+  '/account-confirmation',
 ]
 
-const paths = ['/email-update']
+const pathsWithoutChecks = ['/email-update']
 
 router.beforeEach((to, from, next) => {
   store
     .dispatch(AUTH_USER_STORE.ACTIONS.CHECK_AUTH_USER)
     .then(() => {
-      if (paths.includes(to.path)) {
+      if (pathsWithoutChecks.includes(to.path)) {
         return next()
       }
       if (

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

@@ -22,7 +22,7 @@ import {
   ILoginOrRegisterData,
   IUserAccountPayload,
   IUserDeletionPayload,
-  IUserEmailUpdatePayload,
+  IUserAccountUpdatePayload,
   IUserPasswordPayload,
   IUserPasswordResetPayload,
   IUserPayload,
@@ -63,9 +63,32 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
       context.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
     }
   },
+  [AUTH_USER_STORE.ACTIONS.CONFIRM_ACCOUNT](
+    context: ActionContext<IAuthUserState, IRootState>,
+    payload: IUserAccountUpdatePayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    api
+      .post('auth/account/confirm', { token: payload.token })
+      .then((res) => {
+        if (res.data.status === 'success') {
+          const token = res.data.auth_token
+          window.localStorage.setItem('authToken', token)
+          context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN, token)
+          context
+            .dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
+            .then(() => router.push('/'))
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => {
+        handleError(context, error)
+      })
+  },
   [AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
     context: ActionContext<IAuthUserState, IRootState>,
-    payload: IUserEmailUpdatePayload
+    payload: IUserAccountUpdatePayload
   ): void {
     context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
     context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
@@ -125,10 +148,15 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
     data: ILoginOrRegisterData
   ): void {
     context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(
+      AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS,
+      false
+    )
     api
       .post(`/auth/${data.actionType}`, data.formData)
       .then((res) => {
         if (res.data.status === 'success') {
+          if (data.actionType === 'login') {
             const token = res.data.auth_token
             window.localStorage.setItem('authToken', token)
             context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN, token)
@@ -139,6 +167,16 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
                   typeof data.redirectUrl === 'string' ? data.redirectUrl : '/'
                 )
               )
+          } else {
+            router
+              .push('/login')
+              .then(() =>
+                context.commit(
+                  AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS,
+                  true
+                )
+              )
+          }
         } else {
           handleError(context, null)
         }

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

@@ -1,5 +1,6 @@
 export enum AuthUserActions {
   CHECK_AUTH_USER = 'CHECK_AUTH_USER',
+  CONFIRM_ACCOUNT = 'CONFIRM_ACCOUNT',
   CONFIRM_EMAIL = 'CONFIRM_EMAIL',
   DELETE_ACCOUNT = 'DELETE_ACCOUNT',
   DELETE_PICTURE = 'DELETE_PICTURE',
@@ -22,6 +23,7 @@ export enum AuthUserGetters {
   IS_ADMIN = 'IS_ADMIN',
   IS_AUTHENTICATED = 'IS_AUTHENTICATED',
   IS_SUCCESS = 'IS_SUCCESS',
+  IS_REGISTRATION_SUCCESS = 'IS_REGISTRATION_SUCCESS',
   USER_LOADING = 'USER_LOADING',
 }
 
@@ -30,5 +32,6 @@ export enum AuthUserMutations {
   UPDATE_AUTH_TOKEN = 'UPDATE_AUTH_TOKEN',
   UPDATE_AUTH_USER_PROFILE = 'UPDATE_AUTH_USER_PROFILE',
   UPDATE_IS_SUCCESS = 'UPDATE_USER_IS_SUCCESS',
+  UPDATE_IS_REGISTRATION_SUCCESS = 'UPDATE_IS_REGISTRATION_SUCCESS',
   UPDATE_USER_LOADING = 'UPDATE_USER_LOADING',
 }

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

@@ -21,6 +21,11 @@ export const getters: GetterTree<IAuthUserState, IRootState> &
   [AUTH_USER_STORE.GETTERS.IS_ADMIN]: (state: IAuthUserState) => {
     return state.authUserProfile && state.authUserProfile.admin
   },
+  [AUTH_USER_STORE.GETTERS.IS_REGISTRATION_SUCCESS]: (
+    state: IAuthUserState
+  ) => {
+    return state.isRegistrationSuccess
+  },
   [AUTH_USER_STORE.GETTERS.IS_SUCCESS]: (state: IAuthUserState) => {
     return state.isSuccess
   },

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

@@ -24,6 +24,12 @@ export const mutations: MutationTree<IAuthUserState> & TAuthUserMutations = {
   ) {
     state.authUserProfile = authUserProfile
   },
+  [AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS](
+    state: IAuthUserState,
+    isRegistrationSuccess: boolean
+  ) {
+    state.isRegistrationSuccess = isRegistrationSuccess
+  },
   [AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS](
     state: IAuthUserState,
     isSuccess: boolean

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

@@ -5,5 +5,6 @@ export const authUserState: IAuthUserState = {
   authToken: null,
   authUserProfile: <IAuthUserProfile>{},
   isSuccess: false,
+  isRegistrationSuccess: false,
   loading: false,
 }

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

@@ -18,12 +18,13 @@ import {
   IUserPreferencesPayload,
   IUserSportPreferencesPayload,
   IUserAccountPayload,
-  IUserEmailUpdatePayload,
+  IUserAccountUpdatePayload,
 } from '@/types/user'
 
 export interface IAuthUserState {
   authToken: string | null
   authUserProfile: IAuthUserProfile
+  isRegistrationSuccess: boolean
   isSuccess: boolean
   loading: boolean
 }
@@ -33,9 +34,14 @@ export interface IAuthUserActions {
     context: ActionContext<IAuthUserState, IRootState>
   ): void
 
+  [AUTH_USER_STORE.ACTIONS.CONFIRM_ACCOUNT](
+    context: ActionContext<IAuthUserState, IRootState>,
+    payload: IUserAccountUpdatePayload
+  ): void
+
   [AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
     context: ActionContext<IAuthUserState, IRootState>,
-    payload: IUserEmailUpdatePayload
+    payload: IUserAccountUpdatePayload
   ): void
 
   [AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE](
@@ -112,6 +118,10 @@ export interface IAuthUserGetters {
 
   [AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED](state: IAuthUserState): boolean
 
+  [AUTH_USER_STORE.GETTERS.IS_REGISTRATION_SUCCESS](
+    state: IAuthUserState
+  ): boolean
+
   [AUTH_USER_STORE.GETTERS.IS_SUCCESS](state: IAuthUserState): boolean
 
   [AUTH_USER_STORE.GETTERS.USER_LOADING](state: IAuthUserState): boolean
@@ -135,6 +145,10 @@ export type TAuthUserMutations<S = IAuthUserState> = {
     state: S,
     loading: boolean
   ): void
+  [AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS](
+    state: S,
+    loading: boolean
+  ): void
 }
 
 export type TAuthUserStoreModule<S = IAuthUserState> = Omit<

fittrackee_client/src/types/user.ts

@@ -43,9 +43,9 @@ export interface IUserAccountPayload {
   new_password?: string
 }
 
-export interface IUserEmailUpdatePayload {
+export interface IUserAccountUpdatePayload {
   token: LocationQueryValue | LocationQueryValue[]
-  refreshUser: boolean
+  refreshUser?: boolean
 }
 
 export interface IAdminUserPayload {

fittrackee_client/src/views/user/AccountConfirmation.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    id="account-confirmation"
+    class="center-card with-margin"
+    v-if="errorMessages"
+  >
+    <ErrorImg />
+    <p class="error-message">
+      <span>{{ $t('error.SOMETHING_WRONG') }}.</span>
+    </p>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ComputedRef, onBeforeMount, onUnmounted } 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 { useStore } from '@/use/useStore'
+
+  const route = useRoute()
+  const router = useRouter()
+  const store = useStore()
+
+  const errorMessages: ComputedRef<string | string[] | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+  )
+  const token: ComputedRef<LocationQueryValue | LocationQueryValue[]> =
+    computed(() => route.query.token)
+
+  onBeforeMount(() => confirmAccount())
+
+  function confirmAccount() {
+    if (token.value) {
+      store.dispatch(AUTH_USER_STORE.ACTIONS.CONFIRM_ACCOUNT, {
+        token: token.value,
+      })
+    } else {
+      router.push('/')
+    }
+  }
+
+  onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+
+  #account-confirmation {
+    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>