Create `converse-register-link` component

src/plugins/controlbox/templates/controlbox.js

@@ -21,10 +21,10 @@ function whenNotConnected(el) {
             ${is_fullscreen ? html`<converse-controlbox-navbar></converse-controlbox-navbar>` : ''}
             <converse-brand-logo></converse-brand-logo>
             ${connecting
-                ? html`<converse-spinner class="vertically-centered fade-in" />`
+                ? html`<converse-spinner class="vertically-centered fade-in"></converse-spinner>`
                 : el.model.get('active-form') === 'register'
-                  ? html`<converse-registration-form class="fade-in rounded" />`
-                  : html`<converse-login-form class="fade-in rounded" />`}
+                  ? html`<converse-registration-form class="fade-in rounded"></converse-registration-form>`
+                  : html`<converse-login-form class="fade-in rounded"></converse-login-form>`}
             ${is_fullscreen ? html`<converse-footer></converse-footer>` : ''}
         </div>
     `;

src/plugins/controlbox/templates/loginform.js

@@ -72,25 +72,6 @@ function tplPasswordInput() {
     `;
 }
 
-function tplRegisterLink() {
-    const i18n_create_account = __('Create an account');
-    const i18n_hint_no_account = __("Don't have a chat account?");
-    return html`
-        <div class="mt-3 text-center switch-form">
-            <p class="mb-1">${i18n_hint_no_account}</p>
-            <a class="register-account toggle-register-login" href="#converse/register">${i18n_create_account}</a>
-        </div>
-    `;
-}
-
-function tplShowRegisterLink() {
-    return (
-        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');
@@ -120,7 +101,7 @@ function tplAuthFields() {
         <div class="text-center mb-3">
             <button class="btn btn-primary px-5 mx-auto" type="submit">${i18n_login}</button>
         </div>
-        ${tplShowRegisterLink() ? tplRegisterLink() : ''}
+        <converse-register-link></converse-register-link>
     `;
 }
 

src/plugins/register/index.js

@@ -5,10 +5,11 @@
  * @copyright 2022, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import { api, converse, constants } from '@converse/headless';
-import './form.js';
+import { _converse, api, converse, constants } from '@converse/headless';
 import { __ } from 'i18n';
 import { routeToForm } from './utils.js';
+import RegistrationForm from './form.js';
+import RegisterLink from './register_link.js';
 
 // Strophe methods for building stanzas
 const { Strophe } = converse.env;
@@ -39,12 +40,15 @@ converse.plugins.add('converse-register', {
         CONNECTION_STATUS[Strophe.Status.NOTACCEPTABLE] = 'NOTACCEPTABLE';
 
         api.settings.extend({
-            'allow_registration': true,
-            'domain_placeholder': __(' e.g. conversejs.org'), // Placeholder text shown in the domain input on the registration form
-            'providers_link': 'https://compliance.conversations.im/', // Link to XMPP providers shown on registration page
-            'registration_domain': ''
+            allow_registration: true,
+            domain_placeholder: __(' e.g. conversejs.org'), // Placeholder text shown in the domain input on the registration form
+            providers_link: 'https://compliance.conversations.im/', // Link to XMPP providers shown on registration page
+            registration_domain: ''
         });
 
+        const exports = { RegisterLink, RegistrationForm };
+        Object.assign(_converse.exports, exports);
+
         routeToForm();
         addEventListener('hashchange', routeToForm);
     }

src/plugins/register/register_link.js

@@ -0,0 +1,33 @@
+import { html } from 'lit';
+import { __ } from 'i18n';
+import { _converse, api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+
+class RegisterLink extends CustomElement {
+    render() {
+        const i18n_create_account = __('Create an account');
+        const i18n_hint_no_account = __("Don't have a chat account?");
+        return this.shouldShow()
+            ? html`
+                  <div class="mt-3 text-center switch-form">
+                      <p class="mb-1">${i18n_hint_no_account}</p>
+                      <a class="register-account toggle-register-login" href="#converse/register"
+                          >${i18n_create_account}</a
+                      >
+                  </div>
+              `
+            : '';
+    }
+
+    shouldShow() {
+        return (
+            api.settings.get('allow_registration') &&
+            !api.settings.get('auto_login') &&
+            _converse.pluggable.plugins['converse-register'].enabled(_converse)
+        );
+    }
+}
+
+api.elements.define('converse-register-link', RegisterLink);
+
+export default RegisterLink;

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

@@ -8,6 +8,7 @@ export default ControlBoxView;
  */
 declare class ControlBoxView extends CustomElement {
     initialize(): void;
+    setModel(): void;
     model: any;
     render(): import("lit-html").TemplateResult<1> | "";
     close(ev: any): this;

src/types/plugins/register/register_link.d.ts

@@ -0,0 +1,7 @@
+export default RegisterLink;
+declare class RegisterLink extends CustomElement {
+    render(): import("lit-html").TemplateResult<1> | "";
+    shouldShow(): any;
+}
+import { CustomElement } from 'shared/components/element.js';
+//# sourceMappingURL=register_link.d.ts.map