Files
FEDEO/frontend/pages/password-reset.vue
2026-03-22 13:53:29 +01:00

70 lines
1.6 KiB
Vue

<script setup lang="ts">
import type { FormSubmitEvent } from '#ui/types'
definePageMeta({
layout: "notLoggedIn"
})
const toast = useToast()
const state = reactive({
email: ''
})
const loading = ref(false)
const doReset = async (event: FormSubmitEvent<typeof state>) => {
loading.value = true
try {
await useNuxtApp().$api("/auth/password/reset", {
method: "POST",
body: {
email: event.data.email
}
})
toast.add({title:"Zurücksetzen erfolgreich"})
return navigateTo("/login")
} catch (err: any) {
toast.add({title:"Problem beim zurücksetzen",color:"error"})
} finally {
loading.value = false
}
}
</script>
<template>
<UCard class="max-w-sm w-full mx-auto mt-5">
<UColorModeImage
light="/Logo.png"
dark="/Logo_Dark.png"
/>
<div class="mt-6 space-y-5">
<div class="space-y-1">
<h1 class="text-xl font-semibold">Passwort zurücksetzen</h1>
<p class="text-sm text-muted">
Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten.
</p>
</div>
<UForm :state="state" class="space-y-4" @submit="doReset">
<UFormField label="E-Mail" name="email">
<UInput
v-model="state.email"
type="email"
class="w-full"
placeholder="Deine E-Mail Adresse"
autocomplete="email"
/>
</UFormField>
<UButton type="submit" block class="w-full" :loading="loading">
Zurücksetzen
</UButton>
</UForm>
</div>
</UCard>
</template>