UI for adding new addresses for a room should be easier to use

[ragesoss]

Description

The format for adding a local address for a room is not intuitive, and the form offers too few affordances for typical ways of using it.

As a user, I expect to be able to type in a human-meaningful string, such as a single word or the name of the room, and have that be converted automatically into a valid local address.

For example, if I type in Example Room, I expect this input to be converted to something like #Example-Room:chat.wikiedu.org

A related problem, which would not be as much of an issue if user input was automatically converted to a valid format, is that the placeholder text disappears when you start typing.

The format is complicated enough, however, that the user may not remember it once they start typing. The error message for an invalid address does not specify the problem (whether invalid characters, or lack of a # at the start, or lack of :some.domain at the end), so finding a valid address can be a trial-and-error process.

Steps to reproduce

1. Create a room
2. Go to Settings for the room
3. In the Addresses section, attempt to add a local address

Version information

Version: 0.14.2

• Platform: web and desktop, not browser-specific

[lampholder]

I am very supportive of the UI clearly and helpfully reinterpreting user input (along the lines of http://jsfiddle.net/5ocu2cqk/6/ ).

[t3chguy]

Closing in favour of https://github.com/vector-im/element-web/issues/13077