104 lines
3.5 KiB
Vue
104 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<video-background
|
|
src="/video/bg-video.mp4"
|
|
style=" height: 100vh;"
|
|
poster="/images/poster.png"
|
|
>
|
|
<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("Forgot Password?") }}
|
|
</h1>
|
|
<h2 class="text-muted h5 pt-2">
|
|
{{ t("We send link") }}
|
|
</h2>
|
|
</div>
|
|
<div class="row pt-2">
|
|
<div class="col-12 col-md-8 col-xl-8 mx-auto">
|
|
<div v-if="resetSuccess" class="alert alert-success text-center">
|
|
{{ t('Reset Password Message') }}
|
|
</div>
|
|
<form method="POST" @submit.prevent="submit">
|
|
<div class="row pt-4">
|
|
<div class="col-12">
|
|
<label class="form-label">{{ t('Email') }}</label>
|
|
<input v-model="email" type="email" placeholder="email@mail.com" class="form-control">
|
|
<div v-if="errors.email" class="invalid-feedback d-block">
|
|
{{ t(errors.email[0]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-4">
|
|
<div class="col">
|
|
<button type="submit" style="min-width:fit-content" class="login-btn col-4">
|
|
{{ 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()
|
|
|
|
return {
|
|
t,
|
|
localePath
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
email: '',
|
|
resetSuccess: false,
|
|
errors: [],
|
|
loading: false
|
|
}
|
|
},
|
|
methods: {
|
|
submit () {
|
|
this.loading = true
|
|
this.errors = []
|
|
this.$axios.post('/api/password/email', { email: this.email })
|
|
.then(({ data }) => {
|
|
this.loading = false
|
|
this.$toast.success('Wenn die E-Mail existiert, wurde ein Link zum Zurücksetzen gesendet.')
|
|
this.resetSuccess = true
|
|
})
|
|
.catch((error) => {
|
|
this.loading = false
|
|
if (error.response.status === 422) {
|
|
this.errors = error.response.data.errors
|
|
} else {
|
|
this.$toast.error('Ein Fehler ist aufgetreten.')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|