91 lines
4.1 KiB
TypeScript
91 lines
4.1 KiB
TypeScript
import Vue from 'vue';
|
|
import { isObject } from 'lodash';
|
|
import {AxiosError} from "axios";
|
|
|
|
export default Vue.component('change-password', {
|
|
data: function () {
|
|
return {
|
|
current: '',
|
|
newPassword: '',
|
|
confirmNew: '',
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
submitForm: function () {
|
|
this.$flash.clear();
|
|
this.$validator.pause();
|
|
|
|
window.axios.put(this.route('api.client.account.update-password'), {
|
|
current_password: this.current,
|
|
password: this.newPassword,
|
|
password_confirmation: this.confirmNew,
|
|
})
|
|
.then(() => this.current = '')
|
|
.then(() => {
|
|
this.newPassword = '';
|
|
this.confirmNew = '';
|
|
|
|
this.$flash.success(this.$t('dashboard.account.password.updated'));
|
|
})
|
|
.catch((err: AxiosError) => {
|
|
if (!err.response) {
|
|
this.$flash.error('There was an error with the network request. Please try again.');
|
|
console.error(err);
|
|
return;
|
|
}
|
|
|
|
const response = err.response;
|
|
if (response.data && isObject(response.data.errors)) {
|
|
response.data.errors.forEach((error: any) => {
|
|
this.$flash.error(error.detail);
|
|
});
|
|
}
|
|
})
|
|
.then(() => {
|
|
this.$validator.resume();
|
|
(this.$refs.current as HTMLElement).focus();
|
|
})
|
|
}
|
|
},
|
|
|
|
template: `
|
|
<div id="change-password-container" :class>
|
|
<form method="post" v-on:submit.prevent="submitForm">
|
|
<div class="content-box">
|
|
<h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.password.title') }}</h2>
|
|
<div class="mt-6">
|
|
<label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label>
|
|
<input id="grid-password-current" name="current_password" type="password" class="input" required
|
|
ref="current"
|
|
v-model="current"
|
|
>
|
|
</div>
|
|
<div class="mt-6">
|
|
<label for="grid-password-new" class="input-label">{{ $t('strings.new_password') }}</label>
|
|
<input id="grid-password-new" name="password" type="password" class="input" required
|
|
:class="{ error: errors.has('password') }"
|
|
v-model="newPassword"
|
|
v-validate="'min:8'"
|
|
>
|
|
<p class="input-help error" v-show="errors.has('password')">{{ errors.first('password') }}</p>
|
|
<p class="input-help">{{ $t('dashboard.account.password.requirements') }}</p>
|
|
</div>
|
|
<div class="mt-6">
|
|
<label for="grid-password-new-confirm" class="input-label">{{ $t('strings.confirm_password') }}</label>
|
|
<input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required
|
|
:class="{ error: errors.has('password_confirmation') }"
|
|
v-model="confirmNew"
|
|
v-validate="{is: newPassword}"
|
|
data-vv-as="password"
|
|
>
|
|
<p class="input-help error" v-show="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}</p>
|
|
</div>
|
|
<div class="mt-6 text-right">
|
|
<button class="btn btn-blue btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
`,
|
|
});
|