API & Client - move user preferences + add picture edition
This commit is contained in:
Sam
@ -41,15 +41,7 @@
|
||||
<div class="nav-items-user-menu">
|
||||
<div class="nav-items-group" v-if="isAuthenticated">
|
||||
<div class="nav-item nav-profile-img">
|
||||
<img
|
||||
v-if="authUserPictureUrl !== ''"
|
||||
class="nav-profile-user-img"
|
||||
:alt="t('user.USER_PICTURE')"
|
||||
:src="authUserPictureUrl"
|
||||
/>
|
||||
<div v-else class="no-picture">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||
</div>
|
||||
<UserPicture :user="authUser" />
|
||||
</div>
|
||||
<router-link class="nav-item" to="/profile" @click="closeMenu">
|
||||
{{ authUser.username }}
|
||||
@ -86,6 +78,7 @@
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Dropdown from '@/components/Common/Dropdown.vue'
|
||||
import UserPicture from '@/components/User/UserPicture.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IDropdownOption } from '@/types/forms'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
@ -96,6 +89,7 @@
|
||||
name: 'NavBar',
|
||||
components: {
|
||||
Dropdown,
|
||||
UserPicture,
|
||||
},
|
||||
emits: ['menuInteraction'],
|
||||
setup(props, { emit }) {
|
||||
@ -249,15 +243,15 @@
|
||||
|
||||
.nav-profile-img {
|
||||
margin-bottom: -$default-padding;
|
||||
.nav-profile-user-img {
|
||||
border-radius: 50%;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.no-picture {
|
||||
color: var(--app-a-color);
|
||||
font-size: 1.7em;
|
||||
::v-deep(.user-picture) {
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.no-picture {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,9 +7,13 @@
|
||||
@click="emit('arrowClick', true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="time-frames">
|
||||
<div class="time-frames-checkboxes">
|
||||
<div v-for="frame in timeFrames" class="time-frame" :key="frame">
|
||||
<div class="time-frames custom-checkboxes-group">
|
||||
<div class="time-frames-checkboxes custom-checkboxes">
|
||||
<div
|
||||
v-for="frame in timeFrames"
|
||||
class="time-frame custom-checkbox"
|
||||
:key="frame"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
@ -76,41 +80,5 @@
|
||||
.chart-arrow {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time-frames {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.time-frames-checkboxes {
|
||||
display: inline-flex;
|
||||
|
||||
.time-frame {
|
||||
label {
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label span {
|
||||
border: solid 1px var(--time-frame-border-color);
|
||||
border-radius: 9%;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:checked + span {
|
||||
background-color: var(--time-frame-checked-bg-color);
|
||||
color: var(--time-frame-checked-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="user-infos">
|
||||
<div id="user-infos" class="description-list">
|
||||
<dl>
|
||||
<dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
|
||||
<dd>{{ registrationDate }}</dd>
|
||||
@ -43,8 +43,7 @@
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Profile',
|
||||
components: {},
|
||||
name: 'UserInfos',
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
@ -71,33 +70,6 @@
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
#user-infos {
|
||||
dl {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 0 $default-padding;
|
||||
dt {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
dd {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
dl {
|
||||
overflow: auto;
|
||||
width: initial;
|
||||
dt {
|
||||
font-weight: bold;
|
||||
float: none;
|
||||
width: initial;
|
||||
}
|
||||
dd {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-bio {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div id="user-preferences" class="description-list">
|
||||
<dl>
|
||||
<dt>{{ t('user.PROFILE.LANGUAGE') }}:</dt>
|
||||
<dd>{{ language }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<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>
|
||||
</dl>
|
||||
<div class="profile-buttons">
|
||||
<button @click="$router.push('/profile/edit/preferences')">
|
||||
{{ t('user.PROFILE.EDIT_PREFERENCES') }}
|
||||
</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'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPreferences',
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
const language = computed(() =>
|
||||
props.user.language ? props.user.language.toUpperCase() : 'EN'
|
||||
)
|
||||
const fistDayOfWeek = computed(() =>
|
||||
props.user.weekm ? 'MONDAY' : 'SUNDAY'
|
||||
)
|
||||
const timezone = computed(() =>
|
||||
props.user.timezone ? props.user.timezone : 'Europe/Paris'
|
||||
)
|
||||
return { fistDayOfWeek, language, t, timezone }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
#user-preferences {
|
||||
.profile-buttons {
|
||||
display: flex;
|
||||
gap: $default-padding;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,7 @@
|
||||
<template>
|
||||
<div id="user-profile">
|
||||
<div class="box user-header">
|
||||
<div class="user-picture">
|
||||
<img
|
||||
v-if="authUserPictureUrl !== ''"
|
||||
class="nav-profile-user-img"
|
||||
:alt="t('user.USER_PICTURE')"
|
||||
:src="authUserPictureUrl"
|
||||
/>
|
||||
<div v-else class="no-picture">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<UserPicture :user="user" />
|
||||
<div class="user-details">
|
||||
<div class="user-name">{{ user.username }}</div>
|
||||
<div class="user-stats">
|
||||
@ -37,7 +27,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<UserInfos :user="user" />
|
||||
<UserProfileTabs :tabs="tabs" :selectedTab="tab" :edition="false" />
|
||||
<UserInfos :user="user" v-if="tab === 'PROFILE'" />
|
||||
<UserPreferences :user="user" v-if="tab === 'PREFERENCES'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -47,28 +39,39 @@
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
|
||||
import UserPreferences from '@/components/User/ProfileDisplay/UserPreferences.vue'
|
||||
import UserPicture from '@/components/User/UserPicture.vue'
|
||||
import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { getApiUrl } from '@/utils'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Profile',
|
||||
name: 'ProfileDisplay',
|
||||
components: {
|
||||
UserInfos,
|
||||
UserPicture,
|
||||
UserPreferences,
|
||||
UserProfileTabs,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
tab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
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 }
|
||||
return { authUserPictureUrl, t, tabs }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -88,22 +91,6 @@
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.user-picture {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 30%;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
.no-picture {
|
||||
color: var(--app-a-color);
|
||||
font-size: 5.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex-grow: 1;
|
||||
padding: $default-padding;
|
||||
|
||||
@ -1,318 +0,0 @@
|
||||
<template>
|
||||
<div id="user-profile-edition">
|
||||
<Modal
|
||||
v-if="displayModal"
|
||||
:title="t('common.CONFIRMATION')"
|
||||
:message="t('user.CONFIRM_ACCOUNT_DELETION')"
|
||||
@confirmAction="deleteAccount(user.username)"
|
||||
@cancelAction="updateDisplayModal(false)"
|
||||
/>
|
||||
<Card>
|
||||
<template #title>{{ t('user.PROFILE.EDITION') }}</template>
|
||||
<template #content>
|
||||
<div class="profile-form form-box">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<form @submit.prevent="updateProfile">
|
||||
<label class="form-items" for="email">
|
||||
{{ t('user.EMAIL') }}
|
||||
<input id="email" :value="user.email" disabled />
|
||||
</label>
|
||||
<label class="form-items" for="registrationDate">
|
||||
{{ t('user.PROFILE.REGISTRATION_DATE') }}
|
||||
<input id="registrationDate" :value="registrationDate" disabled />
|
||||
</label>
|
||||
<label class="form-items" for="password">
|
||||
{{ t('user.PASSWORD') }}
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
v-model="userForm.password"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="passwordConfirmation">
|
||||
{{ t('user.PASSWORD_CONFIRMATION') }}
|
||||
<input
|
||||
id="passwordConfirmation"
|
||||
type="password"
|
||||
v-model="userForm.password_conf"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<hr />
|
||||
<label class="form-items" for="first_name">
|
||||
{{ t('user.PROFILE.FIRST_NAME') }}
|
||||
<input
|
||||
id="first_name"
|
||||
v-model="userForm.first_name"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="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') }}
|
||||
<input
|
||||
id="birth_date"
|
||||
type="date"
|
||||
class="birth-date"
|
||||
v-model="userForm.birth_date"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="location">
|
||||
{{ t('user.PROFILE.LOCATION') }}
|
||||
<input
|
||||
id="location"
|
||||
v-model="userForm.location"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.BIO') }}
|
||||
<CustomTextArea
|
||||
name="bio"
|
||||
:charLimit="200"
|
||||
:input="userForm.bio"
|
||||
:disabled="loading"
|
||||
@updateValue="updateBio"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.LANGUAGE') }}
|
||||
<select
|
||||
id="language"
|
||||
v-model="userForm.language"
|
||||
:disabled="loading"
|
||||
>
|
||||
<option
|
||||
v-for="lang in availableLanguages"
|
||||
:value="lang.value"
|
||||
:key="lang.value"
|
||||
>
|
||||
{{ lang.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-items" for="timezone">
|
||||
{{ t('user.PROFILE.TIMEZONE') }}
|
||||
<input
|
||||
id="timezone"
|
||||
v-model="userForm.timezone"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ 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}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="form-buttons">
|
||||
<button class="confirm" type="submit">
|
||||
{{ t('buttons.SUBMIT') }}
|
||||
</button>
|
||||
<button class="danger" @click.prevent="updateDisplayModal(true)">
|
||||
{{ t('buttons.DELETE_MY_ACCOUNT') }}
|
||||
</button>
|
||||
<button class="cancel" @click.prevent="$router.go(-1)">
|
||||
{{ t('buttons.CANCEL') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import CustomTextArea from '@/components/Common/CustomTextArea.vue'
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import Modal from '@/components/Common/Modal.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile, IUserPayload } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProfileEdition',
|
||||
components: {
|
||||
Card,
|
||||
CustomTextArea,
|
||||
ErrorMessage,
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t, availableLocales } = useI18n()
|
||||
const store = useStore()
|
||||
const userForm: IUserPayload = reactive({
|
||||
password: '',
|
||||
password_conf: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
birth_date: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
language: '',
|
||||
timezone: 'Europe/Paris',
|
||||
weekm: false,
|
||||
})
|
||||
const availableLanguages = availableLocales.map((l) => {
|
||||
return { label: l.toUpperCase(), value: l }
|
||||
})
|
||||
const weekStart = [
|
||||
{
|
||||
label: 'MONDAY',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: 'SUNDAY',
|
||||
value: false,
|
||||
},
|
||||
]
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const loading = computed(
|
||||
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IAuthUserProfile) {
|
||||
userForm.first_name = user.first_name ? user.first_name : ''
|
||||
userForm.last_name = user.last_name ? user.last_name : ''
|
||||
userForm.birth_date = user.birth_date
|
||||
? format(new Date(user.birth_date), 'yyyy-MM-dd')
|
||||
: ''
|
||||
userForm.location = user.location ? user.location : ''
|
||||
userForm.bio = user.bio ? user.bio : ''
|
||||
userForm.language = user.language ? user.language : 'en'
|
||||
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
||||
userForm.weekm = user.weekm ? user.weekm : false
|
||||
}
|
||||
function updateBio(value: string) {
|
||||
userForm.bio = value
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
|
||||
}
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteAccount(username: string) {
|
||||
store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
|
||||
return {
|
||||
availableLanguages,
|
||||
displayModal,
|
||||
errorMessages,
|
||||
loading,
|
||||
registrationDate,
|
||||
t,
|
||||
userForm,
|
||||
weekStart,
|
||||
deleteAccount,
|
||||
updateBio,
|
||||
updateDisplayModal,
|
||||
updateProfile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
#user-profile-edition {
|
||||
margin: auto;
|
||||
width: 700px;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
width: 100%;
|
||||
margin: 0 auto 50px auto;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
hr {
|
||||
border-color: var(--card-border-color);
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
|
||||
.form-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
input {
|
||||
margin: $default-padding * 0.5 0;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 35px;
|
||||
padding: $default-padding * 0.5 0;
|
||||
}
|
||||
::v-deep(.custom-textarea) {
|
||||
textarea {
|
||||
padding: $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $default-padding;
|
||||
}
|
||||
.birth-date {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
padding: $default-padding 0;
|
||||
gap: $default-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div id="user-infos-edition">
|
||||
<Modal
|
||||
v-if="displayModal"
|
||||
:title="t('common.CONFIRMATION')"
|
||||
:message="t('user.CONFIRM_ACCOUNT_DELETION')"
|
||||
@confirmAction="deleteAccount(user.username)"
|
||||
@cancelAction="updateDisplayModal(false)"
|
||||
/>
|
||||
<div class="profile-form form-box">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<form @submit.prevent="updateProfile">
|
||||
<label class="form-items" for="email">
|
||||
{{ t('user.EMAIL') }}
|
||||
<input id="email" :value="user.email" disabled />
|
||||
</label>
|
||||
<label class="form-items" for="registrationDate">
|
||||
{{ t('user.PROFILE.REGISTRATION_DATE') }}
|
||||
<input id="registrationDate" :value="registrationDate" disabled />
|
||||
</label>
|
||||
<label class="form-items" for="password">
|
||||
{{ t('user.PASSWORD') }}
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
v-model="userForm.password"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="passwordConfirmation">
|
||||
{{ t('user.PASSWORD_CONFIRMATION') }}
|
||||
<input
|
||||
id="passwordConfirmation"
|
||||
type="password"
|
||||
v-model="userForm.password_conf"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<hr />
|
||||
<label class="form-items" for="first_name">
|
||||
{{ t('user.PROFILE.FIRST_NAME') }}
|
||||
<input
|
||||
id="first_name"
|
||||
v-model="userForm.first_name"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="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') }}
|
||||
<input
|
||||
id="birth_date"
|
||||
type="date"
|
||||
class="birth-date"
|
||||
v-model="userForm.birth_date"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="location">
|
||||
{{ t('user.PROFILE.LOCATION') }}
|
||||
<input
|
||||
id="location"
|
||||
v-model="userForm.location"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.BIO') }}
|
||||
<CustomTextArea
|
||||
name="bio"
|
||||
:charLimit="200"
|
||||
:input="userForm.bio"
|
||||
:disabled="loading"
|
||||
@updateValue="updateBio"
|
||||
/>
|
||||
</label>
|
||||
<div class="form-buttons">
|
||||
<button class="confirm" type="submit">
|
||||
{{ t('buttons.SUBMIT') }}
|
||||
</button>
|
||||
<button class="cancel" @click.prevent="$router.go(-1)">
|
||||
{{ t('buttons.CANCEL') }}
|
||||
</button>
|
||||
<button class="danger" @click.prevent="updateDisplayModal(true)">
|
||||
{{ t('buttons.DELETE_MY_ACCOUNT') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import CustomTextArea from '@/components/Common/CustomTextArea.vue'
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import Modal from '@/components/Common/Modal.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile, IUserPayload } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserInfosEdition',
|
||||
components: {
|
||||
CustomTextArea,
|
||||
ErrorMessage,
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const userForm: IUserPayload = reactive({
|
||||
password: '',
|
||||
password_conf: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
birth_date: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
})
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const loading = computed(
|
||||
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IAuthUserProfile) {
|
||||
userForm.first_name = user.first_name ? user.first_name : ''
|
||||
userForm.last_name = user.last_name ? user.last_name : ''
|
||||
userForm.birth_date = user.birth_date
|
||||
? format(new Date(user.birth_date), 'yyyy-MM-dd')
|
||||
: ''
|
||||
userForm.location = user.location ? user.location : ''
|
||||
userForm.bio = user.bio ? user.bio : ''
|
||||
}
|
||||
function updateBio(value: string) {
|
||||
userForm.bio = value
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
|
||||
}
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteAccount(username: string) {
|
||||
store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
|
||||
return {
|
||||
displayModal,
|
||||
errorMessages,
|
||||
loading,
|
||||
registrationDate,
|
||||
t,
|
||||
userForm,
|
||||
deleteAccount,
|
||||
updateBio,
|
||||
updateDisplayModal,
|
||||
updateProfile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.form-buttons {
|
||||
flex-direction: row;
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div id="user-picture-edition">
|
||||
<div class="user-picture-form">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<UserPicture :user="user" />
|
||||
<form @submit.prevent="updateUserPicture">
|
||||
<input
|
||||
type="file"
|
||||
name="picture"
|
||||
accept=".png,.jpg,.gif"
|
||||
@input="updatePictureFile"
|
||||
/>
|
||||
<div class="picture-buttons">
|
||||
<button type="submit" :disabled="!pictureFile">
|
||||
{{ t('user.PROFILE.PICTURE_UPDATE') }}
|
||||
</button>
|
||||
<button class="danger" v-if="user.picture" @click="deleteUserPicture">
|
||||
{{ t('user.PROFILE.PICTURE_REMOVE') }}
|
||||
</button>
|
||||
<button class="cancel" @click="$router.push('/profile')">
|
||||
{{ t('user.PROFILE.BACK_TO_PROFILE') }}
|
||||
</button>
|
||||
</div>
|
||||
<span>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import UserPicture from '@/components/User/UserPicture.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAppConfig } from '@/types/application'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { getReadableFileSize } from '@/utils/files'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPictureEdition',
|
||||
components: {
|
||||
ErrorMessage,
|
||||
UserPicture,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const appConfig: ComputedRef<IAppConfig> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
|
||||
)
|
||||
const fileSizeLimit = appConfig.value.max_single_file_size
|
||||
? getReadableFileSize(appConfig.value.max_single_file_size)
|
||||
: ''
|
||||
let pictureFile: Ref<File | null> = ref(null)
|
||||
|
||||
function deleteUserPicture() {
|
||||
store.dispatch(USER_STORE.ACTIONS.DELETE_PICTURE)
|
||||
}
|
||||
function updatePictureFile(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.files) {
|
||||
pictureFile.value = event.target.files[0]
|
||||
}
|
||||
}
|
||||
function updateUserPicture() {
|
||||
if (pictureFile.value) {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
|
||||
picture: pictureFile.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
errorMessages,
|
||||
fileSizeLimit,
|
||||
pictureFile,
|
||||
t,
|
||||
deleteUserPicture,
|
||||
updateUserPicture,
|
||||
updatePictureFile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
#user-picture-edition {
|
||||
.user-picture-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $default-padding;
|
||||
justify-content: flex-start;
|
||||
|
||||
input {
|
||||
margin-top: $default-margin;
|
||||
padding: $default-padding * 0.5;
|
||||
}
|
||||
|
||||
span {
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
padding-left: $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
.picture-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: $default-padding;
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div id="user-preferences-edition">
|
||||
<div class="profile-form form-box">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<form @submit.prevent="updateProfile">
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.LANGUAGE') }}
|
||||
<select id="language" v-model="userForm.language" :disabled="loading">
|
||||
<option
|
||||
v-for="lang in availableLanguages"
|
||||
:value="lang.value"
|
||||
:key="lang.value"
|
||||
>
|
||||
{{ lang.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-items" for="timezone">
|
||||
{{ t('user.PROFILE.TIMEZONE') }}
|
||||
<input
|
||||
id="timezone"
|
||||
v-model="userForm.timezone"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ 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}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="form-buttons">
|
||||
<button class="confirm" type="submit">
|
||||
{{ t('buttons.SUBMIT') }}
|
||||
</button>
|
||||
<button class="cancel" @click.prevent="$router.go(-1)">
|
||||
{{ t('buttons.CANCEL') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile, IUserPreferencesPayload } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPreferencesEdition',
|
||||
components: {
|
||||
ErrorMessage,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t, availableLocales } = useI18n()
|
||||
const store = useStore()
|
||||
const userForm: IUserPreferencesPayload = reactive({
|
||||
language: '',
|
||||
timezone: 'Europe/Paris',
|
||||
weekm: false,
|
||||
})
|
||||
const availableLanguages = availableLocales.map((l) => {
|
||||
return { label: l.toUpperCase(), value: l }
|
||||
})
|
||||
const weekStart = [
|
||||
{
|
||||
label: 'MONDAY',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: 'SUNDAY',
|
||||
value: false,
|
||||
},
|
||||
]
|
||||
const loading = computed(
|
||||
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IAuthUserProfile) {
|
||||
userForm.language = user.language ? user.language : 'en'
|
||||
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
||||
userForm.weekm = user.weekm ? user.weekm : false
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES, userForm)
|
||||
}
|
||||
|
||||
return {
|
||||
availableLanguages,
|
||||
errorMessages,
|
||||
loading,
|
||||
t,
|
||||
userForm,
|
||||
weekStart,
|
||||
updateProfile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div id="user-profile-edition">
|
||||
<Card>
|
||||
<template #title>{{ t('user.PROFILE.EDITION') }}</template>
|
||||
<template #content>
|
||||
<UserProfileTabs
|
||||
:tabs="tabs"
|
||||
:selectedTab="tab"
|
||||
:edition="true"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<UserInfosEdition v-if="tab === 'PROFILE'" :user="user" />
|
||||
<UserPreferencesEdition v-if="tab === 'PREFERENCES'" :user="user" />
|
||||
<UserPictureEdition v-if="tab === 'PICTURE'" :user="user" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent, ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import UserInfosEdition from '@/components/User/ProfileEdition/UserInfosEdition.vue'
|
||||
import UserPictureEdition from '@/components/User/ProfileEdition/UserPictureEdition.vue'
|
||||
import UserPreferencesEdition from '@/components/User/ProfileEdition/UserPreferencesEdition.vue'
|
||||
import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
|
||||
import { USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProfileEdition',
|
||||
components: {
|
||||
Card,
|
||||
UserInfosEdition,
|
||||
UserPictureEdition,
|
||||
UserPreferencesEdition,
|
||||
UserProfileTabs,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
tab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
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 }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
#user-profile-edition {
|
||||
margin: auto;
|
||||
width: 700px;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
width: 100%;
|
||||
margin: 0 auto 50px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
fittrackee_client/src/components/User/UserPicture.vue
Normal file
61
fittrackee_client/src/components/User/UserPicture.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="user-picture">
|
||||
<img
|
||||
v-if="authUserPictureUrl !== ''"
|
||||
class="nav-profile-user-img"
|
||||
:alt="t('user.USER_PICTURE')"
|
||||
:src="authUserPictureUrl"
|
||||
/>
|
||||
<div v-else class="no-picture">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
return {
|
||||
authUserPictureUrl: computed(() =>
|
||||
props.user.picture
|
||||
? `${getApiUrl()}users/${props.user.username}/picture?${Date.now()}`
|
||||
: ''
|
||||
),
|
||||
t,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.user-picture {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 30%;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
.no-picture {
|
||||
color: var(--app-a-color);
|
||||
font-size: 5.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
fittrackee_client/src/components/User/UserProfileTabs.vue
Normal file
69
fittrackee_client/src/components/User/UserProfileTabs.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="profile-tabs custom-checkboxes-group">
|
||||
<div class="profile-tabs-checkboxes custom-checkboxes">
|
||||
<div v-for="tab in tabs" class="profile-tab custom-checkbox" :key="tab">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
:id="tab"
|
||||
:name="tab"
|
||||
:checked="selectedTab === tab"
|
||||
:disabled="disabled"
|
||||
@input="$router.push(getPath(tab))"
|
||||
/>
|
||||
<span>{{ t(`user.PROFILE.TABS.${tab}`) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserProfileTabs',
|
||||
props: {
|
||||
tabs: {
|
||||
type: Object as PropType<string[]>,
|
||||
required: true,
|
||||
},
|
||||
selectedTab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
edition: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
function getPath(tab: string) {
|
||||
switch (tab) {
|
||||
case 'PICTURE':
|
||||
return '/profile/edit/picture'
|
||||
case 'PREFERENCES':
|
||||
return `/profile${props.edition ? '/edit' : ''}/preferences`
|
||||
default:
|
||||
case 'PROFILE':
|
||||
return `/profile${props.edition ? '/edit' : ''}`
|
||||
}
|
||||
}
|
||||
return { t, getPath }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.profile-tabs {
|
||||
margin: $default-margin 0 $default-margin;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user