[tor-messenger-build/master] Improve XMPP in-band registration UX

4 Jul 2015

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>

    

sukhbir＠torproject.org

tags

participants (1)