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 @@ ...@@ -1203,6 +1203,12 @@
"repeat-element": "1.1.2" "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": { "browserslist": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
...@@ -1258,6 +1264,12 @@ ...@@ -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": { "caniuse-lite": {
"version": "1.0.30000718", "version": "1.0.30000718",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
...@@ -1920,6 +1932,12 @@ ...@@ -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": { "domelementtype": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
...@@ -2047,6 +2065,17 @@ ...@@ -2047,6 +2065,17 @@
"integrity": "sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=", "integrity": "sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=",
"dev": true "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": { "error-ex": {
"version": "1.3.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
...@@ -2260,6 +2289,15 @@ ...@@ -2260,6 +2289,15 @@
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"dev": true "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": { "event-emitter": {
"version": "0.3.5", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz", "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
...@@ -3567,6 +3605,16 @@ ...@@ -3567,6 +3605,16 @@
"is-glob": "2.0.1" "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": { "globals": {
"version": "9.18.0", "version": "9.18.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
...@@ -4126,6 +4174,12 @@ ...@@ -4126,6 +4174,12 @@
"repeating": "2.0.1" "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": { "infinity-agent": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz", "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
...@@ -4323,6 +4377,12 @@ ...@@ -4323,6 +4377,12 @@
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=", "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
"dev": true "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": { "is-path-cwd": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz", "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
...@@ -4875,6 +4935,15 @@ ...@@ -4875,6 +4935,15 @@
"mime-db": "1.29.0" "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": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
...@@ -4988,6 +5057,12 @@ ...@@ -4988,6 +5057,12 @@
"inherits": "2.0.3" "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": { "node-emoji": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
...@@ -7907,6 +7982,12 @@ ...@@ -7907,6 +7982,12 @@
"integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=", "integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=",
"dev": true "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": { "process-nextick-args": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
...@@ -9014,6 +9095,12 @@ ...@@ -9014,6 +9095,12 @@
"strip-ansi": "3.0.1" "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": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
...@@ -9527,6 +9614,12 @@ ...@@ -9527,6 +9614,12 @@
"integrity": "sha1-R84j7Y1Ord+p1LjvAHG2zxB418g=", "integrity": "sha1-R84j7Y1Ord+p1LjvAHG2zxB418g=",
"dev": true "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": { "verror": {
"version": "1.10.0", "version": "1.10.0",
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
...@@ -9546,6 +9639,22 @@ ...@@ -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": { "wait-until-promise": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/wait-until-promise/-/wait-until-promise-1.0.0.tgz", "resolved": "https://registry.npmjs.org/wait-until-promise/-/wait-until-promise-1.0.0.tgz",
...@@ -9642,6 +9751,18 @@ ...@@ -9642,6 +9751,18 @@
"slide": "1.1.6" "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": { "xdg-basedir": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz", "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
......
...@@ -35,6 +35,8 @@ require.config({ ...@@ -35,6 +35,8 @@ require.config({
"lodash.noconflict": "src/lodash.noconflict", "lodash.noconflict": "src/lodash.noconflict",
"pluggable": "node_modules/pluggable.js/dist/pluggable", "pluggable": "node_modules/pluggable.js/dist/pluggable",
"polyfill": "src/polyfill", "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", "sizzle": "node_modules/jquery/sizzle/dist/sizzle",
"strophe": "node_modules/strophe.js/strophe", "strophe": "node_modules/strophe.js/strophe",
"strophe.disco": "node_modules/strophejs-plugin-disco/strophe.disco", "strophe.disco": "node_modules/strophejs-plugin-disco/strophe.disco",
......
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
define(["jquery.noconflict", define(["jquery.noconflict",
"converse-core", "converse-core",
"lodash.fp", "lodash.fp",
"virtual-dom",
"vdom-parser",
"tpl!add_contact_dropdown", "tpl!add_contact_dropdown",
"tpl!add_contact_form", "tpl!add_contact_form",
"tpl!converse_brand_heading", "tpl!converse_brand_heading",
...@@ -32,6 +34,8 @@ ...@@ -32,6 +34,8 @@
$, $,
converse, converse,
fp, fp,
vdom,
vdom_parser,
tpl_add_contact_dropdown, tpl_add_contact_dropdown,
tpl_add_contact_form, tpl_add_contact_form,
tpl_brand_heading, tpl_brand_heading,
...@@ -423,7 +427,7 @@ ...@@ -423,7 +427,7 @@
}, },
render () { render () {
this.el.innerHTML = tpl_login_panel({ const html = tpl_login_panel({
'__': __, '__': __,
'ANONYMOUS': _converse.ANONYMOUS, 'ANONYMOUS': _converse.ANONYMOUS,
'EXTERNAL': _converse.EXTERNAL, 'EXTERNAL': _converse.EXTERNAL,
...@@ -433,9 +437,15 @@ ...@@ -433,9 +437,15 @@
'authentication': _converse.authentication, 'authentication': _converse.authentication,
'label_anon_login': __('Click here to log in anonymously'), 'label_anon_login': __('Click here to log in anonymously'),
'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'), '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.renderConnectionFeedback();
this.$el.find('input#jid').focus();
return this; return this;
}, },
...@@ -453,9 +463,15 @@ ...@@ -453,9 +463,15 @@
} }
}, },
showSpinner () { showSpinner (only_submit_button=false) {
const form = this.el.querySelector('form'); const form = this.el.querySelector('form');
form.innerHTML = tpl_spinner(); 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; return this;
}, },
...@@ -497,7 +513,7 @@ ...@@ -497,7 +513,7 @@
} else if (_converse.default_domain && !_.includes(jid, '@')) { } else if (_converse.default_domain && !_.includes(jid, '@')) {
jid = jid + '@' + _converse.default_domain; jid = jid + '@' + _converse.default_domain;
} }
this.showSpinner().connect(jid, password); this.showSpinner(true).connect(jid, password);
return false; return false;
}, },
......
...@@ -64,12 +64,15 @@ ...@@ -64,12 +64,15 @@
render: function (cfg) { render: function (cfg) {
const { _converse } = this.__super__; const { _converse } = this.__super__;
const form = this.el.querySelector('form');
this.__super__.render.apply(this, arguments); this.__super__.render.apply(this, arguments);
if (_converse.allow_registration) { if (_.isNull(form)) {
this.el.insertAdjacentHTML( if (_converse.allow_registration) {
'beforeend', this.el.insertAdjacentHTML(
tpl_register_link({'__': _converse.__}) 'beforeend',
); tpl_register_link({'__': _converse.__})
);
}
} }
return this; 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