commit 9e71ef3507e8fc66caa2520368f6001b2747393d Author: Sukhbir Singh sukhbir@torproject.org Date: Sat Jul 4 02:17:01 2015 -0400

Improve XMPP in-band registration UX

- Improve registration dialog by populating the username

- Add missing return if registration is cancelled

- Use a groupbox to wrap the grid --- .../instantbird/xmpp-inband-registration.patch | 10 +++- projects/instantbird/xmppRegister.js | 57 ++++++++++++-------- projects/instantbird/xmppRegister.xul | 16 +++--- 3 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/projects/instantbird/xmpp-inband-registration.patch b/projects/instantbird/xmpp-inband-registration.patch index 94084ec..28a8f90 100644 --- a/projects/instantbird/xmpp-inband-registration.patch +++ b/projects/instantbird/xmpp-inband-registration.patch @@ -80,7 +80,7 @@ diff --git a/chat/protocols/xmpp/xmpp-session.jsm b/chat/protocols/xmpp/xmpp-ses return; let now = Date.now(); if (aJustSentSomething) -@@ -265,28 +268,97 @@ XMPPSession.prototype = { +@@ -265,28 +268,103 @@ XMPPSession.prototype = { _("connection.error.startTLSNotSupported")); return; } @@ -111,17 +111,23 @@ diff --git a/chat/protocols/xmpp/xmpp-session.jsm b/chat/protocols/xmpp/xmpp-ses + return; + } + ++ // Clear the existing elements from previous registrations. ++ for (let elem in this.nodes) ++ delete this.nodes[elem]; ++ + this._account.reportConnecting(_("connection.gettingRegistration")); + let registerStanza = aStanza.getChildrenByNS(Stanza.NS.register)[0]; + // If we get registration data, show the form, else quit. + if (registerStanza.getElement(["x"])) { ++ this.nodes["username"] = this._jid.node; + registerStanza.wrappedJSObject = registerStanza; + let ww = Cc["@mozilla.org/embedcomp/window-watcher;1"] + .getService(Ci.nsIWindowWatcher); + let win = ww.openWindow(null, registerWindow, "", -+ "centerscreen,chrome,modal,resizable=yes,minimizable=no", registerStanza); ++ "centerscreen,chrome,modal,minimizable=no", registerStanza); + } else { + this.onError(null, _("connection.error.noRegistrationSupport")); ++ return; + } + + // If the user cancelled the form, we should stop the registration. diff --git a/projects/instantbird/xmppRegister.js b/projects/instantbird/xmppRegister.js index 6983ad1..003c45b 100644 --- a/projects/instantbird/xmppRegister.js +++ b/projects/instantbird/xmppRegister.js @@ -27,21 +27,17 @@ let registerAccount = { document.documentElement.getButton("accept").disabled = true;

this.rows = document.getElementById("register-rows"); + this.groupbox = document.getElementById("register-groupbox");

this.nodes = XMPPSession.prototype.nodes; - // Clear the existing elements from previous registrations. - for (let elem in this.nodes) - delete this.nodes[elem]; - this.registerStanza = window.arguments[0].wrappedJSObject; this.dataStanza = this.registerStanza.getElement(["x"]);

let instructions = this.dataStanza.getElement(["instructions"]); if (instructions) { - let instructionRow = this.createRow(); - let instructionLabel = this.createElement("label", null, instructions.innerText); - instructionRow.appendChild(instructionLabel); - this.rows.appendChild(instructionRow); + let instructionLabel = this.createElement("caption"); + instructionLabel.setAttribute("label", instructions.innerText); + this.groupbox.appendChild(instructionLabel); }

let title = this.dataStanza.getElement(["title"]); @@ -51,21 +47,30 @@ let registerAccount = { document.title = _("brandShortName");

for each (let ele in this.dataStanza.getElements(["field"])) { - let fieldType = ele.attributes["type"]; + let attrib = ele.attributes; + let fieldType = attrib["type"]; switch (fieldType) {

case "text-single": case "text-private": - let textRow = this.createRow(); - let textLabel = this.createElement("label", null, ele.attributes["label"]); + let textLabel = this.createElement("label", null, + ele.getElement(["required"]) ? + attrib["label"] + " *" : attrib["label"]); + + let textBox = this.createElement("textbox", attrib["var"], + ele.getElement(["value"]) ? + ele.getElement(["value"]).innerText : "");

- let textBox = this.createElement("textbox", ele.attributes["var"], - ele.getElement(["value"]) ? ele.getElement(["value"]).innerText : ""); - if (fieldType == "text-private") + if (attrib["var"] == "username") + textBox.setAttribute("value", this.nodes["username"]); + if (attrib["var"] == "url") + textBox.setAttribute("readonly", "true"); + + if (fieldType == "text-private") { textBox.setAttribute("type", "password"); - if (ele.getElement(["required"])) - textBox.setAttribute("oninput", "onInput(this)"); + textBox.setAttribute("oninput", "onInput(this);"); + }

textRow.appendChild(textLabel); textRow.appendChild(textBox); @@ -73,7 +78,6 @@ let registerAccount = { break;

case "fixed": - let fixedRow = this.createRow(); let fixedLabel = this.createElement("label", null, ele.getElement(["value"]).innerText); fixedRow.appendChild(fixedLabel); @@ -87,23 +91,30 @@ let registerAccount = { let ocr = this.dataStanza.getElements(["field"]).find(e => e.attributes["var"] == "ocr"); if (ocr) { let ocrRow = this.createRow(); + let ocrImage = this.createElement("image"); ocrImage.setAttribute("src", "data:image/png;base64," + this.registerStanza.getElement(["data"]).innerText);

- let ocrLabel = this.createElement("label", null, ocr.attributes["label"]); + // OCR will always be a required entry. + let ocrLabel = this.createElement("label", null, ocr.attributes["label"] + " *"); let ocrInput = this.createElement("textbox", ocr.attributes["var"], null);

ocrRow.appendChild(ocrLabel); - ocrRow.appendChild(ocrInput); this.rows.appendChild(ocrRow);

let ocrBox = document.createElement("hbox"); ocrBox.setAttribute("align", "center"); - ocrBox.appendChild(ocrImage); + let spacer = document.createElement("spacer"); + spacer.setAttribute("flex", "1");

- let ocrImageRow = this.createRow(); - ocrImageRow.appendChild(ocrBox); - this.rows.appendChild(ocrImageRow); + ocrBox.appendChild(ocrImage); + ocrBox.appendChild(spacer); + ocrBox.appendChild(ocrInput); + this.groupbox.appendChild(ocrBox); + } + // Set focus on the password field. + if (document.getElementById("password")) { + document.getElementById("password").focus(); } },

diff --git a/projects/instantbird/xmppRegister.xul b/projects/instantbird/xmppRegister.xul index c21bc96..e2bd367 100644 --- a/projects/instantbird/xmppRegister.xul +++ b/projects/instantbird/xmppRegister.xul @@ -11,15 +11,17 @@

<script type="application/javascript" src="chrome://instantbird/content/xmppRegister.js" />

- <grid flex="1"> + <groupbox id="register-groupbox" flex="1">

- <columns> - <column flex="1" /> - <column flex="1" /> - </columns> + <grid flex="1"> + <columns> + <column flex="1" /> + </columns>

- <rows id="register-rows" /> + <rows id="register-rows" />

- </grid> + </grid> + + </groupbox>

</dialog>