import { router, useForm } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import { Check, Copy, KeyRound, Loader2 } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout';
import { useToast } from '@/Components/Toast';
import { FormHeader, FormActions } from '@/Components/Pengelolaan/FormPage';
import UserLoginFields, { userLoginFormState } from '@/Components/Pengelolaan/UserLoginFields';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/Components/ui/dialog';
const RESET_BTN =
'inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-4 text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary';
const CANCEL_BTN = RESET_BTN;
const CONFIRM_BTN =
'inline-flex h-9 items-center justify-center gap-1.5 rounded-lg bg-linear-to-br from-violet-500 to-primary px-4 text-xs font-bold text-white shadow-sm transition-[filter] hover:brightness-105 disabled:opacity-50';
/**
* Take the generated password back OUT of Inertia's history state.
*
* `oneTimePassword` is an ordinary page prop, and Inertia pushes the whole page object — props
* included — into window.history.state on every visit (core: doPushState({ page: data })). History
* is not encrypted here (nothing in this app calls Inertia::encryptHistory()), so after the admin
* dismissed the modal and navigated away, pressing Back restored the prop and re-opened the modal
* with the credential in it — and `history.state.page.props.oneTimePassword` read it out directly
* in devtools. "Shown exactly once" has to survive the Back button.
*
* router.replaceProp() performs a client-side visit with replace:true and preserveState:true, so
* the history entry is rewritten without the value while this component keeps the copy it is
* showing. Exported so the behaviour is testable without a DOM: effects do not run under
* `environment: 'node'`.
*/
export function scrubOneTimePassword(routerImpl = router) {
routerImpl.replaceProp('oneTimePassword', null);
}
export default function Edit({ userLogin, roleOptions, oneTimePassword = null }) {
const { show: showToast } = useToast();
const [resetting, setResetting] = useState(false);
const [confirmReset, setConfirmReset] = useState(false);
/**
* The generated password, held in state because the prop behind it is a FLASH: the server
* puts it on exactly one render of this page and it is gone for good afterwards. It is never
* written to the users table, to a log or to a file, and it crosses the one redirect it has
* to cross as ciphertext (UserLoginController encrypts it into the flash and decrypts it in
* edit(); the session store is a database table here). Copying it into state is what lets the
* admin close the modal deliberately instead of it vanishing on a re-render.
*
* useState seeds it for the case where Inertia remounts this page after the reset redirect;
* the effect covers the case where it re-renders the same instance with new props, and also
* scrubs it out of the browser history entry. It is never written to the console or anywhere
* else.
*/
const [shownPassword, setShownPassword] = useState(oneTimePassword);
const [copyState, setCopyState] = useState('idle'); // 'idle' | 'copied' | 'failed'
useEffect(() => {
if (oneTimePassword) {
setShownPassword(oneTimePassword);
setCopyState('idle');
// Immediately, not on dismiss: the admin may navigate away with the modal still open,
// and the history entry must never carry the credential either way. Guarded on a
// truthy prop, so the null this pushes back cannot close the modal or loop.
scrubOneTimePassword();
}
}, [oneTimePassword]);
// `_method: 'put'` + post(): a PUT cannot carry multipart, so Inertia needs the spoof
// whenever the form can include a file.
const form = useForm({ _method: 'put', ...userLoginFormState(userLogin), Signature: null });
const submit = (e) => {
e.preventDefault();
form.post(route('user-logins.update', userLogin.ID), {
onError: () => showToast('Please check the form and try again.', 'error'),
});
};
const doReset = () => {
setResetting(true);
// NO `only:` here on purpose: a partial reload that leaves `oneTimePassword` out would
// consume the flash without ever showing it, and the password cannot be recovered.
router.post(route('user-logins.reset-password', userLogin.ID), {}, {
preserveScroll: true,
onSuccess: () => setConfirmReset(false),
onError: () => showToast('Password reset failed.', 'error'),
onFinish: () => setResetting(false),
});
};
const copyPassword = async () => {
try {
// Undefined on an insecure origin (plain http), which is why the value is also
// rendered in a selectable read-only box below — the admin is never stuck.
await navigator.clipboard.writeText(shownPassword);
setCopyState('copied');
} catch {
setCopyState('failed');
}
};
return (
<>
{confirmReset && (
Reset password?
{/* This used to say the password would be reset to `123456`. That is no
longer true (finding F-05): every reset now generates a fresh random
password. */}
Sebuah password sementara acak akan dibuat untuk {userLogin.Nama} dan
ditampilkan satu kali saja di layar ini. Password lama tidak bisa
dikembalikan, dan {userLogin.Nama} wajib menggantinya saat login berikutnya.
)}
{/* Show-once modal. Closing is deliberate: Escape and clicking outside are blocked,
and there is no X — the single button is the only way out, because dismissing it
by accident loses the password permanently. */}
);
}
Edit.layout = [AppLayout];