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/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,12 +34,10 @@
        width: 150px;

        svg {
-          .error-page-img {
-            stroke: none;
-            fill-rule: nonzero;
-            fill: var(--app-color);
-            filter: var(--svg-filter);
-          }
+          stroke: none;
+          fill-rule: nonzero;
+          fill: var(--app-color);
+          filter: var(--svg-filter);
        }
      }

--- 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) {