yiekheng
eebbcb3db2
Adds a small top-centered <Toast> that fires only when the Server
Action returns { ok: true } (i.e., the DB write actually succeeded).
Auto-dismisses after 3s.
Wires both create dialogs (CreateAccountDialog, CreateUserDialog) with
an onSuccess callback that the table parent uses to push the toast,
and the delete confirm-flow does the same. Inline-edit success stays
quiet (no toast) — only add/delete trigger it, per the requested
scope.
113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useTransition } from "react";
|
|
import { createAccount } from "@/app/actions";
|
|
import FormDialogShell, { Field, inputClass } from "./form-dialog-shell";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: (username: string) => void;
|
|
prefixPattern?: string;
|
|
};
|
|
|
|
export default function CreateAccountDialog({ open, onClose, onSuccess, prefixPattern }: Props) {
|
|
const [pending, startTransition] = useTransition();
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [status, setStatus] = useState("");
|
|
const [link, setLink] = useState("");
|
|
|
|
// Reset on open.
|
|
useEffect(() => {
|
|
if (open) {
|
|
setUsername("");
|
|
setPassword("");
|
|
setStatus("");
|
|
setLink("");
|
|
setError(null);
|
|
}
|
|
}, [open]);
|
|
|
|
function submit() {
|
|
if (!username.trim() || !password) {
|
|
setError("Username and password are required");
|
|
return;
|
|
}
|
|
setError(null);
|
|
const trimmedUsername = username.trim();
|
|
startTransition(async () => {
|
|
const result = await createAccount({
|
|
username: trimmedUsername,
|
|
password,
|
|
status,
|
|
link,
|
|
});
|
|
if (result.ok) {
|
|
onSuccess?.(trimmedUsername);
|
|
onClose();
|
|
} else {
|
|
setError(result.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<FormDialogShell
|
|
open={open}
|
|
onCancel={onClose}
|
|
onSubmit={submit}
|
|
title="New account"
|
|
submitLabel="Create"
|
|
pending={pending}
|
|
error={error}
|
|
>
|
|
<Field label="Username" required hint={prefixPattern ? `Suggested prefix: ${prefixPattern}` : undefined}>
|
|
<input
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
disabled={pending}
|
|
autoFocus
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
placeholder={prefixPattern ? `${prefixPattern}1234` : "username"}
|
|
className={inputClass}
|
|
/>
|
|
</Field>
|
|
<Field label="Password" required>
|
|
<input
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
disabled={pending}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
className={inputClass}
|
|
/>
|
|
</Field>
|
|
<Field label="Status" hint="Empty | wait | done">
|
|
<input
|
|
value={status}
|
|
onChange={(e) => setStatus(e.target.value)}
|
|
disabled={pending}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
placeholder="(leave blank for available)"
|
|
className={inputClass}
|
|
/>
|
|
</Field>
|
|
<Field label="Link">
|
|
<input
|
|
value={link}
|
|
onChange={(e) => setLink(e.target.value)}
|
|
disabled={pending}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
placeholder="https://..."
|
|
className={inputClass}
|
|
/>
|
|
</Field>
|
|
</FormDialogShell>
|
|
);
|
|
}
|