gerbeur/src/components/federation/FederatedSignIn.tsx

/**
 * Renders the way in for users of another gerbeur instance, under the login
 * form and, with the invite, under the register form.
 *
 * @module
 */

import { useEffect, useState } from "react";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { FormProvider } from "react-hook-form";

import { API_URL } from "../../config/api.ts";
import type { Wire } from "../../../shared/api.ts";
import type {
  FederationLoginRequest,
  FederationLoginResponse,
  FederationPeer,
} from "../../../shared/federation.ts";
import { dataOr, expectOk } from "../../utils/shared/api.ts";
import { deserializeFederationPeer } from "../../utils/shared/deserialize.ts";
import { useApiForm } from "../../hooks/form/useApiForm.ts";
import { FormError } from "../form/FormError.tsx";
import { SubmitButton } from "../form/SubmitButton.tsx";
import { TextField } from "../form/TextField.tsx";

/** Passed to {@link FederatedSignIn} by `UserLogin` and `UserRegister`. */
export interface FederatedSignInProps {
  /**
   * The invite the register page was opened with, which lets a user of any
   * instance join; the login page has none, and offers the trusted instances.
   */
  inviteToken?: string;
}

interface Values {
  instance: string;
}

/**
 * Renders a button per trusted instance (`GET /api/federation/peers`) and a
 * field for any other's address. Either starts the sign-in
 * (`POST /api/federation/logins`) and leaves for that instance's `/authorize`
 * page, which sends the user back to `/federation/callback`.
 */
export function FederatedSignIn(
  { inviteToken }: FederatedSignInProps,
): React.JSX.Element {
  const [peers, setPeers] = useState<FederationPeer[]>([]);
  const form = useApiForm<Values>({ defaultValues: { instance: "" } });

  useEffect(() => {
    if (inviteToken) return;
    const controller = new AbortController();
    fetch(`${API_URL}/api/federation/peers`, { signal: controller.signal })
      .then((res) => dataOr<Wire<FederationPeer>[]>(res, []))
      .then((list) => setPeers(list.map(deserializeFederationPeer)))
      .catch(() => {});
    return () => controller.abort();
  }, [inviteToken]);

  const onSubmit = form.submit(async ({ instance }) => {
    const { authorizeUrl } = await expectOk<FederationLoginResponse>(
      await fetch(`${API_URL}/api/federation/logins`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(
          {
            instance: instance.trim(),
            inviteToken,
          } satisfies FederationLoginRequest,
        ),
      }),
    );
    globalThis.location.assign(authorizeUrl);
  });

  return (
    <div className="auth-federated">
      <p className="auth-federated-title">
        {inviteToken
          ? <Trans>Or join with your account on another gerbeur</Trans>
          : <Trans>Or log in with your account on another gerbeur</Trans>}
      </p>
      <FormProvider {...form}>
        {peers.map((peer) => (
          <button
            key={peer.issuer}
            type="button"
            className="btn-secondary auth-federated-peer"
            disabled={form.formState.isSubmitting}
            onClick={() => {
              form.setValue("instance", peer.issuer);
              onSubmit();
            }}
          >
            <Trans>Log in with {peer.name ?? peer.host}</Trans>
            <span className="auth-federated-host">{peer.host}</span>
          </button>
        ))}
        <form onSubmit={onSubmit} className="form">
          <FormError title={t`Couldn't reach that instance`} />
          <TextField<Values>
            name="instance"
            placeholder={t`Its address, like music.example`}
            autoComplete="url"
            rules={{ required: true }}
          />
          <SubmitButton
            className="btn-secondary"
            pendingLabel={<Trans>Connecting…</Trans>}
          >
            <Trans>Continue</Trans>
          </SubmitButton>
        </form>
      </FormProvider>
    </div>
  );
}