import { usePage } from "@inertiajs/react";
import type { Shared } from "../types";
import Shell from "../components/Shell";
import { Field, Heading, Panel, SaveForm } from "../components/ui";
export default function Password() {
    const { auth } = usePage<Shared>().props;
    return (
        <Shell title="Change password">
            <Heading
                title={
                    auth?.must_change_password
                        ? "Choose your own password"
                        : "Change password"
                }
                description="Use at least 12 characters, including letters and numbers."
            />
            <Panel>
                <SaveForm url="/password" method="put" label="Change password">
                    <Field label="Current password" name="current_password">
                        <input
                            name="current_password"
                            type="password"
                            autoComplete="current-password"
                            required
                        />
                    </Field>
                    <Field label="New password" name="password">
                        <input
                            name="password"
                            type="password"
                            autoComplete="new-password"
                            minLength={12}
                            required
                        />
                    </Field>
                    <Field label="Confirm new password">
                        <input
                            name="password_confirmation"
                            type="password"
                            autoComplete="new-password"
                            minLength={12}
                            required
                        />
                    </Field>
                </SaveForm>
            </Panel>
        </Shell>
    );
}