Because:
- We are updating the pairing flows and want to land the UI components and
pages before any of the flow wiring.
- Adds the desktop screen asking the user to approve a pairing sign-in.
This commit:
- Adds `packages/fxa-settings/src/pages/Pair2/Authority/ApproveSignIn/index.tsx`,
the desktop twin of the already-merged `Pair2/Supplicant/ApproveSignIn`. It
renders the heading, the account email, the sync illustration, the shared
device info block, the approve CTA, and a "Not you? Change your password"
footer, in the desktop order of heading first and illustration after the
copy. Desktop cards carry no Firefox lockup, so this one does not render it.
- Makes `onApprove` and `onChangePassword` required props. The legacy
equivalent, `pages/Pair/AuthAllow`, calls `PairingAuthorityIntegration
.authorize()` (falling back to `firefox.pairAuthorize(channelId)`) then
navigates to `/pair/auth/wait_for_supp` for the first, and links to the
internal route `/settings/change_password` for the second. Both are route
actions rather than external URLs, so they arrive as callbacks and the flow
logic lands with the route.
- Adds `en.ftl` under the `pair2-authority-approve-sign-in-` prefix, so the
strings do not collide with the Supplicant twin's. The change-password
sentence uses the `elems` DOM-overlay idiom to keep the inline link inside
one localizable string.
- Adds `index.stories.tsx` with five stories covering the device-name,
OS-fallback, unknown-location, long-device-name, and long-email cases, plus
`mocks.tsx` and a test suite asserting the rendered copy, the illustration's
accessible name, the device info block, and both callbacks. The suite also
checks every message against the Fluent bundle to catch drift between
fallback text and the shipped strings; the DOM-overlay message is checked
separately because `testL10n` cannot compare a message that still carries
its `elems` tags.
Closes #FXA-14242