Commit be7f8ab4 authored by JC Brand's avatar JC Brand

Use a virtual dom to render the login form

parent 2203e950
......@@ -1203,6 +1203,12 @@
"repeat-element": "1.1.2"
}
},
"browser-split": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.1.tgz",
"integrity": "sha1-ewl1dPjj6tYG+0Zk5krf3aKYGpM=",
"dev": true
},
"browserslist": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
......@@ -1258,6 +1264,12 @@
}
}
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
"dev": true
},
"caniuse-lite": {
"version": "1.0.30000718",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
......@@ -1920,6 +1932,12 @@
}
}
},
"dom-walk": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
"integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
"dev": true
},
"domelementtype": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
......@@ -2047,6 +2065,17 @@
"integrity": "sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=",
"dev": true
},
"error": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/error/-/error-4.4.0.tgz",
"integrity": "sha1-v2n/JR+0onnBmtzNqmth6Q2b8So=",
"dev": true,
"requires": {
"camelize": "1.0.0",
"string-template": "0.2.1",
"xtend": "4.0.1"
}
},
"error-ex": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
......@@ -2260,6 +2289,15 @@
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"dev": true
},
"ev-store": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/ev-store/-/ev-store-7.0.0.tgz",
"integrity": "sha1-GrDH+CE2UF3XSzHRdwHLK+bSZVg=",
"dev": true,
"requires": {
"individual": "3.0.0"
}
},
"event-emitter": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
......@@ -3567,6 +3605,16 @@
"is-glob": "2.0.1"
}
},
"global": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
"integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
"dev": true,
"requires": {
"min-document": "2.19.0",
"process": "0.5.2"
}
},
"globals": {
"version": "9.18.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
......@@ -4126,6 +4174,12 @@
"repeating": "2.0.1"
}
},
"individual": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-3.0.0.tgz",
"integrity": "sha1-58pPhfiVewGHNPKFdQ3CLsL5hi0=",
"dev": true
},
"infinity-agent": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
......@@ -4323,6 +4377,12 @@
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
"dev": true
},
"is-object": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
"integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
"dev": true
},
"is-path-cwd": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
......@@ -4875,6 +4935,15 @@
"mime-db": "1.29.0"
}
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
"dev": true,
"requires": {
"dom-walk": "0.1.1"
}
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
......@@ -4988,6 +5057,12 @@
"inherits": "2.0.3"
}
},
"next-tick": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
"integrity": "sha1-ddpKkn7liH45BliABltzNkE7MQ0=",
"dev": true
},
"node-emoji": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
......@@ -7907,6 +7982,12 @@
"integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=",
"dev": true
},
"process": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
"integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
"dev": true
},
"process-nextick-args": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
......@@ -9014,6 +9095,12 @@
"strip-ansi": "3.0.1"
}
},
"string-template": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
"integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=",
"dev": true
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
......@@ -9527,6 +9614,12 @@
"integrity": "sha1-R84j7Y1Ord+p1LjvAHG2zxB418g=",
"dev": true
},
"vdom-parser": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/vdom-parser/-/vdom-parser-1.4.1.tgz",
"integrity": "sha1-tmFo/Su+yBl0++X9Lk5nd9/Bc+0=",
"dev": true
},
"verror": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
......@@ -9546,6 +9639,22 @@
}
}
},
"virtual-dom": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/virtual-dom/-/virtual-dom-2.1.1.tgz",
"integrity": "sha1-gO2i1IG57eDASRGM78tKBfIdE3U=",
"dev": true,
"requires": {
"browser-split": "0.0.1",
"error": "4.4.0",
"ev-store": "7.0.0",
"global": "4.3.2",
"is-object": "1.0.1",
"next-tick": "0.2.2",
"x-is-array": "0.1.0",
"x-is-string": "0.1.0"
}
},
"wait-until-promise": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wait-until-promise/-/wait-until-promise-1.0.0.tgz",
......@@ -9642,6 +9751,18 @@
"slide": "1.1.6"
}
},
"x-is-array": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/x-is-array/-/x-is-array-0.1.0.tgz",
"integrity": "sha1-3lIBcdR7P0FvVYfWKbidJrEtwp0=",
"dev": true
},
"x-is-string": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
"integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
"dev": true
},
"xdg-basedir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
......
......@@ -35,6 +35,8 @@ require.config({
"lodash.noconflict": "src/lodash.noconflict",
"pluggable": "node_modules/pluggable.js/dist/pluggable",
"polyfill": "src/polyfill",
"virtual-dom": "node_modules/virtual-dom/dist/virtual-dom",
"vdom-parser": "node_modules/vdom-parser/dist",
"sizzle": "node_modules/jquery/sizzle/dist/sizzle",
"strophe": "node_modules/strophe.js/strophe",
"strophe.disco": "node_modules/strophejs-plugin-disco/strophe.disco",
......
......@@ -10,6 +10,8 @@
define(["jquery.noconflict",
"converse-core",
"lodash.fp",
"virtual-dom",
"vdom-parser",
"tpl!add_contact_dropdown",
"tpl!add_contact_form",
"tpl!converse_brand_heading",
......@@ -32,6 +34,8 @@
$,
converse,
fp,
vdom,
vdom_parser,
tpl_add_contact_dropdown,
tpl_add_contact_form,
tpl_brand_heading,
......@@ -423,7 +427,7 @@
},
render () {
this.el.innerHTML = tpl_login_panel({
const html = tpl_login_panel({
'__': __,
'ANONYMOUS': _converse.ANONYMOUS,
'EXTERNAL': _converse.EXTERNAL,
......@@ -433,9 +437,15 @@
'authentication': _converse.authentication,
'label_anon_login': __('Click here to log in anonymously'),
'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
})
});
const form = this.el.querySelector('form');
if (_.isNull(form)) {
this.el.innerHTML = html;
} else {
const patches = vdom.diff(vdom_parser(form), vdom_parser(html));
vdom.patch(form, patches);
}
this.renderConnectionFeedback();
this.$el.find('input#jid').focus();
return this;
},
......@@ -453,9 +463,15 @@
}
},
showSpinner () {
showSpinner (only_submit_button=false) {
const form = this.el.querySelector('form');
if (only_submit_button) {
const button = form.querySelector('input[type=submit]');
button.classList.add('hidden');
button.insertAdjacentHTML('afterend', '<span class="spinner login-submit"/>');
} else {
form.innerHTML = tpl_spinner();
}
return this;
},
......@@ -497,7 +513,7 @@
} else if (_converse.default_domain && !_.includes(jid, '@')) {
jid = jid + '@' + _converse.default_domain;
}
this.showSpinner().connect(jid, password);
this.showSpinner(true).connect(jid, password);
return false;
},
......
......@@ -64,13 +64,16 @@
render: function (cfg) {
const { _converse } = this.__super__;
const form = this.el.querySelector('form');
this.__super__.render.apply(this, arguments);
if (_.isNull(form)) {
if (_converse.allow_registration) {
this.el.insertAdjacentHTML(
'beforeend',
tpl_register_link({'__': _converse.__})
);
}
}
return this;
}
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment