font-size: 1.25rem;

  }

  /* One row per control.

   *

   * This was `minmax(0, 1fr) auto` — two columns for three children, so the

   * checkbox landed beside the code label and the button wrapped underneath

   * into the same cell, rendering "Approve pairing" through the checkbox text.

   * The form was hard to fill and the button hard to hit, on the one page

   * where a person approves a computer. */

  .computers-pairing__form {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    align-items: end;

    gap: 10px;

    grid-template-columns: minmax(0, 1fr);

    align-items: start;

    gap: 14px;

  }

  .computers-pairing__form .btn {

    justify-self: start;

  }

  /* The checkbox and its words on one line, aligned to each other rather than

     stretched across the row. */

  .computers-pairing__field label:has(input[type="checkbox"]) {

    display: flex;

    align-items: center;

    gap: 8px;

    line-height: 1.35;

  }

  .computers-pairing__field input[type="checkbox"] {

    flex: 0 0 auto;

    margin: 0;

  }

  .computers-pairing__field {

  @presence_refresh_ms 15_000

  @impl true

  def mount(_params, _session, socket) do

  def mount(params, _session, socket) do

    socket =

      socket

      |> stream_configure(:computers, dom_id: &"computer-#{&1.id}")

      |> assign(:page_title, "Computers · Sarah")

      |> assign(:controller_enabled?, Computer.enabled?())

      |> assign(:pairing_form, to_form(%{"code" => ""}, as: :pairing))

      |> assign(:pairing_form, to_form(%{"code" => prefilled_code(params)}, as: :pairing))

      |> assign(:pairing_error, nil)

      |> assign(:operation_success, nil)

      |> assign(:subscribed_computer_ids, MapSet.new())

    {:ok, socket}

  end

  # A pairing link may carry its code, the way `/device` does. Without this the

  # code has to be read off the agent's terminal and retyped, and three pairing

  # attempts expired unapproved because of it. Only the shape a code can have is

  # accepted, so a crafted link cannot put arbitrary text in the field.

  defp prefilled_code(params) when is_map(params) do

    case params["user_code"] || params["code"] do

      code when is_binary(code) ->

        normalized = code |> String.trim() |> String.upcase()

        if Regex.match?(~r/\A[A-Z0-9]{4}-[A-Z0-9]{4}\z/, normalized), do: normalized, else: ""

      _ ->

        ""

    end

  end

  defp prefilled_code(_), do: ""

  @impl true

  def handle_event("approve_pairing", _params, %{assigns: %{controller_enabled?: false}} = socket) do

    {:noreply,

                <div>

                  <h2>Pair a computer</h2>

                  <p>

                    Run <code>sarah-computer-controller pair</code> on the computer, then enter

                    its one-time code. Codes expire after ten minutes.

                    Run <code>oa computer pair</code> on the computer, then enter its one-time

                    code. Codes expire after ten minutes.

                  </p>

                </div>

              </div>

    pairing

  end

  describe "the pairing form is usable" do

    # Three attempts to pair expired unapproved during one working session,

    # partly because this form was hard to fill: `computers-pairing__form` was a

    # two-column grid with three children, so the checkbox landed beside the

    # code label and the button wrapped underneath into the same cell — the

    # words "Approve pairing" rendered through the checkbox text. See #112.

    test "names the command that actually produces a code", %{conn: conn} do

      conn = log_in_github_user(conn, "computers-command")

      {:ok, _view, html} = live(conn, ~p"/computers")

      assert html =~ "oa computer pair"

      refute html =~ "sarah-computer-controller",

             "the page tells the reader to run a command that does not exist"

    end

    test "prefills a code carried in the link, the way /device does", %{conn: conn} do

      conn = log_in_github_user(conn, "computers-prefill")

      {:ok, view, _html} = live(conn, ~p"/computers?user_code=M6YF-BP8Q")

      assert has_element?(view, ~s(#pairing-form input[value="M6YF-BP8Q"])),

             "the code in the link did not reach the field, so it has to be retyped"

    end

    test "lower case in the link still fills the field", %{conn: conn} do

      conn = log_in_github_user(conn, "computers-prefill-case")

      {:ok, view, _html} = live(conn, ~p"/computers?user_code=m6yf-bp8q")

      assert has_element?(view, ~s(#pairing-form input[value="M6YF-BP8Q"]))

    end

    test "only a code-shaped value is prefilled", %{conn: conn} do

      conn = log_in_github_user(conn, "computers-prefill-junk")

      {:ok, view, _html} = live(conn, ~p"/computers?user_code=<script>alert(1)</script>")

      # A crafted link must not put arbitrary text in front of the reader as

      # though the server had issued it.

      assert has_element?(view, ~s(#pairing-form input[value=""]))

    end

    test "no link, no prefill", %{conn: conn} do

      conn = log_in_github_user(conn, "computers-prefill-none")

      {:ok, view, _html} = live(conn, ~p"/computers")

      assert has_element?(view, ~s(#pairing-form input[value=""]))

    end

  end

end