Make handover code entry visible and verifiable

lib/who_need_help_web/live/request_live/show.ex

@@ -1020,15 +1020,31 @@ defmodule WhoNeedHelpWeb.RequestLive.Show do
                       Help.helper?(@current_scope, @assignment) &&
                         is_nil(@assignment.handover_verified_at)
                     }
+                    id="handover-form"
                     for={@handover_form}
                     phx-submit="verify-code"
                   >
                     <.input
                       field={@handover_form[:code]}
                       label={gettext("Enter handover code")}
+                      type="text"
+                      inputmode="numeric"
+                      autocomplete="one-time-code"
+                      minlength="6"
                       maxlength="6"
+                      pattern="[0-9]{6}"
+                      placeholder="000000"
+                      required
+                      aria-describedby="handover-code-hint"
+                      class="input w-full bg-base-100 text-center font-mono text-xl font-black tracking-[.22em] text-base-content caret-base-content placeholder:text-base-content/35"
                     />
-                    <.button class="btn btn-primary mt-2 w-full">
+                    <p id="handover-code-hint" class="mb-2 text-xs text-neutral-content/70">
+                      {gettext("Enter the six digits shown to the requester.")}
+                    </p>
+                    <.button
+                      class="btn btn-primary mt-2 w-full"
+                      phx-disable-with={gettext("Verifying…")}
+                    >
                       {gettext("Verify handover")}
                     </.button>
                   </.form>

test/who_need_help_web/live/mutual_aid_live_test.exs

@@ -646,6 +646,34 @@ defmodule WhoNeedHelpWeb.MutualAidLiveTest do
     assert_push_event(view, "reset-message-form", %{id: "request-report-form"})
   end
 
+  test "helper can enter and verify the visible six-digit handover code" do
+    category = Catalog.seed_defaults()
+    requester = user_fixture(display_name: "Handover requester")
+    helper = user_fixture(display_name: "Handover helper")
+    requester_scope = user_scope_fixture(requester)
+    helper_scope = user_scope_fixture(helper)
+
+    {:ok, request} = Help.create_request(requester_scope, request_attrs(category))
+    {:ok, assignment} = Help.accept_request(helper_scope, request.id)
+    {:ok, _assignment} = Help.start_assignment(helper_scope, assignment.id)
+
+    {:ok, view, _html} =
+      build_conn() |> log_in_user(helper) |> live(~p"/requests/#{request.id}")
+
+    assert has_element?(
+             view,
+             "#handover-form input[inputmode='numeric'][autocomplete='one-time-code'][pattern='[0-9]{6}']"
+           )
+
+    view
+    |> form("#handover-form", handover: %{code: Help.handover_code(request.id)})
+    |> render_submit()
+
+    assert render(view) =~ "Handover code verified."
+    refute has_element?(view, "#handover-form")
+    assert Help.get_request!(request.id).assignment.handover_verified_at
+  end
+
   test "successful category proposal resets the browser form", %{conn: conn} do
     Catalog.seed_defaults()
     {:ok, view, _html} = live(conn, ~p"/categories/proposals")