126 lines
4.3 KiB
Vue
126 lines
4.3 KiB
Vue
<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>
|