<script lang="ts" setup>
import { useForm } from '@inertiajs/vue3'
import AuthLayout from '@/Layouts/AuthLayout.vue'

defineOptions({ layout: AuthLayout })

const form = useForm({
  password: '',
})

const submit = (): void => {
  form.post('/user/confirm-password', {
    onFinish: () => form.reset('password'),
  })
}
</script>

<template>
  <VCardText>
    <h4 class="text-h4 mb-1">
      Confirm your password
    </h4>
    <p class="mb-0">
      Please confirm your password before continuing
    </p>
  </VCardText>

  <VCardText>
    <VForm @submit.prevent="submit">
      <VRow>
        <VCol cols="12">
          <VTextField
            v-model="form.password"
            label="Password"
            placeholder="············"
            type="password"
            required
            autofocus
            :error-messages="form.errors.password ? [form.errors.password] : []"
          />
        </VCol>

        <VCol cols="12">
          <VBtn
            type="submit"
            block
            :loading="form.processing"
            :disabled="form.processing"
          >
            Confirm
          </VBtn>
        </VCol>
      </VRow>
    </VForm>
  </VCardText>
</template>
