Added login screen

ubarni · May 5, 2013 · 2c3a3be · 2c3a3be
1 parent 77a9410
commit 2c3a3be
Show file tree

Hide file tree

Showing 6 changed files with 235 additions and 4 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -3,11 +3,32 @@ angular.module('connair', ['ngResource', 'ngCookies', 'http-auth-interceptor'])
   var HOME = {templateUrl: 'parts/panelSelection.html'};
   $routeProvider
   .when('/', HOME)
-  .when('/login', {templateUrl: 'parts/login.html'})
+  .when('/login', {templateUrl: 'parts/login.html', controller: 'LoginCtrl'})
   .when('/:panelTitle', {templateUrl: 'parts/panel.html', controller: 'PanelCtrl'})
   .otherwise(HOME);
 })
-.controller('MainCtrl', function($scope, $resource, $http, $location, $cookies) {
+.factory('loginService', function ($http, Base64, authService) {
+  var PINKEY = 'connairpin',
+      pin = null;
+
+  function setPin(newPin) {
+    pin = newPin;
+    $http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('connairpin:' + pin);
+  }
+
+  function enterPin(newPin) {
+    localStorage.setItem(PINKEY, newPin);
+    setPin(newPin);
+    authService.loginConfirmed();
+  };
+
+  setPin(localStorage.getItem(PINKEY));
+
+  return {
+    enterPin: enterPin
+  };
+})
+.controller('MainCtrl', function ($scope, $resource, $http, $location) {
   var HOME_TITLE = $scope.pageTitle = 'ConnAir Remote Touch';
   var CONFIG_PATH = 'config/panel-config.json';
   function convertShy(t) {
@@ -74,4 +95,38 @@ angular.module('connair', ['ngResource', 'ngCookies', 'http-auth-interceptor'])
     });
   };
 })
+.controller('LoginCtrl', function ($scope, loginService) {
+  function resetPin() {
+    $scope.enteredDigits = ['', '', '', ''];
+    $scope.pin = '';
+  }
+  resetPin();
+  $scope.numberButtonRows = [
+    [1, 2, 3],
+    [4, 5, 6],
+    [7, 8, 9],
+    ['C', 0]
+  ];
+  $scope.enterDigit = function (button) {    
+    if (button == 'C') {
+      resetPin();
+    } else {
+      $scope.enteredDigits[$scope.pin.length] = '•';
+      $scope.pin += button.toString();
+      if ($scope.pin.length == 4) {
+        loginService.enterPin($scope.pin);
+        $scope.gotoPanel('');
+      }
+    }
+  }
+})
+.controller('LoginButtonCtrl', function ($scope, $timeout) {
+  $scope.onClick = function () {
+    $scope.enterDigit($scope.button);
+    $scope.className = 'actionRunning';
+    $timeout(function () {
+      $scope.className = 'actionDone';
+    });
+  }
+})
 ;
diff --git a/src/app/base64.js b/src/app/base64.js
@@ -0,0 +1,85 @@
+angular.module('connair')
+.factory('Base64', function() {
+    var keyStr = 'ABCDEFGHIJKLMNOP' +
+        'QRSTUVWXYZabcdef' +
+        'ghijklmnopqrstuv' +
+        'wxyz0123456789+/' +
+        '=';
+    return {
+        encode: function (input) {
+            var output = "";
+            var chr1, chr2, chr3 = "";
+            var enc1, enc2, enc3, enc4 = "";
+            var i = 0;
+
+            do {
+                chr1 = input.charCodeAt(i++);
+                chr2 = input.charCodeAt(i++);
+                chr3 = input.charCodeAt(i++);
+
+                enc1 = chr1 >> 2;
+                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+                enc4 = chr3 & 63;
+
+                if (isNaN(chr2)) {
+                    enc3 = enc4 = 64;
+                } else if (isNaN(chr3)) {
+                    enc4 = 64;
+                }
+
+                output = output +
+                    keyStr.charAt(enc1) +
+                    keyStr.charAt(enc2) +
+                    keyStr.charAt(enc3) +
+                    keyStr.charAt(enc4);
+                chr1 = chr2 = chr3 = "";
+                enc1 = enc2 = enc3 = enc4 = "";
+            } while (i < input.length);
+
+            return output;
+        },
+
+        decode: function (input) {
+            var output = "";
+            var chr1, chr2, chr3 = "";
+            var enc1, enc2, enc3, enc4 = "";
+            var i = 0;
+
+            // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
+            var base64test = /[^A-Za-z0-9\+\/\=]/g;
+            if (base64test.exec(input)) {
+                alert("There were invalid base64 characters in the input text.\n" +
+                    "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
+                    "Expect errors in decoding.");
+            }
+            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+            do {
+                enc1 = keyStr.indexOf(input.charAt(i++));
+                enc2 = keyStr.indexOf(input.charAt(i++));
+                enc3 = keyStr.indexOf(input.charAt(i++));
+                enc4 = keyStr.indexOf(input.charAt(i++));
+
+                chr1 = (enc1 << 2) | (enc2 >> 4);
+                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+                chr3 = ((enc3 & 3) << 6) | enc4;
+
+                output = output + String.fromCharCode(chr1);
+
+                if (enc3 != 64) {
+                    output = output + String.fromCharCode(chr2);
+                }
+                if (enc4 != 64) {
+                    output = output + String.fromCharCode(chr3);
+                }
+
+                chr1 = chr2 = chr3 = "";
+                enc1 = enc2 = enc3 = enc4 = "";
+
+            } while (i < input.length);
+
+            return output;
+        }
+    };
+});
diff --git a/src/css/style.css b/src/css/style.css
@@ -133,10 +133,34 @@ html {
   transition: background 3s;
   -webkit-transition: background 3s;
 }
+.actionDone {
+  transition: background 1s;
+  -webkit-transition: background 1s;
+}
 .toggleError {
   font-size: .3cm;
 }
-
+.pinButton, .enteredDigit {
+  display: inline-block;
+}
+.pinButton {
+  background-color: #f00;
+  border-radius: 1cm;
+  width: 2.5cm;
+  padding-left: .5cm;
+  margin: .1cm;
+  cursor: pointer;
+}
+.enteredDigit {
+  color: #ddd;
+  border: .1cm solid red;
+  border-radius: .2cm;
+  width: 1.5cm;
+  text-align: center;
+  height: 1.5cm;
+  vertical-align: top;
+  margin: .35cm;
+}
 /** colors **/
 /* 2357 = default */
 .panel, .panelBackIcon > div {

diff --git a/src/index.html b/src/index.html
@@ -9,9 +9,11 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-cookies.js"></script>
+    <script src="lib/localStoragePolyfill.js"></script>
     <script src="lib/http-auth-interceptor.js"></script>
     <link rel="stylesheet" href="css/style.css">
     <script src="app/app.js"></script>
+    <script src="app/base64.js"></script>
   </head> 
   <body ng-class="getColorSchemeClass()">
     <div ng-view></div>

diff --git a/src/lib/localStoragePolyfill.js b/src/lib/localStoragePolyfill.js
@@ -0,0 +1,60 @@
+if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
diff --git a/src/parts/login.html b/src/parts/login.html
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html>
 <body>
-  Please enter PIN.
+  <div><span ng-repeat="digit in enteredDigits" class="enteredDigit">{{digit}}</span></div>
+  <div ng-repeat="buttons in numberButtonRows">
+    <span ng-repeat="button in buttons" class="pinButton" ng-click="onClick()" ng-class="className" ng-controller="LoginButtonCtrl">
+      {{button}}
+    </span>
+  </div>
 </body>
 </html>