Invite landing page shows input form when an invite is invalid

[iansltx]

Fleet version: <= 4.61

---

💥  Actual behavior

Users clicking an invalid/expired invite link are presented with an invite form that looks like they can enter details and submit the form, and they don't get feedback that the invite is invalid until they submit the form.

🧑‍💻  Steps to reproduce

While not logged in (e.g. in Incognito), go to https://dogfood.fleetdm.com/login/invites/foobar

🛠️ To fix

From @noahtalerman: Please bring a live demo of the solution to the next #g-endpoint-ops design review. That way, we can review the error message copy live on the call.

On-load, spin while calling the verify invite endpoint. Show an error message if the invite isn't valid, and use the retrieved invite details to populate form fields rather than looking at query string parameters on the invite URL (we should also get rid of those query string parameters as they're duplicative).

This spin-while-verifying behavior just got implemented as part of the MFA verify page in #22078, so that should make this a little easier to implement, and the above endpoint already exists. Honestly I'm a bit surprised how much info we hand back to an unauthenticated user that has the invite token, but given that the endpoint exists we might as well use it.

[lukeheath]

Good UX catch!

[noahtalerman]

On-load, spin while calling the verify invite endpoint. Show an error message if the invite isn't valid, and use the retrieved invite details to populate form fields rather than looking at query string parameters on the invite URL (we should also get rid of those query string parameters as they're duplicative).

@iansltx this proposed solution sounds like a good one.

I'm sending this bug back to the release board.

@sharon-fdm can you ask the engineer who implements to please bring a live demo of the solution to the #g-endpoint-ops design review? That way, we can review the error message copy live on the call.

[sharon-fdm]

Hey team! Please add your planning poker estimate with Zenhub @jacobshandling @RachelElysia