Added Persona example

examples/persona/static/persona.js

@@ -0,0 +1,50 @@
+$(function() {
+  /* convert the links into clickable buttons that go to the
+     persona service */
+  $('a.signin').on('click', function() {
+    navigator.id.request();
+    return false;
+  });
+
+  $('a.signout').on('click', function() {
+    navigator.id.logout();
+    return false;
+  });
+
+  /* watch persona state changes */
+  navigator.id.watch({
+    loggedInUser: $CURRENT_USER,
+    onlogin: function(assertion) {
+      /* because the login needs to verify the provided assertion
+         with the persona service which requires an HTTP request,
+         this could take a bit.  To not confuse the user we show
+         a progress box */
+      var box = $('<div class=signinprogress></div>')
+        .hide()
+        .text('Please wait ...')
+        .appendTo('body')
+        .fadeIn('fast');
+      $.ajax({
+        type: 'POST',
+        url: $URL_ROOT + '_auth/login',
+        data: {assertion: assertion},
+        success: function(res, status, xhr) { window.location.reload(); },
+        error: function(xhr, status, err) {
+          box.remove();
+          navigator.id.logout();
+          alert('Login failure: ' + err);
+        }
+      });
+    },
+    onlogout: function() {
+      $.ajax({
+        type: 'POST',
+        url: $URL_ROOT + '_auth/logout',
+        success: function(res, status, xhr) { window.location.reload(); },
+        error: function(xhr, status, err) {
+          alert('Logout failure: ' + err);
+        }
+      });
+    }
+  });
+});

examples/persona/static/style.css

@@ -0,0 +1,39 @@
+html {
+    background: #eee;
+}
+
+body {
+    font-family: 'Verdana', sans-serif;
+    font-size: 15px;
+    margin: 30px auto;
+    width: 720px;
+    background: white;
+    padding: 30px;
+}
+
+h1 {
+    margin: 0;
+}
+
+h1, h2, a {
+    color: #d00;
+}
+
+div.authbar {
+    background: #eee;
+    padding: 0 15px;
+    margin: 10px -15px;
+    line-height: 25px;
+    height: 25px;
+    vertical-align: middle;
+}
+
+div.signinprogress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8) url(spinner.png) center center no-repeat;
+    font-size: 0;
+}