132 lines
4.6 KiB
Vue
132 lines
4.6 KiB
Vue
<template>
|
|
<div>
|
|
<video-background
|
|
src="/video/bg-video.mp4"
|
|
poster="/images/poster.png"
|
|
style="height: 100vh;"
|
|
>
|
|
<div class="container-fluid">
|
|
<div class="row ">
|
|
<div class="col-12 col-lg-4 bg-img d-none d-lg-block" style="background-image: url('/images/login.svg');background-size: cover;height: 100vh;" />
|
|
<div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5">
|
|
<div class="row">
|
|
<div class="col-12 py-3 text-center">
|
|
<img src="/images/logo.svg" height="35" class="img " alt="Mindboost Logo">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-lg-0 mt-4" style="height: 90%">
|
|
<div class="col-12 my-auto">
|
|
<div class="text-center pt-4 pt-md-2 col-12 col-md-8 col-xl-8 mx-auto">
|
|
<h1 class="fw-bolder h3" style="color: #585C5E;">
|
|
{{ t('New Password') }}
|
|
</h1>
|
|
</div>
|
|
<div class="row pt-2">
|
|
<div class="col-12 col-md-8 col-xl-8 mx-auto">
|
|
<form method="POST" @submit.prevent="validateAndReset">
|
|
<div class="row pt-4">
|
|
<div class="col-12">
|
|
<label for="password" class="text-muted ">{{ t("Password") }} </label>
|
|
<input id="password" v-model="form.password" type="password" class="form-control" placeholder="***">
|
|
<div v-if="errors.password" class="invalid-feedback d-block">
|
|
{{ t(errors.password[0]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-3">
|
|
<div class="col-12">
|
|
<label for="confirm-password" class="text-muted ">{{ t("Confirm Password") }} </label>
|
|
<input id="confirm-password" v-model="form.password_confirmation" type="password" class="form-control" placeholder="***">
|
|
<div v-if="errors.password_confirmation" class="invalid-feedback d-block">
|
|
{{ t(errors.password_confirmation[0]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-4">
|
|
<div class="col">
|
|
<button type="submit" class="login-btn col-4" style="min-width:fit-content">
|
|
{{ t("Reset Password") }} <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
|
|
<span class="sr-only">{{ t("Loading...") }}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</video-background>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
setup () {
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const router = useRouter()
|
|
|
|
return {
|
|
t,
|
|
localePath,
|
|
router
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
form: {
|
|
email: '', // wird aus URL-Param geholt
|
|
token: '', // wird aus URL-Param geholt
|
|
password: '',
|
|
password_confirmation: ''
|
|
},
|
|
errors: [],
|
|
loading: false
|
|
}
|
|
},
|
|
mounted () {
|
|
this.form.token = this.$route.query.token || ''
|
|
this.form.email = this.$route.query.email || ''
|
|
},
|
|
methods: {
|
|
validateAndReset () {
|
|
this.errors = []
|
|
|
|
if (this.form.password.length < 6) {
|
|
this.errors.password = ['The password must be at least 6 characters.']
|
|
return
|
|
}
|
|
|
|
if (this.form.password !== this.form.password_confirmation) {
|
|
this.errors.password_confirmation = ['The passwords do not match.']
|
|
return
|
|
}
|
|
|
|
this.resetPassword()
|
|
},
|
|
|
|
resetPassword () {
|
|
this.loading = true
|
|
this.errors = []
|
|
this.$axios.post('/api/password/reset', this.form).then(({ data }) => {
|
|
this.loading = false
|
|
if (data.success) {
|
|
this.$toast.success('Password successfully reset!')
|
|
this.$router.push(this.localePath('/auth/login'))
|
|
}
|
|
}).catch((error) => {
|
|
this.loading = false
|
|
this.$toast.error('Fehler beim Zurücksetzen des Passworts.')
|
|
if (error.response && error.response.status === 422) {
|
|
this.errors = error.response.data.errors
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|