API & Client - resend account confirmation email

2022-03-20 12:15:23 +01:00
parent decff1cd6a
commit 612549ddea
16 changed files with 400 additions and 40 deletions
--- a/fittrackee_client/src/components/User/AccountConfirmationEmail.vue
+++ b/fittrackee_client/src/components/User/AccountConfirmationEmail.vue
@ -0,0 +1,72 @@
+<template>
+  <div id="account-confirmation-email" class="center-card with-margin">
+    <div class="email-sent" v-if="action === 'email-sent'">
+      <EmailSent />
+      <div class="email-sent-message">
+        {{ $t('user.ACCOUNT_CONFIRMATION_SENT') }}
+      </div>
+    </div>
+    <div v-else>
+      <Card>
+        <template #title>{{ $t('user.RESENT_ACCOUNT_CONFIRMATION') }}</template>
+        <template #content>
+          <UserAuthForm :action="action" />
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { toRefs } from 'vue'
+
+  import EmailSent from '@/components/Common/Images/EmailSent.vue'
+  import UserAuthForm from '@/components/User/UserAuthForm.vue'
+
+  interface Props {
+    action: string
+  }
+  const props = defineProps<Props>()
+
+  const { action } = toRefs(props)
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/vars.scss';
+
+  #account-confirmation-email {
+    display: flex;
+    flex-direction: column;
+
+    .email-sent {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      svg {
+        stroke: none;
+        fill-rule: nonzero;
+        fill: var(--app-color);
+        filter: var(--svg-filter);
+        width: 100px;
+      }
+      .email-sent-message {
+        font-size: 1.1em;
+        text-align: center;
+
+        @media screen and (max-width: $medium-limit) {
+          font-size: 1em;
+        }
+      }
+    }
+    ::v-deep(.card) {
+      .card-content {
+        #user-auth-form {
+          margin-top: 0;
+          #user-form {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>
--- a/fittrackee_client/src/components/User/UserAuthForm.vue
+++ b/fittrackee_client/src/components/User/UserAuthForm.vue
@ -60,14 +60,24 @@
              :placeholder="$t('user.EMAIL')"
            />
            <div
-              v-if="['reset-request', 'register'].includes(action)"
+              v-if="
+                [
+                  'reset-request',
+                  'register',
+                  'account-confirmation-resend',
+                ].includes(action)
+              "
              class="form-info"
            >
              <i class="fa fa-info-circle" aria-hidden="true" />
              {{ $t('user.EMAIL_INFO') }}
            </div>
            <PasswordInput
-              v-if="action !== 'reset-request'"
+              v-if="
+                !['account-confirmation-resend', 'reset-request'].includes(
+                  action
+                )
+              "
              :disabled="registration_disabled"
              :required="true"
              :placeholder="
@ -100,6 +110,11 @@
            {{ $t('user.LOGIN') }}
          </router-link>
        </div>
+        <div v-if="['login', 'register'].includes(action)">
+          <router-link class="links" to="/account-confirmation/resend">
+            {{ $t('user.ACCOUNT_CONFIRMATION_NOT_RECEIVED') }}
+          </router-link>
+        </div>
        <ErrorMessage :message="errorMessages" v-if="errorMessages" />
      </div>
    </div>
@ -197,6 +212,13 @@
            email: formData.email,
          }
        )
+      case 'account-confirmation-resend':
+        return store.dispatch(
+          AUTH_USER_STORE.ACTIONS.RESEND_ACCOUNT_CONFIRMATION_EMAIL,
+          {
+            email: formData.email,
+          }
+        )
      default:
        store.dispatch(AUTH_USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
          actionType,
--- a/fittrackee_client/src/locales/en/buttons.json
+++ b/fittrackee_client/src/locales/en/buttons.json
@ -1,4 +1,5 @@
 {
+  "ACCOUNT-CONFIRMATION-RESEND": "Resend confirmation email",
  "BACK": "Back",
  "CANCEL": "Cancel",
  "CLEAR_FILTER": "Clear filters",
--- a/fittrackee_client/src/locales/en/user.json
+++ b/fittrackee_client/src/locales/en/user.json
@ -1,4 +1,6 @@
 {
+  "ACCOUNT_CONFIRMATION_NOT_RECEIVED": "Didn't received instructions?",
+  "ACCOUNT_CONFIRMATION_SENT": "Check your email. A new confirmation email has been sent to the address provided.",
  "ADMIN": "Admin",
  "ALREADY_HAVE_ACCOUNT": "Already have an account?",
  "CONFIRM_ACCOUNT_DELETION": "Are you sure you want to delete your account? All data will be deleted, this cannot be undone",
@ -94,6 +96,7 @@
    "TIMEZONE": "Timezone"
  },
  "REGISTER": "Register",
+  "RESENT_ACCOUNT_CONFIRMATION": "Resend account confirmation email",
  "REGISTER_DISABLED": "Sorry, registration is disabled.",
  "RESET_PASSWORD": "Reset your password",
  "SHOW_PASSWORD": "show password",
--- a/fittrackee_client/src/locales/fr/buttons.json
+++ b/fittrackee_client/src/locales/fr/buttons.json
@ -1,4 +1,5 @@
 {
+  "ACCOUNT-CONFIRMATION-RESEND": "Envoyer à nouveau l'email de confirmation",
  "BACK": "Précédent",
  "CANCEL": "Annuler",
  "CLEAR_FILTER": "Réinitialiser",
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/fittrackee_client/src/locales/fr/user.json
@ -1,4 +1,6 @@
 {
+  "ACCOUNT_CONFIRMATION_NOT_RECEIVED": "Vous n'avez pas reçu les instructions ?",
+  "ACCOUNT_CONFIRMATION_SENT": "Vérifiez votre boite mail. Un nouvel email de confirmation a été envoyé à l'adresse email fournie.",
  "ADMIN": "Admin",
  "ALREADY_HAVE_ACCOUNT": "Vous avez déjà un compte ?",
  "CONFIRM_ACCOUNT_DELETION": "Êtes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
@ -94,6 +96,7 @@
  },
  "REGISTER": "S'inscrire",
  "REGISTER_DISABLED": "Désolé, les inscriptions sont désactivées.",
+  "RESENT_ACCOUNT_CONFIRMATION": "Envoyer à nouveau l'email de confirmation de compte",
  "RESET_PASSWORD": "Réinitialiser votre mot de passe",
  "SHOW_PASSWORD": "afficher le mot de passe",
  "USER_PICTURE": "photo de l'utilisateur",
--- a/fittrackee_client/src/router/index.ts
+++ b/fittrackee_client/src/router/index.ts
@ -43,6 +43,32 @@ const routes: Array<RouteRecordRaw> = [
    component: LoginOrRegister,
    props: { action: 'register' },
  },
+  {
+    path: '/account-confirmation',
+    name: 'AccountConfirmation',
+    component: () =>
+      import(
+        /* webpackChunkName: 'profile' */ '@/views/user/AccountConfirmation.vue'
+      ),
+  },
+  {
+    path: '/account-confirmation/resend',
+    name: 'AccountConfirmationResend',
+    component: () =>
+      import(
+        /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue'
+      ),
+    props: { action: 'account-confirmation-resend' },
+  },
+  {
+    path: '/account-confirmation/email-sent',
+    name: 'AccountConfirmationEmailSend',
+    component: () =>
+      import(
+        /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue'
+      ),
+    props: { action: 'email-sent' },
+  },
  {
    path: '/password-reset/sent',
    name: 'PasswordEmailSent',
@ -79,14 +105,6 @@ 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',
@ -276,6 +294,8 @@ const pathsWithoutAuthentication = [
  '/password-reset/sent',
  '/register',
  '/account-confirmation',
+  '/account-confirmation/resend',
+  '/account-confirmation/email-sent',
 ]

 const pathsWithoutChecks = ['/email-update']
--- a/fittrackee_client/src/store/modules/authUser/actions.ts
+++ b/fittrackee_client/src/store/modules/authUser/actions.ts
@ -23,7 +23,7 @@ import {
  IUserAccountPayload,
  IUserDeletionPayload,
  IUserAccountUpdatePayload,
-  IUserPasswordPayload,
+  IUserEmailPayload,
  IUserPasswordResetPayload,
  IUserPayload,
  IUserPicturePayload,
@ -366,7 +366,7 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
  },
  [AUTH_USER_STORE.ACTIONS.SEND_PASSWORD_RESET_REQUEST](
    context: ActionContext<IAuthUserState, IRootState>,
-    payload: IUserPasswordPayload
+    payload: IUserEmailPayload
  ): void {
    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
    api
@ -380,6 +380,22 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
      })
      .catch((error) => handleError(context, error))
  },
+  [AUTH_USER_STORE.ACTIONS.RESEND_ACCOUNT_CONFIRMATION_EMAIL](
+    context: ActionContext<IAuthUserState, IRootState>,
+    payload: IUserEmailPayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    api
+      .post('auth/account/resend-confirmation', payload)
+      .then((res) => {
+        if (res.data.status === 'success') {
+          router.push('/account-confirmation/email-sent')
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+  },
  [AUTH_USER_STORE.ACTIONS.RESET_USER_PASSWORD](
    context: ActionContext<IAuthUserState, IRootState>,
    payload: IUserPasswordResetPayload
--- a/fittrackee_client/src/store/modules/authUser/enums.ts
+++ b/fittrackee_client/src/store/modules/authUser/enums.ts
@ -8,6 +8,7 @@ export enum AuthUserActions {
  LOGIN_OR_REGISTER = 'LOGIN_OR_REGISTER',
  LOGOUT = 'LOGOUT',
  SEND_PASSWORD_RESET_REQUEST = 'SEND_PASSWORD_RESET_REQUEST',
+  RESEND_ACCOUNT_CONFIRMATION_EMAIL = 'RESEND_ACCOUNT_CONFIRMATION_EMAIL',
  RESET_USER_PASSWORD = 'RESET_USER_PASSWORD',
  RESET_USER_SPORT_PREFERENCES = 'RESET_USER_SPORT_PREFERENCES',
  UPDATE_USER_ACCOUNT = 'UPDATE_USER_ACCOUNT',
--- a/fittrackee_client/src/store/modules/authUser/types.ts
+++ b/fittrackee_client/src/store/modules/authUser/types.ts
@ -11,7 +11,7 @@ import {
  IAuthUserProfile,
  ILoginOrRegisterData,
  IUserDeletionPayload,
-  IUserPasswordPayload,
+  IUserEmailPayload,
  IUserPasswordResetPayload,
  IUserPayload,
  IUserPicturePayload,
@ -84,7 +84,12 @@ export interface IAuthUserActions {

  [AUTH_USER_STORE.ACTIONS.SEND_PASSWORD_RESET_REQUEST](
    context: ActionContext<IAuthUserState, IRootState>,
-    payload: IUserPasswordPayload
+    payload: IUserEmailPayload
+  ): void
+
+  [AUTH_USER_STORE.ACTIONS.RESEND_ACCOUNT_CONFIRMATION_EMAIL](
+    context: ActionContext<IAuthUserState, IRootState>,
+    payload: IUserEmailPayload
  ): void

  [AUTH_USER_STORE.ACTIONS.RESET_USER_PASSWORD](
--- a/fittrackee_client/src/types/user.ts
+++ b/fittrackee_client/src/types/user.ts
@ -72,7 +72,7 @@ export interface IUserPicturePayload {
  picture: File
 }

-export interface IUserPasswordPayload {
+export interface IUserEmailPayload {
  email: string
 }

--- a/fittrackee_client/src/views/user/AccountConfirmationResendView.vue
+++ b/fittrackee_client/src/views/user/AccountConfirmationResendView.vue
@ -0,0 +1,34 @@
+<template>
+  <div id="account-confirmation" class="view">
+    <div class="container">
+      <AccountConfirmationResend :action="action" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { toRefs } from 'vue'
+
+  import AccountConfirmationResend from '@/components/User/AccountConfirmationEmail.vue'
+  interface Props {
+    action: string
+  }
+  const props = defineProps<Props>()
+  const { action } = toRefs(props)
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+
+  #account-confirmation {
+    display: flex;
+    .container {
+      display: flex;
+      justify-content: center;
+      width: 50%;
+
+      @media screen and (max-width: $small-limit) {
+        width: 100%;
+      }
+    }
+  }
+</style>