<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>
