Self-service password reset

pages/forgot-password.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex flex-col">
+    <div class="flex-1 flex items-center justify-center px-4">
+      <div class="max-w-md w-full">
+        <div class="text-center mb-8">
+          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4" />
+          <h2 class="text-3xl font-bold text-gray-900">Reset Password</h2>
+          <p class="mt-2 text-sm text-gray-600">{{ stepMessage }}</p>
+        </div>
+
+        <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
+          <!-- Step 1: Enter Email -->
+          <form v-if="step === 1" @submit.prevent="sendResetCode" class="space-y-6">
+            <div>
+              <label for="email" class="block text-sm font-medium text-gray-700">
+                Email Address
+              </label>
+              <input
+                id="email"
+                v-model="email"
+                type="email"
+                required
+                autocomplete="email"
+                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+
+            <div v-if="error" class="text-red-600 text-sm">
+              {{ error }}
+            </div>
+
+            <div v-if="success" class="text-green-600 text-sm">
+              {{ success }}
+            </div>
+
+            <button
+              type="submit"
+              :disabled="loading"
+              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+            >
+              {{ loading ? 'Sending...' : 'Send Reset Code' }}
+            </button>
+          </form>
+
+          <!-- Step 2: Enter Code -->
+          <form v-if="step === 2" @submit.prevent="verifyCode" class="space-y-6">
+            <div>
+              <label for="code" class="block text-sm font-medium text-gray-700">
+                6-Digit Code
+              </label>
+              <input
+                id="code"
+                v-model="code"
+                type="text"
+                required
+                maxlength="6"
+                pattern="[0-9]{6}"
+                placeholder="000000"
+                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-center text-2xl tracking-widest"
+              />
+              <p class="mt-2 text-xs text-gray-500">Enter the 6-digit code sent to {{ email }}</p>
+            </div>
+
+            <div v-if="error" class="text-red-600 text-sm">
+              {{ error }}
+            </div>
+
+            <button
+              type="submit"
+              :disabled="loading || code.length !== 6"
+              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+            >
+              {{ loading ? 'Verifying...' : 'Verify Code' }}
+            </button>
+          </form>
+
+          <!-- Step 3: Reset Password -->
+          <form v-if="step === 3" @submit.prevent="resetPassword" class="space-y-6">
+            <div>
+              <label for="newPassword" class="block text-sm font-medium text-gray-700">
+                New Password
+              </label>
+              <input
+                id="newPassword"
+                v-model="newPassword"
+                type="password"
+                required
+                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+              
+              <!-- Password Requirements -->
+              <div v-if="newPassword.length > 0" class="mt-2 space-y-1 text-xs">
+                <div :class="passwordRequirements.minLength ? 'text-green-600' : 'text-gray-500'">
+                  <span v-if="passwordRequirements.minLength">✓</span>
+                  <span v-else>○</span>
+                  At least 8 characters
+                </div>
+                <div :class="passwordRequirements.hasUppercase ? 'text-green-600' : 'text-gray-500'">
+                  <span v-if="passwordRequirements.hasUppercase">✓</span>
+                  <span v-else>○</span>
+                  One uppercase letter
+                </div>
+                <div :class="passwordRequirements.hasLowercase ? 'text-green-600' : 'text-gray-500'">
+                  <span v-if="passwordRequirements.hasLowercase">✓</span>
+                  <span v-else>○</span>
+                  One lowercase letter
+                </div>
+                <div :class="passwordRequirements.hasNumberOrSymbol ? 'text-green-600' : 'text-gray-500'">
+                  <span v-if="passwordRequirements.hasNumberOrSymbol">✓</span>
+                  <span v-else>○</span>
+                  One number or symbol
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <label for="confirmNewPassword" class="block text-sm font-medium text-gray-700">
+                Confirm New Password
+              </label>
+              <input
+                id="confirmNewPassword"
+                v-model="confirmNewPassword"
+                type="password"
+                required
+                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+              
+              <!-- Password Match Indicator -->
+              <div v-if="confirmNewPassword.length > 0" class="mt-2 text-xs">
+                <div :class="passwordsMatch ? 'text-green-600' : 'text-red-600'">
+                  <span v-if="passwordsMatch">✓ Passwords match</span>
+                  <span v-else>✗ Passwords do not match</span>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="error" class="text-red-600 text-sm">
+              {{ error }}
+            </div>
+
+            <button
+              type="submit"
+              :disabled="loading || !isPasswordValid || !passwordsMatch"
+              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+            >
+              {{ loading ? 'Resetting...' : 'Reset Password' }}
+            </button>
+          </form>
+
+          <div class="mt-6 text-center space-y-3">
+            <button
+              v-if="step > 1"
+              @click="goBack"
+              class="text-sm text-gray-600 hover:text-gray-700"
+            >
+              ← Go Back
+            </button>
+            <div>
+              <NuxtLink to="/login" class="text-sm text-blue-600 hover:text-blue-700">
+                Back to Login
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+const email = ref('')
+const code = ref('')
+const newPassword = ref('')
+const confirmNewPassword = ref('')
+const error = ref('')
+const success = ref('')
+const loading = ref(false)
+const step = ref(1)
+
+const stepMessage = computed(() => {
+  switch (step.value) {
+    case 1:
+      return 'Enter your email to receive a reset code'
+    case 2:
+      return 'Enter the code sent to your email'
+    case 3:
+      return 'Create a new password'
+    default:
+      return ''
+  }
+})
+
+const passwordRequirements = computed(() => ({
+  minLength: newPassword.value.length >= 8,
+  hasUppercase: /[A-Z]/.test(newPassword.value),
+  hasLowercase: /[a-z]/.test(newPassword.value),
+  hasNumberOrSymbol: /[0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPassword.value)
+}))
+
+const isPasswordValid = computed(() => {
+  return passwordRequirements.value.minLength &&
+         passwordRequirements.value.hasUppercase &&
+         passwordRequirements.value.hasLowercase &&
+         passwordRequirements.value.hasNumberOrSymbol
+})
+
+const passwordsMatch = computed(() => {
+  return newPassword.value === confirmNewPassword.value
+})
+
+function goBack() {
+  if (step.value > 1) {
+    step.value--
+    error.value = ''
+    success.value = ''
+  }
+}
+
+async function sendResetCode() {
+  error.value = ''
+  success.value = ''
+  loading.value = true
+
+  try {
+    const response = await $fetch('/api/auth/forgot-password', {
+      method: 'POST',
+      body: {
+        email: email.value
+      }
+    })
+
+    if (response.success) {
+      success.value = response.message
+      setTimeout(() => {
+        step.value = 2
+        success.value = ''
+      }, 2000)
+    }
+  } catch (e: any) {
+    error.value = e.data?.message || 'Failed to send reset code'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function verifyCode() {
+  error.value = ''
+  loading.value = true
+
+  try {
+    const response = await $fetch('/api/auth/verify-reset-code', {
+      method: 'POST',
+      body: {
+        email: email.value,
+        code: code.value
+      }
+    })
+
+    if (response.success) {
+      step.value = 3
+    }
+  } catch (e: any) {
+    error.value = e.data?.message || 'Invalid or expired code'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function resetPassword() {
+  error.value = ''
+  
+  if (!isPasswordValid.value) {
+    error.value = 'Please meet all password requirements'
+    return
+  }
+  
+  if (!passwordsMatch.value) {
+    error.value = 'Passwords do not match'
+    return
+  }
+  
+  loading.value = true
+
+  try {
+    const response = await $fetch('/api/auth/reset-password', {
+      method: 'POST',
+      body: {
+        email: email.value,
+        code: code.value,
+        newPassword: newPassword.value
+      }
+    })
+
+    if (response.success) {
+      await navigateTo('/login')
+    }
+  } catch (e: any) {
+    error.value = e.data?.message || 'Failed to reset password'
+  } finally {
+    loading.value = false
+  }
+}
+</script>

pages/login.vue

@@ -10,19 +10,64 @@
 
       <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
         <form @submit.prevent="isRegistering ? handleRegister() : handleLogin()" class="space-y-6">
+          <!-- First Name (only show when registering) -->
+          <div v-if="isRegistering">
+            <label for="firstName" class="block text-sm font-medium text-gray-700">
+              First Name
+            </label>
+            <input
+              id="firstName"
+              v-model="firstName"
+              type="text"
+              required
+              autocomplete="given-name"
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <!-- Last Name (only show when registering) -->
+          <div v-if="isRegistering">
+            <label for="lastName" class="block text-sm font-medium text-gray-700">
+              Last Name
+            </label>
+            <input
+              id="lastName"
+              v-model="lastName"
+              type="text"
+              required
+              autocomplete="family-name"
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <!-- Email (only show when registering) -->
+          <div v-if="isRegistering">
+            <label for="email" class="block text-sm font-medium text-gray-700">
+              Email
+            </label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              autocomplete="email"
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
           <div>
             <label for="username" class="block text-sm font-medium text-gray-700">
               Username
             </label>
-          <input
-            id="username"
-            v-model="username"
-            type="text"
-            required
-            autocapitalize="none"
-            autocomplete="username"
-            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-          />
+            <input
+              id="username"
+              v-model="username"
+              type="text"
+              required
+              autocapitalize="none"
+              autocomplete="username"
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
           </div>
 
           <div>
@@ -62,6 +107,28 @@
             </div>
           </div>
 
+          <!-- Confirm Password (only show when registering) -->
+          <div v-if="isRegistering">
+            <label for="confirmPassword" class="block text-sm font-medium text-gray-700">
+              Confirm Password
+            </label>
+            <input
+              id="confirmPassword"
+              v-model="confirmPassword"
+              type="password"
+              required
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+            
+            <!-- Password Match Indicator -->
+            <div v-if="confirmPassword.length > 0" class="mt-2 text-xs">
+              <div :class="passwordsMatch ? 'text-green-600' : 'text-red-600'">
+                <span v-if="passwordsMatch">✓ Passwords match</span>
+                <span v-else>✗ Passwords do not match</span>
+              </div>
+            </div>
+          </div>
+
           <div v-if="error" class="text-red-600 text-sm">
             {{ error }}
           </div>
@@ -82,6 +149,11 @@
           >
             {{ isRegistering ? 'Already have an account? Sign in' : "Don't have an account? Create one" }}
           </button>
+          <div v-if="!isRegistering">
+            <NuxtLink to="/forgot-password" class="text-sm text-blue-600 hover:text-blue-700">
+              Forgot Password?
+            </NuxtLink>
+          </div>
           <div>
             <NuxtLink to="/" class="text-sm text-gray-600 hover:text-gray-700">
               ← Back to Sermons
@@ -99,6 +171,10 @@
 <script setup lang="ts">
 const username = ref('')
 const password = ref('')
+const confirmPassword = ref('')
+const email = ref('')
+const firstName = ref('')
+const lastName = ref('')
 const error = ref('')
 const loading = ref(false)
 const isRegistering = ref(false)
@@ -117,11 +193,19 @@ const isPasswordValid = computed(() => {
          passwordRequirements.value.hasNumberOrSymbol
 })
 
+const passwordsMatch = computed(() => {
+  return password.value === confirmPassword.value
+})
+
 function toggleMode() {
   isRegistering.value = !isRegistering.value
   error.value = ''
   username.value = ''
   password.value = ''
+  confirmPassword.value = ''
+  email.value = ''
+  firstName.value = ''
+  lastName.value = ''
 }
 
 async function handleLogin() {
@@ -156,6 +240,12 @@ async function handleRegister() {
     return
   }
   
+  // Validate passwords match
+  if (!passwordsMatch.value) {
+    error.value = 'Passwords do not match'
+    return
+  }
+  
   loading.value = true
 
   try {
@@ -163,7 +253,10 @@ async function handleRegister() {
       method: 'POST',
       body: {
         username: username.value,
-        password: password.value
+        password: password.value,
+        email: email.value,
+        firstName: firstName.value,
+        lastName: lastName.value
       }
     })
 

pages/users.vue

@@ -99,7 +99,7 @@
     </main>
 
     <!-- Reset Password Modal -->
-    <div v-if="showPasswordModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" @click.self="closePasswordModal">
+    <div v-if="showPasswordModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
       <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
         <div class="mt-3">
           <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">