Client - allow user to change email

This commit is contained in:
Sam 2022-03-12 08:59:22 +01:00
parent 42dfeee283
commit ae0b9c36b2
15 changed files with 247 additions and 49 deletions

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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>

View File

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

View File

@ -4,5 +4,6 @@
"NOT_FOUND": {
"PAGE": "Page not found",
"WORKOUT": "Workout not found"
}
},
"SOMETHING_WRONG": "Something went wrong"
}

View File

@ -9,6 +9,7 @@
"HIDE_PASSWORD": "hide password",
"INVALID_TOKEN": "Invalid token, please request a new password reset.",
"LANGUAGE": "Language",
"LOG_IN": "log in",
"LOGIN": "Login",
"LOGOUT": "Logout",
"NEW_PASSWORD": "New password",
@ -49,6 +50,7 @@
"EDIT": "Edit profile",
"EDIT_PREFERENCES": "Edit preferences",
"EDIT_SPORTS_PREFERENCES": "Edit sports preferences",
"ERRORED_EMAIL_UPDATE": "Please {0} to change your email address again or contact the administrator",
"FIRST_NAME": "First name",
"FIRST_DAY_OF_WEEK": "First day of week",
"LANGUAGE": "Language",
@ -79,7 +81,8 @@
"LABEL": "label",
"STOPPED_SPEED_THRESHOLD": "stopped speed threshold"
},
"SUCCESSFUL_UPDATE": "Your account has been updated successfully",
"SUCCESSFUL_EMAIL_UPDATE": "Your account has been updated successfully. Please check your email to confirm your new email address.",
"SUCCESSFUL_UPDATE": "Your account has been updated successfully.",
"UNITS": {
"LABEL": "Units for distance",
"IMPERIAL": "Imperial system (ft, mi)",

View File

@ -4,5 +4,6 @@
"NOT_FOUND": {
"PAGE": "Page introuvable",
"WORKOUT": "Séance introuvable"
}
},
"SOMETHING_WRONG": "Une erreur s'est produite"
}

View File

@ -1,14 +1,15 @@
{
"ADMIN": "Admin",
"ALREADY_HAVE_ACCOUNT": "Vous avez déjà un compte ?",
"CONFIRM_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
"CONFIRM_ACCOUNT_DELETION": "Êtes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
"CURRENT_PASSWORD": "Mot de passe actuel",
"EMAIL": "Email",
"EMAIL_INFO": "Saisir une adresse email valide.",
"ENTER_PASSWORD": "Saisir un mot de passe",
"HIDE_PASSWORD": "masquer le mot de passe",
"INVALID_TOKEN": "Jeton invalide, veullez demander une nouvelle réinitialisation de mot de passe.",
"INVALID_TOKEN": "Jeton invalide, veuillez demander une nouvelle réinitialisation de mot de passe.",
"LANGUAGE": "Langue",
"LOG_IN": "connecter",
"LOGIN": "Se connecter",
"LOGOUT": "Se déconnecter",
"NEW_PASSWORD": "Nouveau mot de passe",
@ -48,6 +49,7 @@
"EDIT": "Modifier le profil",
"EDIT_PREFERENCES": "Modifier les préférences",
"EDIT_SPORTS_PREFERENCES": "Modifier les préférences des sports",
"ERRORED_EMAIL_UPDATE": "Veuillez vous {0} pour changer de nouveau votre adresse email ou contacter l'administrateur",
"FIRST_DAY_OF_WEEK": "Premier jour de la semaine",
"FIRST_NAME": "Prénom",
"LANGUAGE": "Langue",
@ -83,7 +85,8 @@
"LABEL": "label",
"STOPPED_SPEED_THRESHOLD": "seuil de vitesse arrêtée"
},
"SUCCESSFUL_UPDATE": "Votre compte a été modifié avec succès",
"SUCCESSFUL_EMAIL_UPDATE": "Votre compte a été modifié avec succès. Veuillez vérifier votre boite email pour valider votre nouvelle adresse email.",
"SUCCESSFUL_UPDATE": "Votre compte a été modifié avec succès.",
"TIMEZONE": "Fuseau horaire"
},
"REGISTER": "S'inscrire",

View File

@ -79,6 +79,14 @@ const routes: Array<RouteRecordRaw> = [
),
props: { action: 'reset' },
},
{
path: '/email-update',
name: 'EmailUpdate',
component: () =>
import(
/* webpackChunkName: 'profile' */ '@/views/user/EmailUpdateView.vue'
),
},
{
path: '/profile',
name: 'Profile',
@ -254,16 +262,22 @@ const pathsWithoutAuthentication = [
'/register',
]
const paths = ['/email-update']
router.beforeEach((to, from, next) => {
store
.dispatch(AUTH_USER_STORE.ACTIONS.CHECK_AUTH_USER)
.then(() => {
if (paths.includes(to.path)) {
return next()
}
if (
store.getters[AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED] &&
pathsWithoutAuthentication.includes(to.path)
) {
return next('/')
} else if (
}
if (
!store.getters[AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED] &&
!pathsWithoutAuthentication.includes(to.path)
) {

View File

@ -150,6 +150,12 @@ button {
padding: 0 $default-padding * 1.5;
}
.success-message {
margin: $default-margin * 2 0;
background-color: var(--success-background-color);
color: var(--success-color);
}
.upper {
text-transform: uppercase;
}

View File

@ -22,6 +22,7 @@ import {
ILoginOrRegisterData,
IUserAccountPayload,
IUserDeletionPayload,
IUserEmailUpdatePayload,
IUserPasswordPayload,
IUserPasswordResetPayload,
IUserPayload,
@ -62,6 +63,33 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
context.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
}
},
[AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
context: ActionContext<IAuthUserState, IRootState>,
payload: IUserEmailUpdatePayload
): void {
context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
api
.post('/auth/email/update', { token: payload.token })
.then((res) => {
if (res.data.status === 'success') {
context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, true)
if (payload.refreshUser) {
context
.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
.then(() => {
return router.push('/profile/edit/account')
})
}
router.push('/profile/edit/account')
} else {
handleError(context, null)
}
})
.catch((error) => {
handleError(context, error)
})
},
[AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE](
context: ActionContext<IAuthUserState, IRootState>
): void {

View File

@ -1,5 +1,6 @@
export enum AuthUserActions {
CHECK_AUTH_USER = 'CHECK_AUTH_USER',
CONFIRM_EMAIL = 'CONFIRM_EMAIL',
DELETE_ACCOUNT = 'DELETE_ACCOUNT',
DELETE_PICTURE = 'DELETE_PICTURE',
GET_USER_PROFILE = 'GET_USER_PROFILE',

View File

@ -18,6 +18,7 @@ import {
IUserPreferencesPayload,
IUserSportPreferencesPayload,
IUserAccountPayload,
IUserEmailUpdatePayload,
} from '@/types/user'
export interface IAuthUserState {
@ -32,6 +33,11 @@ export interface IAuthUserActions {
context: ActionContext<IAuthUserState, IRootState>
): void
[AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
context: ActionContext<IAuthUserState, IRootState>,
payload: IUserEmailUpdatePayload
): void
[AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE](
context: ActionContext<IAuthUserState, IRootState>
): void

View File

@ -34,9 +34,14 @@ export interface IUserPayload {
}
export interface IUserAccountPayload {
email?: string
email: string
password: string
new_password: string
new_password?: string
}
export interface IUserEmailUpdatePayload {
token: LocationQueryValue | LocationQueryValue[]
refreshUser: boolean
}
export interface IAdminUserPayload {

View File

@ -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>