Paßwort vergessen modernisiert

pages/passwort-vergessen.vue

@@ -6,7 +6,7 @@
           Passwort zurücksetzen
         </h2>
         <p class="mt-2 text-sm text-gray-600">
-          Geben Sie Ihre E-Mail-Adresse ein, um Ihr Passwort zurückzusetzen
+          Geben Sie Ihre E-Mail-Adresse ein, um einen Reset-Link zu erhalten
         </p>
       </div>
 

pages/passwort-zuruecksetzen.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="min-h-full flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
+    <div class="max-w-md w-full space-y-8">
+      <div class="text-center">
+        <h2 class="text-3xl font-display font-bold text-gray-900">
+          Neues Passwort setzen
+        </h2>
+        <p class="mt-2 text-sm text-gray-600">
+          Vergeben Sie ein neues Passwort für Ihren Zugang.
+        </p>
+      </div>
+
+      <div class="bg-white rounded-xl shadow-lg p-8">
+        <form class="space-y-6" @submit.prevent="handleSubmit">
+          <div v-if="!token" class="bg-red-50 border border-red-200 rounded-lg p-4">
+            <p class="text-sm text-red-800">Der Reset-Link ist unvollständig. Fordern Sie bitte einen neuen Link an.</p>
+          </div>
+
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
+              Neues Passwort
+            </label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              minlength="8"
+              autocomplete="new-password"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
+            >
+          </div>
+
+          <div>
+            <label for="passwordRepeat" class="block text-sm font-medium text-gray-700 mb-2">
+              Neues Passwort wiederholen
+            </label>
+            <input
+              id="passwordRepeat"
+              v-model="passwordRepeat"
+              type="password"
+              required
+              minlength="8"
+              autocomplete="new-password"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
+            >
+          </div>
+
+          <div v-if="errorMessage" class="bg-red-50 border border-red-200 rounded-lg p-4">
+            <p class="text-sm text-red-800">{{ errorMessage }}</p>
+          </div>
+
+          <div v-if="successMessage" class="bg-green-50 border border-green-200 rounded-lg p-4">
+            <p class="text-sm text-green-800 flex items-center">
+              <Check :size="18" class="mr-2" />
+              {{ successMessage }}
+            </p>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="isLoading || !token || Boolean(successMessage)"
+            class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
+          >
+            <Loader2 v-if="isLoading" :size="20" class="mr-2 animate-spin" />
+            <span>{{ isLoading ? 'Wird gespeichert...' : 'Passwort speichern' }}</span>
+          </button>
+
+          <div class="text-center">
+            <NuxtLink to="/login" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
+              Zurück zum Login
+            </NuxtLink>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { Check, Loader2 } from 'lucide-vue-next'
+
+const route = useRoute()
+const token = computed(() => String(route.query.token || '').trim())
+const password = ref('')
+const passwordRepeat = ref('')
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const handleSubmit = async () => {
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  if (password.value.length < 8) {
+    errorMessage.value = 'Das Passwort muss mindestens 8 Zeichen lang sein.'
+    return
+  }
+
+  if (password.value !== passwordRepeat.value) {
+    errorMessage.value = 'Die Passwörter stimmen nicht überein.'
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const response = await $fetch('/api/auth/reset-password/complete', {
+      method: 'POST',
+      body: { token: token.value, password: password.value }
+    })
+    successMessage.value = response?.message || 'Ihr Passwort wurde geändert.'
+    password.value = ''
+    passwordRepeat.value = ''
+  } catch (error) {
+    errorMessage.value = error?.data?.message || 'Der Reset-Link ist ungültig oder abgelaufen.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+useHead({
+  title: 'Neues Passwort setzen - Harheimer TC',
+})
+</script>