add support to sign in with mozilla persona

static/js/account.js

@@ -30,24 +30,28 @@ pandora.ui.accountDialogOptions = function(action, value) {
     var buttons = {
             signin: ['signup', 'reset'],
             signup: ['signin'],
+            username: [],
             reset: ['signin'],
             resetAndSignin: []
         },
         buttonTitle = {
             signin: 'Sign In',
             signup: 'Sign Up',
+            username: 'Sign Up',
             reset: 'Reset Password',
             resetAndSignin: 'Sign In'
         },
         dialogText = {
             signin: Ox._('To sign in to your account, please enter your username and password.'),
             signup: Ox._('To sign up for an account, please choose a username and password, and enter your e-mail address.'),
+            username: Ox._('To sign up for an account, please choose a username.'),
             reset: Ox._('To reset your password, please enter either your username or your e-mail address.'),
             resetAndSignin: Ox._('To sign in to your account, please choose a new password, and enter the code that we have just e-mailed to you.')
         },
         dialogTitle = {
             signin: Ox._('Sign In'),
             signup: Ox._('Sign Up'),
+            username: Ox._('Sign Up'),
             reset: Ox._('Reset Password'),
             resetAndSignin: Ox._('Reset Password')
         };
@@ -132,6 +136,7 @@ pandora.ui.accountForm = function(action, value) {
     var items = {
             'signin': ['username', 'password'],
             'signup': ['newUsername', 'password', 'email'],
+            'username': ['newUsername'],
             'reset': ['usernameOrEmail'],
             'resetAndSignin': ['oldUsername', 'newPassword', 'code']
         },

static/js/mainMenu.js

@@ -16,6 +16,8 @@ pandora.ui.mainMenu = function() {
                     return pandora.$ui.localeButton = pandora.ui.localeButton();
                 } else if (menuExtra == 'reload') {
                     return pandora.$ui.loadingIcon = pandora.ui.loadingIcon();
+                } else if (menuExtra == 'persona') {
+                    return pandora.$ui.personaButton = pandora.ui.personaButton();
                 }
             }),
             id: 'mainMenu',

static/js/persona.js

@@ -0,0 +1,115 @@
+'use strict';
+
+pandora.persona = {};
+
+pandora.persona.init = function(callback) {
+
+    (!navigator.id ? Ox.getFile : Ox.noop)(
+        'https://login.persona.org/include.js',
+        function() {
+            navigator.id.watch({
+              loggedInUser: pandora.user.email ? pandora.user.email : null,
+              onlogin: onlogin,
+              onlogout: onlogout
+            });
+            callback && callback();
+        }
+    );
+
+    function getUsername(callback) {
+        pandora.$ui.accountDialog = pandora.ui.accountDialog('username').open();
+        pandora.$ui.accountForm.bindEvent({
+            submit: function(data) {
+                callback(data.values.username);
+                pandora.$ui.accountDialog.close();
+            }
+        });
+        return pandora.$ui.accountDialog;
+    }
+
+    function onlogin(assertion, username) {
+        pandora.api.signin({
+            assertion: assertion,
+            username: username
+        }, function(result) {
+            if (!result.data.errors && result.status.code == 200) {
+                pandora.signin(result.data);
+            } else if (!username
+                       && result.data.errors && result.data.errors.username) {
+                getUsername(function(username) {
+                    onlogin(assertion, username);
+                });
+            } else {
+                onlogout();
+                //fixme: show some error
+            }
+        });
+    }
+
+    function onlogout() {
+        pandora.UI.set({page: ''});
+        pandora.api.signout({}, function(result) {
+            pandora.signout(result.data);
+        });
+    }
+
+};
+
+pandora.persona.signin = function() {
+    
+    navigator.id.request();
+
+};
+
+pandora.persona.signout = function() {
+
+    navigator.id.logout();
+
+};
+
+pandora.ui.personaButton = function() {
+
+    var isGuest = pandora.user.level == 'guest',
+        that = Ox.Element({
+                tooltip: Ox._(
+                    isGuest ? 'Click to sign with Persona'
+                    : 'Click to open preferences or doubleclick to sign out'
+                )
+            })
+            .css({marginLeft: '3px'})
+            .bindEvent({
+                singleclick: function() {
+                    isGuest
+                        ? pandora.persona.signin()
+                        : pandora.UI.set({page: 'preferences'});
+                },
+                doubleclick: function() {
+                    pandora.UI.set({page: isGuest ? 'signin' : 'signout'});
+                }
+            });
+
+    pandora.persona.init();
+    $('<div>')
+        .addClass('OxLight')
+        .css({
+            float: 'left',
+            marginTop: '2px',
+            fontSize: '9px'
+        })
+        .html(
+            isGuest ? Ox._('Sign in')
+            : Ox.encodeHTMLEntities(pandora.user.username)
+        )
+        .appendTo(that);
+
+    Ox.Button({
+            style: 'symbol',
+            title: 'user',
+            type: 'image'
+        })
+        .css({float: 'left'})
+        .appendTo(that);
+
+    return that;
+
+};