diff --git a/app/assets/javascripts/directives/views/passwordWizard.ts b/app/assets/javascripts/directives/views/passwordWizard.ts index 7f533da13..36ea4fa71 100644 --- a/app/assets/javascripts/directives/views/passwordWizard.ts +++ b/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 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) { 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 diff --git a/app/assets/stylesheets/_modals.scss b/app/assets/stylesheets/_modals.scss index cb7668d37..c83aefd04 100644 --- a/app/assets/stylesheets/_modals.scss +++ b/app/assets/stylesheets/_modals.scss @@ -91,10 +91,6 @@ } } -#password-wizard { - font-size: 16px; -} - #item-preview-modal { > .sk-modal-content { width: 800px; diff --git a/app/assets/templates/directives/password-wizard.pug b/app/assets/templates/directives/password-wizard.pug index 65f56b69f..2fde1edc6 100644 --- a/app/assets/templates/directives/password-wizard.pug +++ b/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}} diff --git a/package-lock.json b/package-lock.json index 78154b4d2..265d100f1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b18fa112a..50cf53990 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,6 @@ }, "dependencies": { "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad", - "snjs": "github:standardnotes/snjs#723200296d6481b8835a8a3651130e38a9eaf449" + "snjs": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9" } }