<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { NButton, NCard, NForm, NFormItem, NInput } from 'naive-ui';
import AuthLayout from '../../layouts/AuthLayout.vue';

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

const submit = (): void =>
    form.put('/password', { onFinish: () => form.reset() });
</script>

<template>
    <Head title="Смена пароля" />

    <AuthLayout
        title="Требуется смена пароля"
        subtitle="Срок действия пароля истёк. Задайте новый (не менее 12 символов)"
    >
        <NCard>
            <NForm @submit.prevent="submit">
                <NFormItem
                    label="Текущий пароль"
                    :feedback="form.errors.current_password"
                    :validation-status="
                        form.errors.current_password ? 'error' : undefined
                    "
                >
                    <NInput
                        v-model:value="form.current_password"
                        type="password"
                        show-password-on="click"
                        autocomplete="current-password"
                    />
                </NFormItem>

                <NFormItem
                    label="Новый пароль"
                    :feedback="form.errors.password"
                    :validation-status="
                        form.errors.password ? 'error' : undefined
                    "
                >
                    <NInput
                        v-model:value="form.password"
                        type="password"
                        show-password-on="click"
                        autocomplete="new-password"
                    />
                </NFormItem>

                <NFormItem label="Повтор нового пароля">
                    <NInput
                        v-model:value="form.password_confirmation"
                        type="password"
                        show-password-on="click"
                        autocomplete="new-password"
                    />
                </NFormItem>

                <NButton
                    type="primary"
                    block
                    attr-type="submit"
                    :loading="form.processing"
                >
                    Сохранить
                </NButton>
            </NForm>
        </NCard>
    </AuthLayout>
</template>
