Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - add account confirmation (WIP)

Browse Source
This commit is contained in:
Sam 2022-03-20 10:37:47 +01:00
parent a1f80e9745
commit decff1cd6a
14 changed files with 188 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
fittrackee_client/src/components/User/UserAuthForm.vue
View File

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

2
fittrackee_client/src/locales/en/api.json
View File

@ -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.",

1
fittrackee_client/src/locales/en/user.json
View File

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

2
fittrackee_client/src/locales/fr/api.json
View File

@ -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.",

1
fittrackee_client/src/locales/fr/user.json
View File

@ -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"
},

13
fittrackee_client/src/router/index.ts
View File

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

60
fittrackee_client/src/store/modules/authUser/actions.ts
View File

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

3
fittrackee_client/src/store/modules/authUser/enums.ts
View File

@ -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',
}

5
fittrackee_client/src/store/modules/authUser/getters.ts
View File

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

6
fittrackee_client/src/store/modules/authUser/mutations.ts
View File

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

1
fittrackee_client/src/store/modules/authUser/state.ts
View File

@ -5,5 +5,6 @@ export const authUserState: IAuthUserState = {
authToken: null,
authUserProfile: <IAuthUserProfile>{},
isSuccess: false,
isRegistrationSuccess: false,
loading: false,
}

18
fittrackee_client/src/store/modules/authUser/types.ts
View File

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

4
fittrackee_client/src/types/user.ts
View File

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