rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: password wizard typescripting and UI improvements

Browse Source
This commit is contained in:
Mo Bitar
2020-09-23 23:22:02 -05:00
parent b3e5ca340d
commit de55a4dd1e
5 changed files with 71 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/assets/javascripts/directives/views/passwordWizard.ts
View File

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

4
app/assets/stylesheets/_modals.scss
View File

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

49
app/assets/templates/directives/password-wizard.pug
View File

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

4
package-lock.json generated
View File

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

2
package.json
View File

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