Something went wrong. Try again.
An easy to set up and operate PDS admin panel. forked from brookie.blog/pds-operator
Something went wrong. Try again.
1.5 kB · 52 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253import { useState } from "react";import { startRegistration } from "@simplewebauthn/browser";import { api } from "./api.js";
export function Enroll({ token, pdsHostname, onEnrolled,}: { token: string; pdsHostname: string; onEnrolled: () => void;}) { const [name, setName] = useState(""); const [error, setError] = useState<string | null>(null); const [busy, setBusy] = useState(false);
const enroll = async () => { setBusy(true); setError(null); try { const options = await api.passkeyRegisterOptions(token); const response = await startRegistration({ optionsJSON: options }); await api.passkeyRegister(name.trim(), response, token); window.history.replaceState(null, "", "/"); onEnrolled(); } catch (e) { const err = e as Error; if (err.name !== "NotAllowedError") setError(err.message); } finally { setBusy(false); } };
return ( <div className="login-screen"> <div className="login-form"> <span className="mono-dim">{pdsHostname ? `${pdsHostname} — ` : ""}enroll a passkey</span> <input placeholder="name (e.g. macbook touch id)" value={name} onChange={(e) => setName(e.target.value)} autoFocus /> {error && <span className="error-text">{error}</span>} <button disabled={busy} onClick={enroll}> {busy ? "enrolling…" : "create passkey"} </button> </div> </div> );}