Function LocalAuthGate

packages/react/src/api/local-auth.tsx:150–190

(props: { readonly children: React.ReactNode })

 * shell.
 */
export function LocalAuthGate(props: { readonly children: React.ReactNode }) {
  const required = useAuthRequired();
  const [value, setValue] = React.useState("");

  if (!required) return <>{props.children}</>;

  return (
    <div className="flex h-screen items-center justify-center bg-background p-6">
      <form
        className="flex w-full max-w-sm flex-col gap-3 rounded-xl border border-border bg-card p-6 shadow-sm"
        onSubmit={(event) => {
          event.preventDefault();
          setLocalAuthToken(value);
        }}
      >
        <h1 className="text-base font-semibold text-foreground">Authentication required</h1>
        <p className="text-sm text-muted-foreground">
          Run <code>executor open</code> in your terminal to sign in, or paste the server's token
          below.
        </p>
        {/* oxlint-disable-next-line react/forbid-elements -- token entry input */}
        <input
          type="password"
          autoFocus
          value={value}
          onChange={(event) => setValue(event.target.value)}
          placeholder="Bearer token"
          className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
        />
        {/* oxlint-disable-next-line react/forbid-elements -- gate submit button */}
        <button
          type="submit"
          disabled={value.trim().length === 0}
          className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50"
        >
          Connect
        </button>
      </form>
    </div>
  );
}