Login/register form improvements

- Show footer on all logged out views.
- Render logo outside of login/register components
- Only show navbar when not connected
- Remove the `.login-form-container` element

src/plugins/chatview/styles/index.scss

@@ -193,7 +193,7 @@
             > .row {
                 flex-direction: row-reverse;
             }
-            #converse-login-panel {
+            converse-login-form {
                 .converse-form {
                     padding: 3em 2em 3em;
                 }

src/plugins/controlbox/styles/_controlbox.scss

@@ -302,6 +302,7 @@
                 }
             }
             .controlbox-pane {
+                height: 100%;
                 padding-top: 2em;
                 padding-bottom: 1em;
             }

src/plugins/controlbox/styles/loginform.scss

@@ -4,10 +4,14 @@
 
 .conversejs {
     #controlbox {
-        #converse-login-panel {
-            padding-top: 0;
-            padding-bottom: 0;
+        converse-login-form {
+            .btn {
+                color: var(--button-text-color);
+            }
             flex-direction: row;
+            height: 100%;
+            padding-bottom: 0;
+            padding-top: 0;
         }
 
         .toggle-register-login {
@@ -20,12 +24,6 @@
                 text-align: center;
                 padding: 2em 0;
             }
-
-            .login-form-container {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-            }
         }
     }
 }
@@ -50,10 +48,6 @@
                     margin: 1em 0;
                 }
 
-                #converse-login-panel {
-                    height: 100%;
-                }
-
                 #converse-login-trusted {
                     margin-top: 0.5em;
                 }
@@ -101,11 +95,8 @@
                     font-size: 90%;
                 }
 
-                #converse-login-panel {
+                converse-login-form {
                     display: block;
-                    @include media-breakpoint-up(sm) {
-                        padding-top: 5vh;
-                    }
                 }
 
                 #converse-register,

src/plugins/controlbox/templates/controlbox.js

@@ -1,6 +1,5 @@
 import { _converse, api, converse, constants } from '@converse/headless';
 import { html } from 'lit';
-import tplSpinner from 'templates/spinner.js';
 
 const { Strophe } = converse.env;
 const { ANONYMOUS } = constants;
@@ -9,44 +8,40 @@ const { ANONYMOUS } = constants;
  * @param {import('../controlbox').default} el
  */
 function whenNotConnected(el) {
+    const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
     const connection_status = _converse.state.connfeedback.get('connection_status');
-    if ([Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status)) {
-        return tplSpinner({class: 'vertically-centered'});
-    }
-    if (el.model.get('active-form') === 'register') {
-        return html`<converse-registration-form></converse-registration-form>`;
-    }
-    return html`<converse-login-form
-        id="converse-login-panel"
-        class="controlbox-pane fade-in"
-    ></converse-login-form>`;
+    const connecting = [Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status);
+    return html`
+        <div class="controlbox-pane d-flex flex-column justify-content-between">
+            ${is_fullscreen ? html`<converse-controlbox-navbar></converse-controlbox-navbar>` : ''}
+            <converse-brand-logo></converse-brand-logo>
+            ${connecting
+                ? html`<converse-spinner class="vertically-centered fade-in" />`
+                : el.model.get('active-form') === 'register'
+                  ? html`<converse-registration-form class="fade-in" />`
+                  : html`<converse-login-form class="fade-in" />`}
+            ${is_fullscreen ? html`<converse-footer></converse-footer>` : ''}
+        </div>
+    `;
 }
 
 /**
  * @param {import('../controlbox').default} el
  */
 export default (el) => {
-    const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
-    return html` <div class="flyout box-flyout">
+    return html`<div class="flyout box-flyout">
         <converse-dragresize></converse-dragresize>
-        ${
-            el.model.get('connected') ?
-                html`<converse-user-profile></converse-user-profile>` :
-                html`<converse-controlbox-buttons class="controlbox-padded"></converse-controlbox-buttons>`
-        }
-        ${ is_fullscreen ? html`<converse-controlbox-navbar></converse-controlbox-navbar>` : '' }
-        <div class="controlbox-pane">
-            ${el.model.get('connected')
-                ? html`<converse-headlines-feeds-list class="controlbox-section"></converse-headlines-feeds-list>
-                        <div id="chatrooms" class="controlbox-section">
-                            <converse-rooms-list></converse-rooms-list>
-                        </div>
-                        ${api.settings.get('authentication') === ANONYMOUS
-                            ? ''
-                            : html`<div id="converse-roster" class="controlbox-section">
-                                <converse-roster></converse-roster>
-                            </div>`}`
-                : whenNotConnected(el)}
-        </div>
+        ${el.model.get('connected')
+            ? html`<converse-user-profile />`
+            : html`<converse-controlbox-buttons class="controlbox-padded" />`}
+        ${el.model.get('connected')
+            ? html`<div class="controlbox-pane">
+                  <converse-headlines-feeds-list class="controlbox-section"></converse-headlines-feeds-list>
+                  <div id="chatrooms" class="controlbox-section"><converse-rooms-list /></div>
+                  ${api.settings.get('authentication') === ANONYMOUS
+                      ? ''
+                      : html`<div id="converse-roster" class="controlbox-section"><converse-roster /></div>`}
+              </div>`
+            : whenNotConnected(el)}
     </div>`;
 };

src/plugins/controlbox/templates/loginform.js

@@ -147,20 +147,15 @@ export default (el) => {
     const connection_status = connfeedback.get('connection_status');
     const feedback_class = CONNECTION_STATUS_CSS_CLASS?.[connection_status] ?? 'none';
     const conn_feedback_message = connfeedback.get('message');
-    const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
-    return html` <div class="login-form-container">
-        <converse-brand-logo></converse-brand-logo>
-        <form id="converse-login" class="converse-form" method="post" @submit=${el.onLoginFormSubmitted}>
-            <div
-                class="alert ${`alert-${feedback_class}`} conn-feedback mb-3 ${!conn_feedback_message ? 'd-none' : ''}"
-                role="alert"
-            >
-                <span class="feedback-message">${conn_feedback_message}</span>
-            </div>
-            ${CONNECTION_STATUS[connection_status] === 'CONNECTING'
-                ? html`<div class="text-center my-3">${tplSpinner()}</div>`
-                : tplFormFields()}
-        </form>
-        ${is_fullscreen ? html`<converse-footer></converse-footer>` : ''}
-    </div>`;
+    return html`<form id="converse-login" class="converse-form" method="post" @submit=${el.onLoginFormSubmitted}>
+        <div
+            class="alert ${`alert-${feedback_class}`} conn-feedback mb-3 ${!conn_feedback_message ? 'd-none' : ''}"
+            role="alert"
+        >
+            <span class="feedback-message">${conn_feedback_message}</span>
+        </div>
+        ${CONNECTION_STATUS[connection_status] === 'CONNECTING'
+            ? html`<div class="text-center my-3">${tplSpinner()}</div>`
+            : tplFormFields()}
+    </form>`;
 };

src/plugins/register/form.js

@@ -320,7 +320,7 @@ class RegistrationForm extends CustomElement {
     getFormFields (stanza) {
         if (this.form_type === 'xform') {
             const { fields } = parsers.parseXForm(stanza);
-            return fields?.map((f) => u.xFormField2TemplateResult(f, {'domain': this.domain})) ?? [];
+            return fields?.map((f) => u.xFormField2TemplateResult(f, { domain: this.domain})) ?? [];
         } else {
             return this.getLegacyFormFields();
         }

src/plugins/register/styles/register.scss

@@ -1,6 +1,7 @@
 @import "shared/styles/_mixins.scss";
 
 converse-registration-form {
+    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
 
@@ -11,7 +12,6 @@ converse-registration-form {
 
     #converse-register {
         @include fade-in;
-
         padding-top: 0;
         background-color: var(--background-color);
 

src/plugins/register/templates/choose_provider.js

@@ -13,17 +13,21 @@ function tplFormRequest(el) {
     const default_domain = api.settings.get('registration_domain');
     const i18n_cancel = __('Cancel');
     return html`
-        <form id="converse-register" class="converse-form no-scrolling" @submit=${ev => el.onFormSubmission(ev)}>
+        <form id="converse-register" class="converse-form no-scrolling" @submit=${(ev) => el.onFormSubmission(ev)}>
             ${tplSpinner({ 'classes': 'hor_centered' })}
             ${default_domain
                 ? ''
                 : html`
-                    <button class="btn btn-secondary button-cancel hor_centered"
-                            @click=${ev => el.renderProviderChoiceForm(ev)}>${i18n_cancel}</button>
+                      <button
+                          class="btn btn-secondary button-cancel hor_centered"
+                          @click=${(ev) => el.renderProviderChoiceForm(ev)}
+                      >
+                          ${i18n_cancel}
+                      </button>
                   `}
         </form>
     `;
-};
+}
 
 /**
  * @param {import('../form.js').default} el
@@ -34,9 +38,11 @@ function tplDomainInput(el) {
     const i18n_providers_link = __('here');
     const href_providers = api.settings.get('providers_link');
     return html`
-        <input class="form-control"
+        <input
+            class="form-control"
             required="required"
-            type="text" name="domain"
+            type="text"
+            name="domain"
             placeholder="${domain_placeholder}"
             value="${el.domain}"
         />
@@ -46,7 +52,7 @@ function tplDomainInput(el) {
         </p>
         ${api.settings.get('show_connection_url_input') ? tplConnectionURLInput() : ''}
     `;
-};
+}
 
 function tplFetchFormButtons() {
     const i18n_register = __('Fetch registration form');
@@ -61,7 +67,7 @@ function tplFetchFormButtons() {
             <a class="login-here toggle-register-login" href="#converse/login">${i18n_login}</a>
         </div>
     `;
-};
+}
 
 /**
  * @param {import('../form.js').default} el
@@ -73,16 +79,16 @@ function tplChooseProvider(el) {
     const show_form_buttons = !default_domain && el.status === CHOOSE_PROVIDER;
 
     return html`
-        <form id="converse-register" class="converse-form" @submit=${ev => el.onFormSubmission(ev)}>
+        <form id="converse-register" class="converse-form" @submit=${(ev) => el.onFormSubmission(ev)}>
             <legend class="col-form-label">${i18n_create_account}</legend>
-            <div>
+            <div class="pt-3">
                 <label class="form-label">${i18n_choose_provider}</label>
                 ${default_domain ? default_domain : tplDomainInput(el)}
             </div>
             ${show_form_buttons ? tplFetchFormButtons() : ''}
         </form>
     `;
-};
+}
 
 const CHOOSE_PROVIDER = 0;
 const FETCHING_FORM = 1;
@@ -94,11 +100,12 @@ const REGISTRATION_FORM_ERROR = 3;
  */
 export default (el) => {
     return html`
-        <converse-brand-logo></converse-brand-logo>
-        ${ el.alert_message ? html`<div class="alert alert-${el.alert_type}" role="alert">${el.alert_message}</div>` : '' }
+        ${el.alert_message
+            ? html`<div class="alert alert-${el.alert_type}" role="alert">${el.alert_message}</div>`
+            : ''}
         ${el.status === CHOOSE_PROVIDER ? tplChooseProvider(el) : ''}
         ${el.status === FETCHING_FORM ? tplFormRequest(el) : ''}
         ${el.status === REGISTRATION_FORM ? tplRegistrationForm(el) : ''}
-        ${el.status === REGISTRATION_FORM_ERROR ? tplSwitchForm() : '' }
+        ${el.status === REGISTRATION_FORM_ERROR ? tplSwitchForm() : ''}
     `;
 };

src/plugins/register/templates/registration_form.js

@@ -3,6 +3,9 @@ import { api } from '@converse/headless';
 import { __ } from 'i18n';
 import tplSwitchForm from './switch_form.js';
 
+/**
+ * @param {import('../form').default} el
+ */
 export default (el) => {
     const i18n_choose_provider = __('Choose a different provider');
     const i18n_legend = __('Account Registration:');
@@ -10,7 +13,7 @@ export default (el) => {
     const registration_domain = api.settings.get('registration_domain');
 
     return html`
-        <form id="converse-register" class="converse-form" @submit=${ev => el.onFormSubmission(ev)}>
+        <form id="converse-register" class="converse-form" @submit=${(ev) => el.onFormSubmission(ev)}>
             <legend class="col-form-label">${i18n_legend} ${el.domain}</legend>
             <p class="title">${el.title}</p>
             <p class="form-help instructions">${el.instructions}</p>
@@ -18,11 +21,7 @@ export default (el) => {
             ${el.form_fields}
 
             <fieldset class="buttons form-group">
-                ${el.fields
-                    ? html`
-                          <input type="submit" class="btn btn-primary" value="${i18n_register}" />
-                      `
-                    : ''}
+                ${el.fields ? html` <input type="submit" class="btn btn-primary" value="${i18n_register}" /> ` : ''}
                 ${registration_domain
                     ? ''
                     : html`
@@ -30,10 +29,10 @@ export default (el) => {
                               type="button"
                               class="btn btn-secondary button-cancel"
                               value="${i18n_choose_provider}"
-                              @click=${ev => el.renderProviderChoiceForm(ev)}
+                              @click=${(ev) => el.renderProviderChoiceForm(ev)}
                           />
                       `}
-                ${ tplSwitchForm() }
+                ${tplSwitchForm()}
             </fieldset>
         </form>
     `;

src/types/plugins/register/templates/registration_form.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: any): import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../form").default): import("lit-html").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=registration_form.d.ts.map