AccountSignInForm

tcmts.share.AccountSignInForm · #34f62csf · component · runs in the browser

uses useState

Signing in with an AT Protocol account (a Bluesky one, say): its handle, then the account's own sign-in page, and back to then (#2oiwbcmh finishes it).

import { signIn } from "#codebase/tcmts/atproto";
import { FORGE_SIGN_IN } from "#codebase/tcmts/share";
import { useState } from "react";
import { Button, FieldError, Form, Input, Label, TextField } from "react-aria-components";

export function AccountSignInForm({ then }: { then: string }) {
  const [handle, setHandle] = useState("");
  const [problem, setProblem] = useState("");
  const [busy, setBusy] = useState(false);
  return (
    <Form
      className="signin-form account"
      onSubmit={async (e) => {
        e.preventDefault();
        setBusy(true);
        try {
          await signIn(handle, { ...FORGE_SIGN_IN, returnTo: then });
        } catch (err) {
          setProblem((err as Error).message);
          setBusy(false);
        }
      }}
    >
      <TextField
        className="textfield"
        name="handle"
        autoComplete="username"
        isRequired
        value={handle}
        onChange={(v) => (setHandle(v), setProblem(""))}
        isInvalid={!!problem}
      >
        <Label>Handle</Label>
        <Input className="field" placeholder="alice.bsky.social" />
        <FieldError className="field-error">{problem}</FieldError>
      </TextField>
      <Button type="submit" className="btn primary" isPending={busy}>
        Continue
      </Button>
    </Form>
  );
}

uses

used by