Use Bootstrap markup for the login form alert

src/plugins/controlbox/constants.js

@@ -1,42 +1,18 @@
 import { converse } from '@converse/headless';
+import { __ } from 'i18n';
 
 const { Strophe } = converse.env;
 
-export const REPORTABLE_STATUSES = [
-    Strophe.Status.ERROR,
-    Strophe.Status.CONNECTING,
-    Strophe.Status.CONNFAIL,
-    Strophe.Status.AUTHENTICATING,
-    Strophe.Status.AUTHFAIL,
-    Strophe.Status.DISCONNECTING,
-    Strophe.Status.RECONNECTING,
-];
-
-export const PRETTY_CONNECTION_STATUS = Object.fromEntries([
-    [Strophe.Status.ERROR, 'Error'],
-    [Strophe.Status.CONNECTING, 'Connecting'],
-    [Strophe.Status.CONNFAIL, 'Connection failure'],
-    [Strophe.Status.AUTHENTICATING, 'Authenticating'],
-    [Strophe.Status.AUTHFAIL, 'Authentication failure'],
-    [Strophe.Status.CONNECTED, 'Connected'],
-    [Strophe.Status.DISCONNECTED, 'Disconnected'],
-    [Strophe.Status.DISCONNECTING, 'Disconnecting'],
-    [Strophe.Status.ATTACHED, 'Attached'],
-    [Strophe.Status.REDIRECT, 'Redirect'],
-    [Strophe.Status.CONNTIMEOUT, 'Connection timeout'],
-    [Strophe.Status.RECONNECTING, 'Reconnecting'],
-]);
-
 export const CONNECTION_STATUS_CSS_CLASS = Object.fromEntries([
-   [Strophe.Status.ERROR, 'error'],
+   [Strophe.Status.ERROR, 'danger'],
    [Strophe.Status.CONNECTING, 'info'],
-   [Strophe.Status.CONNFAIL, 'error'],
+   [Strophe.Status.CONNFAIL, 'danger'],
    [Strophe.Status.AUTHENTICATING, 'info'],
-   [Strophe.Status.AUTHFAIL, 'error'],
+   [Strophe.Status.AUTHFAIL, 'danger'],
    [Strophe.Status.CONNECTED, 'info'],
-   [Strophe.Status.DISCONNECTED, 'error'],
-   [Strophe.Status.DISCONNECTING, 'warn'],
+   [Strophe.Status.DISCONNECTED, 'danger'],
+   [Strophe.Status.DISCONNECTING, 'warning'],
    [Strophe.Status.ATTACHED, 'info'],
    [Strophe.Status.REDIRECT, 'info'],
-   [Strophe.Status.RECONNECTING, 'warn'],
+   [Strophe.Status.RECONNECTING, 'warning'],
 ]);

src/plugins/controlbox/styles/_controlbox.scss

@@ -85,17 +85,9 @@
             font-weight: bold;
         }
 
-        .conn-feedback {
-            color: var(--controlbox-color);
-            &.error {
-                color: var(--error-color);
-            }
-            p {
-                padding-bottom: 1em;
-                &.feedback-subject.error {
-                    font-weight: bold;
-                }
-            }
+        #converse-login .conn-feedback {
+            text-align: center;
+            width: 100%;
         }
 
         #chatrooms {

src/plugins/controlbox/templates/loginform.js

@@ -1,9 +1,9 @@
-import { html } from 'lit';
-import { _converse, api, constants } from '@converse/headless';
-import 'shared/components/brand-heading.js';
-import tplSpinner from 'templates/spinner.js';
-import { REPORTABLE_STATUSES, PRETTY_CONNECTION_STATUS, CONNECTION_STATUS_CSS_CLASS } from '../constants.js';
-import { __ } from 'i18n';
+import { html } from "lit";
+import { _converse, api, constants } from "@converse/headless";
+import "shared/components/brand-heading.js";
+import tplSpinner from "templates/spinner.js";
+import { CONNECTION_STATUS_CSS_CLASS } from "../constants.js";
+import { __ } from "i18n";
 
 const { ANONYMOUS, EXTERNAL, LOGIN, PREBIND, CONNECTION_STATUS } = constants;
 
@@ -12,12 +12,12 @@ const { ANONYMOUS, EXTERNAL, LOGIN, PREBIND, CONNECTION_STATUS } = constants;
  */
 function tplTrustCheckbox(checked) {
     const i18n_hint_trusted = __(
-        'To improve performance, we cache your data in this browser. ' +
-            'Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. ' +
+        "To improve performance, we cache your data in this browser. " +
+            "Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. " +
             "It's important that you explicitly log out, otherwise not all cached data might be deleted. " +
-            'Please note, when using an untrusted device, OMEMO encryption is NOT available.'
+            "Please note, when using an untrusted device, OMEMO encryption is NOT available."
     );
-    const i18n_trusted = __('This is a trusted device');
+    const i18n_trusted = __("This is a trusted device");
     return html`
         <div class="form-check login-trusted">
             <input
@@ -28,15 +28,15 @@ function tplTrustCheckbox(checked) {
                 ?checked=${checked}
             />
             <label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label>
-            <converse-popover title="${__('Info')}" text="${i18n_hint_trusted}"></converse-popover>
+            <converse-popover title="${__("Info")}" text="${i18n_hint_trusted}"></converse-popover>
         </div>
     `;
-};
+}
 
 export function tplConnectionURLInput() {
-    const i18n_connection_url = __('Connection URL');
-    const i18n_form_help = __('HTTP or websocket URL that is used to connect to your XMPP server');
-    const i18n_placeholder = __('e.g. wss://example.org/xmpp-websocket');
+    const i18n_connection_url = __("Connection URL");
+    const i18n_form_help = __("HTTP or websocket URL that is used to connect to your XMPP server");
+    const i18n_placeholder = __("e.g. wss://example.org/xmpp-websocket");
     return html`
         <div class="mb-3 fade-in">
             <label for="converse-conn-url" class="form-label">${i18n_connection_url}</label>
@@ -51,10 +51,10 @@ export function tplConnectionURLInput() {
             />
         </div>
     `;
-};
+}
 
 function tplPasswordInput() {
-    const i18n_password = __('Password');
+    const i18n_password = __("Password");
     return html`
         <div class="mb-3">
             <label for="converse-login-password" class="form-label">${i18n_password}</label>
@@ -62,17 +62,17 @@ function tplPasswordInput() {
                 id="converse-login-password"
                 class="form-control"
                 required="required"
-                value="${api.settings.get('password') ?? ''}"
+                value="${api.settings.get("password") ?? ""}"
                 type="password"
                 name="password"
                 placeholder="${i18n_password}"
             />
         </div>
     `;
-};
+}
 
 function tplRegisterLink() {
-    const i18n_create_account = __('Create an account');
+    const i18n_create_account = __("Create an account");
     const i18n_hint_no_account = __("Don't have a chat account?");
     return html`
         <fieldset class="switch-form">
@@ -82,33 +82,33 @@ function tplRegisterLink() {
             </p>
         </fieldset>
     `;
-};
+}
 
 function tplShowRegisterLink() {
     return (
-        api.settings.get('allow_registration') &&
-        !api.settings.get('auto_login') &&
-        _converse.pluggable.plugins['converse-register'].enabled(_converse)
+        api.settings.get("allow_registration") &&
+        !api.settings.get("auto_login") &&
+        _converse.pluggable.plugins["converse-register"].enabled(_converse)
     );
-};
+}
 
 function tplAuthFields() {
-    const authentication = api.settings.get('authentication');
-    const i18n_login = __('Log in');
-    const i18n_xmpp_address = __('XMPP Address');
-    const locked_domain = api.settings.get('locked_domain');
-    const default_domain = api.settings.get('default_domain');
-    const placeholder_username = ((locked_domain || default_domain) && __('Username')) || __('user@domain');
-    const show_trust_checkbox = api.settings.get('allow_user_trust_override');
+    const authentication = api.settings.get("authentication");
+    const i18n_login = __("Log in");
+    const i18n_xmpp_address = __("XMPP Address");
+    const locked_domain = api.settings.get("locked_domain");
+    const default_domain = api.settings.get("default_domain");
+    const placeholder_username = ((locked_domain || default_domain) && __("Username")) || __("user@domain");
+    const show_trust_checkbox = api.settings.get("allow_user_trust_override");
 
     return html`
         <fieldset class="form-group">
             <div class="mb-3">
-            <label for="converse-login-jid" class="form-label">${i18n_xmpp_address}:</label>
+                <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') ?? ''}"
+                    ?autofocus=${api.settings.get("auto_focus") ? true : false}
+                    value="${api.settings.get("jid") ?? ""}"
                     required
                     class="form-control"
                     type="text"
@@ -116,50 +116,48 @@ function tplAuthFields() {
                     placeholder="${placeholder_username}"
                 />
             </div>
-            ${authentication !== EXTERNAL ? tplPasswordInput() : ''}
-            ${api.settings.get('show_connection_url_input') ? tplConnectionURLInput() : ''}
-            ${show_trust_checkbox ? tplTrustCheckbox(show_trust_checkbox === 'off' ? false : true) : ''}
+            ${authentication !== EXTERNAL ? tplPasswordInput() : ""}
+            ${api.settings.get("show_connection_url_input") ? tplConnectionURLInput() : ""}
+            ${show_trust_checkbox ? tplTrustCheckbox(show_trust_checkbox === "off" ? false : true) : ""}
         </fieldset>
         <fieldset class="form-group buttons">
             <input class="btn btn-primary" type="submit" value="${i18n_login}" />
         </fieldset>
-        ${tplShowRegisterLink() ? tplRegisterLink() : ''}
+        ${tplShowRegisterLink() ? tplRegisterLink() : ""}
     `;
-};
+}
 
 function tplFormFields() {
-    const authentication = api.settings.get('authentication');
-    const i18n_disconnected = __('Disconnected');
-    const i18n_anon_login = __('Click here to log in anonymously');
+    const authentication = api.settings.get("authentication");
+    const i18n_disconnected = __("Disconnected");
+    const i18n_anon_login = __("Click here to log in anonymously");
     return html`
-        ${authentication == LOGIN || authentication == EXTERNAL ? tplAuthFields() : ''}
+        ${authentication == LOGIN || authentication == EXTERNAL ? tplAuthFields() : ""}
         ${authentication == ANONYMOUS
             ? html`<input class="btn btn-primary login-anon" type="submit" value="${i18n_anon_login}" />`
-            : ''}
-        ${authentication == PREBIND ? html`<p>${i18n_disconnected}</p>` : ''}
+            : ""}
+        ${authentication == PREBIND ? html`<p>${i18n_disconnected}</p>` : ""}
     `;
-};
+}
 
 /**
  * @param {import('../loginform.js').default} el
  */
 export default (el) => {
     const { connfeedback } = _converse.state;
-    const connection_status = connfeedback.get('connection_status');
-    let feedback_class, pretty_status;
-    if (REPORTABLE_STATUSES.includes(connection_status)) {
-        pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
-        feedback_class = CONNECTION_STATUS_CSS_CLASS[connection_status];
-    }
-    const conn_feedback_message = connfeedback.get('message');
+    const connection_status = connfeedback.get("connection_status");
+    const feedback_class = CONNECTION_STATUS_CSS_CLASS?.[connection_status] ?? "none";
+    const conn_feedback_message = connfeedback.get("message");
     return html` <converse-brand-heading></converse-brand-heading>
         <form id="converse-login" class="converse-form" method="post" @submit=${el.onLoginFormSubmitted}>
-            <div class="conn-feedback fade-in ${!pretty_status ? 'hidden' : feedback_class}">
-                <p class="feedback-subject">${pretty_status}</p>
-                <p class="feedback-message ${!conn_feedback_message ? 'hidden' : ''}">${conn_feedback_message}</p>
+            <div
+                class="alert ${`alert-${feedback_class}`} fade-in conn-feedback ${!conn_feedback_message
+                    ? "d-none"
+                    : ""}"
+                role="alert"
+            >
+                <span class="feedback-message">${conn_feedback_message}</span>
             </div>
-            ${CONNECTION_STATUS[connection_status] === 'CONNECTING'
-                ? tplSpinner()
-                : tplFormFields()}
+            ${CONNECTION_STATUS[connection_status] === "CONNECTING" ? tplSpinner() : tplFormFields()}
         </form>`;
 };

src/plugins/modal/styles/popover.scss

@@ -1,10 +1,5 @@
 converse-root#conversejs {
-    .popover-header {
-        color: var(--background-color);
-        background-color: var(--secondary-color);
-    }
-    .popover-body {
-        color: var(--foreground-color);
-        background-color: var(--background-color);
+    converse-popover {
+        margin-left: 0.5em;
     }
 }

src/shared/styles/_core.scss

@@ -402,14 +402,17 @@
     .left {
         float: left;
     }
+
     .right {
         float: right;
     }
+
     .centered {
         text-align: center;
         display: block;
         margin: auto;
     }
+
     .hor_centered {
         text-align: center;
         display: block !important;
@@ -417,24 +420,6 @@
         clear: both;
     }
 
-    .error {
-        color: var(--error-color) !important;
-    }
-    .info {
-        color: var(--info-color);
-    }
-    .reg-feedback {
-        font-size: 85%;
-        margin-bottom: 1em;
-    }
-
-    .reg-feedback,
-    #converse-login .conn-feedback {
-        display: block;
-        text-align: center;
-        width: 100%;
-    }
-
     .avatar-autocomplete {
         margin-inline-end: 0.5em;
         vertical-align: middle;

src/types/plugins/controlbox/constants.d.ts

@@ -1,4 +1,2 @@
-export const REPORTABLE_STATUSES: any[];
-export const PRETTY_CONNECTION_STATUS: any;
 export const CONNECTION_STATUS_CSS_CLASS: any;
 //# sourceMappingURL=constants.d.ts.map