Protocol upgrading WIP

app/assets/javascripts/app.js

@@ -35,6 +35,7 @@ import {
 import {
   AccountMenu,
   ActionsMenu,
+  ChallengeModal,
   ComponentModal,
   ComponentView,
   ConflictResolutionModal,
@@ -106,6 +107,7 @@ angular
   .module('app')
   .directive('accountMenu', () => new AccountMenu())
   .directive('actionsMenu', () => new ActionsMenu())
+  .directive('challengeModal', () => new ChallengeModal())
   .directive('componentModal', () => new ComponentModal())
   .directive('componentView', () => new ComponentView())
   // .directive(

app/assets/javascripts/controllers/footer.js

@@ -38,9 +38,7 @@ class FooterCtrl extends PureCtrl {
     this.rooms = [];
     this.themesWithIcons = [];
     this.showSyncResolution = false;
-
     this.addRootScopeListeners();
-
     this.statusManager.addStatusObserver((string) => {
       this.$timeout(() => {
         this.arbitraryStatusMessage = string;
@@ -48,6 +46,14 @@ class FooterCtrl extends PureCtrl {
     });
   }
 
+  reloadUpgradeStatus() {
+    this.godService.checkForSecurityUpdate().then((available) => {
+      this.setState({
+        dataUpgradeAvailable: available
+      });
+    });
+  }
+
   onAppLaunch() {
     super.onAppLaunch();
     const hasPasscode = this.application.hasPasscode();
@@ -55,9 +61,7 @@ class FooterCtrl extends PureCtrl {
       hasPasscode: hasPasscode
     });
 
-    this.godService.checkForSecurityUpdate().then((available) => {
+    this.reloadUpgradeStatus();
-      this.securityUpdateAvailable = available;
-    });
     this.user = this.application.getUser();
     this.updateOfflineStatus();
     this.findErrors();
@@ -66,9 +70,6 @@ class FooterCtrl extends PureCtrl {
   }
 
   addRootScopeListeners() {
-    this.$rootScope.$on("security-update-status-changed", () => {
-      this.securityUpdateAvailable = this.godService.securityUpdateAvailable;
-    });
     this.$rootScope.$on("reload-ext-data", () => {
       this.reloadExtendedData();
     });
@@ -110,7 +111,9 @@ class FooterCtrl extends PureCtrl {
 
   /** @override */
   onAppEvent(eventName) {
-    if (eventName === ApplicationEvents.EnteredOutOfSync) {
+    if (eventName === ApplicationEvents.KeyStatusChanged) {
+      this.reloadUpgradeStatus();
+    } else if (eventName === ApplicationEvents.EnteredOutOfSync) {
       this.setState({
         outOfSync: true
       });
@@ -220,7 +223,7 @@ class FooterCtrl extends PureCtrl {
   }
 
   openSecurityUpdate() {
-    this.godService.presentPasswordWizard('upgrade-security');
+    this.godService.performProtocolUpgrade();
   }
 
   findErrors() {

app/assets/javascripts/controllers/root.js

@@ -67,10 +67,7 @@ class RootCtrl extends PureCtrl {
   async watchLockscreenValue() {
     return new Promise((resolve) => {
       const onLockscreenValue = (value) => {
-        const response = new ChallengeResponse({
+        const response = new ChallengeResponse(Challenges.LocalPasscode, value);
-          challenge: Challenges.LocalPasscode,
-          value: value
-        });
         resolve([response]);
       };
       this.setState({ onLockscreenValue });
@@ -86,7 +83,7 @@ class RootCtrl extends PureCtrl {
           }
           return this.watchLockscreenValue();
         },
-        handleChallengeFailures: (responses) => {
+        handleFailedChallengeResponses: (responses) => {
           for (const response of responses) {
             if (response.challenge === Challenges.LocalPasscode) {
               this.application.alertService.alert({

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

@@ -68,7 +68,6 @@ class AccountMenuCtrl extends PureCtrl {
     super.onAppLaunch();
     this.setState(this.refreshedCredentialState());
     this.loadHost();
-    this.checkForSecurityUpdate();
     this.reloadAutoLockInterval();
     this.loadBackupsAvailability();
   }
@@ -106,13 +105,6 @@ class AccountMenuCtrl extends PureCtrl {
     });
   }
 
-  async checkForSecurityUpdate() {
-    const available = await this.godService.checkForSecurityUpdate();
-    this.setState({
-      securityUpdateAvailable: available
-    });
-  }
-
   async loadBackupsAvailability() {
     const hasUser = !isNullOrUndefined(this.application.getUser());
     const hasPasscode = this.application.hasPasscode();
@@ -278,9 +270,9 @@ class AccountMenuCtrl extends PureCtrl {
     }
   }
 
-  openPasswordWizard(type) {
+  openPasswordWizard() {
     this.close();
-    this.godService.presentPasswordWizard(type);
+    this.godService.presentPasswordWizard();
   }
 
   async openPrivilegesModal() {

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

@@ -0,0 +1,91 @@
+import template from '%/directives/challenge-modal.pug';
+import { Challenges, ChallengeResponse } from 'snjs';
+import { PureCtrl } from '@Controllers';
+
+class ChallengeModalCtrl extends PureCtrl {
+  /* @ngInject */
+  constructor(
+    $scope,
+    $element,
+    $timeout,
+    application,
+    appState
+  ) {
+    super($scope, $timeout, application, appState);
+    this.$element = $element;
+  }
+
+  $onInit() {
+    super.$onInit();
+    this.values = {};
+    this.setState({
+      challenges: this.challenges
+    });
+  }
+
+  promptForChallenge(challenge) {
+    if(challenge === Challenges.LocalPasscode) {
+      return 'Enter your application passcode';
+    } else {
+      return 'Enter your account password';
+    }
+  }
+
+  cancel() {
+    this.dismiss();
+    this.onCancel && this.onCancel();
+  }
+
+  isChallengeInFailureState(challenge) {
+    if (!this.failedChallenges) {
+      return false;
+    }
+    return this.failedChallenges.find((candidate) => {
+      return candidate === challenge;
+    }) != null;
+  }
+
+  validate() {
+    const failed = [];
+    for (const cred of this.state.challenges) {
+      const value = this.values[cred];
+      if (!value || value.length === 0) {
+        failed.push(cred);
+      }
+    }
+    this.failedChallenges = failed;
+    return failed.length === 0;
+  }
+
+  async submit() {
+    if (!this.validate()) {
+      return;
+    }
+    const responses = Object.keys(this.values).map((key) => {
+      const challenge = Number(key);
+      const value = this.values[key];
+      return new ChallengeResponse(challenge, value);
+    });
+    this.onSubmit(responses);
+    this.dismiss();
+  }
+
+  dismiss() {
+    this.$element.remove();
+  }
+}
+
+export class ChallengeModal {
+  constructor() {
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = ChallengeModalCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      onSubmit: '=',
+      onCancel: '=',
+      challenges: '='
+    };
+  }
+}

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

@@ -1,5 +1,6 @@
 export { AccountMenu } from './accountMenu';
 export { ActionsMenu } from './actionsMenu';
+export { ChallengeModal } from './challengeModal';
 export { ComponentModal } from './componentModal';
 export { ComponentView } from './componentView';
 export { ConflictResolutionModal } from './conflictResolutionModal';

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

@@ -153,7 +153,6 @@ class PasswordWizardCtrl extends PureCtrl {
       ? this.state.formData.currentPassword
       : this.state.formData.newPassword;
     const response = await this.application.changePassword({
-      email: this.application.getUser().email,
       currentPassword: this.state.formData.currentPassword,
       newPassword: newPassword
     });

app/assets/javascripts/services/alertService.js

@@ -7,9 +7,9 @@ export class AlertService extends SNAlertService {
     title,
     text,
     closeButtonText = "OK",
-    onClose} = {}
+    onClose
-  ) {
+  } = {}) {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const buttons = [
         {
           text: closeButtonText,

app/assets/javascripts/services/godService.js

@@ -1,4 +1,6 @@
 import angular from 'angular';
+import { challengeToString } from 'snjs';
+import { humanReadableList } from '@/utils';
 
 export class GodService {
   /* @ngInject */
@@ -13,24 +15,60 @@ export class GodService {
   }
 
   async checkForSecurityUpdate() {
-    if (this.application.noAccount()) {
+    return this.application.protocolUpgradeAvailable();
-      return false;
-    }
-    const updateAvailable = await this.application.protocolUpgradeAvailable();
-    if (updateAvailable !== this.securityUpdateAvailable) {
-      this.securityUpdateAvailable = updateAvailable;
-      this.$rootScope.$broadcast("security-update-status-changed");
-    }
-    return this.securityUpdateAvailable;
   }
 
   presentPasswordWizard(type) {
-    var scope = this.$rootScope.$new(true);
+    const scope = this.$rootScope.$new(true);
     scope.type = type;
-    var el = this.$compile("<password-wizard type='type'></password-wizard>")(scope);
+    const el = this.$compile("<password-wizard type='type'></password-wizard>")(scope);
     angular.element(document.body).append(el);
   }
 
+  async promptForChallenges(challenges) {
+    return new Promise((resolve) => {
+      const scope = this.$rootScope.$new(true);
+      scope.challenges = challenges.slice();
+      scope.onSubmit = (responses) => {
+        resolve(responses);
+      };
+      const el = this.$compile(
+        "<challenge-modal class='sk-modal' challenges='challenges' on-submit='onSubmit'></challenge-modal>"
+      )(scope);
+      angular.element(document.body).append(el);
+    });
+  }
+
+  async performProtocolUpgrade() {
+    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."
+      });
+    } else {
+      this.application.alertService.alert({
+        text: "Unable to upgrade encryption version. Please try again."
+      });
+    }
+  }
+
   async presentPrivilegesModal(action, onSuccess, onCancel) {
     if (this.authenticationInProgress()) {
       onCancel && onCancel();

app/assets/javascripts/utils.js

@@ -24,6 +24,31 @@ export function dictToArray(dict) {
   return Object.keys(dict).map((key) => dict[key]);
 }
 
+export function humanReadableList(array) {
+  const addSeparator = (index, length) => {
+    if (index > 0) {
+      if (index === length - 1) {
+        if (length === 2) {
+          return ' and ';
+        } else {
+          return ', and ';
+        }
+      } else {
+        return ', ';
+      }
+    }
+    return '';
+  };
+
+  let result = '';
+  for (let i = 0; i < array.length; i++) {
+    const value = array[i];
+    result += addSeparator(i, array.length);
+    result += value;
+  }
+  return result;
+}
+
 export function getPlatformString() {
   try {
     const platform = navigator.platform.toLowerCase();

app/assets/templates/directives/account-menu.pug

@@ -188,7 +188,7 @@
                   ) {{self.syncStatus.current}}/{{self.syncStatus.total}}
           .sk-panel-row
           a.sk-a.info.sk-panel-row.condensed(
-            ng-click="self.openPasswordWizard('change-pw')"
+            ng-click="self.openPasswordWizard()"
             )
             | Change Password
           a.sk-a.info.sk-panel-row.condensed(
@@ -196,12 +196,6 @@
             ng-show='self.state.user'
             )
             | Manage Privileges
-          a.sk-panel-row.justify-left.condensed.success(
-            ng-click="self.openPasswordWizard('upgrade-security')", 
-            ng-if='self.state.securityUpdateAvailable'
-            )
-            .inline.sk-circle.small.success.mr-8
-            .inline Account Update Available
         .sk-panel-section
           .sk-panel-section-title Encryption
           .sk-panel-section-subtitle.info(ng-if='self.state.encryptionEnabled')

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

@@ -0,0 +1,28 @@
+.sk-modal-background(ng-click="ctrl.cancel()")
+#privileges-modal.sk-modal-content
+  .sn-component
+    .sk-panel
+      .sk-panel-header
+        .sk-panel-header-title Authentication Required
+        a.close-button.info(ng-click="ctrl.cancel()") Cancel
+      .sk-panel-content
+        .sk-panel-section
+          div(ng-repeat="challenge in ctrl.state.challenges")
+            .sk-p.sk-bold.sk-panel-row
+              strong {{ctrl.promptForChallenge(challenge)}}
+            .sk-panel-row
+              input.sk-input.contrast(
+                ng-model="ctrl.values[challenge]" 
+                should-focus="$index == 0" 
+                sn-autofocus="true" 
+                sn-enter="ctrl.submit()" 
+                type="password"
+                )
+            .sk-panel-row
+              label.sk-label.danger(
+                ng-if="ctrl.isChallengeInFailureState(challenge)"
+                ) Invalid authentication. Please try again.
+          .sk-panel-row
+      .sk-panel-footer.extra-padding
+        .sk-button.info.big.block.bold(ng-click="ctrl.submit()")
+          .sk-label Submit

app/assets/templates/footer.pug

@@ -40,9 +40,9 @@
     .right
       .sk-app-bar-item(
         ng-click='ctrl.openSecurityUpdate()', 
-        ng-show='ctrl.securityUpdateAvailable'
+        ng-show='ctrl.state.dataUpgradeAvailable'
         )
-        span.success.sk-label Account update available.
+        span.success.sk-label Encryption upgrade available.
       .sk-app-bar-item(
         ng-click='ctrl.clickedNewUpdateAnnouncement()', 
         ng-show='ctrl.newUpdateAvailable == true'