Fix #287: add a label before the anonymous nickname prompt.

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Anonymous chat user: remember the chosen nickname in sessionStorage, to avoid entering it again too often.
 * Fix: if an anonymous chat user enter spaces in the nickname choice, it will allows them to keep the random nickname.
 * Authenticated users: if current user nickname is already used in the room, automatically add a suffix.
+* UX: add a label ('Choose a nickname to enter') for the anonymous nickname prompt. Fix #287.
 * Translation updates: German, French.
 * New Swedish translations.
 

conversejs/custom/shared/styles/livechat.scss

@@ -50,9 +50,14 @@ body[livechat-viewer-mode="on"] {
     form {
       display: flex !important;
       flex-flow: row wrap !important;
-      padding-top: 0.5em !important;
       padding-bottom: 0.5em !important;
       border-top: var(--chatroom-separator-border-bottom) !important;
+      gap: 10px;
+      align-items: baseline;
+
+      label {
+        color: var(--text-color); // fix converseJs css that breaks this label color.
+      }
     }
   }
 

conversejs/custom/templates/muc-bottom-panel.js

@@ -20,10 +20,12 @@ export default (o) => {
     const model = o.model
     const i18nNickname = __('Nickname')
     const i18nJoin = __('Enter groupchat')
+    const i18n_heading = __('Choose a nickname to enter')
     return html`
     <div class="livechat-viewer-mode-nick chatroom-form-container"
             @submit=${ev => setNickname(ev, model)}>
         <form class="converse-form chatroom-form">
+            <label>${i18n_heading}</label>
             <fieldset class="form-group">
               <input type="text"
                   required="required"