186 lines
4.6 KiB
Vue
186 lines
4.6 KiB
Vue
<template>
|
|
<div class="vn-pp row justify-center">
|
|
<toolbar>
|
|
<q-btn
|
|
:label="$t('changePassword')"
|
|
icon="vpn_key"
|
|
:to="{ query: { changePassword: true } }"
|
|
flat/>
|
|
</toolbar>
|
|
<q-card class="vn-w-md">
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="user.name"
|
|
:label="$t('userName')"
|
|
readonly/>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="user.email"
|
|
:label="$t('email')" />
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="user.nickname"
|
|
:label="$t('nickname')" />
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-select
|
|
v-model="user.lang"
|
|
:label="$t('language')"
|
|
:options="languages"
|
|
option-value="code"
|
|
option-label="name"
|
|
emit-value/>
|
|
</q-card-section>
|
|
</q-card>
|
|
<q-dialog v-model="changePassword" persistent>
|
|
<q-card style="width: 25em;">
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="oldPassword"
|
|
:label="$t('oldPassword')"
|
|
type="password"
|
|
:rules="[val => !!val || $t('fieldIsRequired')]"
|
|
autofocus
|
|
dense/>
|
|
<q-input
|
|
v-model="newPassword"
|
|
:label="$t('newPassword')"
|
|
type="password"
|
|
:rules="[val => !!val || $t('passwordCannotBeEmpty')]"
|
|
dense>
|
|
<template v-slot:append>
|
|
<q-icon name="warning">
|
|
<q-tooltip>
|
|
<div>
|
|
{{$t('passwordRequirements')}}
|
|
</div>
|
|
<ul class="q-pl-md">
|
|
<li>{{$t('charsLong', [requirements.length])}}</li>
|
|
<li>{{$t('alphabeticChars', [requirements.nAlpha])}}</li>
|
|
<li>{{$t('upperLetters', [requirements.nUpper])}}</li>
|
|
<li>{{$t('digits', [requirements.nDigits])}}</li>
|
|
<li>{{$t('simbols', [requirements.nPunct])}}</li>
|
|
</ul>
|
|
</q-tooltip>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
<q-input
|
|
v-model="repeatPassword"
|
|
:label="$t('repeatPassword')"
|
|
type="password"
|
|
:rules="[val => val === newPassword || $t('passwordsDontMatch')]"
|
|
dense/>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
:label="$t('cancel')"
|
|
to="/user"
|
|
flat
|
|
color="primary"/>
|
|
<q-btn
|
|
:label="$t('accept')"
|
|
@click="onChangePassword()"
|
|
flat
|
|
color="primary"/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
|
<q-btn
|
|
:title="$t('save')"
|
|
icon="check"
|
|
color="accent"
|
|
@click="onSave"
|
|
fab/>
|
|
</q-page-sticky>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Page from 'components/Page'
|
|
|
|
export default {
|
|
name: 'User',
|
|
mixins: [Page],
|
|
props: {
|
|
changePassword: {
|
|
type: Boolean,
|
|
required: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
user: {},
|
|
receiveInvoices: false,
|
|
languages: null,
|
|
requirements: {},
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
repeatPassword: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
let filter = {
|
|
fields: [
|
|
'id',
|
|
'name',
|
|
'nickname',
|
|
'lang',
|
|
'email'
|
|
]
|
|
}
|
|
this.$axios.get(`Accounts/${this.$state.user.id}`, { params: { filter } })
|
|
.then(res => (this.user = res.data))
|
|
|
|
filter = {
|
|
fields: [
|
|
'code',
|
|
'name',
|
|
'orgName'
|
|
],
|
|
where: { isActive: true }
|
|
}
|
|
this.$axios.get(`Languages`, { params: { filter } })
|
|
.then(res => (this.languages = res.data))
|
|
|
|
filter = {
|
|
fields: [
|
|
'id',
|
|
'length',
|
|
'nAlpha',
|
|
'nUpper',
|
|
'nDigits',
|
|
'nPunct'
|
|
]
|
|
}
|
|
this.$axios.get(`UserPasswords`, { params: { filter } })
|
|
.then(res => (this.requirements = res.data[0]))
|
|
},
|
|
methods: {
|
|
onChangePassword: function () {
|
|
this.oldPassword = ''
|
|
this.newPassword = ''
|
|
this.repeatPassword = ''
|
|
|
|
this.$router.push({})
|
|
this.$q.notify({
|
|
message: this.$t('passwordChanged'),
|
|
icon: 'check',
|
|
color: 'green'
|
|
})
|
|
},
|
|
onSave () {
|
|
this.$axios.patch(`Accounts/${this.$state.user.id}`, this.user)
|
|
.then(res => (this.$q.notify({
|
|
message: this.$t('dataSaved'),
|
|
icon: 'check',
|
|
color: 'green'
|
|
})))
|
|
}
|
|
}
|
|
}
|
|
</script>
|