frontend/src/views/user/PasswordReset.vue

73 lines
1.8 KiB
Vue

<template>
<div>
<message v-if="errorMsg" class="mb-4">
{{ errorMsg }}
</message>
<div class="has-text-centered mb-4" v-if="successMessage">
<message variant="success">
{{ successMessage }}
</message>
<x-button :to="{ name: 'user.login' }" class="mt-4">
{{ $t('user.auth.login') }}
</x-button>
</div>
<form @submit.prevent="resetPassword" id="form" v-if="!successMessage">
<div class="field">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<Password @submit="resetPassword" @update:modelValue="v => credentials.password = v"/>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="passwordResetService.loading"
@click="resetPassword"
>
{{ $t('user.auth.resetPassword') }}
</x-button>
</div>
</div>
</form>
</div>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'
import PasswordResetModel from '@/models/passwordReset'
import PasswordResetService from '@/services/passwordReset'
import Message from '@/components/misc/message.vue'
import Password from '@/components/input/password.vue'
const credentials = reactive({
password: '',
})
const passwordResetService = reactive(new PasswordResetService())
const errorMsg = ref('')
const successMessage = ref('')
async function resetPassword() {
errorMsg.value = ''
if(credentials.password === '') {
return
}
const passwordReset = new PasswordResetModel({newPassword: credentials.password})
try {
const {message} = await passwordResetService.resetPassword(passwordReset)
successMessage.value = message
localStorage.removeItem('passwordResetToken')
} catch (e) {
errorMsg.value = e.response.data.message
}
}
</script>
<style scoped>
.button {
margin: 0 0.4rem 0 0;
}
</style>