Improvements to alt aliases

[foldleft]

Fixes: element-hq/element-web#13501

Testing notes

• Dial up the latency on your web browser to 4000ms or so to check it spinners properly
• Check with normal latency, it should feel snappy
• Add an alias on another server, get an error dialog
• Add an invalid alias such as test. We don't locally validate (yet) but the feedback appears on the Field element as if we did
• Add an alias that doesn't point to the room, such as #test:localhost etc. Feedback should appear on the Field element too
• Add a bad alias on another server such as #test:example. Feedback should come as a dialog box for now.

Visual changes

• Aliases dialog now also has a prefixed # and allows input of aliases either beginning or not beginning with #.
• Failing to add an alias leaves the user's input in the input field, so they can correct small typos
• Failing to add an alias does not add it to the list of aliases (this was a bug)

Inline feedback for room aliases which don't point to the room
This replaces a dialog reading "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred."

Inline feedback for bad aliases
This replaces a dialog reading "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred."

Overlay entire component while busy
This is because, for technical reasons, all of these controls back on to one network call.

Video

Thread

Video

[t3chguy]

Mostly stylistic nits, when they are cleaned up I'll test it. Otherwise good.

[t3chguy]

Hitting enter in the field triggers a page refresh.

[t3chguy]

Also doesn't look right in dark mode

[t3chguy]

This needs design review, some screenshots/gifs might help them with that,

[t3chguy]

Looks reasonable code-wise

[nadonomy]

Hey @foldleft I had in mind we'd look at this in more detail in future properly so we don't double handle it, but nice to see some progress here anyway. I'd expect us to look at this in way more detail later, but for now to get this merged would be great to:

• Re-lay out the 'Are you sure?' state to (a) Left align are you sure (b) Right align [Yes] [No] & (c) Not cause the height to change. We might need to simplify the buttons to text links to do this.
• Update the input label to not mix the address/alias nomenclature, so instead "New published address (#address:server)"
• Ensure something sane happens if the user closes the settings modal while waiting on server response. What would happen now?

[foldleft]

How's this, @nadonomy?

[foldleft]

oh hang on let me fix up that vertical

[foldleft]

turns out those "x"'s were off-model

[nadonomy]

@foldleft can you ping me on Riot/Matrix when you're about? I have some small requests which will be easier to articulate there to get this over the line.