<template>
  <PageForm
    :title="$t('reset_password')"
    back-link="/login"
    :back-text="$t('back')"
    :submit-text="$t('next')"
    :handler="onSubmit"
  >
    <UiInput
      id="new_password"
      :label="$t('password')"
      native-type="password"
      rules="required|password"
      class="mb-6"
    />

    <UiInput
      id="repeat_password"
      :label="$t('repeat_password')"
      native-type="password"
      rules="required|confirmed:@new_password"
    />
  </PageForm>
</template>

<script setup>
definePageMeta({
  layout: 'auth',
  pageTransition: { name: 'fade', mode: 'out-in' },
  validate: route => !!route.query.reset_code,
  middleware: ['guest-only'],
})

const { resetPassword } = useAuth()
const { query } = useRoute()

async function onSubmit(values) {
  try {
    await resetPassword(values.new_password, query.reset_code.toString())

    navigateTo('/login')
  }
  catch {}
}
</script>

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

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