use radio buttons - refactor

src/js/controllers/lock.js

@@ -1,18 +1,38 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('lockController', function($state, $scope, $timeout, $log, configService, popupService, gettextCatalog, appConfigService, fingerprintService, profileService, lodash) {
+  var NONE = 'none';
+  var PIN = 'pin';
+  var FINGERPRINT = 'fingerprint';
 
   $scope.$on("$ionicView.beforeEnter", function(event) {
     var config = configService.getSync();
-    $scope.fingerprintAvailable = fingerprintService.isAvailable();
+    $scope.locking = config.lock.method != PIN;
 
-    $scope.usePin = {
+    $scope.options = [
-      enabled: config.lock && config.lock.method == 'pin' ? true : false
+      {
-    };
+        method: NONE,
-    $scope.useFingerprint = {
+        label: gettextCatalog.getString('Disabled'),
-      enabled: config.lock && config.lock.method == 'fingerprint' ? true : false
+        value: config.lock.method == '',
-    };
+      },
+      {
+        method: PIN,
+        label: gettextCatalog.getString('Enable PIN'),
+        value: config.lock.method == PIN,
+        needsBackup: null,
+      },
+    ];
 
+    if (fingerprintService.isAvailable()) {
+      $scope.options.push({
+        method: FINGERPRINT,
+        label: gettextCatalog.getString('Enable Fingerprint'),
+        value: config.lock.method == FINGERPRINT,
+        needsBackup: null,
+      });
+    }
+
+    $scope.currentOption = lodash.find($scope.options, 'value');
     processWallets();
   });
 
@@ -25,66 +45,73 @@ angular.module('copayApp.controllers').controller('lockController', function($st
 
     if (singleLivenetWallet) {
       $scope.errorMsg = gettextCatalog.getString('Backup your wallet before using this function');
+      disableOptsUntilBackup();
     } else if (atLeastOneLivenetWallet) {
       $scope.errorMsg = gettextCatalog.getString('Backup all livenet wallets before using this function');
-    } else $scope.errorMsg = null;
+      disableOptsUntilBackup();
+    } else {
+      enableOptsAfterBackup();
+      $scope.errorMsg = null;
+    }
+
+    function enableOptsAfterBackup() {
+      $scope.options[1].needsBackup = false;
+      if ($scope.options[2]) $scope.options[2].needsBackup = false;
+    };
+
+    function disableOptsUntilBackup() {
+      $scope.options[1].needsBackup = true;
+      if ($scope.options[2]) $scope.options[2].needsBackup = true;
+    };
 
     $timeout(function() {
       $scope.$apply();
     });
   };
 
-  $scope.usePinChange = function() {
+  $scope.select = function(method) {
-    $scope.usePin.enabled = !$scope.usePin.enabled;
+    if (method == NONE)
-    $state.transitionTo('tabs.lock.pin', {
+      saveConfig();
-      fromSettings: true,
+    else if (method == FINGERPRINT) {
-      locking: !$scope.usePin.enabled
+      var config = configService.getSync();
-    }).then(function() {
+      if (config.lock.method == PIN) {
-      $timeout(function() {
+        askForDisablePin(function(disablePin) {
-        $scope.usePin.enabled = !$scope.usePin.enabled;
+          if (disablePin) saveConfig(FINGERPRINT);
-      }, 1000);
+        });
+      } else saveConfig(FINGERPRINT);
+    } else if (method == PIN) {
+      $state.transitionTo('tabs.lock.pin', {
+        fromSettings: true,
+        locking: $scope.locking
+      });
+    }
+    $timeout(function() {
+      $scope.$apply();
     });
   };
 
-  $scope.useFingerprintChange = function() {
+  function askForDisablePin(cb) {
-    if ($scope.usePin.enabled) {
+    var message = gettextCatalog.getString('{{appName}} is protected by Pin. Are you sure you want to disable it?', {
-      var message = gettextCatalog.getString('{{appName}} is protected by Pin. Are you sure you want to disable it?', {
+      appName: appConfigService.nameCase
-        appName: appConfigService.nameCase
+    });
-      });
+    var okText = gettextCatalog.getString('Continue');
-      var okText = gettextCatalog.getString('Continue');
+    var cancelText = gettextCatalog.getString('Cancel');
-      var cancelText = gettextCatalog.getString('Cancel');
+    popupService.showConfirm(null, message, okText, cancelText, function(ok) {
-      popupService.showConfirm(null, message, okText, cancelText, function(ok) {
+      if (!ok) return cb(false);
-        if (!ok) {
+      return cb(true);
-          $scope.useFingerprint = {
+    });
-            enabled: false
+  };
-          };
-          $timeout(function() {
-            $scope.$apply();
-          });
-          return;
-        }
-        saveConfig();
-      });
-    } else
-      saveConfig();
 
-    function saveConfig() {
+  function saveConfig(method) {
-      $scope.usePin = {
+    var opts = {
-        enabled: false
+      lock: {
-      };
+        method: method || '',
-      $timeout(function() {
+        value: '',
-        $scope.$apply();
+      }
-      });
-      var opts = {
-        lock: {
-          method: $scope.useFingerprint.enabled ? 'fingerprint' : '',
-          value: '',
-        }
-      };
-
-      configService.set(opts, function(err) {
-        if (err) $log.debug(err);
-      });
     };
+
+    configService.set(opts, function(err) {
+      if (err) $log.debug(err);
+    });
   };
 });

www/views/lock.html

@@ -6,17 +6,11 @@
   </ion-nav-bar>
 
   <ion-content>
-    <ion-toggle ng-model="usePin.enabled" toggle-class="toggle-balanced" ng-change="usePinChange()" ng-disabled="errorMsg && !usePin.enabled">
+    <ion-radio ng-repeat="opt in options" ng-value="opt" ng-model="currentOption" ng-click="select(opt.method)" ng-disabled="opt.needsBackup">
-      <span class="toggle-label" ng-class="{'disabled': errorMsg && !usePin.enabled}" translate>Enable Pin</span>
+      <span ng-class="{'disabled': opt.needsBackup}" translate>{{opt.label}}</span>
-    </ion-toggle>
+    </ion-radio>
 
-    <div ng-show="fingerprintAvailable">
+    <div class="assertive" style="text-align: center; margin: 4rem" ng-if="errorMsg">
-      <ion-toggle ng-model="useFingerprint.enabled" toggle-class="toggle-balanced" ng-change="useFingerprintChange()" ng-disabled="errorMsg && !useFingerprint.enabled">
-        <span class="toggle-label" ng-class="{'disabled': errorMsg && !useFingerprint.enabled}" translate>Enable Fingerprint</span>
-      </ion-toggle>
-    </div>
-
-    <div class="assertive" style="text-align: center; margin: 4rem" ng-if="errorMsg && !usePin.enabled && !useFingerprint.enabled">
       {{errorMsg}}
     </div>
   </ion-content>