Render register and login forms via links

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

View File

@ -1315,7 +1315,8 @@
#converse-embedded-chat form.pure-form.converse-form legend, #converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend { #conversejs form.pure-form.converse-form legend {
color: #777; color: #777;
font-size: 125%; } font-size: 125%;
margin-bottom: 2em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; } display: block; }
@ -1948,14 +1949,16 @@
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .conn-feedback p.error { #conversejs #controlbox .conn-feedback p.error {
color: #A53214; } 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%; } font-size: 150%; }
#conversejs #controlbox #login-dialog .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox #login-dialog .register-account { #conversejs #controlbox .toggle-register-login {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #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 { #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto; height: auto;
white-space: normal; } white-space: normal; }
@ -1963,7 +1966,7 @@
color: #3AA569; } color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; width: 100%;
margin: 0.5em 0; } margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact { #conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; } margin: 0 0 0.75em 0; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom {
@ -2185,6 +2188,8 @@
width: 40px; width: 40px;
padding: 1px; padding: 1px;
float: right; } float: right; }
#conversejs #controlbox .controlbox-panes {
background-color: white; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
padding: 1em; padding: 1em;
background-color: white; background-color: white;

View File

@ -1315,7 +1315,8 @@
#converse-embedded-chat form.pure-form.converse-form legend, #converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend { #conversejs form.pure-form.converse-form legend {
color: #777; color: #777;
font-size: 125%; } font-size: 125%;
margin-bottom: 2em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; } display: block; }
@ -1409,7 +1410,8 @@ body {
#conversejs { #conversejs {
width: 100vw; width: 100vw;
height: 100vh; } height: 100vh;
left: 0; }
#conversejs form.pure-form.converse-form { #conversejs form.pure-form.converse-form {
margin: 1em; } margin: 1em; }
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
@ -2016,14 +2018,16 @@ body {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .conn-feedback p.error { #conversejs #controlbox .conn-feedback p.error {
color: #A53214; } 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%; } font-size: 150%; }
#conversejs #controlbox #login-dialog .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox #login-dialog .register-account { #conversejs #controlbox .toggle-register-login {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #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 { #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto; height: auto;
white-space: normal; } white-space: normal; }
@ -2031,7 +2035,7 @@ body {
color: #3AA569; } color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; width: 100%;
margin: 0.5em 0; } margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact { #conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; } margin: 0 0 0.75em 0; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom {
@ -2253,6 +2257,8 @@ body {
width: 40px; width: 40px;
padding: 1px; padding: 1px;
float: right; } float: right; }
#conversejs #controlbox .controlbox-panes {
background-color: white; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
padding: 1.2em; padding: 1.2em;
background-color: white; background-color: white;
@ -2317,13 +2323,18 @@ body {
margin: 0; } margin: 0; }
#conversejs #controlbox .conn-feedback { #conversejs #controlbox .conn-feedback {
padding-top: 2em; } 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%; font-size: 600%;
margin: 0.5em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
color: #387592; } color: #387592; }
#conversejs #controlbox #login-dialog .brand-subtitle { #conversejs #controlbox .brand-heading-container .brand-subtitle {
font-size: 90%; } font-size: 90%; }
@media screen and (max-width: 480px) {
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 400%; } }
#conversejs #controlbox.logged-out { #conversejs #controlbox.logged-out {
width: 100%; } width: 100%; }
#conversejs #controlbox.logged-out .box-flyout { #conversejs #controlbox.logged-out .box-flyout {
@ -2337,13 +2348,16 @@ body {
z-index: 1; z-index: 1;
background-color: #578EA9; } background-color: #578EA9; }
#conversejs #controlbox .controlbox-head { #conversejs #controlbox .controlbox-head {
height: 63px; height: 0;
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
margin-top: 0.5em; } margin-top: 0.5em; }
#conversejs #controlbox #converse-register { #conversejs #controlbox #converse-register,
margin: 4em 30% 0 30%; }
#conversejs #controlbox #converse-login { #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 { #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; } margin: 1em 0; }
#conversejs #controlbox #converse-register input[type=submit], #conversejs #controlbox #converse-register input[type=submit],

View File

@ -19,13 +19,14 @@ The core events, which are also promises are:
* `cachedRoster`_ * `cachedRoster`_
* `chatBoxesFetched`_ * `chatBoxesFetched`_
* `controlboxInitialized`_ (only via the `converse-controlbox` plugin)
* `pluginsInitialized`_ * `pluginsInitialized`_
* `roster`_ * `roomsPanelRendered`_ (only via the `converse-muc` plugin)
* `rosterContactsFetched`_ * `rosterContactsFetched`_
* `rosterGroupsFetched`_ * `rosterGroupsFetched`_
* `rosterInitialized`_ * `rosterInitialized`_
* `roster`_
* `statusInitialized`_ * `statusInitialized`_
* `roomsPanelRendered`_ (only via the `converse-muc` plugin)
For more info on how to use (or add promises), you can read the For more info on how to use (or add promises), you can read the
:ref:`promises-grouping` in the API documentation. :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) { ... });`` ``_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 discoInitialized
~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~

View File

@ -127,20 +127,22 @@
} }
} }
#login-dialog { .brand-heading-container {
text-align: center;
.brand-heading { .brand-heading {
font-size: 150%; font-size: 150%;
} }
.brand-name { .brand-name {
font-size: 120%; font-size: 120%;
} }
.register-account {
font-weight: bold;
} }
.toggle-register-login {
font-weight: bold;
} }
#converse-register, #converse-login { #converse-register, #converse-login {
margin-top: 2em; margin: 2em 0;
.login-anon { .login-anon {
height: auto; height: auto;
white-space: normal; white-space: normal;
@ -150,7 +152,7 @@
} }
input { input {
width: 100%; width: 100%;
margin: 0.5em 0; margin: 1em 0;
} }
} }
#users { #users {
@ -436,6 +438,10 @@
} }
} }
.controlbox-panes {
background-color: white;
}
.controlbox-pane { .controlbox-pane {
padding: $controlbox-pane-padding; padding: $controlbox-pane-padding;
background-color: white; background-color: white;

View File

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

View File

@ -9,16 +9,25 @@
padding-top: 2em; padding-top: 2em;
} }
#login-dialog { .toggle-register-login {
line-height: $line-height-huge;
}
.brand-heading-container {
.brand-heading { .brand-heading {
font-size: 600%; font-size: 600%;
margin: 0.5em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
color: $blue; color: $blue;
} }
.brand-subtitle { .brand-subtitle {
font-size: 90%; font-size: 90%;
} }
@media screen and (max-width: $mobile-portrait-length) {
.brand-heading {
font-size: 400%;
}
}
} }
&.logged-out { &.logged-out {
@ -38,15 +47,19 @@
background-color: $controlbox-head-color; background-color: $controlbox-head-color;
} }
.controlbox-head { .controlbox-head {
height: $controlbox-head-height; height: 0;
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
margin-top: 0.5em; margin-top: 0.5em;
} }
#converse-register { #converse-register,
margin: 4em 30% 0 30%;
}
#converse-login { #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 { #converse-register, #converse-login {
.title, .instructions, label { .title, .instructions, label {

View File

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

View File

@ -106,6 +106,7 @@ $toolbar-color: $greenish-white !default;
$line-height-small: 20px !default; $line-height-small: 20px !default;
$line-height: 22px !default; $line-height: 22px !default;
$line-height-huge: 30px !default;
$controlbox-width: 250px !default; $controlbox-width: 250px !default;
$chat-width: 100% !default; $chat-width: 100% !default;

View File

@ -282,7 +282,7 @@
}); });
this.loginpanel.render(); this.loginpanel.render();
this.el.classList.add("logged-out"); 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); el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
return this; return this;
}, },
@ -385,15 +385,27 @@
_converse.LoginPanel = Backbone.View.extend({ _converse.LoginPanel = Backbone.View.extend({
tagName: 'div', tagName: 'div',
id: "login-dialog", id: "converse-login-panel",
className: 'controlbox-pane', className: 'controlbox-pane',
events: { events: {
'submit form#converse-login': 'authenticate' 'submit form#converse-login': 'authenticate'
}, },
initialize (cfg) { initialize (cfg) {
cfg.$parent.html(this.$el.html( this.insertIntoDOM(cfg);
tpl_login_panel({ _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, 'ANONYMOUS': _converse.ANONYMOUS,
'EXTERNAL': _converse.EXTERNAL, 'EXTERNAL': _converse.EXTERNAL,
@ -411,16 +423,7 @@
'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'), 'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
'placeholder_password': __('password') 'placeholder_password': __('password')
}) })
)); cfg.$parent.html(this.el);
_converse.connfeedback.on('change', this.showConnectionFeedback, this);
},
render () {
this.$el.find('input#jid').focus();
if (!this.$el.is(':visible')) {
this.$el.show();
}
return this;
}, },
showConnectionFeedback () { showConnectionFeedback () {

View File

@ -14,6 +14,7 @@
"form-utils", "form-utils",
"converse-core", "converse-core",
"tpl!form_username", "tpl!form_username",
"tpl!register_link",
"tpl!register_panel", "tpl!register_panel",
"tpl!registration_form", "tpl!registration_form",
"tpl!registration_request", "tpl!registration_request",
@ -25,6 +26,7 @@
utils, utils,
converse, converse,
tpl_form_username, tpl_form_username,
tpl_register_link,
tpl_register_panel, tpl_register_panel,
tpl_registration_form, tpl_registration_form,
tpl_registration_request, tpl_registration_request,
@ -51,34 +53,37 @@
converse.plugins.add('converse-register', { converse.plugins.add('converse-register', {
overrides: { 'overrides': {
// Overrides mentioned here will be picked up by converse.js's // Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the // plugin architecture they will replace existing methods on the
// relevant objects or classes. // relevant objects or classes.
// //
// New functions which don't exist yet can also be added. // New functions which don't exist yet can also be added.
ControlBoxView: { LoginPanel: {
switchTab (ev) { initialize: function (cfg) {
const { _converse } = this.__super__; const _converse = this.__super__._converse;
const result = this.__super__.switchTab.apply(this, arguments); this.__super__.initialize.apply(this, arguments);
if (_converse.registration_domain && this.registerlink = new _converse.RegisterLink();
ev.target.getAttribute('data-id') === "register" && this.el.appendChild(this.registerlink.el);
!this.model.get('registration_form_rendered')) {
this.registerpanel.fetchRegistrationForm(_converse.registration_domain);
} }
return result;
}, },
ControlBoxView: {
renderRegistrationPanel () { renderRegistrationPanel () {
const { _converse } = this.__super__; const { _converse } = this.__super__;
if (_converse.allow_registration) { if (_converse.allow_registration) {
this.registerpanel = new _converse.RegisterPanel({ this.registerpanel = new _converse.RegisterPanel({
'$parent': this.$el.find('.controlbox-panes'),
'model': this.model '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; return this;
}, },
@ -113,33 +118,61 @@
providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page 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({ _converse.RegisterPanel = Backbone.View.extend({
tagName: 'div', tagName: 'div',
id: "register", id: "converse-register-panel",
className: 'controlbox-pane', className: 'controlbox-pane',
events: { events: {
'submit form#converse-register': 'onProviderChosen' 'submit form#converse-register': 'onProviderChosen',
'click .login-here': 'showLoginForm'
}, },
initialize (cfg) { initialize (cfg) {
this.reset(); this.reset();
this.$parent = cfg.$parent;
this.registerHooks(); this.registerHooks();
}, },
render () { render () {
this.model.set('registration_form_rendered', false); this.model.set('registration_form_rendered', false);
this.$parent.append(this.$el.html( this.el.innerHTML = tpl_register_panel({
tpl_register_panel({ '__': __,
'default_domain': _converse.registration_domain, 'default_domain': _converse.registration_domain,
'label_domain': __("Your XMPP provider's domain name:"),
'label_register': __('Fetch registration form'), 'label_register': __('Fetch registration form'),
'help_providers': __('Tip: A list of public XMPP providers is available'), 'help_providers': __('Tip: A list of public XMPP providers is available'),
'help_providers_link': __('here'), 'help_providers_link': __('here'),
'href_providers': _converse.providers_link, 'href_providers': _converse.providers_link,
'domain_placeholder': _converse.domain_placeholder 'domain_placeholder': _converse.domain_placeholder
}) });
));
return this; 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) { getRegistrationFields (req, _callback, raw) {
/* Send an IQ stanza to the XMPP server asking for the /* Send an IQ stanza to the XMPP server asking for the
* registration fields. * registration fields.

View File

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

View File

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

View File

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

View File

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

View File

@ -8,6 +8,8 @@
<span class="spinner login-submit"/> <span class="spinner login-submit"/>
{[ } ]} {[ } ]}
{[ if (!auto_login) { ]} {[ if (!auto_login) { ]}
<legend>{{{__("Login")}}}</legend>
{[ if (authentication == LOGIN || authentication == EXTERNAL) { ]} {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
<label>{{{label_username}}}</label> <label>{{{label_username}}}</label>
<input type="text" name="jid" placeholder="{{{placeholder_username}}}"> <input type="text" name="jid" placeholder="{{{placeholder_username}}}">
@ -25,7 +27,3 @@
{[ } ]} {[ } ]}
{[ } ]} {[ } ]}
</form> </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>

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>

View File

@ -1,12 +1,20 @@
<form id="converse-register" class="pure-form converse-form"> <form id="converse-register" class="pure-form converse-form">
<legend>{{{__("Account Registration")}}}</legend>
<span class="reg-feedback"></span> <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) { ]} {[ if (default_domain) { ]}
{{{default_domain}}} {{{default_domain}}}
{[ } ]} {[ } ]}
{[ if (!default_domain) { ]} {[ if (!default_domain) { ]}
<input type="text" name="domain" placeholder="{{{domain_placeholder}}}"> <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}}}"> <input class="pure-button button-primary" type="submit" value="{{{label_register}}}">
{[ } ]} {[ } ]}
</form> </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>