<template>
  <PageForm
    :title="$t('reset_password')"
    back-link="/settings/safety"
    :back-text="$t('back')"
    :submit-text="$t('next')"
    :handler="onSubmit"
    :title-offset="false"
    class="reset-password"
  >
    <UiAlert class="mb-40">
      В целях безопасности будет запрещен вывод средств в течение 24 часов после изменения пароля
    </UiAlert>

    <UiInput
      id="current_password"
      label="Current password"
      native-type="password"
      rules="required|password"
      class="mb-6"
      autocomplete="off"
    />

    <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({
  pageTransition: { name: 'fade', mode: 'out-in' },
  centerContent: true,
  middleware: ['auth'],
})

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

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

    navigateTo('/settings/safety')
  }
  catch {}
}
</script>

<style lang="scss">
.reset-password {
  --page-form-padding-top: 8px;
}
</style>
