Change-Id: I395098c7b0efa8be35e34e44ac057b881a1e7228changes/13/32813/4
Hans-Peter Herzog
6 years ago
parent
e8abe0eb2f
commit
7a56c26787
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<q-list
|
||||
no-border
|
||||
link
|
||||
>
|
||||
<q-item @click="logout">
|
||||
<q-item-side
|
||||
icon="exit_to_app"
|
||||
color="primary"
|
||||
/>
|
||||
<q-item-main
|
||||
:label="$t('userMenu.logout')"
|
||||
:sublabel="username"
|
||||
>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
<q-item
|
||||
@click="settings">
|
||||
<q-item-side
|
||||
icon="settings_applications"
|
||||
color="primary"
|
||||
/>
|
||||
<q-item-main
|
||||
:label="$t('userMenu.settings')"
|
||||
>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
QList,
|
||||
QItem,
|
||||
QItemMain,
|
||||
QCollapsible,
|
||||
QItemSide,
|
||||
QSideLink
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-user-menu',
|
||||
props: [
|
||||
'username'
|
||||
],
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
components: {
|
||||
QList,
|
||||
QItem,
|
||||
QItemMain,
|
||||
QCollapsible,
|
||||
QItemSide,
|
||||
QSideLink
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
this.$emit('logout');
|
||||
},
|
||||
settings() {
|
||||
this.$emit('settings');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<csc-page
|
||||
class="csc-simple-page"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col col-xs-12 col-md-6"
|
||||
>
|
||||
<csc-change-password
|
||||
:loading="isPasswordChanging"
|
||||
:error="changePasswordError"
|
||||
:subscriber="getSubscriber"
|
||||
@change="changePassword"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</csc-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
showGlobalError,
|
||||
showToast
|
||||
} from '../../helpers/ui'
|
||||
import {
|
||||
RequestState
|
||||
} from "../../store/common"
|
||||
import {
|
||||
mapState,
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import CscPage from '../CscPage'
|
||||
import CscChangePassword from "./UserSettings/CscChangePassword";
|
||||
export default {
|
||||
name: 'csc-page-user-settings',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CscChangePassword,
|
||||
CscPage
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
...mapState('user', [
|
||||
'changePasswordState',
|
||||
'changePasswordError'
|
||||
]),
|
||||
...mapGetters('user', [
|
||||
'getSubscriber',
|
||||
'isPasswordChanging'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('user', [
|
||||
'changePassword'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
changePasswordState(state) {
|
||||
if(state === RequestState.succeeded) {
|
||||
showToast(this.$t('changePasswordToast'));
|
||||
}
|
||||
else if(state === RequestState.failed) {
|
||||
showGlobalError(this.changePasswordError);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../themes/quasar.variables';
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="!inputEnabled"
|
||||
>
|
||||
<q-btn
|
||||
icon="lock"
|
||||
flat
|
||||
dark
|
||||
color="primary"
|
||||
@click="enableInput"
|
||||
>
|
||||
{{ $t('userSettings.changePassword') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="inputEnabled"
|
||||
>
|
||||
<q-field
|
||||
icon="lock"
|
||||
>
|
||||
<q-input
|
||||
v-model.trim="newPassword"
|
||||
dark
|
||||
icon="lock"
|
||||
type="password"
|
||||
clearable
|
||||
:float-label="$t('userSettings.newPasswordLabel')"
|
||||
/>
|
||||
</q-field>
|
||||
<q-field
|
||||
icon="lock"
|
||||
>
|
||||
<q-input
|
||||
v-model.trim="newPasswordRetyped"
|
||||
dark
|
||||
icon="lock"
|
||||
type="password"
|
||||
clearable
|
||||
:float-label="$t('userSettings.newPasswordRetypedLabel')"
|
||||
/>
|
||||
</q-field>
|
||||
<div
|
||||
class="row justify-center"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
color="default"
|
||||
icon="clear"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ $t('buttons.cancel') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
icon="done"
|
||||
:disable="!isValid"
|
||||
@click="openConfirmDialog"
|
||||
>
|
||||
{{ $t('userSettings.saveNewPassword') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
<csc-confirm-dialog
|
||||
ref="confirmDialog"
|
||||
:title-icon="'lock'"
|
||||
:title="$t('userSettings.changePasswordDialogTitle')"
|
||||
:message="$t('userSettings.changePasswordDialogText')"
|
||||
@cancel="closeConfirmDialog"
|
||||
@confirm="submit"
|
||||
/>
|
||||
<csc-object-spinner
|
||||
v-if="loading"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscPage from '../../CscPage'
|
||||
import {
|
||||
QBtn,
|
||||
QField,
|
||||
QInput,
|
||||
QSlideTransition
|
||||
} from 'quasar-framework'
|
||||
import CscConfirmDialog from "../../CscConfirmationDialog";
|
||||
import CscObjectSpinner from "../../CscObjectSpinner";
|
||||
export default {
|
||||
name: 'csc-change-password',
|
||||
data () {
|
||||
return {
|
||||
inputEnabled: false,
|
||||
newPassword: '',
|
||||
newPasswordRetyped: ''
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'subscriber',
|
||||
'loading',
|
||||
'error'
|
||||
],
|
||||
components: {
|
||||
CscConfirmDialog,
|
||||
CscPage,
|
||||
QBtn,
|
||||
QField,
|
||||
QInput,
|
||||
QSlideTransition,
|
||||
CscObjectSpinner
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
isValid() {
|
||||
return this.newPassword !== '' && this.newPassword === this.newPasswordRetyped;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enableInput() {
|
||||
this.inputEnabled = true;
|
||||
this.reset();
|
||||
},
|
||||
cancel() {
|
||||
this.inputEnabled = false;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
this.newPassword = '';
|
||||
this.newPasswordRetyped = '';
|
||||
},
|
||||
submit() {
|
||||
this.$emit('change', this.newPassword);
|
||||
},
|
||||
openConfirmDialog() {
|
||||
if(this.$refs.confirmDialog) {
|
||||
this.$refs.confirmDialog.open();
|
||||
}
|
||||
},
|
||||
closeConfirmDialog() {
|
||||
if(this.$refs.confirmDialog) {
|
||||
this.$refs.confirmDialog.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables';
|
||||
</style>
|
||||
Loading…
Reference in new issue