Completed simple day-chaning greeter.

js/lightdm-mock.js

@@ -0,0 +1,211 @@
+/*
+    Mock data for testing your LightDM theme in the browser
+*/
+if (!('lightdm' in window)) {
+    window.lightdm = {};
+    lightdm.hostname ="test-host";
+    lightdm.languages = [
+        {
+            code: "en_US",
+            name: "English(US)",
+            territory: "USA"
+        },
+        {
+            code: "en_UK",
+            name: "English(UK)",
+            territory: "UK"
+        }
+    ];
+    lightdm.default_language = lightdm.languages[0];
+    lightdm.layouts = [
+        {
+            name: "test",
+            short_description: "test description",
+            short_description:"really long epic description"
+        }
+    ];
+    lightdm.default_layout = lightdm.layouts[0];
+    lightdm.layout = lightdm.layouts[0];
+    lightdm.sessions = [
+        {
+            key: "key1",
+            name: "session 1",
+            comment: "no comment"
+        },
+        {
+            key: "key2",
+            name: "session 2",
+            comment: "no comment"
+        }
+    ];
+
+    lightdm.default_session = lightdm.sessions[0];
+    lightdm.authentication_user = null;
+    lightdm.is_authenticated = false;
+    lightdm.can_suspend = true;
+    lightdm.can_hibernate = true;
+    lightdm.can_restart = true;
+    lightdm.can_shutdown = true;
+
+    lightdm.users = [
+        {
+            name: "clarkk",
+            real_name: "Superman",
+            display_name: "Clark Kent",
+            image: "http://uk.omg.li/VDXV/1756295270.jpg.x160.jpg",
+            language: "en_US",
+            layout: null,
+            session: null,
+            logged_in: false
+        },
+        {
+            name: "brucew",
+            real_name: "Batman",
+            display_name: "Bruce Wayne",
+            image: "http://uk.omg.li/VDHr/OW-blog-Batman.jpg",
+            language: "en_US",
+            layout: null,
+            session: null,
+            logged_in: false
+        },
+        {
+            name: "peterp",
+            real_name:"Spiderman",
+            display_name: "Peter Parker",
+            image: "",
+            language: "en_US",
+            layout: null,
+            session: null,
+            logged_in: true
+        }
+    ];
+
+    lightdm.num_users = lightdm.users.length;
+    lightdm.timed_login_delay = 0; // increase to simulate timed_login_delay
+    lightdm.timed_login_user =
+        lightdm.timed_login_delay > 0 ? lightdm.users[0] : null;
+
+    lightdm.get_string_property = function () {};
+    lightdm.get_integer_property = function () {};
+    lightdm.get_boolean_property = function () {};
+    lightdm.cancel_timed_login = function () {
+        _lightdm_mock_check_argument_length(arguments, 0);
+
+        lightdm._timed_login_cancelled= true;
+    };
+
+    lightdm.respond = lightdm.provide_secret = function (secret) {
+        if (typeof lightdm._username == 'undefined' || !lightdm._username) {
+            throw "must call start_authentication first"
+        }
+        _lightdm_mock_check_argument_length(arguments, 1);
+
+        var user = _lightdm_mock_get_user(lightdm.username);
+
+        // That's right, passwords are the same as the username's!
+        if (!user && secret == lightdm._username) {
+            lightdm.is_authenticated = true;
+            lightdm.authentication_user = user;
+        } else {
+            lightdm.is_authenticated = false;
+            lightdm.authentication_user = null;
+            lightdm._username = null;
+        }
+
+        authentication_complete();
+    };
+
+    lightdm.authenticate = lightdm.start_authentication = function (username) {
+        _lightdm_mock_check_argument_length(arguments, 1);
+
+        if (lightdm._username) {
+            throw "Already authenticating!";
+        }
+        var user = _lightdm_mock_get_user(username);
+        if (!user) {
+            show_error(username + " is an invalid user");
+        }
+        show_prompt("Password: ", "password");
+        lightdm._username = username;
+    };
+
+    lightdm.cancel_authentication = function () {
+        _lightdm_mock_check_argument_length(arguments, 0);
+
+        if (!lightdm._username) {
+            throw "we are not authenticating";
+        }
+        lightdm._username = null;
+    };
+
+    lightdm.suspend = function () {
+        alert("System Suspended. Bye Bye");
+        document.location.reload(true);
+    };
+
+    lightdm.hibernate = function () {
+        alert("System Hibernated. Bye Bye");
+        document.location.reload(true);
+    };
+
+    lightdm.restart = function () {
+        alert("System restart. Bye Bye");
+        document.location.reload(true);
+    };
+
+    lightdm.shutdown = function () {
+        alert("System Shutdown. Bye Bye");
+        document.location.reload(true);
+    };
+
+    lightdm.start_session_sync = function (session) {
+        _lightdm_mock_check_argument_length(arguments, 1);
+
+        if (!lightdm.is_authenticated) {
+            throw "The system is not authenticated";
+        }
+
+        alert("logged in successfully!!");
+        document.location.reload(true);
+    };
+
+    lightdm.login = function (user, session) {
+        _lightdm_mock_check_argument_length(arguments, 2);
+
+        if (!lightdm.is_authenticated) {
+            throw "The system is not authenticated";
+        }
+        if (user !== lightdm.authentication_user) {
+            throw "this user is not authenticated";
+        }
+
+        alert("logged in successfully!!");
+        document.location.reload(true);
+    };
+
+    if (lightdm.timed_login_delay > 0) {
+        setTimeout(
+            function () {
+                if (!lightdm._timed_login_cancelled()) timed_login();
+            },
+            lightdm.timed_login_delay
+        );
+    }
+}
+// Helper functions
+var _lightdm_mock_check_argument_length = function (args, length) {
+    if (args.length != length) {
+        throw "incorrect number of arguments in function call";
+    }
+}
+
+var _lightdm_mock_get_user = function (username) {
+    var user = null;
+    for (var i = 0; i < lightdm.users.length; ++i) {
+        if (lightdm.users[i].name == username) {
+            user= lightdm.users[i];
+            break;
+        }
+    }
+    return user;
+}

js/lightdm-uestibulum.js

@@ -1,12 +1,222 @@
-var powerOptionsEl = document.getElementById("power-options")
-var powerPanelClasses = document.getElementById("power-panel").classList;
+(function() {
 
-function showPowerOptions() {
-  powerPanelClasses.add('active');
-}
+  var U = window.uestibulum = {};
+  _.templateSettings = {
+    interpolate: /\{\{(.+?)\}\}/g
+  };
+
+  U.ClockView = Backbone.View.extend({
+    el: '#clock-panel',
+
+    render: function() {
+      var now = new Date();
+      this.$el.find('.hours').text(now.getHours());
+      this.$el.find('.minutes').text(now.getMinutes() < 10 ? "0" + now.getMinutes(): now.getMinutes());
+    },
+
+    initialize: function(options) {
+      _.bindAll(this, 'render');
+      setInterval(this.render, 1000);
+      this.render();
+    }
+  });
+
+  U.PowerView = Backbone.View.extend({
+    el: '#power-panel',
+    events: {
+      'click #power-button':      'showPowerOptions',
+      'mouseout #power-options':  'hidePowerOptions',
+      'click suspend':            'suspend',
+      'click restart':            'restart',
+      'click shutdown':           'shutdown'
+    },
+    
+    initialize: function(options) {
+      _.bindAll(this, 'showPowerOptions', 'hidePowerOptions', 'restart', 'shutdown', 'suspend');
+      this.optionsEl = $('#power-options')[0];
+    },
+
+    showPowerOptions: function() { this.$el.addClass('active'); },
+    hidePowerOptions: function(e) {
+      if (e.target != this.optionsEl) return;
+      this.$el.removeClass('active');
+    },
+
+    restart: function() { lightdm.restart(); },
+    shutdown: function() { lightdm.shutdown(); },
+    suspend: function() { lightdm.suspend(); }
+
+  });
+
+  U.LoginView = Backbone.View.extend({
+    el: '#login-panel',
+    events: {
+      'click #user-display':            'showUserSelect',
+      'click li.user':                  'selectUser',
+      'keypress input[type=password]':  'enterPassword'
+    },
+
+    initialize: function(options) {
+      _.bindAll(this, 'enterPassword', 'getUserName',
+                'render', 'showPrompt', 'showUserSelect');
+
+      this.uiView = options.uiView;
+      window.show_prompt = this.showPrompt;
+      this.user = lightdm.users[0];
+
+      lightdm.authenticate(this.user.name);
+      //lightdm.start_authentication(this.user.name);
+    },
+
+    getUserName: function(user) {
+      return user.display_name || user.real_name || user.name;
+    },
+
+    render: function() {
+      this.undelegateEvents();
+      var greeting = 'Good ' + this.uiView.timePeriod;
+
+      var $userListEl = this.$el.find('#users-list');
+      $userListEl.html(
+        _.map(lightdm.users, function(user) {
+          return '<li class=user data-username="' + user.name + '">' + 
+            this.getUserName(user) + '</li>';
+        }, this).join('\n'));
+
+      if (this.user) {
+        this.$el.find('#greeting').text(greeting);
+        this.$el.find('#user-display').text(this.getUserName(this.user));
+      } 
+      this.delegateEvents();
+    },
+
+    showUserSelect: function() {
+      this.$el.removeClass('failed-auth');
+      this.$el.find('#users').addClass('select-user');
+      lightdm.cancel_authentication();
+      this.$el.find('input[type=password]').removeClass('active');
+      this.user = null;
+    },
+
+    selectUser: function(e) {
+      var username = $(e.target).attr('data-username');
+      this.$el.find('#users').removeClass('select-user');
+      this.user = _.find(lightdm.users, function(user) {
+        return user.name == username; });
+      lightdm.authenticate(this.user.name);
+      this.render();
+    },
+
+    showPrompt: function(text, type) {
+      if (type == 'password') {
+        var $pwdInput = this.$el.find('input[type=password]');
+        $pwdInput.addClass('active');
+        $pwdInput.focus();
+      }
+
+      else alert(type + ': ' + text);
+    },
+
+    enterPassword: function(e) {
+      this.$el.removeClass('failed-auth');
+      //if (e.key != 'Enter') return;
+      if (e.keyCode != 13) return;
+      lightdm.respond($(e.target).val());
+    }
+
+  });
+
+  U.SessionView = Backbone.View.extend({
+    el: '#session-panel',
+    events: {
+      'click #session-display':   'showSessionSelect',
+      'click li.session':         'selectSession'
+    },
+
+    initialize: function(options) {
+      _.bindAll(this, 'render', 'showSessionSelect', 'selectSession');
+
+      this.session = lightdm.sessions[0];
+    },
+
+    render: function() {
+      this.$el.find('#sessions-list').html(
+        _.map(lightdm.sessions, function(session) {
+          return '<li class=session data-sessionkey="' + session.key + '">' +
+            session.name + '</li>'; }).join('<li>&nbsp;|&nbsp;</li>'));
+
+      if (this.session) {
+        this.$el.find('#session-display').text(this.session.name); }
+    },
+
+    showSessionSelect: function() {
+      this.$el.find('#sessions').addClass('select-session');
+    },
+
+    selectSession: function(e) {
+      this.$el.find('#sessions').removeClass('select-session');
+      var sessionKey = $(e.target).attr('data-sessionkey');
+      this.session = _.find(lightdm.sessions, function(session) {
+        return session.key == sessionKey; });
+      this.render();
+    }
+  });
+
+  U.UIView = Backbone.View.extend({
+    el: 'body',
+    events: {},
+
+    initialize: function(options) {
+      _.bindAll(this, 'render', 'authComplete', 'checkTimePeriod');
+
+      window.authentication_complete = this.authComplete;
+
+      this.timePeriod = 'day';
+      this.loginView = new U.LoginView({uiView: this});
+      this.sessionView = new U.SessionView();
+      this.clockView = new U.ClockView();
+      this.powerView = new U.PowerView();
+      this.render();
+    },
+
+    authComplete: function() {
+      if (lightdm.is_authenticated) {
+        //lightdm.start_session_sync(this.sessionView.session.key);
+        lightdm.login(this.loginView.user, this.sessionView.session.key);
+      }
+      else {
+        this.$el.find('#login-panel').addClass('failed-auth');
+        lightdm.authenticate(this.loginView.user.name);
+        //lightdm.start_authentication(this.loginView.user.name);
+      }
+    },
+
+    render: function() {
+      var prevTimePeriod = this.timePeriod;
+      this.checkTimePeriod();
+
+      if (this.timePeriod != prevTimePeriod) {
+        this.$el.removeClass(prevTimePeriod);
+        this.$el.addClass(this.timePeriod);
+        this.loginView.render();
+        this.sessionView.render();
+      }
+    },
+
+    checkTimePeriod: function() {
+      var now = new Date();
+      if (now.getHours() >= 21 || now.getHours() < 4) this.timePeriod = 'night';
+      else if (now.getHours() < 12) this.timePeriod = 'morning';
+      else if (now.getHours() < 18) this.timePeriod = 'afternoon';
+      else this.timePeriod = 'evening';
+    }
+  });
+
+  $(document).ready(function() { 
+    U.uiView = new U.UIView();
+  });
+
+
+
+})();
 
-function hidePowerOptions(e) {
-  console.log(e.target);
-  if (e.target != powerOptionsEl) return;
-  powerPanelClasses.remove('active');
-}