82 lines
3.1 KiB
Vue
82 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
import AppLogo from '../components/AppLogo.vue';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
|
|
const token = String(route.query.token ?? '');
|
|
const email = String(route.query.email ?? '');
|
|
const missingParams = !token || !email;
|
|
|
|
const form = reactive({ password: '', password_confirmation: '' });
|
|
const errors = ref<Record<string, string[]>>({});
|
|
const loading = ref(false);
|
|
const success = ref(false);
|
|
|
|
async function submit(): Promise<void> {
|
|
loading.value = true;
|
|
errors.value = {};
|
|
|
|
try {
|
|
await axios.post('/web-api/reset-password', { ...form, token, email });
|
|
success.value = true;
|
|
} catch (e: any) {
|
|
errors.value = e.response?.data?.errors ?? {};
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="auth-page">
|
|
<div class="auth-page__glow"></div>
|
|
|
|
<div class="auth-card">
|
|
<AppLogo class="auth-card__logo" />
|
|
|
|
<template v-if="missingParams">
|
|
<h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
|
|
<p class="field__error">{{ t('resetPassword.missingParams') }}</p>
|
|
</template>
|
|
|
|
<template v-else-if="!success">
|
|
<h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
|
|
<p class="auth-card__subtitle">{{ t('resetPassword.subtitle') }}</p>
|
|
|
|
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
|
|
|
|
<form class="auth-card__form" @submit.prevent="submit">
|
|
<div class="field">
|
|
<label class="field__label">{{ t('resetPassword.password') }}</label>
|
|
<input v-model="form.password" type="password" required minlength="8" autofocus class="field__input" />
|
|
<p v-if="errors.password" class="field__error">{{ errors.password[0] }}</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field__label">{{ t('resetPassword.passwordConfirm') }}</label>
|
|
<input v-model="form.password_confirmation" type="password" required minlength="8" class="field__input" />
|
|
</div>
|
|
|
|
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
|
|
{{ loading ? t('resetPassword.submitting') : t('resetPassword.submit') }}
|
|
</button>
|
|
</form>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
|
|
<p class="auth-card__subtitle">{{ t('resetPassword.success') }}</p>
|
|
<button type="button" class="btn btn--primary btn--pill btn--full" @click="router.push({ name: 'login' })">
|
|
{{ t('resetPassword.goToLogin') }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|