Bug 987597: Send an caller identifier when obtaining a call-url. r=Standard8

browser/components/loop/content/js/client.js

@@ -25,11 +25,13 @@ loop.Client = (function($) {
     /**
      * Requests a call URL to the Loop server.
      *
+     * @param  {String} simplepushUrl a registered Simple Push URL
+     * @param  {string} nickname the nickname of the future caller
      * @param  {Function} cb Callback(err, callUrl)
      */
-    requestCallUrl: function(simplepushUrl, cb) {
+    requestCallUrl: function(nickname, cb) {
       var endpoint = this.settings.baseApiUrl + "/call-url/",
-          reqData = {simplepushUrl: simplepushUrl};
+          reqData  = {callerId: nickname};
 
       function validate(callUrlData) {
         if (typeof callUrlData !== "object" ||

browser/components/loop/content/js/panel.js

@@ -92,7 +92,9 @@ loop.panel = (function(_, __) {
     el: "#default-view",
 
     events: {
-      "click a.get-url": "getCallUrl"
+      "keyup input[name=caller]": "changeButtonState",
+      "click a.get-url": "getCallUrl",
+      "click a.go-back": "goBack"
     },
 
     initialize: function() {
@@ -116,22 +118,39 @@ loop.panel = (function(_, __) {
 
     getCallUrl: function(event) {
       event.preventDefault();
-      var simplepushUrl = "http://fake.url/"; // XXX: send a real simplepush url
-      this.client.requestCallUrl(simplepushUrl, function(err, callUrl) {
+      var nickname = this.$("input[name=caller]").val();
+      var callback = function(err, callUrl) {
         if (err) {
           this.notify(__("unable_retrieve_url"), "error");
           return;
         }
         this.onCallUrlReceived(callUrl);
-      }.bind(this));
+      }.bind(this);
+
+      this.client.requestCallUrl(nickname, callback);
+    },
+
+    goBack: function(event) {
+      this.$(".action .result").hide();
+      this.$(".action .invite").show();
+      this.$(".description p").text(__("get_link_to_share"));
     },
 
     onCallUrlReceived: function(callUrl) {
       this.notificationCollection.reset();
       this.$(".action .invite").hide();
+      this.$(".action .invite input").val("");
       this.$(".action .result input").val(callUrl);
       this.$(".action .result").show();
       this.$(".description p").text(__("share_link_url"));
+    },
+
+    changeButtonState: function() {
+      var enabled = !!this.$("input[name=caller]").val();
+      if (enabled)
+        this.$("a.get-url").removeClass("disabled");
+      else
+        this.$("a.get-url").addClass("disabled");
     }
   });
 

browser/components/loop/content/panel.html

@@ -20,12 +20,15 @@
       <div class="action">
         <div class="messages"></div>
         <p class="invite">
-          <a class="get-url btn btn-success" href=""
+          <input type="text" name="caller" data-l10n-id="caller">
+          <a class="get-url btn btn-success disabled" href=""
              data-l10n-id="get_a_call_url">Get a call url</a>
         </p>
         <p class="result hide">
           <input id="call-url" type="url" readonly>
-          <a class="get-url btn btn-info" href="" data-l10n-id="renew">Renew</a>
+          <a class="go-back btn btn-info" href="" data-l10n-id="new_url">
+            New url
+          </a>
         </p>
       </div>
     </div>

browser/components/loop/content/shared/css/common.css

@@ -85,6 +85,12 @@ img {
   background: #d9534f;
 }
 
+.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.65;
+}
+
 /* Alerts */
 .alert {
   background: #eee;

browser/components/loop/test/mocha-test/client_test.js

@@ -43,7 +43,7 @@ describe("loop.Client", function() {
 
       it("should request for a call url", function() {
         var callback = sinon.spy();
-        client.requestCallUrl("fakeSimplepushUrl", callback);
+        client.requestCallUrl("foo", callback);
 
         expect(requests).to.have.length.of(1);
 
@@ -54,7 +54,7 @@ describe("loop.Client", function() {
 
       it("should send an error when the request fails", function() {
         var callback = sinon.spy();
-        client.requestCallUrl("fakeSimplepushUrl", callback);
+        client.requestCallUrl("foo", callback);
 
         expect(requests).to.have.length.of(1);
 

browser/components/loop/test/mocha-test/panel_test.js

@@ -91,6 +91,8 @@ describe("loop.panel", function() {
         '  <div class="action">',
         '    <div class="messages"></div>',
         '    <p class="invite">',
+        '      <input type="text" placeholder="Nickname of the future caller"',
+        '             name="caller" value="foo"/>',
         '      <a class="get-url" href="">Get a call url</a>',
         '    </p>',
         '    <p class="result hide">',
@@ -111,6 +113,7 @@ describe("loop.panel", function() {
         view.getCallUrl({preventDefault: sandbox.spy()});
 
         sinon.assert.calledOnce(requestCallUrl);
+        sinon.assert.calledWith(requestCallUrl, "foo");
       });
     });
 
@@ -121,7 +124,7 @@ describe("loop.panel", function() {
 
         view.onCallUrlReceived("http://call.me/");
 
-        expect(view.$("input").val()).eql("http://call.me/");
+        expect(view.$("#call-url").val()).eql("http://call.me/");
       });
     });
   });

browser/locales/en-US/chrome/browser/loop/loop.properties

@@ -1,5 +1,6 @@
 get_link_to_share=Get a link to share with a friend to Video Chat.
 get_a_call_url=Get a call url
-renew=Renew
+new_url=New url
 unable_retrieve_url=Sorry, we were unable to retrieve a call url.
 share_link_url=Share the link below with your friend to start your call!
+caller.placeholder=Identify this call