signup wired up enough to demonstrate

mozilla · Mar 19, 2012 · 52f556f · 52f556f
1 parent b529cf4
commit 52f556f
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 42 deletions.
diff --git a/server.js b/server.js
@@ -1,9 +1,36 @@
-var express = require('express');
+var express = require('express'),
+    http = require('http');
 
 var app = express.createServer();
 
 app.use(express.bodyParser());
 
+app.post('/verify', function(req, res) {
+  var body = JSON.stringify({
+    assertion: req.body.assertion,
+    audience: "http://127.0.0.1:8080"
+  });
+
+  var vreq = http.request({
+    host: '127.0.0.1',
+    port: '10002',
+    path: '/verify',
+    method: 'POST',
+    headers: {
+      'Content-Length': body.length,
+      'Content-Type': 'application/json'
+    }
+  }, function (vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body += chunk; });
+    vres.on('end', function() {
+      res.send(body);
+    });
+  });
+  vreq.write(body);
+  vreq.end();
+});
+
 app.use(express.static(__dirname + "/static"));
 
 app.listen(process.env['PORT'] || 8080, '127.0.0.1');
diff --git a/static/123done.js b/static/123done.js
@@ -39,17 +39,13 @@
 
 })();
 
-navigator.id.getData = function(assertion, validationservice, 
-                                success, failure) {
-  request = new XMLHttpRequest();
-  var parameters = 'assert=' + assertion;
-  request.open('POST', validationservice);
-  request.setRequestHeader('If-Modified-Since',
-                           'Wed, 05 Apr 2006 00:00:00 GMT');
-  request.setRequestHeader('Content-type',
+function verifyAssertion(assertion, success, failure)
+{
+  var request = new XMLHttpRequest();
+  var parameters = 'assertion=' + assertion;
+  request.open('POST', '/verify');
+  request.setRequestHeader('Content-Type',
                            'application/x-www-form-urlencoded');
-  request.setRequestHeader('Content-length', parameters.length);
-  request.setRequestHeader('Connection', 'close');
   request.send(encodeURI(parameters));
 
   request.onreadystatechange = function() {
@@ -67,33 +63,38 @@ navigator.id.getData = function(assertion, validationservice,
     }
   };
 }
-navigator.id.loginButton = function(o) {    
-  var elm = document.querySelector(o.element),
-            img = o.imageURL || 'https://browserid.org/i/sign_in_green.png',
-            alt = o.altText || 'Log in with browserID';
-  if(elm) {
-    var b = document.createElement('button');
-    b.innerHTML = '<img src="' + img + '" alt="'+ alt + '">';
-    b.onclick = function() {
-      navigator.id.getVerifiedEmail(function(assertion) {
-       if (assertion) {
-         navigator.id.getData(assertion, o.service, o.success, o.failure);
-       } else {
-         failure('I still don\'t know you...');
-       }
+(function() {
+  var loggedIn = document.querySelector("li.browserid#loggedin");
+  var loggedOut = document.querySelector("li.browserid#loggedout");
+
+  // verify an assertion upon login
+  navigator.id.addEventListener('login', function(event) {
+    verifyAssertion(event.assertion, function(r) {
+      var e = document.querySelector("#loggedin span");
+      e.innerHTML = r.email;
+      loggedOut.style.display = 'none';
+      loggedIn.style.display = 'block';
+    }, function(err) {
+      alert("failed to verify assertion: " + err);
+      loggedOut.style.display = 'block';
+      loggedIn.style.display = 'none';
     });
+  });
+
+  // display login button on logout
+  navigator.id.addEventListener('logout', function(event) {
+    loggedOut.style.display = 'block';
+    loggedIn.style.display = 'none';
+  });
+
+  // upon click of signin button call navigator.id.request()
+  var e = document.querySelector(".browserid#loggedout button");
+  e.onclick = function() { navigator.id.request() };
+
+  // upon click of logout link navigator.id.logout()
+  var e = document.querySelector(".browserid#loggedin a");
+  e.onclick = function() {
+    navigator.id.logout()
   };
-   elm.appendChild(b);
- }
-}
-navigator.id.loginButton({
- element: '#browserid',
- service: 'verify.php', 
- success: function(response) {
-   document.querySelector('#browserid').innerHTML = 'Hi ' +
-   response.email;
- },
- failure: function(response) {
-   alert('Couldn\'t log you in. Sad panda now!');
- }
-});
+
+})();
diff --git a/static/index.html b/static/index.html
@@ -6,13 +6,17 @@
   <meta type="description" content="">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <link rel="stylesheet" href="styles.css" type="text/css">
-  <script src="https://browserid.org/include.js"></script>
+  <script src="http://127.0.0.1:10002/include.js"></script>
 </head>
 <body>
   <div id="container">
   <header>
     <h1>123done <span>your tasks - simplified</span></h1>
-    <nav><ul><!-- <li><a href="#todo">To do</a></li><li><a href="#done">Done</a></li> --><li id="browserid"></li></ul></nav>
+    <nav><ul>
+        <!-- <li><a href="#todo">To do</a></li><li><a href="#done">Done</a></li> -->
+        <li class="browserid" id="loggedout"><button><img src="http://127.0.0.1:10002/i/sign_in_green.png"></button></li>
+        <li class="browserid" id="loggedin">Hi, <span></span> <a href="#">logout</a></li>
+    </ul></nav>
   </header>
   <section id="todo">
     <ul id="todolist"></ul>
@@ -36,4 +40,4 @@ <h1>123done <span>your tasks - simplified</span></h1>
   </div>
   <script src="123done.js"></script>
 </body>
-</html>
+</html>
diff --git a/static/styles.css b/static/styles.css
@@ -96,6 +96,10 @@
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */
 
  }
+
+ header li.browserid {
+   display: none;
+ }
 
  header form {
    margin-left: 50px;