Rename to remove confusing older reference to registration "panel"

src/plugins/controlbox/templates/controlbox.js

@@ -14,7 +14,7 @@ function whenNotConnected(el) {
         return tplSpinner({class: 'vertically-centered'});
     }
     if (el.model.get('active-form') === 'register') {
-        return html`<converse-register-panel></converse-register-panel>`;
+        return html`<converse-registration-form></converse-registration-form>`;
     }
     return html`<converse-login-form
         id="converse-login-panel"

src/plugins/register/panel.js → src/plugins/register/form.js

@@ -1,11 +1,8 @@
-/**
- * @typedef {import('strophe.js').Request} Request
- */
 import { _converse, api, converse, log, constants, u, parsers } from "@converse/headless";
 import tplFormInput from "templates/form_input.js";
 import tplFormUrl from "templates/form_url.js";
 import tplFormUsername from "templates/form_username.js";
-import tplRegisterPanel from "./templates/register_panel.js";
+import tplChooseProvider from "./templates/choose_provider.js";
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { setActiveForm } from './utils.js';
@@ -22,12 +19,10 @@ const REGISTRATION_FORM = 2;
 const REGISTRATION_FORM_ERROR = 3;
 
 
-/**
- * @class
- * @namespace _converse.RegisterPanel
- * @memberOf _converse
- */
-class RegisterPanel extends CustomElement {
+class RegistrationForm extends CustomElement {
+    /**
+     * @typedef {import('strophe.js').Request} Request
+     */
 
     static get properties () {
         return {
@@ -60,7 +55,7 @@ class RegisterPanel extends CustomElement {
     }
 
     render () {
-        return tplRegisterPanel(this);
+        return tplChooseProvider(this);
     }
 
     setMessage(message, type) {
@@ -86,7 +81,7 @@ class RegisterPanel extends CustomElement {
 
     /**
      * Send an IQ stanza to the XMPP server asking for the registration fields.
-     * @method _converse.RegisterPanel#getRegistrationFields
+     * @method _converse.RegistrationForm#getRegistrationFields
      * @param {Request} req - The current request
      * @param {Function} callback - The callback function
      */
@@ -129,8 +124,8 @@ class RegisterPanel extends CustomElement {
     }
 
     /**
-     * Handler for {@link _converse.RegisterPanel#getRegistrationFields}
-     * @method _converse.RegisterPanel#onRegistrationFields
+     * Handler for {@link _converse.RegistrationForm#getRegistrationFields}
+     * @method _converse.RegistrationForm#onRegistrationFields
      * @param {Element} stanza - The query stanza.
      */
     onRegistrationFields (stanza) {
@@ -183,7 +178,7 @@ class RegisterPanel extends CustomElement {
 
     /**
      * Callback method that gets called when the user has chosen an XMPP provider
-     * @method _converse.RegisterPanel#onProviderChosen
+     * @method _converse.RegistrationForm#onProviderChosen
      * @param {HTMLElement} form - The form that was submitted
      */
     onProviderChosen (form) {
@@ -193,7 +188,7 @@ class RegisterPanel extends CustomElement {
 
     /**
      * Fetch a registration form from the requested domain
-     * @method _converse.RegisterPanel#fetchRegistrationForm
+     * @method _converse.RegistrationForm#fetchRegistrationForm
      * @param {string} domain_name - XMPP server domain
      */
     fetchRegistrationForm (domain_name) {
@@ -212,7 +207,7 @@ class RegisterPanel extends CustomElement {
     /**
      * Callback function called by Strophe whenever the connection status changes.
      * Passed to Strophe specifically during a registration attempt.
-     * @method _converse.RegisterPanel#onConnectStatusChanged
+     * @method _converse.RegistrationForm#onConnectStatusChanged
      * @param {number} status_code - The Strophe.Status status code
      */
     onConnectStatusChanged(status_code) {
@@ -294,7 +289,7 @@ class RegisterPanel extends CustomElement {
     /**
      * Renders the registration form based on the XForm fields
      * received from the XMPP server.
-     * @method _converse.RegisterPanel#renderRegistrationForm
+     * @method _converse.RegistrationForm#renderRegistrationForm
      * @param {Element} stanza - The IQ stanza received from the XMPP server.
      */
     renderRegistrationForm (stanza) {
@@ -305,7 +300,7 @@ class RegisterPanel extends CustomElement {
     /**
      * Report back to the user any error messages received from the
      * XMPP server after attempted registration.
-     * @method _converse.RegisterPanel#reportErrors
+     * @method _converse.RegistrationForm#reportErrors
      * @param {Element} stanza - The IQ stanza received from the XMPP server
      */
     reportErrors (stanza) {
@@ -342,7 +337,7 @@ class RegisterPanel extends CustomElement {
     /**
      * Handler, when the user submits the registration form.
      * Provides form error feedback or starts the registration process.
-     * @method _converse.RegisterPanel#submitRegistrationForm
+     * @method _converse.RegistrationForm#submitRegistrationForm
      * @param {HTMLElement} form - The HTML form that was submitted
      */
     submitRegistrationForm (form) {
@@ -367,7 +362,7 @@ class RegisterPanel extends CustomElement {
 
     /**
      * Stores the values that will be sent to the XMPP server during attempted registration.
-     * @method _converse.RegisterPanel#setFields
+     * @method _converse.RegistrationForm#setFields
      * @param {Element} stanza - the IQ stanza that will be sent to the XMPP server.
      */
     setFields (stanza) {
@@ -421,7 +416,7 @@ class RegisterPanel extends CustomElement {
      * Callback method that gets called when a return IQ stanza
      * is received from the XMPP server, after attempting to
      * register a new user.
-     * @method _converse.RegisterPanel#reportErrors
+     * @method _converse.RegistrationForm#reportErrors
      * @param {Element} stanza - The IQ stanza.
      */
     _onRegisterIQ (stanza) {
@@ -451,4 +446,6 @@ class RegisterPanel extends CustomElement {
     }
 }
 
-api.elements.define('converse-register-panel', RegisterPanel);
+api.elements.define('converse-registration-form', RegistrationForm);
+
+export default RegistrationForm;

src/plugins/register/index.js

@@ -6,7 +6,7 @@
  * @license Mozilla Public License (MPLv2)
  */
 import { api, converse, constants } from '@converse/headless';
-import './panel.js';
+import './form.js';
 import { __ } from 'i18n';
 import { routeToForm } from './utils.js';
 

src/plugins/register/styles/register.scss

@@ -1,6 +1,6 @@
 @import "shared/styles/_mixins.scss";
 
-converse-register-panel {
+converse-registration-form {
     padding-top: 0;
     padding-bottom: 0;
 

src/plugins/register/templates/register_panel.js → src/plugins/register/templates/choose_provider.js

@@ -5,7 +5,10 @@ import { __ } from 'i18n';
 import { api } from '@converse/headless';
 import { html } from 'lit';
 
-const tplFormRequest = (el) => {
+/**
+ * @param {import('../form.js').default} el
+ */
+function tplFormRequest(el) {
     const default_domain = api.settings.get('registration_domain');
     const i18n_cancel = __('Cancel');
     return html`
@@ -21,7 +24,7 @@ const tplFormRequest = (el) => {
     `;
 };
 
-const tplDomainInput = () => {
+function tplDomainInput() {
     const domain_placeholder = api.settings.get('domain_placeholder');
     const i18n_providers = __('Tip: A list of public XMPP providers is available');
     const i18n_providers_link = __('here');
@@ -35,7 +38,7 @@ const tplDomainInput = () => {
     `;
 };
 
-const tplFetchFormButtons = () => {
+function tplFetchFormButtons() {
     const i18n_register = __('Fetch registration form');
     const i18n_existing_account = __('Already have a chat account?');
     const i18n_login = __('Log in here');
@@ -50,7 +53,10 @@ const tplFetchFormButtons = () => {
     `;
 };
 
-const tplChooseProvider = (el) => {
+/**
+ * @param {import('../form.js').default} el
+ */
+function tplChooseProvider(el) {
     const default_domain = api.settings.get('registration_domain');
     const i18n_create_account = __('Create your account');
     const i18n_choose_provider = __('Please enter the XMPP provider to register with:');
@@ -74,6 +80,9 @@ const FETCHING_FORM = 1;
 const REGISTRATION_FORM = 2;
 const REGISTRATION_FORM_ERROR = 3;
 
+/**
+ * @param {import('../form.js').default} el
+ */
 export default (el) => {
     return html`
         <converse-brand-logo></converse-brand-logo>

src/plugins/register/tests/register.js

@@ -3,7 +3,7 @@
 const { stx, Strophe, $iq, sizzle, u } = converse.env;
 
 
-describe("The Registration Panel", function () {
+describe("The Registration Form", function () {
 
     beforeEach(() => jasmine.addMatchers({ toEqualStanza: jasmine.toEqualStanza }));
 
@@ -39,13 +39,13 @@ describe("The Registration Panel", function () {
             toggle.click();
         }
         const cbview = _converse.chatboxviews.get('controlbox');
-        expect(cbview.querySelector('converse-register-panel')).toBe(null);
+        expect(cbview.querySelector('converse-registration-form')).toBe(null);
 
         const register_link = await u.waitUntil(() => cbview.querySelector('a.register-account'));
         expect(register_link.textContent).toBe("Create an account");
         register_link.click();
 
-        expect(cbview.querySelector('converse-register-panel')).toBeDefined();
+        expect(cbview.querySelector('converse-registration-form')).toBeDefined();
     }));
 
     it("allows the user to choose an XMPP provider's domain",
@@ -64,10 +64,9 @@ describe("The Registration Panel", function () {
         const cbview = _converse.api.controlbox.get();
         await u.waitUntil(() => u.isVisible(cbview));
 
-        // Open the register panel
         cbview.querySelector('.toggle-register-login').click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
 
@@ -103,7 +102,7 @@ describe("The Registration Panel", function () {
         const cbview = _converse.api.controlbox.get();
         cbview.querySelector('.toggle-register-login').click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
@@ -158,7 +157,7 @@ describe("The Registration Panel", function () {
         const login_form = await u.waitUntil(() => cbview.querySelector('.toggle-register-login'));
         login_form.click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
@@ -220,7 +219,7 @@ describe("The Registration Panel", function () {
         const login_form = await u.waitUntil(() => cbview.querySelector('.toggle-register-login'));
         login_form.click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
         spyOn(registerview, 'onRegistrationFields').and.callThrough();
@@ -282,7 +281,7 @@ describe("The Registration Panel", function () {
         const login_form = await u.waitUntil(() => cbview.querySelector('.toggle-register-login'));
         login_form.click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
         spyOn(registerview, 'onRegistrationFields').and.callThrough();
@@ -365,7 +364,7 @@ describe("The Registration Panel", function () {
         const login_form = await u.waitUntil(() => cbview.querySelector('.toggle-register-login'));
         login_form.click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         registerview.querySelector('input[name=domain]').value = 'conversejs.org';
         registerview.querySelector('input[type=submit]').click();
 
@@ -429,7 +428,7 @@ describe("The Registration Panel", function () {
         }
         const cbview = _converse.chatboxviews.get('controlbox');
         cbview.querySelector('.toggle-register-login').click();
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
 
         registerview.querySelector('input[name=domain]').value = 'conversejs.org';
         registerview.querySelector('input[type=submit]').click();
@@ -491,7 +490,7 @@ describe("The Registration Panel", function () {
         }
         const cbview = _converse.chatboxviews.get('controlbox');
         cbview.querySelector('.toggle-register-login').click();
-        const view = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const view = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
 
         view.querySelector('input[name=domain]').value = 'conversejs.org';
         view.querySelector('input[type=submit]').click();
@@ -572,7 +571,7 @@ describe("The Registration Panel", function () {
         const login_form = await u.waitUntil(() => cbview.querySelector('.toggle-register-login'));
         login_form.click();
 
-        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-registration-form'));
         spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
 
         expect(registerview._registering).toBeFalsy();

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

@@ -0,0 +1,128 @@
+export default RegistrationForm;
+declare class RegistrationForm extends CustomElement {
+    /**
+     * @typedef {import('strophe.js').Request} Request
+     */
+    static get properties(): {
+        status: {
+            type: StringConstructor;
+        };
+        alert_message: {
+            type: StringConstructor;
+        };
+        alert_type: {
+            type: StringConstructor;
+        };
+    };
+    urls: any[];
+    fields: {};
+    domain: any;
+    alert_type: string;
+    setErrorMessage: (m: any) => void;
+    setFeedbackMessage: (m: any) => void;
+    initialize(): void;
+    status: number;
+    render(): import("lit").TemplateResult<1>;
+    setMessage(message: any, type: any): void;
+    alert_message: any;
+    /**
+     * Hook into Strophe's _connect_cb, so that we can send an IQ
+     * requesting the registration fields.
+     */
+    registerHooks(): void;
+    _registering: boolean;
+    /**
+     * Send an IQ stanza to the XMPP server asking for the registration fields.
+     * @method _converse.RegistrationForm#getRegistrationFields
+     * @param {Request} req - The current request
+     * @param {Function} callback - The callback function
+     */
+    getRegistrationFields(req: import("strophe.js").Request, callback: Function): boolean;
+    /**
+     * Handler for {@link _converse.RegistrationForm#getRegistrationFields}
+     * @method _converse.RegistrationForm#onRegistrationFields
+     * @param {Element} stanza - The query stanza.
+     */
+    onRegistrationFields(stanza: Element): boolean;
+    reset(settings: any): void;
+    /**
+     * Event handler when the #converse-register form is submitted.
+     * Depending on the available input fields, we delegate to other methods.
+     * @param {Event} ev
+     */
+    onFormSubmission(ev: Event): void;
+    /**
+     * Callback method that gets called when the user has chosen an XMPP provider
+     * @method _converse.RegistrationForm#onProviderChosen
+     * @param {HTMLElement} form - The form that was submitted
+     */
+    onProviderChosen(form: HTMLElement): void;
+    /**
+     * Fetch a registration form from the requested domain
+     * @method _converse.RegistrationForm#fetchRegistrationForm
+     * @param {string} domain_name - XMPP server domain
+     */
+    fetchRegistrationForm(domain_name: string): boolean;
+    /**
+     * Callback function called by Strophe whenever the connection status changes.
+     * Passed to Strophe specifically during a registration attempt.
+     * @method _converse.RegistrationForm#onConnectStatusChanged
+     * @param {number} status_code - The Strophe.Status status code
+     */
+    onConnectStatusChanged(status_code: number): void;
+    getLegacyFormFields(): import("lit").TemplateResult<1>[];
+    /**
+     * @param {Element} stanza
+     */
+    getFormFields(stanza: Element): any[];
+    /**
+     * Renders the registration form based on the XForm fields
+     * received from the XMPP server.
+     * @method _converse.RegistrationForm#renderRegistrationForm
+     * @param {Element} stanza - The IQ stanza received from the XMPP server.
+     */
+    renderRegistrationForm(stanza: Element): void;
+    form_fields: any[];
+    /**
+     * Report back to the user any error messages received from the
+     * XMPP server after attempted registration.
+     * @method _converse.RegistrationForm#reportErrors
+     * @param {Element} stanza - The IQ stanza received from the XMPP server
+     */
+    reportErrors(stanza: Element): void;
+    renderProviderChoiceForm(ev: any): void;
+    abortRegistration(): void;
+    /**
+     * Handler, when the user submits the registration form.
+     * Provides form error feedback or starts the registration process.
+     * @method _converse.RegistrationForm#submitRegistrationForm
+     * @param {HTMLElement} form - The HTML form that was submitted
+     */
+    submitRegistrationForm(form: HTMLElement): void;
+    /**
+     * Stores the values that will be sent to the XMPP server during attempted registration.
+     * @method _converse.RegistrationForm#setFields
+     * @param {Element} stanza - the IQ stanza that will be sent to the XMPP server.
+     */
+    setFields(stanza: Element): void;
+    /**
+     * @param {Element} query
+     */
+    setFieldsFromLegacy(query: Element): void;
+    instructions: any;
+    form_type: string;
+    /**
+     * @param {Element} xform
+     */
+    setFieldsFromXForm(xform: Element): void;
+    /**
+     * Callback method that gets called when a return IQ stanza
+     * is received from the XMPP server, after attempting to
+     * register a new user.
+     * @method _converse.RegistrationForm#reportErrors
+     * @param {Element} stanza - The IQ stanza.
+     */
+    _onRegisterIQ(stanza: Element): boolean;
+}
+import { CustomElement } from 'shared/components/element.js';
+//# sourceMappingURL=form.d.ts.map

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

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