added password reset

web/vue-app/src/components/auth/ForgotPassword.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="layout">
+    <div class="edit-view">
+      <form class="forgot-form" @submit.prevent="submitForm" novalidate>
+        <h2>Reset your password</h2>
+
+        <div class="form-group">
+          <label for="email">Email address</label>
+          <input
+            id="email"
+            type="email"
+            autocomplete="username"
+            autofocus
+            v-model="email"
+            :class="{ 'input-error': submitAttempted && !isEmailValid }"
+            required
+          />
+          <small v-if="submitAttempted && !email" class="error-message" aria-live="polite">
+            Email is required.
+          </small>
+          <small
+            v-else-if="submitAttempted && !isEmailValid"
+            class="error-message"
+            aria-live="polite"
+          >
+            Please enter a valid email address.
+          </small>
+        </div>
+
+        <div v-if="errorMsg" class="error-message" style="margin-bottom: 1rem" aria-live="polite">
+          {{ errorMsg }}
+        </div>
+        <div
+          v-if="successMsg"
+          class="success-message"
+          style="margin-bottom: 1rem"
+          aria-live="polite"
+        >
+          {{ successMsg }}
+        </div>
+
+        <div class="form-group" style="margin-top: 0.4rem">
+          <button type="submit" class="form-btn" :disabled="loading || !isEmailValid">
+            {{ loading ? 'Sending…' : 'Send reset link' }}
+          </button>
+        </div>
+
+        <p
+          style="
+            text-align: center;
+            margin-top: 0.8rem;
+            color: var(--sub-message-color, #6b7280);
+            font-size: 0.95rem;
+          "
+        >
+          Remembered your password?
+          <button
+            type="button"
+            class="btn-link"
+            @click="goToLogin"
+            style="
+              background: none;
+              border: none;
+              color: var(--btn-primary);
+              font-weight: 600;
+              cursor: pointer;
+              padding: 0;
+              margin-left: 6px;
+            "
+          >
+            Sign in
+          </button>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { isEmailValid } from '@/common/api'
+import '@/assets/view-shared.css'
+import '@/assets/global.css'
+import '@/assets/edit-forms.css'
+import '@/assets/actions-shared.css'
+import '@/assets/button-shared.css'
+
+const router = useRouter()
+
+const email = ref('')
+const submitAttempted = ref(false)
+const loading = ref(false)
+const errorMsg = ref('')
+const successMsg = ref('')
+
+const isEmailValidRef = computed(() => isEmailValid(email.value))
+
+async function submitForm() {
+  submitAttempted.value = true
+  errorMsg.value = ''
+  successMsg.value = ''
+
+  if (!isEmailValidRef.value) return
+  loading.value = true
+  try {
+    const res = await fetch('/api/request-password-reset', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email.value.trim() }),
+    })
+    if (!res.ok) {
+      let msg = 'Could not send reset email.'
+      try {
+        const data = await res.json()
+        if (data && (data.error || data.message)) {
+          msg = data.error || data.message
+        }
+      } catch {
+        try {
+          const text = await res.text()
+          if (text) msg = text
+        } catch {}
+      }
+      errorMsg.value = msg
+      return
+    }
+    successMsg.value =
+      'If this email is registered, you will receive a password reset link shortly.'
+    email.value = ''
+    submitAttempted.value = false
+  } catch {
+    errorMsg.value = 'Network error. Please try again.'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function goToLogin() {
+  await router.push({ name: 'Login' }).catch(() => (window.location.href = '/auth/login'))
+}
+</script>
+
+<style scoped>
+:deep(.edit-view) {
+  width: 400px;
+}
+
+.forgot-form {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  border: none;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.45rem;
+  color: var(--form-label, #444);
+  font-weight: 600;
+}
+.form-group input,
+.form-group input[type='email'] {
+  display: block;
+  width: 100%;
+  margin-top: 0.4rem;
+  padding: 0.6rem;
+  border-radius: 7px;
+  border: 1px solid var(--form-input-border, #e6e6e6);
+  font-size: 1rem;
+  background: var(--form-input-bg, #fff);
+  box-sizing: border-box;
+}
+
+.btn-link:disabled {
+  text-decoration: none;
+  cursor: default;
+  opacity: 0.75;
+}
+
+@media (max-width: 520px) {
+  .forgot-form {
+    padding: 1rem;
+    border-radius: 10px;
+  }
+}
+</style>