Various changes

* In certain places, use native methods instead of jQuery * Nicer rendering of registration forms * Use CSS3 fade-in animations.

Various changes
* In certain places, use native methods instead of jQuery * Nicer rendering of registration forms * Use CSS3 fade-in animations.
9cdb0dde · JC Brand · 43bbae90 · 9cdb0dde · 9cdb0dde · 9cdb0dde
Commit 9cdb0dde authored Sep 17, 2017 by JC Brand
18 changed files
--- a/css/converse.css
+++ b/css/converse.css
@@ -1120,6 +1120,22 @@
    #conversejs {
      width: 100%;
      width: 100vw; } }
+  #converse-embedded-chat .fade-in,
+  #conversejs .fade-in {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
  #converse-embedded-chat ::-webkit-input-placeholder,
  #conversejs ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
@@ -1267,7 +1283,8 @@
    color: #A53214; }
  #converse-embedded-chat .reg-feedback,
  #conversejs .reg-feedback {
-    font-size: 85%; }
+    font-size: 85%;
+    margin-bottom: 1em; }
  #converse-embedded-chat .reg-feedback,
  #converse-embedded-chat #converse-login .conn-feedback,
  #conversejs .reg-feedback,
@@ -1295,7 +1312,7 @@
    padding: 0.5em 0; }
  #converse-embedded-chat .pure-button,
  #conversejs .pure-button {
-    border-radius: 4px; }
+    border-radius: 5px; }
  #converse-embedded-chat .button-primary,
  #conversejs .button-primary {
    color: white;
@@ -1316,7 +1333,7 @@
    #conversejs form.pure-form.converse-form legend {
      color: #777;
      font-size: 125%;
-      margin-bottom: 2em; }
+      margin-bottom: 1em; }
    #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
    #conversejs form.pure-form.converse-form input[type=checkbox] {
      display: block; }
@@ -1885,10 +1902,9 @@
      #conversejs #controlbox .controlbox-head {
        border-top-left-radius: 0;
        border-top-right-radius: 0; } }
-  #conversejs #controlbox.logged-out .controlbox-head {
+  #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
-    background-color: white; }
+    position: relative;
-    #conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
+    overflow-y: auto; }
-      color: #578EA9; }
  #conversejs #controlbox form.search-xmpp-contact {
    margin: 0;
    padding-left: 5px;
@@ -1907,14 +1923,27 @@
    padding-left: 2em;
    font-weight: bold; }
  #conversejs #controlbox #converse-register {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease;
    background: white; }
    #conversejs #controlbox #converse-register .title {
      font-weight: bold; }
    #conversejs #controlbox #converse-register .info {
-      font-style: italic;
      color: green;
-      font-size: 85%;
+      font-size: 90%;
-      margin: 5px 0; }
+      margin: 1.5em 0; }
    #conversejs #controlbox #converse-register .form-errors {
      color: red;
      display: none; }
@@ -1952,18 +1981,18 @@
      font-weight: bold; }
    #conversejs #controlbox .conn-feedback p.error {
      color: #A53214; }
-  #conversejs #controlbox .brand-heading-container {
-    text-align: center; }
  #conversejs #controlbox .brand-heading-container .brand-heading {
+    text-align: left;
    font-size: 150%; }
  #conversejs #controlbox .brand-heading-container .brand-name {
    font-size: 120%; }
  #conversejs #controlbox .toggle-register-login {
    font-weight: bold; }
  #conversejs #controlbox .oauth-login {
+    margin-left: 0;
    color: #777; }
-  #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
+    #conversejs #controlbox .oauth-login .icon-social:before {
-    margin: 2em 0; }
+      font-size: 16px; }
  #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
    height: auto;
    white-space: normal; }
@@ -1972,6 +2001,10 @@
  #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
    width: 100%;
    margin: 1em 0; }
+  #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
+    display: block;
+    font-weight: normal;
+    margin: 1em 0; }
  #conversejs #controlbox #users .add-converse-contact {
    margin: 0 0 0.75em 0; }
  #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -2194,17 +2227,23 @@
    padding: 1px;
    float: right; }
  #conversejs #controlbox .controlbox-panes {
-    background-color: white; }
+    height: 100%;
+    overflow-y: scroll; }
  #conversejs #controlbox .controlbox-pane {
    padding: 1em;
    background-color: white;
    border: 0;
    font-size: 14px;
    position: absolute;
+    left: 0;
    text-align: center;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden; }
+    #conversejs #controlbox .controlbox-pane .switch-form {
+      padding-bottom: 2em; }
+      #conversejs #controlbox .controlbox-pane .switch-form p {
+        margin-top: 0.5em; }
    #conversejs #controlbox .controlbox-pane label {
      font-size: 14px;
      font-weight: bold;
@@ -2258,6 +2297,8 @@
  height: 289px;
  height: -webkit-calc(100% - 55px);
  height: calc(100% - 55px); }
+#conversejs #controlbox .brand-heading-container .brand-heading {
+  margin-left: 1em; }
 #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
  border-radius: 10%;

--- a/css/inverse.css
+++ b/css/inverse.css
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -29,10 +29,10 @@
        }
        &.logged-out {
-            .controlbox-head {
+            .box-flyout {
-                background-color: white;
+                .controlbox-pane {
-                .chatbox-btn {
+                    position: relative;
-                    color: $controlbox-head-color;
+                    overflow-y: auto;
                }
            }
        }
@@ -62,15 +62,15 @@
        }
        #converse-register {
+            @include fade-in;
            background: white;
            .title {
                font-weight: bold;
            }
            .info {
-                font-style: italic;
                color: green;
-                font-size: 85%;
+                font-size: 90%;
-                margin: 5px 0;
+                margin: 1.5em 0;
            }
            .form-errors {
                color: red;
@@ -128,8 +128,8 @@
        }
        .brand-heading-container {
-            text-align: center;
            .brand-heading {
+                text-align: left;
                font-size: 150%;
            }
            .brand-name {
@@ -140,12 +140,16 @@
        .toggle-register-login {
            font-weight: bold;
        }
        .oauth-login {
+            margin-left: 0;
            color: $text-color;
+            .icon-social:before {
+                font-size: $font-size-large;
+            }
        }
        #converse-register, #converse-login {
-            margin: 2em 0;
            .login-anon {
                height: auto;
                white-space: normal;
@@ -157,6 +161,12 @@
                width: 100%;
                margin: 1em 0;
            }
+            .form-url {
+                display: block;
+                font-weight: normal;
+                margin: 1em 0;
+            }
        }
        #users {
            .add-converse-contact {
@@ -442,7 +452,8 @@
        }
        .controlbox-panes {
-            background-color: white;
+            height: 100%;
+            overflow-y: scroll;
        }
        .controlbox-pane {
@@ -451,10 +462,17 @@
            border: 0;
            font-size: $font-size;
            position: absolute;
+            left: 0;
            text-align: center;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
+            .switch-form {
+                padding-bottom: 2em;
+                p {
+                    margin-top: 0.5em;
+                }
+            }
            label {
                font-size: $font-size;
                font-weight: bold;

--- a/sass/_core.scss
+++ b/sass/_core.scss
+@mixin fade-in {
+    opacity:0;  /* make things invisible upon start */
+    @include animation-name(fadein);
+    @include animation-fill-mode(forwards);
+    @include animation-duration(1s);
+    @include animation-timing-function(ease);
+}
 #converse-embedded-chat,
 #conversejs {
    bottom: 0;
@@ -20,6 +28,9 @@
        width: 100vw;
    }
+    .fade-in {
+        @include fade-in;
+    }
 	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: $subdued-color;
@@ -143,6 +154,7 @@
    }
    .reg-feedback {
        font-size: 85%;
+        margin-bottom: 1em;
    }
    .reg-feedback,
@@ -173,7 +185,7 @@
        padding: 0.5em 0;
    }
    .pure-button {
-        border-radius: $chatbox-border-radius;
+        border-radius: $button-border-radius;
    }
    .button-primary {
        color: white;
@@ -195,7 +207,7 @@
            legend {
                color: $text-color;
                font-size: 125%;
-                margin-bottom: 2em;
+                margin-bottom: 1em;
            }
            input[type=checkbox] {
                display: block;

--- a/sass/converse/_controlbox.scss
+++ b/sass/converse/_controlbox.scss
@@ -6,5 +6,11 @@
            height: 289px;
            @include calc(height, '100% - #{$controlbox-head-height}');
        }
+        .brand-heading-container {
+            .brand-heading {
+                margin-left: 1em;
+            }
+        }
    }
 }
--- a/sass/inverse/_controlbox.scss
+++ b/sass/inverse/_controlbox.scss
@@ -14,7 +14,9 @@
        }
        .brand-heading-container {
+            text-align: center;
            .brand-heading {
+                text-align: center;
                font-size: 600%;
                padding: 0.7em 0 0 0;
                opacity: 0.8;
@@ -31,6 +33,7 @@
        }
        &.logged-out {
+            @include fade-in;
            width: 100%;
            .box-flyout {
                width: 100%;
@@ -52,17 +55,8 @@
            padding: 6px 0 6px 0;
            margin-top: 0.5em;
        }
-        #converse-register,
-        #converse-login {
-            margin: 3em 30% 3em 30%;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            #converse-register,
-            #converse-login {
-                margin: 3em 10% 3em 10%;
-            }
-        }
        #converse-register, #converse-login {
+            margin: 3em 30% 3em 30%;
            .title, .instructions, label {
                margin: 1em 0;
            }
@@ -70,6 +64,19 @@
            input[type=button] {
                width: auto;
            }
+            input {
+                width: 100%;
+                margin: 1em 0;
+                &.pure-button {
+                    margin: 1em 0.5em;
+                }
+            }
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            #converse-register,
+            #converse-login {
+                margin: 3em 10% 3em 10%;
+            }
        }
        #controlbox-tabs {
            /* single tab */
@@ -86,10 +93,11 @@
                }
            }
        }
+        .controlbox-panes {
+            background-color: white;
+        }
        .controlbox-pane {
            @include calc(height, '100% - #{$controlbox-head-height}');
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
        }
    }
 }
--- a/sass/inverse/_core.scss
+++ b/sass/inverse/_core.scss
@@ -8,6 +8,10 @@ body {
    .brand-heading {
        font-size: 600%;
        margin-left: -10%;
+        &.fade-in {
+            @include fade-in;
+            @include animation-delay(2s);
+        }
        .icon-conversejs {
            font-size: 88%;
        }
@@ -40,10 +44,10 @@ body {
    form {
        &.pure-form.converse-form {
            margin: 1em;
            input[type=checkbox] {
                margin-left: 1em;
                display: inline;
+                margin-bottom: 2em;
            }
            input[type=text],
            input[type=password],

--- a/sass/inverse/_variables.scss
+++ b/sass/inverse/_variables.scss
@@ -87,7 +87,7 @@ $online-color: $green !default;
 $error-color: $darkest-red !default;
 $button-border-radius: 5px !default;
-$chatbox-border-radius: 7px !default;
+$chatbox-border-radius: 0 !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;

--- a/src/converse-controlbox.js
+++ b/src/converse-controlbox.js
@@ -202,7 +202,7 @@
            _converse.ControlBoxView = _converse.ChatBoxView.extend({
                tagName: 'div',
-                className: 'chatbox',
+                className: 'chatbox fade-in',
                id: 'controlbox',
                events: {
                    'click a.close-chatbox-button': 'close',
@@ -273,9 +273,12 @@
                },
                 createBrandHeadingElement () {
-                    const div = document.createElement('div');
+                    return tpl_brand_heading();
-                    div.innerHTML = tpl_brand_heading();
+                },
-                    return div.firstChild;
+                insertBrandHeading () {
+                    const el = this.el.querySelector('.controlbox-head');
+                    el.insertAdjacentHTML('beforeend', this.createBrandHeadingElement());
                },
                renderLoginPanel () {
@@ -285,8 +288,7 @@
                    });
                    this.loginpanel.render();
                    this.el.classList.add("logged-out");
-                    const el = document.getElementById('converse-login-panel');
+                    this.insertBrandHeading();
-                    el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
                    return this;
                },
@@ -343,13 +345,11 @@
                },
                onControlBoxToggleHidden () {
-                    const that = this;
-                    utils.fadeIn(this.el, function () {
                    _converse.controlboxtoggle.updateOnlineCount();
                    utils.refreshWebkit();
-                        that.model.set('closed', false);
+                    this.model.set('closed', false);
-                        _converse.emit('controlBoxOpened', that);
+                    this.el.classList.remove('hidden');
-                    });
+                    _converse.emit('controlBoxOpened', this);
                },
                show () {
@@ -389,7 +389,7 @@
            _converse.LoginPanel = Backbone.View.extend({
                tagName: 'div',
                id: "converse-login-panel",
-                className: 'controlbox-pane',
+                className: 'controlbox-pane fade-in',
                events: {
                    'submit form#converse-login': 'authenticate'
                },
@@ -422,7 +422,6 @@
                        'label_username': __('Jabber ID:'),
                        'label_password': __('Password:'),
                        'label_anon_login': __('Click here to log in anonymously'),
-                        'label_login': __('Log In'),
                        'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
                        'placeholder_password': __('password')
                    })

--- a/src/converse-inverse.js
+++ b/src/converse-inverse.js
@@ -55,6 +55,11 @@
                    const div = document.createElement('div');
                    div.innerHTML = tpl_brand_heading();
                    return div.firstChild;
+                },
+                insertBrandHeading () {
+                    const el = document.getElementById('converse-login-panel');
+                    el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
                }
            },

--- a/src/converse-register.js
+++ b/src/converse-register.js
@@ -18,6 +18,7 @@
            "tpl!register_panel",
            "tpl!registration_form",
            "tpl!registration_request",
+            "tpl!form_input",
            "tpl!spinner",
            "converse-controlbox"
    ], factory);
@@ -30,6 +31,7 @@
            tpl_register_panel,
            tpl_registration_form,
            tpl_registration_request,
+            tpl_form_input,
            tpl_spinner
        ) {
@@ -132,19 +134,12 @@
            const { _converse } = this,
                { __ } = _converse;
-            // Add new templates
-            _converse.templates.form_username = tpl_form_username;
-            _converse.templates.register_panel = tpl_register_panel;
-            _converse.templates.registration_form = tpl_registration_form;
-            _converse.templates.registration_request = tpl_registration_request;
            _converse.api.settings.update({
                allow_registration: true,
                domain_placeholder: __(" e.g. conversejs.org"),  // Placeholder text shown in the domain input on the registration form
                providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page
            });
            _converse.RegistrationRouter = Backbone.Router.extend({
                initialize () {
@@ -169,7 +164,7 @@
            _converse.RegisterPanel = Backbone.View.extend({
                tagName: 'div',
                id: "converse-register-panel",
-                className: 'controlbox-pane',
+                className: 'controlbox-pane fade-in',
                events: {
                    'submit form#converse-register': 'onProviderChosen'
                },
@@ -242,7 +237,9 @@
                    }
                    // Send an IQ stanza to get all required data fields
                    conn._addSysHandler(this.onRegistrationFields.bind(this), null, "iq", null, null);
-                    conn.send($iq({type: "get"}).c("query", {xmlns: Strophe.NS.REGISTER}).tree());
+                    const stanza = $iq({type: "get"}).c("query", {xmlns: Strophe.NS.REGISTER}).tree();
+                    stanza.setAttribute("id", conn.getUniqueId("sendIQ"));
+                    conn.send(stanza);
                    conn.connected = false;
                    return true;
                },
@@ -253,6 +250,13 @@
                     *  Parameters:
                     *    (XMLElement) elem - The query stanza.
                     */
+                    if (stanza.getAttribute("type") === "error") {
+                        _converse.connection._changeConnectStatus(
+                            Strophe.Status.REGIFAIL,
+                            __('Something went wrong while establishing a connection with "%1$s". Are you sure it exists?', this.domain)
+                        );
+                        return false;
+                    }
                    if (stanza.getElementsByTagName("query").length !== 1) {
                        _converse.connection._changeConnectStatus(Strophe.Status.REGIFAIL, "unknown");
                        return false;
@@ -383,6 +387,40 @@
                    }
                },
+                renderLegacyRegistrationForm (form) {
+                    _.each(_.keys(this.fields), (key) => {
+                        if (key === "username") {
+                            form.insertAdjacentHTML(
+                                'beforeend',
+                                tpl_form_username({
+                                    'domain': ` @${this.domain}`,
+                                    'name': key,
+                                    'type': "text",
+                                    'label': key,
+                                    'value': '',
+                                    'required': true
+                                })
+                            );
+                        } else {
+                            form.insertAdjacentHTML(
+                                'beforeend',
+                                tpl_form_input({
+                                    'label': key, 
+                                    'name': key,
+                                    'placeholder': key,
+                                    'required': true,
+                                    'type': (key === 'password' || key === 'email') ? key : "text",
+                                    'value': ''
+                                })
+                            );
+                        }
+                    });
+                    // Show urls
+                    _.each(this.urls, (url) => {
+                        $(form).append($('<a target="blank"></a>').attr('href', url).text(url));
+                    });
+                },
                renderRegistrationForm (stanza) {
                    /* Renders the registration form based on the XForm fields
                     * received from the XMPP server.
@@ -392,44 +430,29 @@
                     */
                    this.model.set('registration_form_rendered', true);
-                    const $form = this.$('form'),
+                    const form = this.el.querySelector('form'),
+                          $form = $(form),
                          $stanza = $(stanza);
-                    let $fields, $input;
+                    let $fields;
-                    $form.empty().append(tpl_registration_form({
+                    // Hide and show at the end so that we get a fade-in animation
+                    form.classList.add('hidden');
+                    form.innerHTML = tpl_registration_form({
+                        '__': _converse.__,
                        'domain': this.domain,
                        'title': this.title,
                        'instructions': this.instructions
-                    }));
-                    if (this.form_type === 'xform') {
-                        $fields = $stanza.find('field');
-                        _.each($fields, (field) => {
-                            $form.append(utils.xForm2webForm.bind(this, field, stanza));
                    });
-                    } else {
+                    if (this.form_type === 'xform') {
-                        // Show fields
+                        _.each(stanza.querySelectorAll('field'), (field) => {
-                        _.each(_.keys(this.fields), (key) => {
+                            form.insertAdjacentHTML(
-                            if (key === "username") {
+                                'beforeend',
-                                $input = tpl_form_username({
+                                utils.xForm2webForm(field, stanza, this.domain)
-                                    domain: ` @${this.domain}`,
+                            );
-                                    name: key,
-                                    type: "text",
-                                    label: key,
-                                    value: '',
-                                    required: 1
                        });
                    } else {
-                                $form.append(`<label>${key}</label>`);
+                        this.renderLegacyRegistrationForm(form);
-                                $input = $(`<input placeholder="${key}" name="${key}"></input>`);
-                                if (key === 'password' || key === 'email') {
-                                    $input.attr('type', key);
-                                }
-                            }
-                            $form.append($input);
-                        });
-                        // Show urls
-                        _.each(this.urls, (url) => {
-                            $form.append($('<a target="blank"></a>').attr('href', url).text(url));
-                        });
                    }
                    if (this.fields) {
                        $form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`);
@@ -443,6 +466,7 @@
                    if (_converse.registration_domain) {
                        $form.find('input[type=button]').hide();
                    }
+                    form.classList.remove('hidden');
                },
                reportErrors (stanza) {

--- a/src/form-utils.js
+++ b/src/form-utils.js
@@ -19,7 +19,8 @@
        "tpl!form_checkbox",
        "tpl!form_username",
        "tpl!form_input",
-        "tpl!form_captcha"
+        "tpl!form_captcha",
+        "tpl!form_url",
    ], factory);
 }(this, function (
        sizzle,
@@ -32,7 +33,8 @@
        tpl_form_checkbox,
        tpl_form_username,
        tpl_form_input,
-        tpl_form_captcha
+        tpl_form_captcha,
+        tpl_form_url
    ) {
    "use strict";
@@ -69,7 +71,7 @@
        )[0];
    };
-    u.xForm2webForm = function (field, stanza) {
+    u.xForm2webForm = function (field, stanza, domain) {
        /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
         * and turns it into an HTML field.
         *
@@ -79,6 +81,7 @@
         *  Parameters:
         *      (XMLElement) field - the field to convert
         */
+        if (field.getAttribute('type')) {
            if (field.getAttribute('type') === 'list-single' ||
                field.getAttribute('type') === 'list-multi') {
@@ -104,19 +107,17 @@
                    'options': options.join(''),
                    'multiple': (field.getAttribute('type') === 'list-multi'),
                    'required': _.isNil(field.querySelector('required'))
-            })
+                });
            } else if (field.getAttribute('type') === 'fixed') {
                const text = _.get(field.querySelector('value'), 'textContent');
-            const el = u.stringToDOM('<p class="form-help">');
+                return '<p class="form-help">'+text+'</p>';
-            el.textContent = text;
-            return el;
            } else if (field.getAttribute('type') === 'jid-multi') {
                return tpl_form_textarea({
                    'name': field.getAttribute('var'),
                    'label': field.getAttribute('label') || '',
                    'value': _.get(field.querySelector('value'), 'textContent'),
                    'required': _.isNil(field.querySelector('required'))
-            })
+                });
            } else if (field.getAttribute('type') === 'boolean') {
                return tpl_form_checkbox({
                    'name': field.getAttribute('var'),
@@ -124,24 +125,31 @@
                    'label': field.getAttribute('label') || '',
                    'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
                    'required': _.isNil(field.querySelector('required'))
-            })
+                });
-        } else if (field.getAttribute('type') && field.getAttribute('var') === 'username') {
+            } else if (field.getAttribute('var') === 'url') {
+                return tpl_form_url({
+                    'label': field.getAttribute('label') || '',
+                    'value': _.get(field.querySelector('value'), 'textContent')
+                });
+            } else if (field.getAttribute('var') === 'username') {
                return tpl_form_username({
-                'domain': ' @'+this.domain,
+                    'domain': ' @'+domain,
                    'name': field.getAttribute('var'),
                    'type': XFORM_TYPE_MAP[field.getAttribute('type')],
                    'label': field.getAttribute('label') || '',
                    'value': _.get(field.querySelector('value'), 'textContent'),
                    'required': _.isNil(field.querySelector('required'))
-            })
+                });
-        } else if (field.getAttribute('type')) {
+            } else {
                return tpl_form_input({
+                    'label': field.getAttribute('label') || '',
                    'name': field.getAttribute('var'),
+                    'placeholder': null,
+                    'required': _.isNil(field.querySelector('required')),
                    'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
+                    'value': _.get(field.querySelector('value'), 'textContent')
-                'value': _.get(field.querySelector('value'), 'textContent'),
+                });
-                'required': _.isNil(field.querySelector('required'))
+            }
-            })
        } else {
            if (field.getAttribute('var') === 'ocr') { // Captcha
                const uri = field.querySelector('uri');
@@ -152,7 +160,7 @@
                    'data': _.get(el, 'textContent'),
                    'type': uri.getAttribute('type'),
                    'required': _.isNil(field.querySelector('required'))
-                })
+                });
            }
        }
    }

--- a/src/templates/converse_brand_heading.html
+++ b/src/templates/converse_brand_heading.html
@@ -3,4 +3,4 @@
        <i class="icon-conversejs"></i>
        <span class="brand-name">converse</span>
    </div>
-<span>
+</span>
--- a/src/templates/form_input.html
+++ b/src/templates/form_input.html
 <label>
    {{{label}}}
    <input name="{{{name}}}" type="{{{type}}}" 
+        {[ if (placeholder) { ]} placeholder="{{{placeholder}}}" {[ } ]}
        {[ if (value) { ]} value="{{{value}}}" {[ } ]}
        {[ if (required) { ]} class="required" {[ } ]} >
 </label>
--- a/src/templates/login_panel.html
+++ b/src/templates/login_panel.html
@@ -12,13 +12,13 @@
        {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
            <label>{{{label_username}}}</label>
-            <p class="form-help invalid-jid-msg error hidden">{{{_('Please enter a valid XMPP address')}}}</p>
+            <p class="form-help fade-in invalid-jid-msg error hidden">{{{_('Please enter a valid XMPP address')}}}</p>
            <input type="text" name="jid" placeholder="{{{placeholder_username}}}">
            {[ if (authentication !== EXTERNAL) { ]}
                <label>{{{label_password}}}</label>
                <input type="password" name="password" placeholder="{{{placeholder_password}}}">
            {[ } ]}
-            <input class="pure-button button-primary" type="submit" value="{{{label_login}}}">
+            <input class="pure-button button-primary" type="submit" value="{{{__('Submit')}}}">
        {[ } ]}
        {[ if (authentication == ANONYMOUS) { ]}
            <input class="pure-button button-primary login-anon" type="submit" value="{{{label_anon_login}}}"/>

--- a/src/templates/register_link.html
+++ b/src/templates/register_link.html
-<p>{{{ __("Don't have a chat account?") }}}</p>
+<div class="switch-form">
-<p style="margin-top: 0.5em">
+    <p>{{{ __("Don't have a chat account?") }}}</p>
-    <a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account here")}}}</a>
+    <p><a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account")}}}</a></p>
-</p>
+</div>
--- a/src/templates/register_panel.html
+++ b/src/templates/register_panel.html
@@ -2,7 +2,7 @@
    <legend>{{{__("Account Registration")}}}</legend>
    <span class="reg-feedback"></span>
-    <label>{{{__("Please enter the XMPP provider you want to register with:")}}}</label>
+    <label>{{{__("Please enter the XMPP provider to register with:")}}}</label>
    <p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
    {[ if (default_domain) { ]}
@@ -14,7 +14,9 @@
    {[ } ]}
 </form>
-<p style="margin-top: 1em">{{{ __("Already have a Jabber/XMPP chat account?") }}}</p>
+<div class="switch-form">
-<p style="margin-top: 0.5em">
+    <p>{{{ __("Already have a chat account?") }}}</p>
+    <p>
        <a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
-</p>
+    </p>
+</div>
--- a/src/templates/registration_form.html
+++ b/src/templates/registration_form.html
-<p class="provider-title">{{{domain}}}</p>
+<legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
 <p class="title">{{{title}}}</p>
 <p class="instructions">{{{instructions}}}</p>