From 7e4fb52f8dfc812a2df11e0f40e03de7949822d0 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sat, 16 Sep 2017 18:11:31 +0200 Subject: [PATCH] Render register and login forms via links --- css/converse.css | 21 +++-- css/inverse.css | 46 +++++++---- docs/source/events.rst | 24 +++++- sass/_controlbox.scss | 18 +++-- sass/_core.scss | 1 + sass/inverse/_controlbox.scss | 27 +++++-- sass/inverse/_core.scss | 1 + sass/inverse/_variables.scss | 1 + src/converse-controlbox.js | 47 ++++++----- src/converse-register.js | 98 ++++++++++++++++------- src/templates/brand_heading.html | 2 +- src/templates/controlbox.html | 1 - src/templates/converse_brand_heading.html | 10 ++- src/templates/inverse_brand_heading.html | 4 +- src/templates/login_panel.html | 6 +- src/templates/register_link.html | 4 + src/templates/register_panel.html | 12 ++- 17 files changed, 220 insertions(+), 103 deletions(-) create mode 100644 src/templates/register_link.html diff --git a/css/converse.css b/css/converse.css index df106ae26..a16e3c913 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1315,7 +1315,8 @@ #converse-embedded-chat form.pure-form.converse-form legend, #conversejs form.pure-form.converse-form legend { color: #777; - font-size: 125%; } + font-size: 125%; + margin-bottom: 2em; } #converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #conversejs form.pure-form.converse-form input[type=checkbox] { display: block; } @@ -1948,14 +1949,16 @@ font-weight: bold; } #conversejs #controlbox .conn-feedback p.error { color: #A53214; } - #conversejs #controlbox #login-dialog .brand-heading { - font-size: 150%; } - #conversejs #controlbox #login-dialog .brand-name { - font-size: 120%; } - #conversejs #controlbox #login-dialog .register-account { + #conversejs #controlbox .brand-heading-container { + text-align: center; } + #conversejs #controlbox .brand-heading-container .brand-heading { + font-size: 150%; } + #conversejs #controlbox .brand-heading-container .brand-name { + font-size: 120%; } + #conversejs #controlbox .toggle-register-login { font-weight: bold; } #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { - margin-top: 2em; } + margin: 2em 0; } #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { height: auto; white-space: normal; } @@ -1963,7 +1966,7 @@ color: #3AA569; } #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { width: 100%; - margin: 0.5em 0; } + margin: 1em 0; } #conversejs #controlbox #users .add-converse-contact { margin: 0 0 0.75em 0; } #conversejs #controlbox #chatrooms form.add-chatroom { @@ -2185,6 +2188,8 @@ width: 40px; padding: 1px; float: right; } + #conversejs #controlbox .controlbox-panes { + background-color: white; } #conversejs #controlbox .controlbox-pane { padding: 1em; background-color: white; diff --git a/css/inverse.css b/css/inverse.css index 4498095de..c6c289c40 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -1315,7 +1315,8 @@ #converse-embedded-chat form.pure-form.converse-form legend, #conversejs form.pure-form.converse-form legend { color: #777; - font-size: 125%; } + font-size: 125%; + margin-bottom: 2em; } #converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #conversejs form.pure-form.converse-form input[type=checkbox] { display: block; } @@ -1409,7 +1410,8 @@ body { #conversejs { width: 100vw; - height: 100vh; } + height: 100vh; + left: 0; } #conversejs form.pure-form.converse-form { margin: 1em; } #conversejs form.pure-form.converse-form input[type=checkbox] { @@ -2016,14 +2018,16 @@ body { font-weight: bold; } #conversejs #controlbox .conn-feedback p.error { color: #A53214; } - #conversejs #controlbox #login-dialog .brand-heading { - font-size: 150%; } - #conversejs #controlbox #login-dialog .brand-name { - font-size: 120%; } - #conversejs #controlbox #login-dialog .register-account { + #conversejs #controlbox .brand-heading-container { + text-align: center; } + #conversejs #controlbox .brand-heading-container .brand-heading { + font-size: 150%; } + #conversejs #controlbox .brand-heading-container .brand-name { + font-size: 120%; } + #conversejs #controlbox .toggle-register-login { font-weight: bold; } #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { - margin-top: 2em; } + margin: 2em 0; } #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { height: auto; white-space: normal; } @@ -2031,7 +2035,7 @@ body { color: #3AA569; } #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { width: 100%; - margin: 0.5em 0; } + margin: 1em 0; } #conversejs #controlbox #users .add-converse-contact { margin: 0 0 0.75em 0; } #conversejs #controlbox #chatrooms form.add-chatroom { @@ -2253,6 +2257,8 @@ body { width: 40px; padding: 1px; float: right; } + #conversejs #controlbox .controlbox-panes { + background-color: white; } #conversejs #controlbox .controlbox-pane { padding: 1.2em; background-color: white; @@ -2317,13 +2323,18 @@ body { margin: 0; } #conversejs #controlbox .conn-feedback { padding-top: 2em; } - #conversejs #controlbox #login-dialog .brand-heading { + #conversejs #controlbox .toggle-register-login { + line-height: 30px; } + #conversejs #controlbox .brand-heading-container .brand-heading { font-size: 600%; - margin: 0.5em 0 0 0; + padding: 0.7em 0 0 0; opacity: 0.8; color: #387592; } - #conversejs #controlbox #login-dialog .brand-subtitle { + #conversejs #controlbox .brand-heading-container .brand-subtitle { font-size: 90%; } + @media screen and (max-width: 480px) { + #conversejs #controlbox .brand-heading-container .brand-heading { + font-size: 400%; } } #conversejs #controlbox.logged-out { width: 100%; } #conversejs #controlbox.logged-out .box-flyout { @@ -2337,13 +2348,16 @@ body { z-index: 1; background-color: #578EA9; } #conversejs #controlbox .controlbox-head { - height: 63px; + height: 0; padding: 6px 0 6px 0; margin-top: 0.5em; } - #conversejs #controlbox #converse-register { - margin: 4em 30% 0 30%; } + #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { - margin: 4em 30% 4em 30%; } + margin: 3em 30% 3em 30%; } + @media screen and (max-width: 480px) { + #conversejs #controlbox #converse-register, + #conversejs #controlbox #converse-login { + margin: 3em 10% 3em 10%; } } #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label { margin: 1em 0; } #conversejs #controlbox #converse-register input[type=submit], diff --git a/docs/source/events.rst b/docs/source/events.rst index 7ab4568f8..1def002bb 100644 --- a/docs/source/events.rst +++ b/docs/source/events.rst @@ -19,13 +19,14 @@ The core events, which are also promises are: * `cachedRoster`_ * `chatBoxesFetched`_ +* `controlboxInitialized`_ (only via the `converse-controlbox` plugin) * `pluginsInitialized`_ -* `roster`_ +* `roomsPanelRendered`_ (only via the `converse-muc` plugin) * `rosterContactsFetched`_ * `rosterGroupsFetched`_ * `rosterInitialized`_ +* `roster`_ * `statusInitialized`_ -* `roomsPanelRendered`_ (only via the `converse-muc` plugin) For more info on how to use (or add promises), you can read the :ref:`promises-grouping` in the API documentation. @@ -184,6 +185,25 @@ When a chat buddy's custom status message has changed. ``_converse.on('contactStatusMessageChanged', function (data) { ... });`` +controlboxInitialized +~~~~~~~~~~~~~~~~~~~~~ + +Called when the controlbox has been initialized and therefore exists. + +The controlbox contains the login and register forms when +the user is logged out and a list of the user's contacts and group chats when +logged in. + +``_converse.on('controlboxInitialized', function () { ... });`` + +Also available as an `ES2015 Promise `_: + +.. code-block:: javascript + + _converse.api.waitUntil('controlboxInitialized').then(function () { + // Your code here... + }); + discoInitialized ~~~~~~~~~~~~~~~~ diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 8ce40770a..c6cba8e69 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -127,20 +127,22 @@ } } - #login-dialog { + .brand-heading-container { + text-align: center; .brand-heading { font-size: 150%; } .brand-name { font-size: 120%; } - .register-account { - font-weight: bold; - } + } + + .toggle-register-login { + font-weight: bold; } #converse-register, #converse-login { - margin-top: 2em; + margin: 2em 0; .login-anon { height: auto; white-space: normal; @@ -150,7 +152,7 @@ } input { width: 100%; - margin: 0.5em 0; + margin: 1em 0; } } #users { @@ -436,6 +438,10 @@ } } + .controlbox-panes { + background-color: white; + } + .controlbox-pane { padding: $controlbox-pane-padding; background-color: white; diff --git a/sass/_core.scss b/sass/_core.scss index 881c3b339..2f553e37e 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -195,6 +195,7 @@ legend { color: $text-color; font-size: 125%; + margin-bottom: 2em; } input[type=checkbox] { display: block; diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss index 4282d1a5b..953db4886 100644 --- a/sass/inverse/_controlbox.scss +++ b/sass/inverse/_controlbox.scss @@ -9,16 +9,25 @@ padding-top: 2em; } - #login-dialog { + .toggle-register-login { + line-height: $line-height-huge; + } + + .brand-heading-container { .brand-heading { font-size: 600%; - margin: 0.5em 0 0 0; + padding: 0.7em 0 0 0; opacity: 0.8; color: $blue; } .brand-subtitle { font-size: 90%; } + @media screen and (max-width: $mobile-portrait-length) { + .brand-heading { + font-size: 400%; + } + } } &.logged-out { @@ -38,15 +47,19 @@ background-color: $controlbox-head-color; } .controlbox-head { - height: $controlbox-head-height; + height: 0; padding: 6px 0 6px 0; margin-top: 0.5em; } - #converse-register { - margin: 4em 30% 0 30%; - } + #converse-register, #converse-login { - margin: 4em 30% 4em 30%; + 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 { .title, .instructions, label { diff --git a/sass/inverse/_core.scss b/sass/inverse/_core.scss index d0cc2e171..22d5482fe 100644 --- a/sass/inverse/_core.scss +++ b/sass/inverse/_core.scss @@ -35,6 +35,7 @@ body { #conversejs { width: 100vw; height: 100vh; + left: 0; form { &.pure-form.converse-form { diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss index dc646af93..cc1753e50 100644 --- a/sass/inverse/_variables.scss +++ b/sass/inverse/_variables.scss @@ -106,6 +106,7 @@ $toolbar-color: $greenish-white !default; $line-height-small: 20px !default; $line-height: 22px !default; +$line-height-huge: 30px !default; $controlbox-width: 250px !default; $chat-width: 100% !default; diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index d6622ab96..8706d60b7 100644 --- a/src/converse-controlbox.js +++ b/src/converse-controlbox.js @@ -282,7 +282,7 @@ }); this.loginpanel.render(); this.el.classList.add("logged-out"); - const el = document.getElementById('converse-login'); + const el = document.getElementById('converse-login-panel'); el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild); return this; }, @@ -385,33 +385,14 @@ _converse.LoginPanel = Backbone.View.extend({ tagName: 'div', - id: "login-dialog", + id: "converse-login-panel", className: 'controlbox-pane', events: { 'submit form#converse-login': 'authenticate' }, initialize (cfg) { - cfg.$parent.html(this.$el.html( - tpl_login_panel({ - '__': __, - 'ANONYMOUS': _converse.ANONYMOUS, - 'EXTERNAL': _converse.EXTERNAL, - 'LOGIN': _converse.LOGIN, - 'PREBIND': _converse.PREBIND, - 'auto_login': _converse.auto_login, - 'authentication': _converse.authentication, - 'conn_feedback_class': _converse.connfeedback.get('klass'), - 'conn_feedback_subject': _converse.connfeedback.get('subject'), - 'conn_feedback_message': _converse.connfeedback.get('message'), - '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') - }) - )); + this.insertIntoDOM(cfg); _converse.connfeedback.on('change', this.showConnectionFeedback, this); }, @@ -423,6 +404,28 @@ return this; }, + insertIntoDOM (cfg) { + this.el.innerHTML = tpl_login_panel({ + '__': __, + 'ANONYMOUS': _converse.ANONYMOUS, + 'EXTERNAL': _converse.EXTERNAL, + 'LOGIN': _converse.LOGIN, + 'PREBIND': _converse.PREBIND, + 'auto_login': _converse.auto_login, + 'authentication': _converse.authentication, + 'conn_feedback_class': _converse.connfeedback.get('klass'), + 'conn_feedback_subject': _converse.connfeedback.get('subject'), + 'conn_feedback_message': _converse.connfeedback.get('message'), + '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') + }) + cfg.$parent.html(this.el); + }, + showConnectionFeedback () { const klass = _converse.connfeedback.get('klass'); function insert (text, el) { diff --git a/src/converse-register.js b/src/converse-register.js index b4d2b702c..add1dedf0 100644 --- a/src/converse-register.js +++ b/src/converse-register.js @@ -14,6 +14,7 @@ "form-utils", "converse-core", "tpl!form_username", + "tpl!register_link", "tpl!register_panel", "tpl!registration_form", "tpl!registration_request", @@ -25,6 +26,7 @@ utils, converse, tpl_form_username, + tpl_register_link, tpl_register_panel, tpl_registration_form, tpl_registration_request, @@ -51,34 +53,37 @@ converse.plugins.add('converse-register', { - overrides: { + 'overrides': { // Overrides mentioned here will be picked up by converse.js's // plugin architecture they will replace existing methods on the // relevant objects or classes. // // New functions which don't exist yet can also be added. + + LoginPanel: { + + initialize: function (cfg) { + const _converse = this.__super__._converse; + this.__super__.initialize.apply(this, arguments); + this.registerlink = new _converse.RegisterLink(); + this.el.appendChild(this.registerlink.el); + } + }, ControlBoxView: { - switchTab (ev) { - const { _converse } = this.__super__; - const result = this.__super__.switchTab.apply(this, arguments); - if (_converse.registration_domain && - ev.target.getAttribute('data-id') === "register" && - !this.model.get('registration_form_rendered')) { - this.registerpanel.fetchRegistrationForm(_converse.registration_domain); - } - return result; - }, - renderRegistrationPanel () { const { _converse } = this.__super__; if (_converse.allow_registration) { this.registerpanel = new _converse.RegisterPanel({ - '$parent': this.$el.find('.controlbox-panes'), 'model': this.model }); - this.registerpanel.render().$el.addClass('hidden'); + this.registerpanel.render(); + this.registerpanel.el.classList.add('hidden'); + this.el.querySelector('#converse-login-panel').insertAdjacentElement( + 'afterend', + this.registerpanel.el + ); } return this; }, @@ -113,33 +118,61 @@ providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page }); + _converse.RegisterLink = Backbone.View.extend({ + tagName: 'div', + events: { + 'click .register-account': 'showRegistrationForm' + }, + + initialize () { + this.render(); + }, + + render () { + this.el.innerHTML = tpl_register_link({'__': __}); + return this; + }, + + showRegistrationForm (ev) { + ev.preventDefault(); + document.querySelector("#converse-register-panel").classList.remove('hidden'); + document.querySelector("#converse-login-panel").classList.add('hidden'); + if (!_.isUndefined(_converse.chatboxes.browserStorage)) { + this.model.save({'active-panel': "register"}); + } + if (_converse.registration_domain && + ev.target.getAttribute('data-id') === "register" && + !this.model.get('registration_form_rendered')) { + this.registerpanel.fetchRegistrationForm(_converse.registration_domain); + } + } + }); + _converse.RegisterPanel = Backbone.View.extend({ tagName: 'div', - id: "register", + id: "converse-register-panel", className: 'controlbox-pane', events: { - 'submit form#converse-register': 'onProviderChosen' + 'submit form#converse-register': 'onProviderChosen', + 'click .login-here': 'showLoginForm' }, initialize (cfg) { this.reset(); - this.$parent = cfg.$parent; this.registerHooks(); }, render () { this.model.set('registration_form_rendered', false); - this.$parent.append(this.$el.html( - tpl_register_panel({ - 'default_domain': _converse.registration_domain, - 'label_domain': __("Your XMPP provider's domain name:"), - 'label_register': __('Fetch registration form'), - 'help_providers': __('Tip: A list of public XMPP providers is available'), - 'help_providers_link': __('here'), - 'href_providers': _converse.providers_link, - 'domain_placeholder': _converse.domain_placeholder - }) - )); + this.el.innerHTML = tpl_register_panel({ + '__': __, + 'default_domain': _converse.registration_domain, + 'label_register': __('Fetch registration form'), + 'help_providers': __('Tip: A list of public XMPP providers is available'), + 'help_providers_link': __('here'), + 'href_providers': _converse.providers_link, + 'domain_placeholder': _converse.domain_placeholder + }); return this; }, @@ -160,6 +193,15 @@ }; }, + showLoginForm (ev) { + ev.preventDefault(); + document.querySelector("#converse-login-panel").classList.remove('hidden'); + document.querySelector("#converse-register-panel").classList.add('hidden'); + if (!_.isUndefined(_converse.chatboxes.browserStorage)) { + this.model.save({'active-panel': "login"}); + } + }, + getRegistrationFields (req, _callback, raw) { /* Send an IQ stanza to the XMPP server asking for the * registration fields. diff --git a/src/templates/brand_heading.html b/src/templates/brand_heading.html index 2abbb5796..9ed5750ce 100644 --- a/src/templates/brand_heading.html +++ b/src/templates/brand_heading.html @@ -1,4 +1,4 @@ - +

inVerse

Open Source XMPP chat client

diff --git a/src/templates/controlbox.html b/src/templates/controlbox.html index 8eca12aaa..8a1aa7c04 100644 --- a/src/templates/controlbox.html +++ b/src/templates/controlbox.html @@ -1,6 +1,5 @@
-
    {[ if (!sticky_controlbox) { ]} {[ } ]} diff --git a/src/templates/converse_brand_heading.html b/src/templates/converse_brand_heading.html index 03b0af4f2..56452feff 100644 --- a/src/templates/converse_brand_heading.html +++ b/src/templates/converse_brand_heading.html @@ -1,4 +1,6 @@ -
    - - converse -
    + +
    + + converse +
    + diff --git a/src/templates/inverse_brand_heading.html b/src/templates/inverse_brand_heading.html index f2870554b..90d8ec49d 100644 --- a/src/templates/inverse_brand_heading.html +++ b/src/templates/inverse_brand_heading.html @@ -1,4 +1,4 @@ - +

    inverse

    Open Source XMPP chat client

    -     + diff --git a/src/templates/login_panel.html b/src/templates/login_panel.html index 1cfa95917..b6f3c13df 100644 --- a/src/templates/login_panel.html +++ b/src/templates/login_panel.html @@ -8,6 +8,8 @@