%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<section class="bg-gray py-20 px-8">
<div class="max-w-xl mx-auto w-full">
<header class="text-center mb-10">
<h1 class="text-4xl font-bold">Reset Password</h1>
</header>
<ValidationObserver ref="form">
<form @submit.prevent="resetPassword" role="form" method="POST">
<t-input-group label="Email">
<input
v-model="form.email"
type="email"
id="email"
class="form-control"
disabled="disabled"
placeholder="Enter your email address" />
</t-input-group>
<ValidationProvider rules="required|password:@password_confirmation" name="password" v-slot="{ errors }">
<t-input-group label="Password">
<input
v-model="form.password"
type="password"
id="password"
class="form-control"
placeholder="Enter a strong password" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
<password v-model="form.password" :strength-meter-only="true"/>
</t-input-group>
</ValidationProvider>
<ValidationProvider name="password_confirmation" rules="required" v-slot="{ errors }">
<t-input-group label="Password Confirmation">
<input
v-model="form.password_confirmation"
type="password"
id="password_confirmation"
class="form-control"
placeholder="Enter your password again" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
<button
:disabled="working == true"
class="w-full btn btn-primary rounded-full"
type="submit">
<span v-if="working == false">Reset Password</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Processing</span>
</span>
</button>
</form>
</ValidationObserver>
</div>
</section>
</div>
</template>
<script>
export default {
auth: 'guest',
head () {
return {
titleTemplate: 'Reset your password | %s',
}
},
data() {
return {
working: false,
form: {
email: null,
password: null,
password_confirmation: null
},
}
},
async asyncData({ app, query, redirect }) {
await app.$axios.$get('/password/reset', {
params: query
}).catch(() => {
redirect('/')
})
},
mounted() {
this.form.email = this.$route.query.email;
},
methods: {
async resetPassword() {
let token = this.$route.query.token;
let email = this.$route.query.email;
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.post('/password/reset', {
email: email,
token: token,
password: this.form.password,
password_confirmation: this.form.password_confirmation
}).then((response) => {
this.working = false;
if(response.status == 200) {
this.$router.push({path: '/'})
this.$toast.success(response.data).goAway(3000);
}
}).catch(error => {
this.working = false;
this.$router.push({path: '/forgot-password'})
this.$toast.error(error.response.data).goAway(3000);
this.$refs.form.setErrors(error.response.data.errors);
});
});
}
}
}
</script>
Zerion Mini Shell 1.0