|
|
|
@ -8,12 +8,15 @@
|
|
|
|
|
.headline.primary--text.animated.fadeInLeft {{$t('profile:title')}}
|
|
|
|
|
.subheading.grey--text.animated.fadeInLeft {{$t('profile:subtitle')}}
|
|
|
|
|
v-spacer
|
|
|
|
|
v-btn.animated.fadeInDown(color='success', depressed, @click='saveProfile', :loading='saveLoading', large)
|
|
|
|
|
v-icon(left) mdi-check
|
|
|
|
|
span {{$t('common:actions.save')}}
|
|
|
|
|
//- v-btn.animated.fadeInDown(outlined, color='primary', disabled).mr-0
|
|
|
|
|
//- v-icon(left) mdi-earth
|
|
|
|
|
//- span {{$t('profile:viewPublicProfile')}}
|
|
|
|
|
v-flex(lg6 xs12)
|
|
|
|
|
v-card.animated.fadeInUp
|
|
|
|
|
v-toolbar(color='primary', dark, dense, flat)
|
|
|
|
|
v-toolbar(color='blue-grey', dark, dense, flat)
|
|
|
|
|
v-toolbar-title.subtitle-1 {{$t('profile:myInfo')}}
|
|
|
|
|
v-list(two-line, dense)
|
|
|
|
|
v-list-item
|
|
|
|
@ -105,56 +108,9 @@
|
|
|
|
|
@keydown.enter='editPop.jobTitle = false'
|
|
|
|
|
@keydown.esc='editPop.jobTitle = false'
|
|
|
|
|
)
|
|
|
|
|
v-divider
|
|
|
|
|
v-list-item
|
|
|
|
|
v-list-item-avatar(size='32')
|
|
|
|
|
v-icon mdi-map-clock-outline
|
|
|
|
|
v-list-item-content
|
|
|
|
|
v-list-item-title {{$t('profile:timezone')}}
|
|
|
|
|
v-list-item-subtitle {{ user.timezone }}
|
|
|
|
|
v-list-item-action
|
|
|
|
|
v-menu(
|
|
|
|
|
v-model='editPop.timezone'
|
|
|
|
|
:close-on-content-click='false'
|
|
|
|
|
min-width='350'
|
|
|
|
|
max-width='350'
|
|
|
|
|
left
|
|
|
|
|
)
|
|
|
|
|
template(v-slot:activator='{ on }')
|
|
|
|
|
v-btn(text, color='grey', small, v-on='on', @click='focusField(`iptTimezone`)')
|
|
|
|
|
v-icon(left) mdi-pencil
|
|
|
|
|
span {{ $t('common:actions:edit') }}
|
|
|
|
|
v-card(flat)
|
|
|
|
|
v-select(
|
|
|
|
|
ref='iptTimezone'
|
|
|
|
|
:items='timezones'
|
|
|
|
|
v-model='user.timezone'
|
|
|
|
|
:label='$t(`profile:timezone`)'
|
|
|
|
|
solo
|
|
|
|
|
flat
|
|
|
|
|
dense
|
|
|
|
|
hide-details
|
|
|
|
|
@keydown.enter='editPop.timezone = false'
|
|
|
|
|
@keydown.esc='editPop.timezone = false'
|
|
|
|
|
style='height: 44px;'
|
|
|
|
|
)
|
|
|
|
|
v-card-chin
|
|
|
|
|
v-spacer
|
|
|
|
|
v-btn(
|
|
|
|
|
small
|
|
|
|
|
text
|
|
|
|
|
color='primary'
|
|
|
|
|
@click='editPop.timezone = false'
|
|
|
|
|
)
|
|
|
|
|
v-icon(left) mdi-check
|
|
|
|
|
span {{$t('common:actions.ok')}}
|
|
|
|
|
v-card-chin
|
|
|
|
|
v-spacer
|
|
|
|
|
v-btn.px-4(color='success', depressed, @click='saveProfile', :loading='saveLoading')
|
|
|
|
|
v-icon(left) mdi-content-save
|
|
|
|
|
span {{$t('common:actions.save')}}
|
|
|
|
|
|
|
|
|
|
v-card.mt-3.animated.fadeInUp.wait-p2s
|
|
|
|
|
v-toolbar(color='primary', dark, dense, flat)
|
|
|
|
|
v-toolbar(color='blue-grey', dark, dense, flat)
|
|
|
|
|
v-toolbar-title
|
|
|
|
|
.subtitle-1 {{$t('profile:auth.title')}}
|
|
|
|
|
v-card-text.pt-0
|
|
|
|
@ -181,7 +137,7 @@
|
|
|
|
|
outlined
|
|
|
|
|
:label='$t(`profile:auth.currentPassword`)'
|
|
|
|
|
type='password'
|
|
|
|
|
prepend-inner-icon='mdi-textbox-password'
|
|
|
|
|
prepend-inner-icon='mdi-form-textbox-password'
|
|
|
|
|
)
|
|
|
|
|
v-text-field(
|
|
|
|
|
ref='iptNewPass'
|
|
|
|
@ -189,7 +145,7 @@
|
|
|
|
|
outlined
|
|
|
|
|
:label='$t(`profile:auth.newPassword`)'
|
|
|
|
|
type='password'
|
|
|
|
|
prepend-inner-icon='mdi-textbox-password'
|
|
|
|
|
prepend-inner-icon='mdi-form-textbox-password'
|
|
|
|
|
autocomplete='off'
|
|
|
|
|
counter='255'
|
|
|
|
|
loading
|
|
|
|
@ -201,7 +157,7 @@
|
|
|
|
|
outlined
|
|
|
|
|
:label='$t(`profile:auth.verifyPassword`)'
|
|
|
|
|
type='password'
|
|
|
|
|
prepend-inner-icon='mdi-textbox-password'
|
|
|
|
|
prepend-inner-icon='mdi-form-textbox-password'
|
|
|
|
|
autocomplete='off'
|
|
|
|
|
hide-details
|
|
|
|
|
)
|
|
|
|
@ -212,7 +168,7 @@
|
|
|
|
|
span {{$t('profile:auth.changePassword')}}
|
|
|
|
|
v-flex(lg6 xs12)
|
|
|
|
|
//- v-card
|
|
|
|
|
//- v-toolbar(color='primary', dark, dense, flat)
|
|
|
|
|
//- v-toolbar(color='blue-grey', dark, dense, flat)
|
|
|
|
|
//- v-toolbar-title
|
|
|
|
|
//- .subtitle-1 Picture
|
|
|
|
|
//- v-card-title
|
|
|
|
@ -223,6 +179,139 @@
|
|
|
|
|
//- v-btn(outlined).mx-4 Upload Picture
|
|
|
|
|
//- v-btn(outlined, disabled) Remove Picture
|
|
|
|
|
v-card.animated.fadeInUp.wait-p2s
|
|
|
|
|
v-toolbar(color='blue-grey', dark, dense, flat)
|
|
|
|
|
v-toolbar-title.subtitle-1 {{$t('profile:preferences')}}
|
|
|
|
|
v-list(two-line, dense)
|
|
|
|
|
v-list-item
|
|
|
|
|
v-list-item-avatar(size='32')
|
|
|
|
|
v-icon mdi-map-clock-outline
|
|
|
|
|
v-list-item-content
|
|
|
|
|
v-list-item-title {{$t('profile:timezone')}}
|
|
|
|
|
v-list-item-subtitle {{ user.timezone }}
|
|
|
|
|
v-list-item-action
|
|
|
|
|
v-menu(
|
|
|
|
|
v-model='editPop.timezone'
|
|
|
|
|
:close-on-content-click='false'
|
|
|
|
|
min-width='350'
|
|
|
|
|
max-width='350'
|
|
|
|
|
left
|
|
|
|
|
)
|
|
|
|
|
template(v-slot:activator='{ on }')
|
|
|
|
|
v-btn(text, color='grey', small, v-on='on', @click='focusField(`iptTimezone`)')
|
|
|
|
|
v-icon(left) mdi-pencil
|
|
|
|
|
span {{ $t('common:actions:edit') }}
|
|
|
|
|
v-card(flat)
|
|
|
|
|
v-select(
|
|
|
|
|
ref='iptTimezone'
|
|
|
|
|
:items='timezones'
|
|
|
|
|
v-model='user.timezone'
|
|
|
|
|
:label='$t(`profile:timezone`)'
|
|
|
|
|
solo
|
|
|
|
|
flat
|
|
|
|
|
dense
|
|
|
|
|
hide-details
|
|
|
|
|
@keydown.enter='editPop.timezone = false'
|
|
|
|
|
@keydown.esc='editPop.timezone = false'
|
|
|
|
|
style='height: 38px;'
|
|
|
|
|
)
|
|
|
|
|
v-card-chin
|
|
|
|
|
v-spacer
|
|
|
|
|
v-btn(
|
|
|
|
|
small
|
|
|
|
|
text
|
|
|
|
|
color='primary'
|
|
|
|
|
@click='editPop.timezone = false'
|
|
|
|
|
)
|
|
|
|
|
v-icon(left) mdi-check
|
|
|
|
|
span {{$t('common:actions.ok')}}
|
|
|
|
|
v-divider
|
|
|
|
|
v-list-item
|
|
|
|
|
v-list-item-avatar(size='32')
|
|
|
|
|
v-icon mdi-calendar-month-outline
|
|
|
|
|
v-list-item-content
|
|
|
|
|
v-list-item-title {{$t('profile:dateFormat')}}
|
|
|
|
|
v-list-item-subtitle {{ user.dateFormat && user.dateFormat.length > 0 ? user.dateFormat : $t('profile:localeDefault') }}
|
|
|
|
|
v-list-item-action
|
|
|
|
|
v-menu(
|
|
|
|
|
v-model='editPop.dateFormat'
|
|
|
|
|
:close-on-content-click='false'
|
|
|
|
|
min-width='350'
|
|
|
|
|
max-width='350'
|
|
|
|
|
left
|
|
|
|
|
)
|
|
|
|
|
template(v-slot:activator='{ on }')
|
|
|
|
|
v-btn(text, color='grey', small, v-on='on', @click='focusField(`iptDateFormat`)')
|
|
|
|
|
v-icon(left) mdi-pencil
|
|
|
|
|
span {{ $t('common:actions:edit') }}
|
|
|
|
|
v-card(flat)
|
|
|
|
|
v-select(
|
|
|
|
|
ref='iptDateFormat'
|
|
|
|
|
:items='dateFormats'
|
|
|
|
|
v-model='user.dateFormat'
|
|
|
|
|
:label='$t(`profile:dateFormat`)'
|
|
|
|
|
solo
|
|
|
|
|
flat
|
|
|
|
|
dense
|
|
|
|
|
hide-details
|
|
|
|
|
@keydown.enter='editPop.dateFormat = false'
|
|
|
|
|
@keydown.esc='editPop.dateFormat = false'
|
|
|
|
|
style='height: 38px;'
|
|
|
|
|
)
|
|
|
|
|
v-card-chin
|
|
|
|
|
v-spacer
|
|
|
|
|
v-btn(
|
|
|
|
|
small
|
|
|
|
|
text
|
|
|
|
|
color='primary'
|
|
|
|
|
@click='editPop.dateFormat = false'
|
|
|
|
|
)
|
|
|
|
|
v-icon(left) mdi-check
|
|
|
|
|
span {{$t('common:actions.ok')}}
|
|
|
|
|
v-divider
|
|
|
|
|
v-list-item
|
|
|
|
|
v-list-item-avatar(size='32')
|
|
|
|
|
v-icon mdi-palette
|
|
|
|
|
v-list-item-content
|
|
|
|
|
v-list-item-title {{$t('profile:appearance')}}
|
|
|
|
|
v-list-item-subtitle {{ currentAppearance }}
|
|
|
|
|
v-list-item-action
|
|
|
|
|
v-menu(
|
|
|
|
|
v-model='editPop.appearance'
|
|
|
|
|
:close-on-content-click='false'
|
|
|
|
|
min-width='350'
|
|
|
|
|
max-width='350'
|
|
|
|
|
left
|
|
|
|
|
)
|
|
|
|
|
template(v-slot:activator='{ on }')
|
|
|
|
|
v-btn(text, color='grey', small, v-on='on', @click='focusField(`iptAppearance`)')
|
|
|
|
|
v-icon(left) mdi-pencil
|
|
|
|
|
span {{ $t('common:actions:edit') }}
|
|
|
|
|
v-card(flat)
|
|
|
|
|
v-select(
|
|
|
|
|
ref='iptAppearance'
|
|
|
|
|
:items='appearances'
|
|
|
|
|
v-model='user.appearance'
|
|
|
|
|
:label='$t(`profile:appearance`)'
|
|
|
|
|
solo
|
|
|
|
|
flat
|
|
|
|
|
dense
|
|
|
|
|
hide-details
|
|
|
|
|
@keydown.enter='editPop.appearance = false'
|
|
|
|
|
@keydown.esc='editPop.appearance = false'
|
|
|
|
|
style='height: 38px;'
|
|
|
|
|
)
|
|
|
|
|
v-card-chin
|
|
|
|
|
v-spacer
|
|
|
|
|
v-btn(
|
|
|
|
|
small
|
|
|
|
|
text
|
|
|
|
|
color='primary'
|
|
|
|
|
@click='editPop.appearance = false'
|
|
|
|
|
)
|
|
|
|
|
v-icon(left) mdi-check
|
|
|
|
|
span {{$t('common:actions.ok')}}
|
|
|
|
|
|
|
|
|
|
v-card.mt-3.animated.fadeInUp.wait-p3s
|
|
|
|
|
v-toolbar(color='primary', dark, dense, flat)
|
|
|
|
|
v-toolbar-title
|
|
|
|
|
.subtitle-1 {{$t('profile:groups.title')}}
|
|
|
|
@ -234,7 +323,8 @@
|
|
|
|
|
v-list-item-content
|
|
|
|
|
v-list-item-title.body-2 {{grp}}
|
|
|
|
|
v-divider(v-if='idx < user.groups.length - 1')
|
|
|
|
|
v-card.mt-3.animated.fadeInUp.wait-p3s
|
|
|
|
|
|
|
|
|
|
v-card.mt-3.animated.fadeInUp.wait-p4s
|
|
|
|
|
v-toolbar(color='teal', dark, dense, flat)
|
|
|
|
|
v-toolbar-title
|
|
|
|
|
.subtitle-1 {{$t('profile:activity.title')}}
|
|
|
|
@ -261,6 +351,8 @@ import validate from 'validate.js'
|
|
|
|
|
|
|
|
|
|
import PasswordStrength from '../common/password-strength.vue'
|
|
|
|
|
|
|
|
|
|
/* global WIKI, siteConfig */
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
i18nOptions: {
|
|
|
|
|
namespaces: ['profile', 'auth']
|
|
|
|
@ -277,6 +369,8 @@ export default {
|
|
|
|
|
location: '',
|
|
|
|
|
jobTitle: '',
|
|
|
|
|
timezone: '',
|
|
|
|
|
dateFormat: '',
|
|
|
|
|
appearance: '',
|
|
|
|
|
createdAt: '1970-01-01',
|
|
|
|
|
updatedAt: '1970-01-01',
|
|
|
|
|
lastLoginAt: '1970-01-01',
|
|
|
|
@ -289,7 +383,9 @@ export default {
|
|
|
|
|
name: false,
|
|
|
|
|
location: false,
|
|
|
|
|
jobTitle: false,
|
|
|
|
|
timezone: false
|
|
|
|
|
timezone: false,
|
|
|
|
|
dateFormat: false,
|
|
|
|
|
appearance: false
|
|
|
|
|
},
|
|
|
|
|
timezones: [
|
|
|
|
|
{ text: '(GMT-11:00) Niue', value: 'Pacific/Niue' },
|
|
|
|
@ -546,6 +642,26 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
dateFormats () {
|
|
|
|
|
return [
|
|
|
|
|
{ text: this.$t('profile:localeDefault'), value: '' },
|
|
|
|
|
{ text: 'DD/MM/YYYY', value: 'DD/MM/YYYY' },
|
|
|
|
|
{ text: 'DD.MM.YYYY', value: 'DD.MM.YYYY' },
|
|
|
|
|
{ text: 'MM/DD/YYYY', value: 'MM/DD/YYYY' },
|
|
|
|
|
{ text: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
|
|
|
|
|
{ text: 'YYYY/MM/DD', value: 'YYYY/MM/DD' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
appearances () {
|
|
|
|
|
return [
|
|
|
|
|
{ text: this.$t('profile:appearanceDefault'), value: '' },
|
|
|
|
|
{ text: this.$t('profile:appearanceLight'), value: 'light' },
|
|
|
|
|
{ text: this.$t('profile:appearanceDark'), value: 'dark' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
currentAppearance () {
|
|
|
|
|
return _.get(_.find(this.appearances, ['value', this.user.appearance]), 'text', false) || this.$t('profile:appearanceDefault')
|
|
|
|
|
},
|
|
|
|
|
pictureUrl: get('user/pictureUrl'),
|
|
|
|
|
picture () {
|
|
|
|
|
if (this.pictureUrl && this.pictureUrl.length > 1) {
|
|
|
|
@ -566,6 +682,33 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
'user.appearance': (newValue, oldValue) => {
|
|
|
|
|
if (newValue === '') {
|
|
|
|
|
WIKI.$vuetify.theme.dark = siteConfig.darkMode
|
|
|
|
|
} else {
|
|
|
|
|
WIKI.$vuetify.theme.dark = (newValue === 'dark')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'user.dateFormat': (newValue, oldValue) => {
|
|
|
|
|
if (newValue === '') {
|
|
|
|
|
WIKI.$moment.updateLocale(WIKI.$moment.locale(), null)
|
|
|
|
|
} else {
|
|
|
|
|
WIKI.$moment.updateLocale(WIKI.$moment.locale(), {
|
|
|
|
|
longDateFormat: {
|
|
|
|
|
'L': newValue
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'user.timezone': (newValue, oldValue) => {
|
|
|
|
|
if (newValue === '') {
|
|
|
|
|
WIKI.$moment.tz.setDefault()
|
|
|
|
|
} else {
|
|
|
|
|
WIKI.$moment.tz.setDefault(newValue)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/**
|
|
|
|
|
* Focus an input after delay
|
|
|
|
@ -587,9 +730,9 @@ export default {
|
|
|
|
|
try {
|
|
|
|
|
const respRaw = await this.$apollo.mutate({
|
|
|
|
|
mutation: gql`
|
|
|
|
|
mutation ($name: String!, $location: String!, $jobTitle: String!, $timezone: String!) {
|
|
|
|
|
mutation ($name: String!, $location: String!, $jobTitle: String!, $timezone: String!, $dateFormat: String!, $appearance: String!) {
|
|
|
|
|
users {
|
|
|
|
|
updateProfile(name: $name, location: $location, jobTitle: $jobTitle, timezone: $timezone) {
|
|
|
|
|
updateProfile(name: $name, location: $location, jobTitle: $jobTitle, timezone: $timezone, dateFormat: $dateFormat, appearance: $appearance) {
|
|
|
|
|
responseResult {
|
|
|
|
|
succeeded
|
|
|
|
|
errorCode
|
|
|
|
@ -605,7 +748,9 @@ export default {
|
|
|
|
|
name: this.user.name,
|
|
|
|
|
location: this.user.location,
|
|
|
|
|
jobTitle: this.user.jobTitle,
|
|
|
|
|
timezone: this.user.timezone
|
|
|
|
|
timezone: this.user.timezone,
|
|
|
|
|
dateFormat: this.user.dateFormat,
|
|
|
|
|
appearance: this.user.appearance
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const resp = _.get(respRaw, 'data.users.updateProfile.responseResult', {})
|
|
|
|
@ -752,6 +897,8 @@ export default {
|
|
|
|
|
location
|
|
|
|
|
jobTitle
|
|
|
|
|
timezone
|
|
|
|
|
dateFormat
|
|
|
|
|
appearance
|
|
|
|
|
createdAt
|
|
|
|
|
updatedAt
|
|
|
|
|
lastLoginAt
|
|
|
|
|