Require email account authentication

apps/web/pages/auth/forgot-password.vue

@@ -0,0 +1,33 @@
+<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>