Client - allow user to change email

2022-03-12 08:59:22 +01:00
parent 42dfeee283
commit ae0b9c36b2
15 changed files with 247 additions and 49 deletions
--- 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>