<template>
  <PageForm
    :title="$t('reset_password')"
    back-link="/login"
    :back-text="$t('to_main')"
    :submit-text="$t('next')"
    :handler="onSubmit"
  >
    <UiAlert class="mb-16">
      {{ $t('reset_password_alert') }}
    </UiAlert>

    <UiInput id="email" :label="$t('email')" rules="required|email" />
  </PageForm>
</template>

<script setup>
definePageMeta({
  layout: 'auth',
  pageTransition: { name: 'fade', mode: 'out-in' },
  middleware: ['guest-only'],
})

const { requestResetPassword } = useAuth()

async function onSubmit(values) {
  await requestResetPassword(values.email)

  navigateTo({
    path: '/reset-password/email-confirmation',
    query: {
      email: values.email,
    },
  })
}
</script>

<style lang="scss">
.reset-form {
  margin: 0 auto;
  width: 500px;

  &__summary {
    padding-top: 24px;
    padding-bottom: 22px;
  }
}
</style>
