Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Render register and login forms via links

Browse Source
This commit is contained in:
JC Brand 2017-09-16 18:11:31 +02:00
parent 37fcc6b70e
commit 7e4fb52f8d
17 changed files with 220 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/converse.css
View File

@ -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 {
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 150%; }
#conversejs #controlbox #login-dialog .brand-name {
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog .register-account {
#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;

42
css/inverse.css
View File

@ -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 {
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 150%; }
#conversejs #controlbox #login-dialog .brand-name {
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog .register-account {
#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],

24
docs/source/events.rst
View File

@ -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 <http://es6-features.org/#PromiseUsage>`_:
.. code-block:: javascript
_converse.api.waitUntil('controlboxInitialized').then(function () {
// Your code here...
});
discoInitialized
~~~~~~~~~~~~~~~~

16
sass/_controlbox.scss
View File

@ -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;

1
sass/_core.scss
View File

@ -195,6 +195,7 @@
legend {
color: $text-color;
font-size: 125%;
margin-bottom: 2em;
}
input[type=checkbox] {
display: block;

27
sass/inverse/_controlbox.scss
View File

@ -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 {

1
sass/inverse/_core.scss
View File

@ -35,6 +35,7 @@ body {
#conversejs {
width: 100vw;
height: 100vh;
left: 0;
form {
&.pure-form.converse-form {

1
sass/inverse/_variables.scss
View File

@ -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;

31
src/converse-controlbox.js
View File

@ -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,15 +385,27 @@
_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({
this.insertIntoDOM(cfg);
_converse.connfeedback.on('change', this.showConnectionFeedback, this);
},
render () {
this.$el.find('input#jid').focus();
if (!this.$el.is(':visible')) {
this.$el.show();
}
return this;
},
insertIntoDOM (cfg) {
this.el.innerHTML = tpl_login_panel({
'__': __,
'ANONYMOUS': _converse.ANONYMOUS,
'EXTERNAL': _converse.EXTERNAL,
@ -411,16 +423,7 @@
'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
'placeholder_password': __('password')
})
));
_converse.connfeedback.on('change', this.showConnectionFeedback, this);
},
render () {
this.$el.find('input#jid').focus();
if (!this.$el.is(':visible')) {
this.$el.show();
}
return this;
cfg.$parent.html(this.el);
},
showConnectionFeedback () {

82
src/converse-register.js
View File

@ -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.
ControlBoxView: {
LoginPanel: {
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);
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);
}
return result;
},
ControlBoxView: {
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({
this.el.innerHTML = 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
})
));
});
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.

2
src/templates/brand_heading.html
View File

@ -1,4 +1,4 @@
<span>
<span class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<span>

1
src/templates/controlbox.html
View File

@ -1,6 +1,5 @@
<div class="flyout box-flyout">
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs"></ul>
{[ if (!sticky_controlbox) { ]}
<a class="chatbox-btn close-chatbox-button icon-close"></a>
{[ } ]}

2
src/templates/converse_brand_heading.html
View File

@ -1,4 +1,6 @@
<span class="brand-heading-container">
<div class="brand-heading">
<i class="icon-conversejs"></i>
<span class="brand-name">converse</span>
</div>
<span>

4
src/templates/inverse_brand_heading.html
View File

@ -1,4 +1,4 @@
<span>
<span class="brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>inverse</h1>
<p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
</span>
<span>

6
src/templates/login_panel.html
View File

@ -8,6 +8,8 @@
<span class="spinner login-submit"/>
{[ } ]}
{[ if (!auto_login) { ]}
<legend>{{{__("Login")}}}</legend>
{[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
<label>{{{label_username}}}</label>
<input type="text" name="jid" placeholder="{{{placeholder_username}}}">
@ -25,7 +27,3 @@
{[ } ]}
{[ } ]}
</form>
<form class="pure-form pure-form-stacked converse-form" id="converse-register" method="post">
<p>{{{ __("Don't have a chat account?") }}} <a class="register-account" href="#register">{{{__("Register an account here")}}}</a></p>
</form>

4
src/templates/register_link.html Normal file
View File

@ -0,0 +1,4 @@
<p>{{{ __("Don't have a chat account?") }}}</p>
<p style="margin-top: 0.5em">
<a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account here")}}}</a>
</p>

12
src/templates/register_panel.html
View File

@ -1,12 +1,20 @@
<form id="converse-register" class="pure-form converse-form">
<legend>{{{__("Account Registration")}}}</legend>
<span class="reg-feedback"></span>
<label>{{{label_domain}}}</label>
<label>{{{__("Please enter the XMPP provider you want 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) { ]}
{{{default_domain}}}
{[ } ]}
{[ if (!default_domain) { ]}
<input type="text" name="domain" placeholder="{{{domain_placeholder}}}">
<p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
<input class="pure-button button-primary" type="submit" value="{{{label_register}}}">
{[ } ]}
</form>
<p style="margin-top: 1em">{{{ __("Already have a Jabber/XMPP chat account?") }}}</p>
<p style="margin-top: 0.5em">
<a class="login-here toggle-register-login" href="#login">{{{__("Log in here")}}}</a>
</p>