2FAuth/resources/js/views/settings/Account.vue

144 lines
6.6 KiB
Vue
Raw Normal View History

2020-01-23 23:02:54 +01:00
<template>
<div>
<setting-tabs :activeTab="'settings.account'"></setting-tabs>
<div class="options-tabs">
<form-wrapper>
<form @submit.prevent="submitProfile" @keydown="formProfile.onKeydown($event)">
<div v-if="isRemoteUser" class="notification is-warning has-text-centered" v-html="$t('auth.user_account_controlled_by_proxy')" />
<h4 class="title is-4 has-text-grey-light">{{ $t('settings.profile') }}</h4>
<fieldset :disabled="isRemoteUser">
<form-field :form="formProfile" fieldName="name" :label="$t('auth.forms.name')" :maxLength="255" autofocus />
<form-field :form="formProfile" fieldName="email" inputType="email" :label="$t('auth.forms.email')" :maxLength="255" />
<form-field :form="formProfile" fieldName="password" inputType="password" :label="$t('auth.forms.current_password.label')" :help="$t('auth.forms.current_password.help')" />
<form-buttons :isBusy="formProfile.isBusy" :caption="$t('commons.update')" />
</fieldset>
</form>
<form @submit.prevent="submitPassword" @keydown="formPassword.onKeydown($event)">
<h4 class="title is-4 pt-6 has-text-grey-light">{{ $t('settings.change_password') }}</h4>
<fieldset :disabled="isRemoteUser">
<form-password-field :form="formPassword" fieldName="password" :autocomplete="'new-password'" :showRules="true" :label="$t('auth.forms.new_password')" />
<form-field :form="formPassword" fieldName="password_confirmation" inputType="password" :autocomplete="'new-password'" :label="$t('auth.forms.confirm_new_password')" />
<form-field :form="formPassword" fieldName="currentPassword" inputType="password" :label="$t('auth.forms.current_password.label')" :help="$t('auth.forms.current_password.help')" />
<form-buttons :isBusy="formPassword.isBusy" :caption="$t('auth.forms.change_password')" />
</fieldset>
</form>
2022-06-24 09:11:25 +02:00
<form id="frmDeleteAccount" @submit.prevent="submitDelete" @keydown="formDelete.onKeydown($event)">
<h4 class="title is-4 pt-6 has-text-danger">{{ $t('auth.forms.delete_account') }}</h4>
<div class="field is-size-7-mobile">
{{ $t('auth.forms.delete_your_account_and_reset_all_data')}}
</div>
<fieldset :disabled="isRemoteUser">
<form-field :form="formDelete" fieldName="password" inputType="password" :label="$t('auth.forms.current_password.label')" :help="$t('auth.forms.current_password.help')" />
2022-06-24 09:11:25 +02:00
<form-buttons :isBusy="formDelete.isBusy" :caption="$t('auth.forms.delete_your_account')" :submitId="'btnDeleteAccount'" :color="'is-danger'" />
</fieldset>
</form>
</form-wrapper>
</div>
<vue-footer :showButtons="true">
<!-- Cancel button -->
<p class="control">
<a role="button" tabindex="0" class="button is-dark is-rounded" @click.stop="exitSettings">
{{ $t('commons.close') }}
</a>
</p>
</vue-footer>
</div>
2020-01-23 23:02:54 +01:00
</template>
<script>
import Form from './../../components/Form'
export default {
data(){
return {
formProfile: new Form({
2020-01-23 23:02:54 +01:00
name : '',
email : '',
password : '',
}),
formPassword: new Form({
currentPassword : '',
password : '',
password_confirmation : '',
}),
formDelete: new Form({
password : '',
}),
isRemoteUser: false,
2020-01-23 23:02:54 +01:00
}
},
2020-01-27 21:13:21 +01:00
async mounted() {
const { data } = await this.formProfile.get('/api/v1/user')
2020-01-27 21:13:21 +01:00
if( data.id === null ) this.isRemoteUser = true
this.formProfile.fill(data)
2020-01-23 23:02:54 +01:00
},
methods : {
submitProfile(e) {
2020-01-23 23:02:54 +01:00
e.preventDefault()
this.formProfile.put('/user', {returnError: true})
2020-01-23 23:02:54 +01:00
.then(response => {
this.$notify({ type: 'is-success', text: this.$t('auth.forms.profile_saved') })
2020-01-23 23:02:54 +01:00
})
.catch(error => {
if( error.response.status === 400 ) {
2020-01-28 15:33:33 +01:00
this.$notify({ type: 'is-danger', text: error.response.data.message })
2020-01-23 23:02:54 +01:00
}
else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
});
},
submitPassword(e) {
e.preventDefault()
this.formPassword.patch('/user/password', {returnError: true})
.then(response => {
this.$notify({ type: 'is-success', text: response.data.message })
})
.catch(error => {
if( error.response.status === 400 ) {
this.$notify({ type: 'is-danger', text: error.response.data.message })
}
else if( error.response.status !== 422 ) {
2020-01-23 23:02:54 +01:00
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
});
},
submitDelete(e) {
e.preventDefault()
if(confirm(this.$t('auth.confirm.delete_account'))) {
this.formDelete.delete('/user', {returnError: true})
.then(response => {
this.$notify({ type: 'is-success', text: this.$t('auth.forms.user_account_successfully_deleted') })
this.$router.push({ name: 'register' });
})
.catch(error => {
if( error.response.status === 400 ) {
this.$notify({ type: 'is-danger', text: error.response.data.message })
}
else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
});
}
},
2020-01-23 23:02:54 +01:00
},
}
</script>