SignInForm

tcmts.share.SignInForm · #zt3cszay · term · runs in the browser

uses useState

The sign-in form: a token (a contributor's, or the server's), then the page asked for.

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

export function SignInForm({ then }: { then: string }) {
  const [token, setToken] = useState("");
  const [problem, setProblem] = useState("");
  const [busy, setBusy] = useState(false);
  return (
    <Form
      className="signin-form"
      onSubmit={async (e) => {
        e.preventDefault();
        setBusy(true);
        try {
          await signIn(token);
          navigate(then);
        } catch (err) {
          setProblem((err as Error).message);
        }
        setBusy(false);
      }}
    >
      <TextField
        className="textfield"
        type="password"
        name="token"
        autoComplete="current-password"
        isRequired
        value={token}
        onChange={(v) => (setToken(v), setProblem(""))}
        isInvalid={!!problem}
      >
        <Label>Token</Label>
        <Input className="field" />
        <FieldError className="field-error">{problem}</FieldError>
      </TextField>
      <Button type="submit" className="btn primary" isPending={busy}>
        Sign in
      </Button>
    </Form>
  );
}

uses

used by