{frame && (
// eslint-disable-next-line @next/next/no-img-element -- live frames, not optimizable
@@ -151,51 +100,34 @@ function CredentialsForm({
}: {
cam: CameraSummary;
reason?: string;
+ /** Called after a save or clear; the camera's queries have already been reset. */
onSaved: () => void;
onCancel?: () => void;
}) {
- const [username, setUsername] = useState(DEFAULT_USERNAME);
+ const status = useCredentialStatus(cam.id);
+ const save = useSaveCredentials(cam.id);
+ const clear = useClearCredentials(cam.id);
+ // null until the user types, so the saved username (never the password) can prefill it.
+ const [typedUsername, setTypedUsername] = useState(null);
const [password, setPassword] = useState("");
- const [saving, setSaving] = useState(false);
- const [error, setError] = useState(null);
+ const username = typedUsername ?? status.data?.username ?? DEFAULT_USERNAME;
- // Prefill the username only; the API never returns passwords.
- useEffect(() => {
- fetch(apiUrl(cam, "credentials"))
- .then((res) => (res.ok ? res.json() : null))
- .then((data) => {
- // A username the user has already typed wins over the saved one.
- if (data?.username) {
- setUsername((u) => (u === DEFAULT_USERNAME ? data.username : u));
- }
- })
- .catch(() => {});
- }, [cam]);
-
- async function submit(e: React.FormEvent) {
+ function submit(e: React.FormEvent) {
e.preventDefault();
- setSaving(true);
- setError(null);
- try {
- const res = await fetch(apiUrl(cam, "credentials"), {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ username, password }),
- });
- if (!res.ok) {
- const problem = await problemFrom(res);
- setError(problem.kind === "auth" ? "Camera rejected that login." : problem.message);
- return;
- }
- setPassword("");
- onSaved();
- } catch (err) {
- setError(err instanceof Error ? err.message : String(err));
- } finally {
- setSaving(false);
- }
+ save.mutate(
+ { username, password },
+ {
+ onSuccess: () => {
+ setPassword("");
+ onSaved();
+ },
+ },
+ );
}
+ const error = save.error ?? clear.error;
+ const busy = save.isPending || clear.isPending;
+
return (
setUsername(e.target.value)}
+ onChange={(e) => setTypedUsername(e.target.value)}
placeholder="Username"
autoComplete="off"
required
@@ -220,15 +152,29 @@ function CredentialsForm({
autoComplete="new-password"
className="rounded border border-zinc-300 bg-transparent px-2 py-1 dark:border-zinc-700"
/>
- {error && {error}
}
+ {error && (
+
+ {error === save.error && error.kind === "auth" ? "Camera rejected that login." : error.message}
+
+ )}
+ {status.data?.source === "stored" && (
+
+ )}
{onCancel && (