SSO-over-UIA flow is ugly and not mobile-friendly

[richvdh]

1. It starts with something nice in the client app, like:

   

   That bit is fine.

2. After you click "Single Sign On", you get taken to a new tab, which looks like:

   

   That is (a) ugly, (b) not mobile-friendly, (c) we don't seem to know if "sign-on" is hyphenated or not.

   For context, MSC2454 explains why this page is required.

3. Clicking "reauthenticate with single sign-on" takes you to the SSO provider's pages, which are outside our control and probably fine.

4. Then when you finish SSO you end up back at a page which looks like:

   

   ... which is also ugly and not mobile-friendly. It's also missing a full stop. It's worth noting that the intention is that the user should never see this page, but various bugs (UIA-over-SSO leaves you marooned in a "please close this tab" tab element-hq/element-web#16219, https://github.com/matrix-org/matrix-doc/issues/2977) mean that is not the case today.

5. There are also some error pages a user might see along the way.

   For example, a generic error page:

   

   Or, "you seem to have logged into your SSO provider with a different user to what we expected":

   

   In both cases we do a poor job of explaining to the user how they should proceed. Oh and now single-sign-on has two hyphens!

There's a general theme here that these templates are very basic and would benefit from some wordsmithing and design. However, note that they are part of the homeserver, not the client, so Element branding is inappropriate. For matrix.org, we could consider customising the default templates with Matrix branding, but it would be nice to consider whether we can improve the default templates that are shipped as part of the Synapse package so that all deployments can benefit from the improvements.