feat: password wizard typescripting and UI improvements

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

@@ -4,12 +4,35 @@ import template from '%/directives/password-wizard.pug';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
 
 const DEFAULT_CONTINUE_TITLE = "Continue";
-const Steps = {
-  PasswordStep: 1,
-  FinishStep: 2
+enum Steps {
+  PasswordStep = 1,
+  FinishStep = 2
 };
 
-class PasswordWizardCtrl extends PureViewCtrl implements PasswordWizardScope {
+type FormData = {
+  currentPassword?: string,
+  newPassword?: string,
+  newPasswordConfirmation?: string,
+  status?: string
+}
+
+type State = {
+  lockContinue: boolean
+  formData: FormData,
+  continueTitle: string,
+  step: Steps,
+  title: string,
+  showSpinner: boolean
+  processing: boolean
+}
+
+type Props = {
+  type: PasswordWizardType,
+  changePassword: boolean,
+  securityUpdate: boolean
+}
+
+class PasswordWizardCtrl extends PureViewCtrl<Props, State> implements PasswordWizardScope {
   $element: JQLite
   application!: WebApplication
   type!: PasswordWizardType
@@ -70,7 +93,7 @@ class PasswordWizardCtrl extends PureViewCtrl implements PasswordWizardScope {
     }
 
     this.isContinuing = true;
-    this.setState({
+    await this.setState({
       showSpinner: true,
       continueTitle: "Generating Keys..."
     });
@@ -92,7 +115,7 @@ class PasswordWizardCtrl extends PureViewCtrl implements PasswordWizardScope {
     });
   }
 
-  async setFormDataState(formData: any) {
+  async setFormDataState(formData: Partial<FormData>) {
     return this.setState({
       formData: {
         ...this.state.formData,
@@ -121,7 +144,9 @@ class PasswordWizardCtrl extends PureViewCtrl implements PasswordWizardScope {
         this.application.alertService!.alert(
           "Your new password does not match its confirmation."
         );
-        this.state.formData.status = null;
+        this.setFormDataState({
+          status: undefined
+        });
         return false;
       }
     }
@@ -129,13 +154,15 @@ class PasswordWizardCtrl extends PureViewCtrl implements PasswordWizardScope {
       this.application.alertService!.alert(
         "We don't have your email stored. Please log out then log back in to fix this issue."
       );
-      this.state.formData.status = null;
+      this.setFormDataState({
+        status: undefined
+      });
       return false;
     }
 
     /** Validate current password */
     const success = await this.application.validateAccountPassword(
-      this.state.formData.currentPassword
+      this.state.formData.currentPassword!
     );
     if (!success) {
       this.application.alertService!.alert(
@@ -146,37 +173,31 @@ class PasswordWizardCtrl extends PureViewCtrl implements PasswordWizardScope {
   }
 
   async processPasswordChange() {
-    this.setState({
+    await this.setState({
       lockContinue: true,
       processing: true
     });
-    this.setFormDataState({
+    await this.setFormDataState({
       status: "Processing encryption keys..."
     });
     const newPassword = this.props.securityUpdate
       ? this.state.formData.currentPassword
       : this.state.formData.newPassword;
     const response = await this.application.changePassword(
-      this.state.formData.currentPassword,
-      newPassword
+      this.state.formData.currentPassword!,
+      newPassword!
     );
-    const success = !response || !response.error;
-    this.setFormDataState({
-      statusError: !success,
-      processing: success
+    const success = !response.error;
+    await this.setState({
+      processing: false,
+      lockContinue: false,
     });
     if (!success) {
-      this.application.alertService!.alert(
-        response?.error?.message
-          ? response.error.message
-          : "There was an error changing your password. Please try again."
-      );
       this.setFormDataState({
         status: "Unable to process your password. Please try again."
       });
     } else {
       this.setState({
-        lockContinue: false,
         formData: {
           ...this.state.formData,
           status: this.props.changePassword

app/assets/stylesheets/_modals.scss

@@ -91,10 +91,6 @@
   }
 }
 
-#password-wizard {
-  font-size: 16px;
-}
-
 #item-preview-modal {
   > .sk-modal-content {
     width: 800px;

app/assets/templates/directives/password-wizard.pug

@@ -13,37 +13,36 @@
                 .sk-panel-column.stretch
                   form.sk-panel-form
                     input.sk-input.contrast(
-                      ng-model='ctrl.state.formData.currentPassword', 
-                      placeholder='Current Password', 
-                      should-focus='true', 
-                      sn-autofocus='true', 
+                      ng-model='ctrl.state.formData.currentPassword',
+                      placeholder='Current Password',
+                      should-focus='true',
+                      sn-autofocus='true',
+                      type='password'
+                      )
+                    .sk-panel-row
+                    input.sk-input.contrast(
+                      ng-if='ctrl.props.changePassword',
+                      ng-model='ctrl.state.formData.newPassword',
+                      placeholder='New Password',
                       type='password'
                       )
                     input.sk-input.contrast(
-                      ng-if='ctrl.props.changePassword', 
-                      ng-model='ctrl.state.formData.newPassword', 
-                      placeholder='New Password', 
-                      type='password'
-                      )
-                    input.sk-input.contrast(
-                      ng-if='ctrl.props.changePassword', 
+                      ng-if='ctrl.props.changePassword',
                       ng-model='ctrl.state.formData.newPasswordConfirmation',
-                      placeholder='Confirm New Password', 
+                      placeholder='Confirm New Password',
                       type='password'
                       )
             .sk-panel-section(ng-if='ctrl.state.step == 2')
-              div(ng-if='ctrl.props.changePassword')
-                p.sk-p.sk-panel-row.info-i Your password has been successfully changed.
-              div(ng-if='ctrl.props.securityUpdate')
-                p.sk-p.sk-panel-row.info-i
-                  | The account update has been successfully applied to your account.
-              p.sk-p.sk-panel-row
-                | Please ensure you are running the latest version of Standard Notes 
+              .sk-label.sk-bold.info(ng-if='ctrl.props.changePassword')
+                | Your password has been successfully changed.
+              p.sk-p.info-i(ng-if='ctrl.props.securityUpdate')
+                | The account update has been successfully applied to your account.
+              p.sk-p
+                | Please ensure you are running the latest version of Standard Notes
                 | on all platforms to ensure maximum compatibility.
           .sk-panel-footer
-            .empty
-            a.sk-a.info.right(
-              ng-click='ctrl.nextStep()', 
-              ng-disabled='ctrl.state.lockContinue')
-              .sk-spinner.small.inline.info.mr-5(ng-if='ctrl.state.showSpinner')
-              | {{ctrl.state.continueTitle}}
+            .sk-button.info(
+              ng-click='ctrl.nextStep()',
+              ng-disabled='ctrl.state.lockContinue'
+              )
+              .sk-label {{ctrl.state.continueTitle}}

package-lock.json

@@ -10956,8 +10956,8 @@
       "from": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad"
     },
     "snjs": {
-      "version": "github:standardnotes/snjs#723200296d6481b8835a8a3651130e38a9eaf449",
-      "from": "github:standardnotes/snjs#723200296d6481b8835a8a3651130e38a9eaf449"
+      "version": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9",
+      "from": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9"
     },
     "sockjs": {
       "version": "0.3.20",

package.json

@@ -68,6 +68,6 @@
   },
   "dependencies": {
     "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad",
-    "snjs": "github:standardnotes/snjs#723200296d6481b8835a8a3651130e38a9eaf449"
+    "snjs": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9"
   }
 }