ui: display loginform addon for locked_domain

src/plugins/controlbox/styles/loginform.scss

@@ -24,6 +24,9 @@
                     margin-top: 0.35em;
                 }
             }
+            .addon {
+                background-color: var(--background-color-rgb);
+            }
             flex-direction: row;
             padding-bottom: 0;
             padding-top: 0;

src/plugins/controlbox/templates/loginform.js

@@ -72,6 +72,10 @@ function tplPasswordInput() {
     `;
 }
 
+function tplDomain(domain) {
+    return html` <span class="input-group-text addon" id="basic-addon2">@${domain}</span> `;
+}
+
 function tplAuthFields() {
     const authentication = api.settings.get('authentication');
     const i18n_login = __('Log in');
@@ -84,17 +88,20 @@ function tplAuthFields() {
     return html`
         <div class="mb-3">
             <label for="converse-login-jid" class="form-label">${i18n_xmpp_address}:</label>
-            <input
-                id="converse-login-jid"
-                ?autofocus=${api.settings.get('auto_focus') ? true : false}
-                value="${api.settings.get('jid') ?? ''}"
-                required
-                class="form-control"
-                type="text"
-                name="jid"
-                placeholder="${placeholder_username}"
-            />
-        </div>
+            <div class="input-group">
+                <input
+                    id="converse-login-jid"
+                    ?autofocus=${api.settings.get('auto_focus') ? true : false}
+                    value="${api.settings.get('jid') ?? ''}"
+                    required
+                    class="form-control"
+                    type="text"
+                    name="jid"
+                    placeholder="${placeholder_username}"
+                />
+                ${locked_domain ? tplDomain(locked_domain) : ''}
+            </div>
+	</div>
         ${authentication !== EXTERNAL ? tplPasswordInput() : ''}
         ${api.settings.get('show_connection_url_input') ? tplConnectionURLInput() : ''}
         ${show_trust_checkbox ? tplTrustCheckbox(show_trust_checkbox === 'off' ? false : true) : ''}

src/plugins/controlbox/tests/login.js

@@ -3,6 +3,25 @@
 const u = converse.env.utils;
 
 describe("The Login Form", function () {
+    
+    fit("contains an addon when locked_domain is set", 
+        mock.initConverse(
+            ['chatBoxesInitialized'], 
+            { auto_login: false, 
+              allow_registration: false, 
+              locked_domain: 'jabber.hot-chilli.eu' }, 
+            async function (_converse) {
+        
+        mock.toggleControlBox();
+        const cbview = await u.waitUntil(() => _converse.chatboxviews.get('controlbox'));
+        await u.waitUntil(() => cbview.querySelectorAll('div.input-group').length)
+        
+        const addons = cbview.querySelectorAll('div.input-group');
+        expect(addons.length).toBe(1);
+        
+        const addon = addons[0];
+        expect(addon.innerHTML, 'jabber.hot-chilli.eu');
+    }))
 
     it("contains a checkbox to indicate whether the computer is trusted or not",
         mock.initConverse(