API & Client - resend account confirmation email

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>

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,