Improve password protection UX and UI.

[Ivansss]

Password input caught to much attention in the right side bar.

It will be hidden by default and a password button will replace it.

@jancborchardt It would be nice to have an 'opened lock' icon so we can show it when the room has no password set.

Also, we could have a new combined icon (public + password) for the left side bar, so a user could see directly which public calls are password protected without being in that room.

Something like this:

[danxuliu]

It would be better to move this into the success function.

Also, if there is an error in the ajax call it should be handled by letting the user know somehow (but without hiding the input field).

[danxuliu]

It would be nice to have an 'opened lock' icon so we can show it when the room has no password set.

👍

Also, we could have a new combined icon (public + password) for the left side bar, so a user could see directly which public calls are password protected without being in that room.

👍

[jancborchardt]

It would be nice to have an 'opened lock' icon so we can show it when the room has no password set.

We should do that via opacity as it’s much more clear. When no password is set, the icon should be opacity: .5.

Also, we could have a new combined icon (public + password) for the left side bar, so a user could see directly which public calls are password protected without being in that room.

If we do that then we should have that on any call though, also group calls. So we should have a separate element to overlay the password icon there.

[jancborchardt]

And @Ivansss @danxuliu could we have the input in a popover as discussed? Then we can also move forward with #562 as then it will always be one row for all the call controls.

[Ivansss]

If we do that then we should have that on any call though, also group calls. So we should have a separate element to overlay the password icon there.

Password protection is only available in public calls.

[nickvergessen]

Please also send a PR against master 🙊 (or better rebase this one)

[Ivansss]

Rebased and changed base branch.

[Ivansss]

@jancborchardt The password input field is shown in a popover menu now.
But it needs some design love, cause it's not properly aligned.
Also, I'm not sure about the borders of the input field. Maybe we should remove them?