34 lines
1.4 KiB
Vue
34 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const { requestPasswordReset } = useDngAuth()
|
|
const email = ref('')
|
|
const busy = ref(false)
|
|
const error = ref('')
|
|
const sent = ref(false)
|
|
|
|
async function submit() {
|
|
busy.value = true
|
|
error.value = ''
|
|
try {
|
|
await requestPasswordReset(email.value)
|
|
sent.value = true
|
|
} catch (cause) {
|
|
const value = cause as { data?: { msg?: string; message?: string }; message?: string }
|
|
error.value = value.data?.msg ?? value.data?.message ?? value.message ?? 'Could not send the reset email.'
|
|
} finally {
|
|
busy.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AuthCard eyebrow="ACCOUNT RECOVERY" title="RESET THE SIGNAL." subtitle="Enter your account email. If it exists, Supabase will send a secure password reset link.">
|
|
<p v-if="sent" class="form-success" role="status">CHECK YOUR EMAIL. The recovery link can be used once and expires automatically.</p>
|
|
<form v-else class="auth-form" @submit.prevent="submit">
|
|
<label>EMAIL<input v-model="email" name="email" type="email" autocomplete="email" required placeholder="you@example.com"></label>
|
|
<p v-if="error" class="form-error" role="alert">{{ error }}</p>
|
|
<button :disabled="busy">{{ busy ? 'SENDING…' : 'SEND RESET LINK →' }}</button>
|
|
</form>
|
|
<template #footer><NuxtLink class="form-link" to="/auth/sign-in">← BACK TO SIGN IN</NuxtLink></template>
|
|
</AuthCard>
|
|
</template>
|