From 0e08a31b21bf93106cd77954c86342d8820a74eb Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Tue, 22 Oct 2013 14:59:36 +0200
Subject: [PATCH] show error on incorrect input

---
 src/js/controller/login-existing.js | 15 +++++++++++----
 src/sass/views/_login.scss          |  5 +++++
 src/tpl/login-existing.html         |  2 +-
 src/tpl/login-initial.html          |  2 +-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/js/controller/login-existing.js b/src/js/controller/login-existing.js
index 9acb772..82834f7 100644
--- a/src/js/controller/login-existing.js
+++ b/src/js/controller/login-existing.js
@@ -5,6 +5,7 @@ define(function(require) {
 
     var LoginExistingCtrl = function($scope, $location) {
         $scope.buttonEnabled = true;
+        $scope.incorrect = false;
 
         $scope.confirmPassphrase = function() {
             var passphrase = $scope.passphrase,
@@ -16,6 +17,7 @@ define(function(require) {
 
             // disable button once loggin has started
             $scope.buttonEnabled = false;
+            $scope.incorrect = false;
             unlockCrypto(imapLogin);
 
             function unlockCrypto(callback) {
@@ -31,16 +33,14 @@ define(function(require) {
 
             function imapLogin(err) {
                 if (err) {
-                    $scope.buttonEnabled = true;
-                    console.error(err);
+                    handleError(err);
                     return;
                 }
 
                 // login to imap backend
                 appController._emailDao.imapLogin(function(err) {
                     if (err) {
-                        $scope.buttonEnabled = true;
-                        console.error(err);
+                        handleError(err);
                         return;
                     }
                     onLogin();
@@ -48,6 +48,13 @@ define(function(require) {
             }
         };
 
+        function handleError(err) {
+            $scope.incorrect = true;
+            $scope.buttonEnabled = true;
+            $scope.$apply();
+            console.error(err);
+        }
+
         function onLogin() {
             $location.path('/desktop');
             $scope.$apply();
diff --git a/src/sass/views/_login.scss b/src/sass/views/_login.scss
index 2bb6b4c..e3235a7 100644
--- a/src/sass/views/_login.scss
+++ b/src/sass/views/_login.scss
@@ -39,6 +39,11 @@
             border-style: solid;
             border-color: $color-grey-light;
             padding: 5px;
+            outline: none;
+        }
+
+        .error {
+            border: 1px solid red;
         }
     }
 }
diff --git a/src/tpl/login-existing.html b/src/tpl/login-existing.html
index 101171f..409718b 100644
--- a/src/tpl/login-existing.html
+++ b/src/tpl/login-existing.html
@@ -11,7 +11,7 @@
 
     <form>
       <div>
-       <input type="password" ng-model="passphrase" class="passphrase" placeholder="Passphrase" tabindex="1" focus-me="true">
+       <input type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="1" focus-me="true">
       </div>
       <div>
         <button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!buttonEnabled" tabindex="2">Unlock</button>
diff --git a/src/tpl/login-initial.html b/src/tpl/login-initial.html
index 6b0cac2..49ce3c3 100644
--- a/src/tpl/login-initial.html
+++ b/src/tpl/login-initial.html
@@ -13,7 +13,7 @@
     <form>
       <div>
         <input type="password" ng-model="passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
-        <input type="password" ng-model="confirmation" placeholder="Confirm Passphrase" tabindex="2">
+        <input type="password" ng-model="confirmation" ng-class="{error: confirmation !== passphrase}" placeholder="Confirm Passphrase" tabindex="2">
       </div>
       <div>
         <button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!passphrase || passphrase!==confirmation" tabindex="3">Generate keypair</button>