Skip to content

C
converse.js
Commit 3dbcdd61 authored by JC Brand's avatar JC Brand
Browse files
Options

More work on XEP-0077. updates #117 

* On the registration form, show the xmpp.net badge for XMPP provider.
* More CSS and form improvements.
* New template registration_form.html
parent bfab4fb8
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 53 deletions
converse.js
View file @ 3dbcdd61
......@@ -164,7 +164,9 @@
// Logging
Strophe.log = function (level, msg) { console.log(level+' '+msg); };
Strophe.error = function (msg) { console.log('ERROR: '+msg); };
Strophe.error = function (msg) {
console.log('ERROR: '+msg);
};
// Add Strophe Namespaces
Strophe.addNamespace('REGISTER', 'jabber:iq:register');
......@@ -2065,6 +2067,7 @@
},
switchTab: function (ev) {
// TODO: automatically focus the relevant input
if (ev && ev.preventDefault) { ev.preventDefault(); }
var $tab = $(ev.target),
$sibling = $tab.parent().siblings('li').children('a'),
......@@ -4481,8 +4484,8 @@
render: function () {
this.$parent.append(this.$el.html(
converse.templates.register_panel({
'label_domain': __("Give your XMPP provider's domain:"),
'label_register': __('Request registration form')
'label_domain': __("Your XMPP provider's domain:"),
'label_register': __('Fetch registration form')
})
));
this.$tabs.append(converse.templates.register_tab({label_register: __('Register')}));
......@@ -4589,9 +4592,9 @@
return;
}
$form.find('input[type=submit]').hide()
.after('<button class="cancel hor_centered">Cancel form lookup</button>')
.after('<button class="cancel hor_centered">Cancel</button>')
.after('<span class="spinner login-submit"/>')
.after('<p class="info hor_centered">Requesting a registration form from the XMPP server</p>');
.after('<p class="info">Requesting a registration form from the XMPP server</p>');
$form.find('button.cancel').on('click', $.proxy(this.cancelRegistration, this));
this.reset({
domain: Strophe.getDomainFromJid(domain),
......@@ -4611,19 +4614,22 @@
onRegistering: function (status, error) {
var that;
console.log('onRegistering');
if (status === Strophe.Status.CONNFAIL) {
converse.renderLoginPanel();
this.giveFeedback(__('Connection Failed'), 'error');
} else if (status === Strophe.Status.DISCONNECTING) {
if (!converse.connection.connected) {
converse.renderLoginPanel();
if (_.contains([
Strophe.Status.DISCONNECTED,
Strophe.Status.CONNFAIL,
Strophe.Status.REGIFAIL
], status)) {
converse.log('Problem during registration: Strophe.Status is: '+status);
this.cancelRegistration();
if (error) {
this.giveFeedback(error, 'error');
} else {
this.giveFeedback(__('Disconnecting'), 'error');
this.giveFeedback(__(
'Something went wrong establishing a connection with "%1$s". Are you sure it exists?',
this.domain
), 'error');
}
} else if (status == Strophe.Status.REGIFAIL) {
converse.log('REGIFAIL');
this.cancelRegistration();
if (error) this.giveFeedback(error, 'error');
} else if (status == Strophe.Status.CONFLICT) {
// TODO
converse.log('CONFLICT');
......@@ -4661,16 +4667,16 @@
* received from the XMPP server.
*
* Parameters:
* (XMLElement) stanza - The IQ stanza received from the
* XMPP server.
* (XMLElement) stanza - The IQ stanza received from the XMPP server.
*/
var $form= this.$('form'),
$stanza = $(stanza),
$fields;
$form.empty().append($('<p class="title">').text(this.title));
$form.append($('<p class="instructions">').text(this.instructions));
$form.empty().append(converse.templates.registration_form({
'domain': this.domain,
'title': this.title,
'instructions': this.instructions
}));
if (this.form_type == 'xform') {
$fields = $stanza.find('field');
_.each($fields, function (field) {
......@@ -4679,7 +4685,7 @@
} else {
_.each(Object.keys(this.fields), $.proxy(function (key) {
// TODO:
$form.append('<p>'+key+'</p>');
$form.append('<input placeholder="'+key+'" name="'+key+'"></input>');
console.log('need to add form input here...');
}, this));
......@@ -4796,9 +4802,13 @@
this.title = $xform.find('title').text();
this.instructions = $xform.find('instructions').text();
$xform.find('field').each($.proxy(function (idx, field) {
var name = field.getAttribute('var').toLowerCase();
var value = $(field).children('value').text();
this.fields[name] = value;
var _var = field.getAttribute('var');
if (_var) {
this.fields[_var.toLowerCase()] = $(field).children('value').text();
} else {
// TODO: other option seems to be type="fixed"
console.log("WARNING: Found field we couldn't parse");
}
}, this));
this.form_type = 'xform';
},
......
css/converse.css
View file @ 3dbcdd61
......@@ -494,6 +494,7 @@
width: 100%;
display: block;
text-align: center;
margin: 5px;
}
#conversejs .centered {
text-align: center;
......@@ -751,8 +752,12 @@
font-size: 85%;
color: grey;
}
#converse-register label {
font-weight: bold;
#converse-register .provider-title {
font-size: 115%;
}
#converse-register .provider-score {
width: 187px;
margin-bottom: 8px;
}
#converse-register .form-help .url {
font-weight: bold;
......@@ -1148,17 +1153,17 @@ dl.add-converse-contact {
}
#conversejs form#converse-register .title {
font-weight: bold;
font-size: 110%;
}
#conversejs form#converse-register .info {
font-style: italic;
color: green;
font-size: 85%;
margin: 5px 0;
}
#conversejs form#converse-register .instructions {
font-style: italic;
color: gray;
font-size: 85%;
font-size: 80%;
}
#conversejs form#converse-register .form-errors {
color: red;
......@@ -1167,11 +1172,11 @@ dl.add-converse-contact {
#conversejs form#converse-register,
#conversejs form#converse-login {
background: white;
padding: 2em 0.5em;
padding: 1em 0.5em;
}
#conversejs form#converse-register input,
#conversejs form#converse-login input {
width: 98%;
width: 187px;
height: 30px;
}
#conversejs form#converse-register label,
......
less/converse.less
View file @ 3dbcdd61
......@@ -523,6 +523,7 @@
width: 100%;
display: block;
text-align: center;
margin: 5px;
}
#conversejs .centered {
......@@ -829,8 +830,13 @@
color: grey;
}
#converse-register label {
font-weight: bold;
#converse-register .provider-title {
font-size: 115%;
}
#converse-register .provider-score {
width: 187px;
margin-bottom: 8px;
}
#converse-register .form-help .url {
......@@ -1296,19 +1302,19 @@ dl.add-converse-contact {
#conversejs form#converse-register .title {
font-weight: bold;
font-size: 110%;
}
#conversejs form#converse-register .info {
font-style: italic;
color: green;
font-size: 85%;
margin: 5px 0;
}
#conversejs form#converse-register .instructions {
font-style: italic;
color: gray;
font-size: 85%;
font-size: 80%;
}
#conversejs form#converse-register .form-errors {
......@@ -1319,12 +1325,12 @@ dl.add-converse-contact {
#conversejs form#converse-register,
#conversejs form#converse-login {
background: white;
padding: 2em 0.5em;
padding: 1em 0.5em;
}
#conversejs form#converse-register input,
#conversejs form#converse-login input {
width: 98%;
width: 187px;
height: 30px;
}
......
main.js
View file @ 3dbcdd61
......@@ -95,6 +95,7 @@ require.config({
"requesting_contacts": "src/templates/requesting_contacts",
"register_panel": "src/templates/register_panel",
"register_tab": "src/templates/register_tab",
"registration_form": "src/templates/registration_form",
"room_description": "src/templates/room_description",
"room_item": "src/templates/room_item",
"room_panel": "src/templates/room_panel",
......
src/templates.js
View file @ 3dbcdd61
......@@ -31,6 +31,7 @@ define("converse-templates", [
"tpl!pending_contacts",
"tpl!register_panel",
"tpl!register_tab",
"tpl!registration_form",
"tpl!requesting_contact",
"tpl!requesting_contacts",
"tpl!room_description",
......@@ -79,19 +80,20 @@ define("converse-templates", [
pending_contacts: arguments[29],
register_panel: arguments[30],
register_tab: arguments[31],
requesting_contact: arguments[32],
requesting_contacts: arguments[33],
room_description: arguments[34],
room_item: arguments[35],
room_panel: arguments[36],
roster: arguments[37],
roster_item: arguments[38],
select_option: arguments[39],
search_contact: arguments[40],
status_option: arguments[41],
toggle_chats: arguments[42],
toolbar: arguments[43],
trimmed_chat: arguments[44],
form_textarea: arguments[45]
registration_form: arguments[32],
requesting_contact: arguments[33],
requesting_contacts: arguments[34],
room_description: arguments[35],
room_item: arguments[36],
room_panel: arguments[37],
roster: arguments[38],
roster_item: arguments[39],
select_option: arguments[40],
search_contact: arguments[41],
status_option: arguments[42],
toggle_chats: arguments[43],
toolbar: arguments[44],
trimmed_chat: arguments[45],
form_textarea: arguments[46]
};
});
src/templates/register_panel.html
View file @ 3dbcdd61
<form id="converse-register">
<span class="reg-feedback"></span>
<label>{{label_domain}}</label>
<input type="text" name="domain" placeholder="e.g. conversejs.org">
<input type="text" name="domain" placeholder=" e.g. conversejs.org">
<p class="form-help">Tip: A list of public XMPP providers is available <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.</p>
<input class="submit" type="submit" value="{{label_register}}">
</form>
src/templates/registration_form.html 0 → 100644
View file @ 3dbcdd61
<p class="provider-title">{{domain}}</p>
<a href='https://xmpp.net/result.php?domain={{domain}}&amp;type=client'>
<img class="provider-score" src='https://xmpp.net/badge.php?domain={{domain}}' alt='xmpp.net score' />
</a>
<p class="title">{{title}}</p>
<p class="instructions">{{instructions}}</p>
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7