<script setup lang="ts">
definePageMeta({
  layout: "notLoggedIn"
})

const auth = useAuthStore()
const toast = useToast()




const doChange = async (data:any) => {
  try {
    const res = await useNuxtApp().$api("/api/auth/password/change", {
      method: "POST",
      body: {
        old_password: data.oldPassword,
        new_password: data.newPassword,
      }
    })

    // Weiterleiten nach erfolgreichem Login
    toast.add({title:"Ändern erfolgreich"})
    await auth.logout()
    return navigateTo("/login")
  } catch (err: any) {
    toast.add({title:"Es gab ein Problem beim ändern",color:"rose"})
  }
}
</script>

<template>
  <UCard class="max-w-sm w-full mx-auto mt-5">

    <UColorModeImage
        light="/Logo.png"
        dark="/Logo_Dark.png"
    />

    <UAuthForm
        title="Passwort zurücksetzen"
        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
        align="bottom"
        :fields="[{
            name: 'oldPassword',
            label: 'Altes Passwort',
            type: 'password',
            placeholder: 'Dein altes Passwort'
          },{
            name: 'newPassword',
            label: 'Neues Passwort',
            type: 'password',
            placeholder: 'Dein neues Passwort'
          }]"
        :loading="false"
        @submit="doChange"
        :submit-button="{label: 'Ändern'}"
        divider="oder"
    >
    </UAuthForm>
  </UCard>
</template>