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

Client - add password reset + refacto

Browse Source
This commit is contained in:
Sam
2021-10-20 17:38:25 +02:00
parent c4eb9bdbf8
commit 8d93024a5f
66 changed files with 797 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
fittrackee_client/src/components/User/PasswordReset/PasswordActionDone.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div id="password-action-done">
<EmailSent v-if="action === 'request-sent'" />
<Password v-else />
<div class="password-message">
<span v-if="action === 'request-sent'"
>{{ $t('user.PASSWORD_SENT_EMAIL_TEXT') }}
</span>
<i18n-t v-else keypath="user.PASSWORD_UPDATED">
<router-link to="/login">
{{ $t('common.HERE') }}
</router-link>
</i18n-t>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import EmailSent from '@/components/Common/Images/EmailSent.vue'
import Password from '@/components/Common/Images/Password.vue'
export default defineComponent({
name: 'PasswordActionDone',
components: {
EmailSent,
Password,
},
props: {
action: {
type: String,
required: true,
},
},
})
</script>
<style scoped lang="scss">
@import '~@/scss/base';
#password-action-done {
display: flex;
flex-direction: column;
align-items: center;
margin: 100px auto;
width: 700px;
@media screen and (max-width: $medium-limit) {
width: 100%;
}
svg {
stroke: none;
fill-rule: nonzero;
fill: var(--app-color);
filter: var(--svg-filter);
width: 100px;
}
.password-message {
font-size: 1.1em;
text-align: center;
@media screen and (max-width: $medium-limit) {
font-size: 1em;
}
}
}
</style>

55
fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div id="password-reset-request">
<Card>
<template #title>{{ $t('user.RESET_PASSWORD') }}</template>
<template #content>
<UserAuthForm :action="action" :token="token" />
</template>
</Card>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Card from '@/components/Common/Card.vue'
import UserAuthForm from '@/components/User/UserAuthForm.vue'
export default defineComponent({
name: 'PasswordResetForm',
components: {
Card,
UserAuthForm,
},
props: {
action: {
type: String,
required: true,
},
token: {
type: String,
default: '',
},
},
})
</script>
<style scoped lang="scss">
@import '~@/scss/base';
#password-reset-request {
margin: 100px auto;
width: 700px;
@media screen and (max-width: $medium-limit) {
width: 100%;
}
::v-deep(.card) {
.card-content {
#user-form {
width: 100%;
}
}
}
}
</style>

20
fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
View File

@ -1,36 +1,36 @@
<template>
<div id="user-infos" class="description-list">
<dl>
<dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
<dt>{{ $t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
<dd>{{ registrationDate }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.FIRST_NAME') }}:</dt>
<dt>{{ $t('user.PROFILE.FIRST_NAME') }}:</dt>
<dd>{{ user.first_name }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.LAST_NAME') }}:</dt>
<dt>{{ $t('user.PROFILE.LAST_NAME') }}:</dt>
<dd>{{ user.last_name }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.BIRTH_DATE') }}:</dt>
<dt>{{ $t('user.PROFILE.BIRTH_DATE') }}:</dt>
<dd>{{ birthDate }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.LOCATION') }}:</dt>
<dt>{{ $t('user.PROFILE.LOCATION') }}:</dt>
<dd>{{ user.location }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.BIO') }}:</dt>
<dt>{{ $t('user.PROFILE.BIO') }}:</dt>
<dd class="user-bio">
{{ user.bio }}
</dd>
</dl>
<div class="profile-buttons">
<button @click="$router.push('/profile/edit')">
{{ t('user.PROFILE.EDIT') }}
{{ $t('user.PROFILE.EDIT') }}
</button>
<button @click="$router.push('/')">{{ t('common.HOME') }}</button>
<button @click="$router.push('/')">{{ $t('common.HOME') }}</button>
</div>
</div>
</template>
@ -38,7 +38,6 @@
<script lang="ts">
import { format } from 'date-fns'
import { PropType, computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { IAuthUserProfile } from '@/types/user'
@ -51,7 +50,6 @@
},
},
setup(props) {
const { t } = useI18n()
const registrationDate = computed(() =>
props.user.created_at
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
@ -62,7 +60,7 @@
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
: ''
)
return { birthDate, registrationDate, t }
return { birthDate, registrationDate }
},
})
</script>

16
fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
View File

@ -1,29 +1,28 @@
<template>
<div id="user-preferences" class="description-list">
<dl>
<dt>{{ t('user.PROFILE.LANGUAGE') }}:</dt>
<dt>{{ $t('user.PROFILE.LANGUAGE') }}:</dt>
<dd>{{ language }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.TIMEZONE') }}:</dt>
<dt>{{ $t('user.PROFILE.TIMEZONE') }}:</dt>
<dd>{{ timezone }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
<dd>{{ t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
<dt>{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
<dd>{{ $t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
</dl>
<div class="profile-buttons">
<button @click="$router.push('/profile/edit/preferences')">
{{ t('user.PROFILE.EDIT_PREFERENCES') }}
{{ $t('user.PROFILE.EDIT_PREFERENCES') }}
</button>
<button @click="$router.push('/')">{{ t('common.HOME') }}</button>
<button @click="$router.push('/')">{{ $t('common.HOME') }}</button>
</div>
</div>
</template>
<script lang="ts">
import { PropType, computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { IAuthUserProfile } from '@/types/user'
@ -36,7 +35,6 @@
},
},
setup(props) {
const { t } = useI18n()
const language = computed(() =>
props.user.language ? props.user.language.toUpperCase() : 'EN'
)
@ -46,7 +44,7 @@
const timezone = computed(() =>
props.user.timezone ? props.user.timezone : 'Europe/Paris'
)
return { fistDayOfWeek, language, t, timezone }
return { fistDayOfWeek, language, timezone }
},
})
</script>

8
fittrackee_client/src/components/User/ProfileDisplay/index.vue
View File

@ -8,7 +8,7 @@
<div class="user-stat">
<span class="stat-number">{{ user.nb_workouts }}</span>
<span class="stat-label">
{{ t('workouts.WORKOUT', user.nb_workouts) }}
{{ $t('workouts.WORKOUT', user.nb_workouts) }}
</span>
</div>
<div class="user-stat">
@ -20,7 +20,7 @@
<div class="user-stat hide-small">
<span class="stat-number">{{ user.nb_sports }}</span>
<span class="stat-label">
{{ t('workouts.SPORT', user.nb_sports) }}
{{ $t('workouts.SPORT', user.nb_sports) }}
</span>
</div>
</div>
@ -36,7 +36,6 @@
<script lang="ts">
import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
import UserPreferences from '@/components/User/ProfileDisplay/UserPreferences.vue'
@ -64,14 +63,13 @@
},
},
setup(props) {
const { t } = useI18n()
const tabs = ['PROFILE', 'PREFERENCES']
const authUserPictureUrl: ComputedRef<string> = computed(() =>
props.user.picture
? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
: ''
)
return { authUserPictureUrl, t, tabs }
return { authUserPictureUrl, tabs }
},
})
</script>

31
fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
View File

@ -2,8 +2,8 @@
<div id="user-infos-edition">
<Modal
v-if="displayModal"
:title="t('common.CONFIRMATION')"
:message="t('user.CONFIRM_ACCOUNT_DELETION')"
:title="$t('common.CONFIRMATION')"
:message="$t('user.CONFIRM_ACCOUNT_DELETION')"
@confirmAction="deleteAccount(user.username)"
@cancelAction="updateDisplayModal(false)"
/>
@ -11,15 +11,15 @@
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
<form @submit.prevent="updateProfile">
<label class="form-items" for="email">
{{ t('user.EMAIL') }}
{{ $t('user.EMAIL') }}
<input id="email" :value="user.email" disabled />
</label>
<label class="form-items" for="registrationDate">
{{ t('user.PROFILE.REGISTRATION_DATE') }}
{{ $t('user.PROFILE.REGISTRATION_DATE') }}
<input id="registrationDate" :value="registrationDate" disabled />
</label>
<label class="form-items" for="password">
{{ t('user.PASSWORD') }}
{{ $t('user.PASSWORD') }}
<input
id="password"
type="password"
@ -28,7 +28,7 @@
/>
</label>
<label class="form-items" for="passwordConfirmation">
{{ t('user.PASSWORD_CONFIRMATION') }}
{{ $t('user.PASSWORD_CONFIRMATION') }}
<input
id="passwordConfirmation"
type="password"
@ -38,7 +38,7 @@
</label>
<hr />
<label class="form-items" for="first_name">
{{ t('user.PROFILE.FIRST_NAME') }}
{{ $t('user.PROFILE.FIRST_NAME') }}
<input
id="first_name"
v-model="userForm.first_name"
@ -46,11 +46,11 @@
/>
</label>
<label class="form-items" for="last_name">
{{ t('user.PROFILE.LAST_NAME') }}
{{ $t('user.PROFILE.LAST_NAME') }}
<input id="last_name" v-model="userForm.last_name" />
</label>
<label class="form-items" for="birth_date">
{{ t('user.PROFILE.BIRTH_DATE') }}
{{ $t('user.PROFILE.BIRTH_DATE') }}
<input
id="birth_date"
type="date"
@ -60,7 +60,7 @@
/>
</label>
<label class="form-items" for="location">
{{ t('user.PROFILE.LOCATION') }}
{{ $t('user.PROFILE.LOCATION') }}
<input
id="location"
v-model="userForm.location"
@ -68,7 +68,7 @@
/>
</label>
<label class="form-items">
{{ t('user.PROFILE.BIO') }}
{{ $t('user.PROFILE.BIO') }}
<CustomTextArea
name="bio"
:charLimit="200"
@ -79,13 +79,13 @@
</label>
<div class="form-buttons">
<button class="confirm" type="submit">
{{ t('buttons.SUBMIT') }}
{{ $t('buttons.SUBMIT') }}
</button>
<button class="cancel" @click.prevent="$router.go(-1)">
{{ t('buttons.CANCEL') }}
{{ $t('buttons.CANCEL') }}
</button>
<button class="danger" @click.prevent="updateDisplayModal(true)">
{{ t('buttons.DELETE_MY_ACCOUNT') }}
{{ $t('buttons.DELETE_MY_ACCOUNT') }}
</button>
</div>
</form>
@ -105,7 +105,6 @@
ref,
onMounted,
} from 'vue'
import { useI18n } from 'vue-i18n'
import CustomTextArea from '@/components/Common/CustomTextArea.vue'
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
@ -128,7 +127,6 @@
},
},
setup(props) {
const { t } = useI18n()
const store = useStore()
const userForm: IUserPayload = reactive({
password: '',
@ -185,7 +183,6 @@
errorMessages,
loading,
registrationDate,
t,
userForm,
deleteAccount,
updateBio,

11
fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
View File

@ -12,16 +12,16 @@
/>
<div class="picture-buttons">
<button type="submit" :disabled="!pictureFile">
{{ t('user.PROFILE.PICTURE_UPDATE') }}
{{ $t('user.PROFILE.PICTURE_UPDATE') }}
</button>
<button class="danger" v-if="user.picture" @click="deleteUserPicture">
{{ t('user.PROFILE.PICTURE_REMOVE') }}
{{ $t('user.PROFILE.PICTURE_REMOVE') }}
</button>
<button class="cancel" @click="$router.push('/profile')">
{{ t('user.PROFILE.BACK_TO_PROFILE') }}
{{ $t('user.PROFILE.BACK_TO_PROFILE') }}
</button>
</div>
<span>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
<span>{{ $t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
</form>
</div>
</div>
@ -36,7 +36,6 @@
computed,
ref,
} from 'vue'
import { useI18n } from 'vue-i18n'
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
import UserPicture from '@/components/User/UserPicture.vue'
@ -59,7 +58,6 @@
},
},
setup() {
const { t } = useI18n()
const store = useStore()
const errorMessages: ComputedRef<string | string[] | null> = computed(
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
@ -92,7 +90,6 @@
errorMessages,
fileSizeLimit,
pictureFile,
t,
deleteUserPicture,
updateUserPicture,
updatePictureFile,

15
fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
View File

@ -4,7 +4,7 @@
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
<form @submit.prevent="updateProfile">
<label class="form-items">
{{ t('user.PROFILE.LANGUAGE') }}
{{ $t('user.PROFILE.LANGUAGE') }}
<select id="language" v-model="userForm.language" :disabled="loading">
<option
v-for="lang in availableLanguages"
@ -16,7 +16,7 @@
</select>
</label>
<label class="form-items" for="timezone">
{{ t('user.PROFILE.TIMEZONE') }}
{{ $t('user.PROFILE.TIMEZONE') }}
<input
id="timezone"
v-model="userForm.timezone"
@ -24,23 +24,23 @@
/>
</label>
<label class="form-items">
{{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
<select id="weekm" v-model="userForm.weekm" :disabled="loading">
<option
v-for="start in weekStart"
:value="start.value"
:key="start.value"
>
{{ t(`user.PROFILE.${start.label}`) }}
{{ $t(`user.PROFILE.${start.label}`) }}
</option>
</select>
</label>
<div class="form-buttons">
<button class="confirm" type="submit">
{{ t('buttons.SUBMIT') }}
{{ $t('buttons.SUBMIT') }}
</button>
<button class="cancel" @click.prevent="$router.go(-1)">
{{ t('buttons.CANCEL') }}
{{ $t('buttons.CANCEL') }}
</button>
</div>
</form>
@ -76,7 +76,7 @@
},
},
setup(props) {
const { t, availableLocales } = useI18n()
const { availableLocales } = useI18n()
const store = useStore()
const userForm: IUserPreferencesPayload = reactive({
language: '',
@ -122,7 +122,6 @@
availableLanguages,
errorMessages,
loading,
t,
userForm,
weekStart,
updateProfile,

8
fittrackee_client/src/components/User/ProfileEdition/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="user-profile-edition">
<Card>
<template #title>{{ t(`user.PROFILE.${tab}_EDITION`) }}</template>
<template #title>{{ $t(`user.PROFILE.${tab}_EDITION`) }}</template>
<template #content>
<UserProfileTabs
:tabs="tabs"
@ -18,8 +18,7 @@
</template>
<script lang="ts">
import { PropType, defineComponent, ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { PropType, computed, defineComponent, ref } from 'vue'
import Card from '@/components/Common/Card.vue'
import UserInfosEdition from '@/components/User/ProfileEdition/UserInfosEdition.vue'
@ -50,14 +49,13 @@
},
},
setup(props) {
const { t } = useI18n()
const store = useStore()
const tabs = ['PROFILE', 'PICTURE', 'PREFERENCES']
const selectedTab = ref(props.tab)
const loading = computed(
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
)
return { loading, selectedTab, t, tabs }
return { loading, selectedTab, tabs }
},
})
</script>

93
fittrackee_client/src/components/User/LoginOrRegisterForm.vue → fittrackee_client/src/components/User/UserAuthForm.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="login-or-register-form">
<div id="user-auth-form">
<div id="user-form">
<div
class="form-box"
@ -19,38 +19,57 @@
:disabled="registration_disabled"
required
v-model="formData.username"
:placeholder="t('user.USERNAME')"
:placeholder="$t('user.USERNAME')"
/>
<input
v-if="action !== 'reset'"
id="email"
:disabled="registration_disabled"
required
type="email"
v-model="formData.email"
:placeholder="t('user.EMAIL')"
:placeholder="
action === 'reset-request'
? $t('user.ENTER_EMAIL')
: $t('user.EMAIL')
"
/>
<input
v-if="action !== 'reset-request'"
id="password"
:disabled="registration_disabled"
required
type="password"
v-model="formData.password"
:placeholder="t('user.PASSWORD')"
:placeholder="
action === 'reset'
? $t('user.ENTER_PASSWORD')
: $t('user.PASSWORD')
"
/>
<input
v-if="action === 'register'"
v-if="['register', 'reset'].includes(action)"
id="confirm-password"
:disabled="registration_disabled"
type="password"
required
v-model="formData.password_conf"
:placeholder="t('user.PASSWORD_CONFIRM')"
:placeholder="
action === 'reset'
? $t('user.ENTER_PASSWORD_CONFIRMATION')
: $t('user.PASSWORD_CONFIRM')
"
/>
</div>
<button type="submit" :disabled="registration_disabled">
{{ t(buttonText) }}
{{ $t(buttonText) }}
</button>
</form>
<div v-if="action === 'login'">
<router-link class="password-forgotten" to="/password-reset/request">
{{ $t('user.PASSWORD_FORGOTTEN') }}
</router-link>
</div>
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
</div>
</div>
@ -59,19 +78,17 @@
<script lang="ts">
import { ComputedRef, computed, defineComponent, reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import AlertMessage from '@/components/Common/AlertMessage.vue'
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
import router from '@/router'
import { ROOT_STORE, USER_STORE } from '@/store/constants'
import { IAppConfig } from '@/types/application'
import { ILoginRegisterFormData } from '@/types/user'
import { useStore } from '@/use/useStore'
export default defineComponent({
name: 'LoginOrRegisterForm',
name: 'UserAuthForm',
components: {
AlertMessage,
ErrorMessage,
@ -81,6 +98,10 @@
type: String,
required: true,
},
token: {
type: String,
default: '',
},
},
setup(props) {
const formData: ILoginRegisterFormData = reactive({
@ -89,12 +110,11 @@
password: '',
password_conf: '',
})
const { t } = useI18n()
const route = useRoute()
const store = useStore()
const buttonText: ComputedRef<string> = computed(() =>
props.action === 'register' ? 'buttons.REGISTER' : 'buttons.LOGIN'
getButtonText(props.action)
)
const errorMessages: ComputedRef<string | string[] | null> = computed(
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
@ -108,11 +128,42 @@
!appConfig.value.is_registration_enabled
)
function getButtonText(action: string): string {
switch (action) {
case 'reset-request':
case 'reset':
return 'buttons.SUBMIT'
default:
return `buttons.${props.action.toUpperCase()}`
}
}
function onSubmit(actionType: string) {
return store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
actionType,
formData,
})
switch (actionType) {
case 'reset':
if (!props.token) {
return store.commit(
ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
'user.INVALID_TOKEN'
)
}
return store.dispatch(USER_STORE.ACTIONS.RESET_USER_PASSWORD, {
password: formData.password,
password_conf: formData.password_conf,
token: props.token,
})
case 'reset-request':
return store.dispatch(
USER_STORE.ACTIONS.SEND_PASSWORD_RESET_REQUEST,
{
email: formData.email,
}
)
default:
store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
actionType,
formData,
})
}
}
function resetFormData() {
formData.username = ''
@ -128,13 +179,11 @@
}
)
return {
t,
appConfig,
buttonText,
errorMessages,
formData,
registration_disabled,
router,
onSubmit,
}
},
@ -144,7 +193,7 @@
<style scoped lang="scss">
@import '~@/scss/base';
#login-or-register-form {
#user-auth-form {
display: flex;
align-items: center;
@ -154,6 +203,12 @@
#user-form {
width: 60%;
.password-forgotten {
font-size: 0.9em;
font-style: italic;
padding-left: $default-padding;
}
button {
margin: $default-margin;
border: solid 1px var(--app-color);

6
fittrackee_client/src/components/User/UserPicture.vue
View File

@ -3,7 +3,7 @@
<img
v-if="authUserPictureUrl !== ''"
class="nav-profile-user-img"
:alt="t('user.USER_PICTURE')"
:alt="$t('user.USER_PICTURE')"
:src="authUserPictureUrl"
/>
<div v-else class="no-picture">
@ -14,10 +14,10 @@
<script lang="ts">
import { PropType, computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { IAuthUserProfile } from '@/types/user'
import { getApiUrl } from '@/utils'
export default defineComponent({
name: 'UserPicture',
props: {
@ -27,14 +27,12 @@
},
},
setup(props) {
const { t } = useI18n()
return {
authUserPictureUrl: computed(() =>
props.user.picture
? `${getApiUrl()}users/${props.user.username}/picture?${Date.now()}`
: ''
),
t,
}
},
})

6
fittrackee_client/src/components/User/UserProfileTabs.vue
View File

@ -11,7 +11,7 @@
:disabled="disabled"
@input="$router.push(getPath(tab))"
/>
<span>{{ t(`user.PROFILE.TABS.${tab}`) }}</span>
<span>{{ $t(`user.PROFILE.TABS.${tab}`) }}</span>
</label>
</div>
</div>
@ -20,7 +20,6 @@
<script lang="ts">
import { PropType, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
name: 'UserProfileTabs',
@ -43,7 +42,6 @@
},
},
setup(props) {
const { t } = useI18n()
function getPath(tab: string) {
switch (tab) {
case 'PICTURE':
@ -55,7 +53,7 @@
return `/profile${props.edition ? '/edit' : ''}`
}
}
return { t, getPath }
return { getPath }
},
})
</script>