implement feedback on keygen and login

src/js/app.js

@@ -22,7 +22,7 @@ require([
     // set router paths
     app.config(function($routeProvider) {
         $routeProvider.when('/login', {
-            templateUrl: 'tpl/loading.html',
+            templateUrl: 'tpl/login.html',
             controller: LoginCtrl
         });
         $routeProvider.when('/login-existing', {

src/js/controller/login-existing.js

@@ -4,61 +4,49 @@ define(function(require) {
     var appController = require('js/app-controller');
 
     var LoginExistingCtrl = function($scope, $location) {
+        var emailDao = appController._emailDao;
+
         $scope.buttonEnabled = true;
         $scope.incorrect = false;
 
         $scope.confirmPassphrase = function() {
-            var passphrase = $scope.passphrase,
+            if (!$scope.passphrase) {
-                emailDao = appController._emailDao;
-
-            if (!passphrase) {
                 return;
             }
 
             // disable button once loggin has started
             $scope.buttonEnabled = false;
             $scope.incorrect = false;
-            unlockCrypto(imapLogin);
+            unlockCrypto();
-
-            function unlockCrypto(callback) {
-                var userId = emailDao._account.emailAddress;
-                emailDao._keychain.getUserKeyPair(userId, function(err, keypair) {
-                    if (err) {
-                        callback(err);
-                        return;
-                    }
-                    emailDao.unlock(keypair, passphrase, callback);
-                });
-            }
-
-            function imapLogin(err) {
-                if (err) {
-                    handleError(err);
-                    return;
-                }
-
-                // login to imap backend
-                appController._emailDao.imapLogin(function(err) {
-                    if (err) {
-                        handleError(err);
-                        return;
-                    }
-                    onLogin();
-                });
-            }
         };
 
+        function unlockCrypto() {
+            var userId = emailDao._account.emailAddress;
+            appController._emailDao._keychain.getUserKeyPair(userId, function(err, keypair) {
+                if (err) {
+                    handleError(err);
+                    return;
+                }
+                emailDao.unlock(keypair, $scope.passphrase, onUnlock);
+            });
+        }
+
+        function onUnlock(err) {
+            if (err) {
+                handleError(err);
+                return;
+            }
+
+            $location.path('/desktop');
+            $scope.$apply();
+        }
+
         function handleError(err) {
             $scope.incorrect = true;
             $scope.buttonEnabled = true;
             $scope.$apply();
             console.error(err);
         }
-
-        function onLogin() {
-            $location.path('/desktop');
-            $scope.$apply();
-        }
     };
 
     return LoginExistingCtrl;

src/js/controller/login-initial.js

@@ -51,26 +51,26 @@ define(function(require) {
                 }
 
                 var id = keys.keyId.substring(8, keys.keyId.length);
-                dl.createDownload(keys.publicKeyArmored + keys.privateKeyArmored, id + '.asc', 'text/plain');
+                dl.createDownload({
-                $scope.exported = true;
+                    content: keys.publicKeyArmored + keys.privateKeyArmored,
+                    filename: id + '.asc',
+                    contentType: 'text/plain'
+                }, onSave);
             });
-        };
 
-        $scope.proceed = function() {
+            function onSave(err) {
-            // login to imap backend
-            appController._emailDao.imapLogin(function(err) {
                 if (err) {
                     console.error(err);
                     return;
                 }
-                onLogin();
+                $scope.proceed();
-            });
-        };
-
-        function onLogin() {
-            $location.path('/desktop');
                 $scope.$apply();
             }
+        };
+
+        $scope.proceed = function() {
+            $location.path('/desktop');
+        };
 
         function setState(state, async) {
             $scope.state = state;

src/js/controller/login-new-device.js

@@ -5,25 +5,25 @@ define(function(require) {
         appController = require('js/app-controller');
 
     var LoginExistingCtrl = function($scope, $location) {
+        var emailDao = appController._emailDao;
+
         $scope.incorrect = false;
 
         $scope.confirmPassphrase = function() {
-            var passphrase = $scope.passphrase,
+            if (!$scope.passphrase) {
-                emailDao = appController._emailDao;
-
-            if (!passphrase) {
                 $scope.incorrect = true;
                 return;
             }
 
             $scope.incorrect = false;
-            unlockCrypto(imapLogin);
+            unlockCrypto();
+        };
 
-            function unlockCrypto(callback) {
+        function unlockCrypto() {
             var userId = emailDao._account.emailAddress;
             emailDao._keychain.getUserKeyPair(userId, function(err, keypair) {
                 if (err) {
-                        callback(err);
+                    console.error(err);
                     return;
                 }
 
@@ -32,37 +32,26 @@ define(function(require) {
                     userId: userId,
                     encryptedKey: $scope.key.privateKeyArmored
                 };
-                    emailDao.unlock(keypair, passphrase, function(err) {
+
+                emailDao.unlock(keypair, $scope.passphrase, function(err) {
                     if (err) {
                         $scope.incorrect = true;
                         $scope.$apply();
-                            callback(err);
+                        console.error(err);
                         return;
                     }
 
-                        emailDao._keychain.putUserKeyPair(keypair, callback);
+                    emailDao._keychain.putUserKeyPair(keypair, onUnlock);
                 });
             });
         }
 
-            function imapLogin(err) {
+        function onUnlock(err) {
             if (err) {
                 console.error(err);
                 return;
             }
 
-                // login to imap backend
-                appController._emailDao.imapLogin(function(err) {
-                    if (err) {
-                        console.error(err);
-                        return;
-                    }
-                    onLogin();
-                });
-            }
-        };
-
-        function onLogin() {
             $location.path('/desktop');
             $scope.$apply();
         }

src/js/controller/login.js

@@ -27,15 +27,24 @@ define(function(require) {
                     return;
                 }
 
+                // initiate controller by creating email dao
                 appController.init(auth.emailAddress, auth.token, function(err, availableKeys) {
                     if (err) {
                         console.error(err);
                         return;
                     }
 
+                    // login to imap backend
+                    appController._emailDao.imapLogin(function(err) {
+                        if (err) {
+                            console.error(err);
+                            console.log('Error logging into IMAP... proceeding in offline mode.');
+                        }
+
                         redirect(availableKeys);
                     });
                 });
+            });
         }
 
         function redirect(availableKeys) {

src/js/util/download.js

@@ -3,23 +3,40 @@ define(function() {
 
     var dl = {};
 
-    dl.createDownload = function(content, filename, contentType) {
+    dl.createDownload = function(options, callback) {
-        contentType = contentType || 'application/octet-stream';
+        var contentType = options.contentType || 'application/octet-stream';
+
         chrome.fileSystem.chooseEntry({
             type: 'saveFile',
-            suggestedName: filename
+            suggestedName: options.filename
-        }, function(file) {
+        }, onEntry);
+
+        function onEntry(file) {
             if (!file) {
+                callback();
                 return;
             }
-            file.createWriter(function(writer) {
+            file.createWriter(onWriter, onError);
-                writer.onerror = console.error;
+        }
-                writer.onwriteend = function() {};
+
-                writer.write(new Blob([content], {
+        function onWriter(writer) {
+            writer.onerror = onError;
+            writer.onwriteend = onEnd;
+            writer.write(new Blob([options.content], {
                 type: contentType
             }));
-            }, console.error);
+        }
+
+        function onError(e) {
+            console.error(e);
+            callback({
+                errMsg: 'Error exporting keypair to file!'
             });
+        }
+
+        function onEnd() {
+            callback();
+        }
     };
 
     return dl;

src/sass/all.scss

@@ -19,6 +19,7 @@
 @import "components/layout";
 
 // Views
+@import "views/shared";
 @import "views/navigation";
 @import "views/mail-list";
 @import "views/read";

src/sass/views/_shared.scss

@@ -0,0 +1,3 @@
+.waiting-cursor {    
+    cursor: wait;
+}

src/tpl/loading.html

@@ -1 +0,0 @@
-<p>loading...</p>

src/tpl/login-initial.html

@@ -1,4 +1,4 @@
-<div class="view-login">
+<div class="view-login" ng-class="{'waiting-cursor': state === states.PROCESSING}">
 
   <div class="logo-wrapper">
     <div class="logo"></div>
@@ -7,7 +7,7 @@
   <div class="content" ng-show="state === states.IDLE">
     <h1>Set passphrase</h1>
 
-    <p>If you forget your passphrase, there is no way to restore your data. So it might be a good idea to write it down and keep it in a safe place.</p>
+    <p>This is used to protect your keypair. If you forget your passphrase, there is no way to restore your data.</p>
 
     <form>
       <div>
@@ -23,15 +23,15 @@
   <div class="content" ng-show="state === states.PROCESSING">
     <h1>Generating keypair</h1>
 
-    <p>A batch of highly trained monkeys has been dispatched to collect entropy for your personal keypair. Please stand by...</p>
+    <p>Please stand by. This can take a while...</p>
   </div><!--/content-->
 
   <div class="content" ng-show="state === states.DONE">
     <h1>Keypair generated</h1>
 
-    <p>A keypair has been generated for you. Please store this key pair in a safe location before you proceed.</p>
+    <p>Your personal keypair has been generated. You can export it (e.g. to a USB flash drive) to setup whiteout on another computer or as a backup.</p>
-    <button ng-click="exportKeypair()" class="btn" tabindex="4">Export keypair</button>
+    <button ng-click="exportKeypair()" class="btn" tabindex="4">Export now</button>
-    <button ng-click="proceed()" ng-disabled="!exported" class="btn" tabindex="4">Proceed</button>
+    <button ng-click="proceed()" class="btn" tabindex="5">Do it later</button>
   </div><!--/content-->
 
 </div>

src/tpl/login.html

@@ -0,0 +1,13 @@
+<div class="view-login waiting-cursor">
+
+  <div class="logo-wrapper">
+    <div class="logo"></div>
+  </div><!--/logo-->
+
+  <div class="content">
+    <h1>Login</h1>
+
+    <p>Authenticating with the mail server...</p>
+  </div><!--/content-->
+
+</div>