Challenge modal

app/assets/javascripts/controllers/root.js

@@ -1,4 +1,3 @@
-import { Challenges, ChallengeResponse } from 'snjs';
 import { getPlatformString } from '@/utils';
 import template from '%/root.pug';
 import { AppStateEvents } from '@/state';
@@ -25,6 +24,7 @@ class RootCtrl extends PureCtrl {
     application,
     appState,
     desktopManager,
+    godService,
     lockManager,
     preferencesManager /** Unused below, required to load globally */,
     themeManager,
@@ -35,6 +35,7 @@ class RootCtrl extends PureCtrl {
     this.$rootScope = $rootScope;
     this.$compile = $compile;
     this.desktopManager = desktopManager;
+    this.godService = godService;
     this.lockManager = lockManager;
     this.statusManager = statusManager;
     this.themeManager = themeManager;
@@ -64,36 +65,21 @@ class RootCtrl extends PureCtrl {
     this.handleAutoSignInFromParams();
   }
 
-  async watchLockscreenValue() {
+  // async watchLockscreenValue() {
-    return new Promise((resolve) => {
+  //   return new Promise((resolve) => {
-      const onLockscreenValue = (value) => {
+  //     const onLockscreenValue = (value) => {
-        const response = new ChallengeResponse(Challenges.LocalPasscode, value);
+  //       const response = new ChallengeResponse(ChallengeType.LocalPasscode, value);
-        resolve([response]);
+  //       resolve([response]);
-      };
+  //     };
-      this.setState({ onLockscreenValue });
+  //     this.setState({ onLockscreenValue });
-    });
+  //   });
-  }
+  // }
 
   async loadApplication() {
     await this.application.prepareForLaunch({
       callbacks: {
-        requiresChallengeResponses: async (challenges) => {
+        receiveChallenge: async (challenge, orchestrator) => {
-          if (challenges.includes(Challenges.LocalPasscode)) {
+          this.godService.promptForChallenge(challenge, orchestrator);
-            this.setState({ needsUnlock: true });
-          }
-          return this.watchLockscreenValue();
-        },
-        handleFailedChallengeResponses: (responses) => {
-          for (const response of responses) {
-            if (response.challenge === Challenges.LocalPasscode) {
-              this.application.alertService.alert({
-                text: "Invalid passcode. Please try again.",
-                onClose: () => {
-                  this.lockScreenPuppet.focusInput();
-                }
-              });
-            }
-          }
         }
       }
     });

app/assets/javascripts/directives/views/challengeModal.js

@@ -1,5 +1,5 @@
 import template from '%/directives/challenge-modal.pug';
-import { Challenges, ChallengeResponse } from 'snjs';
+import { ChallengeType, ChallengeValue, removeFromArray } from 'snjs';
 import { PureCtrl } from '@Controllers';
 
 class ChallengeModalCtrl extends PureCtrl {
@@ -13,18 +13,49 @@ class ChallengeModalCtrl extends PureCtrl {
   ) {
     super($scope, $timeout, application, appState);
     this.$element = $element;
+    this.processingTypes = [];
   }
 
   $onInit() {
     super.$onInit();
-    this.values = {};
+    const values = {};
+    const types = this.challenge.types;
+    for (const type of types) {
+      values[type] = {
+        value: '',
+        invalid: false
+      };
+    }
     this.setState({
-      challenges: this.challenges
+      types: types,
+      values: values,
+      processing: false
+    });
+    this.orchestrator.setCallbacks({
+      onComplete: () => {
+        this.dismiss();
+      },
+      onValidValue: (value) => {
+        this.state.values[value.type].invalid = false;
+        removeFromArray(this.processingTypes, value.type);
+        this.reloadProcessingStatus();
+      },
+      onInvalidValue: (value) => {
+        this.state.values[value.type].invalid = true;
+        removeFromArray(this.processingTypes, value.type);
+        this.reloadProcessingStatus();
+      }
+    });
+  }
+
+  reloadProcessingStatus() {
+    this.setState({
+      processing: this.processingTypes.length > 0
     });
   }
 
   promptForChallenge(challenge) {
-    if(challenge === Challenges.LocalPasscode) {
+    if (challenge === ChallengeType.LocalPasscode) {
       return 'Enter your application passcode';
     } else {
       return 'Enter your account password';
@@ -32,28 +63,26 @@ class ChallengeModalCtrl extends PureCtrl {
   }
 
   cancel() {
+    if (!this.cancelable) {
+      return;
+    }
     this.dismiss();
-    this.onCancel && this.onCancel();
   }
 
-  isChallengeInFailureState(challenge) {
+  onTextValueChange(challenge) {
-    if (!this.failedChallenges) {
+    const values = this.state.values;
-      return false;
+    values[challenge].invalid = false;
-    }
+    this.setState({ values });
-    return this.failedChallenges.find((candidate) => {
-      return candidate === challenge;
-    }) != null;
   }
 
   validate() {
     const failed = [];
-    for (const cred of this.state.challenges) {
+    for (const type of this.state.types) {
-      const value = this.values[cred];
+      const value = this.state.values[type];
       if (!value || value.length === 0) {
-        failed.push(cred);
+        this.state.values[type].invalid = true;
       }
     }
-    this.failedChallenges = failed;
     return failed.length === 0;
   }
 
@@ -61,13 +90,19 @@ class ChallengeModalCtrl extends PureCtrl {
     if (!this.validate()) {
       return;
     }
-    const responses = Object.keys(this.values).map((key) => {
+    this.setState({ processing: true });
-      const challenge = Number(key);
+    const values = [];
-      const value = this.values[key];
+    for (const key of Object.keys(this.state.values)) {
-      return new ChallengeResponse(challenge, value);
+      const type = Number(key);
-    });
+      if(this.state.values[key].valid) {
-    this.onSubmit(responses);
+        continue;
-    this.dismiss();
+      }
+      const rawValue = this.state.values[key].value;
+      const value = new ChallengeValue(type, rawValue);
+      values.push(value);
+    }
+    this.processingTypes = values.map((v) => v.type);
+    this.orchestrator.submitValues(values);
   }
 
   dismiss() {
@@ -84,8 +119,8 @@ export class ChallengeModal {
     this.bindToController = true;
     this.scope = {
       onSubmit: '=',
-      onCancel: '=',
+      challenge: '=',
-      challenges: '='
+      orchestrator: '='
     };
   }
 }

app/assets/javascripts/services/godService.js

@@ -1,6 +1,4 @@
 import angular from 'angular';
-import { challengeToString } from 'snjs';
-import { humanReadableList } from '@/utils';
 
 export class GodService {
   /* @ngInject */
@@ -25,42 +23,24 @@ export class GodService {
     angular.element(document.body).append(el);
   }
 
-  async promptForChallenges(challenges) {
+  promptForChallenge(challenge, orchestrator) {
-    return new Promise((resolve) => {
+    const scope = this.$rootScope.$new(true);
-      const scope = this.$rootScope.$new(true);
+    scope.challenge = challenge;
-      scope.challenges = challenges.slice();
+    scope.orchestrator = orchestrator;
-      scope.onSubmit = (responses) => {
+    const el = this.$compile(
-        resolve(responses);
+      "<challenge-modal " +
-      };
+      "class='sk-modal' challenge='challenge' orchestrator='orchestrator'>" +
-      const el = this.$compile(
+      "</challenge-modal>"
-        "<challenge-modal class='sk-modal' challenges='challenges' on-submit='onSubmit'></challenge-modal>"
+    )(scope);
-      )(scope);
+    angular.element(document.body).append(el);
-      angular.element(document.body).append(el);
-    });
   }
 
   async performProtocolUpgrade() {
-    const errors = await this.application.upgradeProtocolVersion({
+    const errors = await this.application.upgradeProtocolVersion();
-      requiresChallengeResponses: async (challenges) => {
-        return this.promptForChallenges(challenges);
-      },
-      handleFailedChallengeResponses: async (responses) => {
-        const names = responses.map((r) => challengeToString(r.challenge));
-        const formatted = humanReadableList(names);
-        return new Promise((resolve) => {
-          this.application.alertService.alert({
-            text: `Invalid authentication value for ${formatted}. Please try again.`,
-            onClose: () => {
-              resolve();
-            }
-          });
-        });
-      }
-    });
     if (errors.length === 0) {
       this.application.alertService.alert({
         text: "Success! Your encryption version has been upgraded." +
-              " You'll be asked to enter your credentials again on other devices you're signed into."
+          " You'll be asked to enter your credentials again on other devices you're signed into."
       });
     } else {
       this.application.alertService.alert({

app/assets/templates/directives/challenge-modal.pug

@@ -4,25 +4,33 @@
     .sk-panel
       .sk-panel-header
         .sk-panel-header-title Authentication Required
-        a.close-button.info(ng-click="ctrl.cancel()") Cancel
+        a.close-button.info(
+          ng-if="ctrl.cancelable"
+          ng-click="ctrl.cancel()"
+          ) Cancel
       .sk-panel-content
         .sk-panel-section
-          div(ng-repeat="challenge in ctrl.state.challenges")
+          div(ng-repeat="type in ctrl.state.types")
             .sk-p.sk-bold.sk-panel-row
-              strong {{ctrl.promptForChallenge(challenge)}}
+              strong {{ctrl.promptForChallenge(type)}}
             .sk-panel-row
               input.sk-input.contrast(
-                ng-model="ctrl.values[challenge]" 
+                ng-model="ctrl.state.values[type].value" 
                 should-focus="$index == 0" 
                 sn-autofocus="true" 
-                sn-enter="ctrl.submit()" 
+                sn-enter="ctrl.submit()" ,
+                ng-change="ctrl.onTextValueChange(type)"
                 type="password"
                 )
             .sk-panel-row
               label.sk-label.danger(
-                ng-if="ctrl.isChallengeInFailureState(challenge)"
+                ng-if="ctrl.state.values[type].invalid"
                 ) Invalid authentication. Please try again.
           .sk-panel-row
       .sk-panel-footer.extra-padding
-        .sk-button.info.big.block.bold(ng-click="ctrl.submit()")
+        .sk-button.info.big.block.bold(
-          .sk-label Submit
+          ng-click="ctrl.submit()",
+          ng-class="{'info' : !ctrl.state.processing, 'neutral': ctrl.state.processing}"
+          ng-disabled="ctrl.state.processing"
+          )
+          .sk-label {{ctrl.state.processing ? 'Generating Keys...' : 'Submit'}} 

app/assets/templates/root.pug

@@ -1,11 +1,6 @@
 .main-ui-view(
   ng-class='self.platformString'
 )
-  lock-screen(
-    ng-if='self.state.needsUnlock'
-    on-value='self.state.onLockscreenValue',
-    puppet='self.lockScreenPuppet'
-    )
   #app.app(
     ng-class='self.state.appClass', 
     ng-if='!self.state.needsUnlock && self.state.ready'