Client - add account confirmation (WIP)
This commit is contained in:
parent
a1f80e9745
commit
decff1cd6a
@ -16,8 +16,17 @@
|
||||
message="user.REGISTER_DISABLED"
|
||||
v-if="registration_disabled"
|
||||
/>
|
||||
<div class="info-box success-message" v-if="isSuccess">
|
||||
{{ $t('user.PROFILE.SUCCESSFUL_UPDATE') }}
|
||||
<div
|
||||
class="info-box success-message"
|
||||
v-if="isSuccess || isRegistrationSuccess"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
`user.PROFILE.SUCCESSFUL_${
|
||||
isRegistrationSuccess ? 'REGISTRATION' : 'UPDATE'
|
||||
}`
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<form
|
||||
:class="{ errors: formErrors }"
|
||||
@ -138,6 +147,9 @@
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const isRegistrationSuccess: ComputedRef<boolean> = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.IS_REGISTRATION_SUCCESS]
|
||||
)
|
||||
const isSuccess: ComputedRef<boolean> = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.IS_SUCCESS]
|
||||
)
|
||||
@ -204,6 +216,10 @@
|
||||
async () => {
|
||||
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
store.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
|
||||
store.commit(
|
||||
AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS,
|
||||
false
|
||||
)
|
||||
formErrors.value = false
|
||||
resetFormData()
|
||||
}
|
||||
|
@ -17,7 +17,7 @@
|
||||
"no selected file": "No selected file.",
|
||||
"password: password and password confirmation do not match": "Password: password and password confirmation don't match.",
|
||||
"provide a valid auth token": "Provide a valid auth token.",
|
||||
"sorry, that user already exists": "Sorry, that user already exists.",
|
||||
"sorry, that username is already taken": "Sorry, that username is already taken.",
|
||||
"sport does not exist": "Sport does not exist.",
|
||||
"signature expired, please log in again": "Signature expired. Please log in again.",
|
||||
"successfully registered": "Successfully registered.",
|
||||
|
@ -84,6 +84,7 @@
|
||||
"STOPPED_SPEED_THRESHOLD": "stopped speed threshold"
|
||||
},
|
||||
"SUCCESSFUL_EMAIL_UPDATE": "Your account has been updated successfully. Please check your email to confirm your new email address.",
|
||||
"SUCCESSFUL_REGISTRATION": "A link to activate your account has been emailed to the address provided.",
|
||||
"SUCCESSFUL_UPDATE": "Your account has been updated successfully.",
|
||||
"UNITS": {
|
||||
"LABEL": "Units for distance",
|
||||
|
@ -19,7 +19,7 @@
|
||||
"provide a valid auth token": "Merci de fournir un jeton de connexion valide.",
|
||||
"sport does not exist": "Ce sport n'existe pas.",
|
||||
"signature expired, please log in again": "Signature expirée. Merci de vous reconnecter.",
|
||||
"sorry, that user already exists": "Désolé, cet utilisateur existe déjà.",
|
||||
"sorry, that username is already taken": "Désolé, ce nom d'utilisateur est déjà utilisé.",
|
||||
"successfully registered": "Inscription validée.",
|
||||
"user does not exist": "L'utilisateur n'existe pas",
|
||||
"you can not delete your account, no other user has admin rights": "Vous ne pouvez pas supprimer votre compte, aucun autre utilisateur n'a des droits d'administration.",
|
||||
|
@ -88,6 +88,7 @@
|
||||
"STOPPED_SPEED_THRESHOLD": "seuil de vitesse arrêtée"
|
||||
},
|
||||
"SUCCESSFUL_EMAIL_UPDATE": "Votre compte a été modifié avec succès. Veuillez vérifier votre boite email pour valider votre nouvelle adresse email.",
|
||||
"SUCCESSFUL_REGISTRATION": "Un lien pour activer votre compte a été envoyé à l'adresse email fournie.",
|
||||
"SUCCESSFUL_UPDATE": "Votre compte a été modifié avec succès.",
|
||||
"TIMEZONE": "Fuseau horaire"
|
||||
},
|
||||
|
@ -79,6 +79,14 @@ 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',
|
||||
@ -267,15 +275,16 @@ const pathsWithoutAuthentication = [
|
||||
'/password-reset/request',
|
||||
'/password-reset/sent',
|
||||
'/register',
|
||||
'/account-confirmation',
|
||||
]
|
||||
|
||||
const paths = ['/email-update']
|
||||
const pathsWithoutChecks = ['/email-update']
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
store
|
||||
.dispatch(AUTH_USER_STORE.ACTIONS.CHECK_AUTH_USER)
|
||||
.then(() => {
|
||||
if (paths.includes(to.path)) {
|
||||
if (pathsWithoutChecks.includes(to.path)) {
|
||||
return next()
|
||||
}
|
||||
if (
|
||||
|
@ -22,7 +22,7 @@ import {
|
||||
ILoginOrRegisterData,
|
||||
IUserAccountPayload,
|
||||
IUserDeletionPayload,
|
||||
IUserEmailUpdatePayload,
|
||||
IUserAccountUpdatePayload,
|
||||
IUserPasswordPayload,
|
||||
IUserPasswordResetPayload,
|
||||
IUserPayload,
|
||||
@ -63,9 +63,32 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
|
||||
context.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
|
||||
}
|
||||
},
|
||||
[AUTH_USER_STORE.ACTIONS.CONFIRM_ACCOUNT](
|
||||
context: ActionContext<IAuthUserState, IRootState>,
|
||||
payload: IUserAccountUpdatePayload
|
||||
): void {
|
||||
context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
api
|
||||
.post('auth/account/confirm', { token: payload.token })
|
||||
.then((res) => {
|
||||
if (res.data.status === 'success') {
|
||||
const token = res.data.auth_token
|
||||
window.localStorage.setItem('authToken', token)
|
||||
context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN, token)
|
||||
context
|
||||
.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
|
||||
.then(() => router.push('/'))
|
||||
} else {
|
||||
handleError(context, null)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(context, error)
|
||||
})
|
||||
},
|
||||
[AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
|
||||
context: ActionContext<IAuthUserState, IRootState>,
|
||||
payload: IUserEmailUpdatePayload
|
||||
payload: IUserAccountUpdatePayload
|
||||
): void {
|
||||
context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
|
||||
@ -125,20 +148,35 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
|
||||
data: ILoginOrRegisterData
|
||||
): void {
|
||||
context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
context.commit(
|
||||
AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS,
|
||||
false
|
||||
)
|
||||
api
|
||||
.post(`/auth/${data.actionType}`, data.formData)
|
||||
.then((res) => {
|
||||
if (res.data.status === 'success') {
|
||||
const token = res.data.auth_token
|
||||
window.localStorage.setItem('authToken', token)
|
||||
context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN, token)
|
||||
context
|
||||
.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
|
||||
.then(() =>
|
||||
router.push(
|
||||
typeof data.redirectUrl === 'string' ? data.redirectUrl : '/'
|
||||
if (data.actionType === 'login') {
|
||||
const token = res.data.auth_token
|
||||
window.localStorage.setItem('authToken', token)
|
||||
context.commit(AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN, token)
|
||||
context
|
||||
.dispatch(AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE)
|
||||
.then(() =>
|
||||
router.push(
|
||||
typeof data.redirectUrl === 'string' ? data.redirectUrl : '/'
|
||||
)
|
||||
)
|
||||
)
|
||||
} else {
|
||||
router
|
||||
.push('/login')
|
||||
.then(() =>
|
||||
context.commit(
|
||||
AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS,
|
||||
true
|
||||
)
|
||||
)
|
||||
}
|
||||
} else {
|
||||
handleError(context, null)
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
export enum AuthUserActions {
|
||||
CHECK_AUTH_USER = 'CHECK_AUTH_USER',
|
||||
CONFIRM_ACCOUNT = 'CONFIRM_ACCOUNT',
|
||||
CONFIRM_EMAIL = 'CONFIRM_EMAIL',
|
||||
DELETE_ACCOUNT = 'DELETE_ACCOUNT',
|
||||
DELETE_PICTURE = 'DELETE_PICTURE',
|
||||
@ -22,6 +23,7 @@ export enum AuthUserGetters {
|
||||
IS_ADMIN = 'IS_ADMIN',
|
||||
IS_AUTHENTICATED = 'IS_AUTHENTICATED',
|
||||
IS_SUCCESS = 'IS_SUCCESS',
|
||||
IS_REGISTRATION_SUCCESS = 'IS_REGISTRATION_SUCCESS',
|
||||
USER_LOADING = 'USER_LOADING',
|
||||
}
|
||||
|
||||
@ -30,5 +32,6 @@ export enum AuthUserMutations {
|
||||
UPDATE_AUTH_TOKEN = 'UPDATE_AUTH_TOKEN',
|
||||
UPDATE_AUTH_USER_PROFILE = 'UPDATE_AUTH_USER_PROFILE',
|
||||
UPDATE_IS_SUCCESS = 'UPDATE_USER_IS_SUCCESS',
|
||||
UPDATE_IS_REGISTRATION_SUCCESS = 'UPDATE_IS_REGISTRATION_SUCCESS',
|
||||
UPDATE_USER_LOADING = 'UPDATE_USER_LOADING',
|
||||
}
|
||||
|
@ -21,6 +21,11 @@ export const getters: GetterTree<IAuthUserState, IRootState> &
|
||||
[AUTH_USER_STORE.GETTERS.IS_ADMIN]: (state: IAuthUserState) => {
|
||||
return state.authUserProfile && state.authUserProfile.admin
|
||||
},
|
||||
[AUTH_USER_STORE.GETTERS.IS_REGISTRATION_SUCCESS]: (
|
||||
state: IAuthUserState
|
||||
) => {
|
||||
return state.isRegistrationSuccess
|
||||
},
|
||||
[AUTH_USER_STORE.GETTERS.IS_SUCCESS]: (state: IAuthUserState) => {
|
||||
return state.isSuccess
|
||||
},
|
||||
|
@ -24,6 +24,12 @@ export const mutations: MutationTree<IAuthUserState> & TAuthUserMutations = {
|
||||
) {
|
||||
state.authUserProfile = authUserProfile
|
||||
},
|
||||
[AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS](
|
||||
state: IAuthUserState,
|
||||
isRegistrationSuccess: boolean
|
||||
) {
|
||||
state.isRegistrationSuccess = isRegistrationSuccess
|
||||
},
|
||||
[AUTH_USER_STORE.MUTATIONS.UPDATE_IS_SUCCESS](
|
||||
state: IAuthUserState,
|
||||
isSuccess: boolean
|
||||
|
@ -5,5 +5,6 @@ export const authUserState: IAuthUserState = {
|
||||
authToken: null,
|
||||
authUserProfile: <IAuthUserProfile>{},
|
||||
isSuccess: false,
|
||||
isRegistrationSuccess: false,
|
||||
loading: false,
|
||||
}
|
||||
|
@ -18,12 +18,13 @@ import {
|
||||
IUserPreferencesPayload,
|
||||
IUserSportPreferencesPayload,
|
||||
IUserAccountPayload,
|
||||
IUserEmailUpdatePayload,
|
||||
IUserAccountUpdatePayload,
|
||||
} from '@/types/user'
|
||||
|
||||
export interface IAuthUserState {
|
||||
authToken: string | null
|
||||
authUserProfile: IAuthUserProfile
|
||||
isRegistrationSuccess: boolean
|
||||
isSuccess: boolean
|
||||
loading: boolean
|
||||
}
|
||||
@ -33,9 +34,14 @@ export interface IAuthUserActions {
|
||||
context: ActionContext<IAuthUserState, IRootState>
|
||||
): void
|
||||
|
||||
[AUTH_USER_STORE.ACTIONS.CONFIRM_ACCOUNT](
|
||||
context: ActionContext<IAuthUserState, IRootState>,
|
||||
payload: IUserAccountUpdatePayload
|
||||
): void
|
||||
|
||||
[AUTH_USER_STORE.ACTIONS.CONFIRM_EMAIL](
|
||||
context: ActionContext<IAuthUserState, IRootState>,
|
||||
payload: IUserEmailUpdatePayload
|
||||
payload: IUserAccountUpdatePayload
|
||||
): void
|
||||
|
||||
[AUTH_USER_STORE.ACTIONS.GET_USER_PROFILE](
|
||||
@ -112,6 +118,10 @@ export interface IAuthUserGetters {
|
||||
|
||||
[AUTH_USER_STORE.GETTERS.IS_AUTHENTICATED](state: IAuthUserState): boolean
|
||||
|
||||
[AUTH_USER_STORE.GETTERS.IS_REGISTRATION_SUCCESS](
|
||||
state: IAuthUserState
|
||||
): boolean
|
||||
|
||||
[AUTH_USER_STORE.GETTERS.IS_SUCCESS](state: IAuthUserState): boolean
|
||||
|
||||
[AUTH_USER_STORE.GETTERS.USER_LOADING](state: IAuthUserState): boolean
|
||||
@ -135,6 +145,10 @@ export type TAuthUserMutations<S = IAuthUserState> = {
|
||||
state: S,
|
||||
loading: boolean
|
||||
): void
|
||||
[AUTH_USER_STORE.MUTATIONS.UPDATE_IS_REGISTRATION_SUCCESS](
|
||||
state: S,
|
||||
loading: boolean
|
||||
): void
|
||||
}
|
||||
|
||||
export type TAuthUserStoreModule<S = IAuthUserState> = Omit<
|
||||
|
@ -43,9 +43,9 @@ export interface IUserAccountPayload {
|
||||
new_password?: string
|
||||
}
|
||||
|
||||
export interface IUserEmailUpdatePayload {
|
||||
export interface IUserAccountUpdatePayload {
|
||||
token: LocationQueryValue | LocationQueryValue[]
|
||||
refreshUser: boolean
|
||||
refreshUser?: boolean
|
||||
}
|
||||
|
||||
export interface IAdminUserPayload {
|
||||
|
73
fittrackee_client/src/views/user/AccountConfirmation.vue
Normal file
73
fittrackee_client/src/views/user/AccountConfirmation.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div
|
||||
id="account-confirmation"
|
||||
class="center-card with-margin"
|
||||
v-if="errorMessages"
|
||||
>
|
||||
<ErrorImg />
|
||||
<p class="error-message">
|
||||
<span>{{ $t('error.SOMETHING_WRONG') }}.</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ComputedRef, onBeforeMount, onUnmounted } 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 { useStore } from '@/use/useStore'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const token: ComputedRef<LocationQueryValue | LocationQueryValue[]> =
|
||||
computed(() => route.query.token)
|
||||
|
||||
onBeforeMount(() => confirmAccount())
|
||||
|
||||
function confirmAccount() {
|
||||
if (token.value) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.CONFIRM_ACCOUNT, {
|
||||
token: token.value,
|
||||
})
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/vars.scss';
|
||||
|
||||
#account-confirmation {
|
||||
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>
|
Loading…
Reference in New Issue
Block a user