2018-11-01 21:34:29 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-12-11 21:08:26 +00:00
|
|
|
<message variant="danger" v-if="errorMsg" class="mb-4">
|
2021-12-12 16:40:13 +00:00
|
|
|
{{ errorMsg }}
|
|
|
|
</message>
|
2021-12-11 21:08:26 +00:00
|
|
|
<div class="has-text-centered mb-4" v-if="isSuccess">
|
2021-12-12 16:40:13 +00:00
|
|
|
<message variant="success">
|
|
|
|
{{ $t('user.auth.resetPasswordSuccess') }}
|
|
|
|
</message>
|
|
|
|
<x-button :to="{ name: 'user.login' }">
|
|
|
|
{{ $t('user.auth.login') }}
|
|
|
|
</x-button>
|
|
|
|
</div>
|
|
|
|
<form @submit.prevent="submit" v-if="!isSuccess">
|
|
|
|
<div class="field">
|
|
|
|
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
|
|
|
class="input"
|
|
|
|
id="email"
|
|
|
|
name="email"
|
|
|
|
:placeholder="$t('user.auth.emailPlaceholder')"
|
|
|
|
required
|
|
|
|
type="email"
|
|
|
|
v-focus
|
|
|
|
v-model="passwordReset.email"/>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
2018-11-01 21:34:29 +00:00
|
|
|
|
2021-12-12 16:40:13 +00:00
|
|
|
<div class="field is-grouped">
|
|
|
|
<div class="control">
|
|
|
|
<x-button
|
|
|
|
@click="submit"
|
|
|
|
:loading="passwordResetService.loading"
|
|
|
|
>
|
|
|
|
{{ $t('user.auth.resetPasswordAction') }}
|
|
|
|
</x-button>
|
2022-01-04 18:58:06 +00:00
|
|
|
<x-button :to="{ name: 'user.login' }" variant="secondary">
|
2021-12-12 16:40:13 +00:00
|
|
|
{{ $t('user.auth.login') }}
|
|
|
|
</x-button>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-12-12 16:40:13 +00:00
|
|
|
</form>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-02-15 12:07:34 +00:00
|
|
|
<script setup lang="ts">
|
2021-11-14 20:57:36 +00:00
|
|
|
import {ref, reactive} from 'vue'
|
|
|
|
|
|
|
|
import PasswordResetModel from '@/models/passwordReset'
|
|
|
|
import PasswordResetService from '@/services/passwordReset'
|
2021-11-28 14:18:27 +00:00
|
|
|
import Message from '@/components/misc/message'
|
2021-11-14 20:57:36 +00:00
|
|
|
|
|
|
|
// Not sure if this instance needs a shalloRef at all
|
|
|
|
const passwordResetService = reactive(new PasswordResetService())
|
|
|
|
const passwordReset = ref(new PasswordResetModel())
|
|
|
|
const errorMsg = ref('')
|
|
|
|
const isSuccess = ref(false)
|
|
|
|
|
|
|
|
async function submit() {
|
|
|
|
errorMsg.value = ''
|
|
|
|
try {
|
|
|
|
await passwordResetService.requestResetPassword(passwordReset.value)
|
|
|
|
isSuccess.value = true
|
2021-12-12 16:40:13 +00:00
|
|
|
} catch (e) {
|
2021-11-14 20:57:36 +00:00
|
|
|
errorMsg.value = e.response.data.message
|
|
|
|
}
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
2018-11-01 21:34:29 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
2020-09-05 20:35:52 +00:00
|
|
|
.button {
|
2021-01-23 17:18:09 +00:00
|
|
|
margin: 0 0.4rem 0 0;
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
2018-11-01 21:34:29 +00:00
|
|
|
</style>
|