Integrate wo-input-code directive

src/js/app.js

@@ -63,7 +63,6 @@ var app = angular.module('mail', [
     'read',
     'contacts',
     'login-new-device',
-    'privatekey-upload',
     'infinite-scroll'
 ]);
 

src/js/controller/app/privatekey-upload.js

@@ -33,26 +33,6 @@ var PrivateKeyUploadCtrl = function($scope, keychain, pgp, dialog, auth) {
         }
     };
 
-    $scope.handlePaste = function(event) {
-        var evt = event;
-        if (evt.originalEvent) {
-            evt = evt.originalEvent;
-        }
-
-        var value = evt.clipboardData.getData('text/plain');
-        if (!value) {
-            return;
-        }
-
-        value = value.replace(/-/g, '');
-        $scope.code0 = value.slice(0, 4);
-        $scope.code1 = value.slice(4, 8);
-        $scope.code2 = value.slice(8, 12);
-        $scope.code3 = value.slice(12, 16);
-        $scope.code4 = value.slice(16, 20);
-        $scope.code5 = value.slice(20, 24);
-    };
-
     $scope.checkServerForKey = function(callback) {
         var keyParams = pgp.getKeyParams();
         keychain.hasPrivateKey({
@@ -80,14 +60,12 @@ var PrivateKeyUploadCtrl = function($scope, keychain, pgp, dialog, auth) {
         $scope.code = util.randomString(24);
         $scope.displayedCode = $scope.code.slice(0, 4) + '-' + $scope.code.slice(4, 8) + '-' + $scope.code.slice(8, 12) + '-' + $scope.code.slice(12, 16) + '-' + $scope.code.slice(16, 20) + '-' + $scope.code.slice(20, 24);
 
-        // clear input fields of any previous artifacts
+        // clear input field of any previous artifacts
-        $scope.code0 = $scope.code1 = $scope.code2 = $scope.code3 = $scope.code4 = $scope.code5 = '';
+        $scope.inputCode = '';
     };
 
     $scope.verifyCode = function() {
-        var inputCode = '' + $scope.code0 + $scope.code1 + $scope.code2 + $scope.code3 + $scope.code4 + $scope.code5;
+        if ($scope.inputCode.toUpperCase() !== $scope.code) {
-
-        if (inputCode.toUpperCase() !== $scope.code) {
             var err = new Error('The code does not match. Please go back and check the generated code.');
             dialog.error(err);
             return false;
@@ -171,26 +149,4 @@ var PrivateKeyUploadCtrl = function($scope, keychain, pgp, dialog, auth) {
 
 };
 
-//
-// Directives
-//
-
-var ngModule = angular.module('privatekey-upload', []);
-ngModule.directive('focusNext', function() {
-    return {
-        link: function(scope, element, attr) {
-            var maxLen = element[0].maxLength;
-
-            scope.$watch(attr.ngModel, function(val) {
-                if (val && val.length === maxLen) {
-                    var nextinput = element.next('input');
-                    if (nextinput.length) {
-                        nextinput[0].focus();
-                    }
-                }
-            });
-        }
-    };
-});
-
 module.exports = PrivateKeyUploadCtrl;

src/js/controller/login/login-privatekey-download.js

@@ -70,10 +70,8 @@ var LoginPrivateKeyDownloadCtrl = function($scope, $location, $routeParams, auth
     };
 
     $scope.decryptAndStorePrivateKeyLocally = function() {
-        var inputCode = '' + $scope.code0 + $scope.code1 + $scope.code2 + $scope.code3 + $scope.code4 + $scope.code5;
-
         var options = $scope.encryptedPrivateKey;
-        options.code = inputCode.toUpperCase();
+        options.code = $scope.code.toUpperCase();
 
         keychain.decryptAndStorePrivateKeyLocally(options, function(err, privateKey) {
             if (err) {
@@ -108,26 +106,6 @@ var LoginPrivateKeyDownloadCtrl = function($scope, $location, $routeParams, auth
         });
     };
 
-    $scope.handlePaste = function(event) {
-        var evt = event;
-        if (evt.originalEvent) {
-            evt = evt.originalEvent;
-        }
-
-        var value = evt.clipboardData.getData('text/plain');
-        if (!value) {
-            return;
-        }
-
-        value = value.replace(/-/g, '');
-        $scope.code0 = value.slice(0, 4);
-        $scope.code1 = value.slice(4, 8);
-        $scope.code2 = value.slice(8, 12);
-        $scope.code3 = value.slice(12, 16);
-        $scope.code4 = value.slice(16, 20);
-        $scope.code5 = value.slice(20, 24);
-    };
-
     //
     // helper functions
     //

src/js/directive/common.js

@@ -222,6 +222,12 @@ ngModule.directive('woInputCode', function() {
         link: function(scope, elm, attrs, ngModelCtrl) {
             function format(val) {
                 var str = '';
+
+                // check if value exists
+                if (!val) {
+                    return str;
+                }
+
                 for(var i = 0; i < val.length; i++) {
                     if(i > 0 && i % BLOCK_SIZE === 0) {
                         str += BLOCK_DIVIDER;

src/tpl/login-privatekey-download.html

@@ -43,16 +43,8 @@
           <p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
 
           <div class="form__row">
-            <!-- TODO utilize woInputCode -->
+            <input type="text" class="input-text" ng-model="code" wo-input-code wo-focus-me="step === 2"
-            <div class="input-code">
+              required pattern="([a-zA-Z0-9\-]*)" placeholder="0000-0000-0000-0000-0000-0000">
-              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code0" wo-focus-me="step === 2" focus-next required ng-paste="handlePaste($event)"> -
-              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code1" focus-next required> -
-              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code2" focus-next required> -
-              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code3" focus-next required> -
-              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code4" focus-next required> -
-              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code5" required>
-            </div>
-            <input type="text" class="input-text" ng-model="code" wo-focus-me="step === 2" wo-input-code required>
           </div>
           <div class="spinner-block" ng-show="busy">
             <span class="spinner spinner--big"></span>

src/tpl/privatekey-upload.html

@@ -25,16 +25,8 @@
       <div ng-show="step === 2">
         <p class="typo-paragraph">Please confirm the keychain code you have written down.</p>
         <form class="form">
-          <!-- TODO utilize woInputCode -->
+          <input type="text" class="input-text" ng-model="inputCode" wo-input-code wo-focus-me="step === 2"
-          <div class="input-code">
+              required pattern="([a-zA-Z0-9\-]*)" placeholder="0000-0000-0000-0000-0000-0000">
-            <input type="text" class="input-text" size="4" maxlength="4" ng-model="code0" wo-focus-me="step === 2" focus-next ng-paste="handlePaste($event)"> -
-            <input type="text" class="input-text" size="4" maxlength="4" ng-model="code1" focus-next> -
-            <input type="text" class="input-text" size="4" maxlength="4" ng-model="code2" focus-next> -
-            <input type="text" class="input-text" size="4" maxlength="4" ng-model="code3" focus-next> -
-            <input type="text" class="input-text" size="4" maxlength="4" ng-model="code4" focus-next> -
-            <input type="text" class="input-text" size="4" maxlength="4" ng-model="code5">
-          </div>
-          <input type="text" class="input-text" ng-model="code" wo-focus-me="step === 2" wo-input-code required>
         </form>
       </div>