Skip to content

Commit

Permalink
Password wizard wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@moughxyz
moughxyz committed Feb 13, 2020
1 parent 7a587a2 commit 6fc53f3
Show file tree
Hide file tree
Showing 4 changed files with 276 additions and 248 deletions.
155 changes: 82 additions & 73 deletions app/assets/javascripts/directives/views/passwordWizard.js
View file
@@ -1,41 +1,40 @@
import template from '%/directives/password-wizard.pug';
import { STRING_FAILED_PASSWORD_CHANGE } from '@/strings';
import { isNullOrUndefined } from '../../utils';
import { PureCtrl } from '@Controllers';

const DEFAULT_CONTINUE_TITLE = "Continue";
const Steps = {
PasswordStep: 3,
FinishStep: 5
};

class PasswordWizardCtrl {
class PasswordWizardCtrl extends PureCtrl {
/* @ngInject */
constructor(
$element,
$scope,
$timeout
$timeout,
application,
appState
) {
super($scope, $timeout, application, appState);
this.$element = $element;
this.$timeout = $timeout;
this.$scope = $scope;
this.registerWindowUnloadStopper();
}

$onInit() {
this.formData = {};
this.configureDefaults();
}

configureDefaults() {
if (this.type === 'change-pw') {
this.title = "Change Password";
this.changePassword = true;
} else if (this.type === 'upgrade-security') {
this.title = "Account Update";
this.securityUpdate = true;
}
this.continueTitle = DEFAULT_CONTINUE_TITLE;
this.step = Steps.IntroStep;
this.initProps({
type: this.type,
changePassword: this.props.type === 'change-pw',
securityUpdate: this.props.type === 'upgrade-security'
});
this.setState({
formData: {},
continueTitle: DEFAULT_CONTINUE_TITLE,
step: Steps.PasswordStep,
title: this.props.changePassword ? 'Change Password' : 'Account Update'
});
}

/** Confirms with user before closing tab */
Expand All @@ -51,7 +50,7 @@ class PasswordWizardCtrl {
titleForStep(step) {
switch (step) {
case Steps.PasswordStep:
return this.changePassword
return this.props.changePassword
? "Password information"
: "Enter your current password";
case Steps.FinishStep:
Expand All @@ -62,40 +61,32 @@ class PasswordWizardCtrl {
}

async nextStep() {
if (this.lockContinue || this.isContinuing) {
if (this.state.lockContinue || this.isContinuing) {
return;
}
this.isContinuing = true;
if (this.step === Steps.FinishStep) {
this.dismiss();
return;
}
const next = () => {
this.step++;
this.initializeStep(this.step);
this.isContinuing = false;
};
const preprocessor = this.preprocessorForStep(this.step);
if (preprocessor) {
await preprocessor().then(next).catch(() => {
this.isContinuing = false;
if(this.step === Steps.PasswordStep) {
this.setState({
showSpinner: true,
continueTitle: "Generating Keys..."
});
} else {
next();
}
}

preprocessorForStep(step) {
if (step === Steps.PasswordStep) {
return async () => {
this.showSpinner = true;
this.continueTitle = "Generating Keys...";
const success = await this.validateCurrentPassword();
this.showSpinner = false;
this.continueTitle = DEFAULT_CONTINUE_TITLE;
return success;
};
const success = await this.validateCurrentPassword();
this.setState({
showSpinner: false,
continueTitle: DEFAULT_CONTINUE_TITLE
});
if(!success) {
return;
}
this.isContinuing = false;
}
this.step++;
this.initializeStep(this.step);
this.isContinuing = false;
}

async initializeStep(step) {
Expand All @@ -104,79 +95,97 @@ class PasswordWizardCtrl {
}
}

async setFormDataState(formData) {
return this.setState({
formData: {
...this.state.formData,
...formData
}
});
}

async initializeSyncingStep() {
this.lockContinue = true;
this.formData.status = "Processing encryption keys...";
this.formData.processing = true;
this.setState({
lockContinue: true,
processing: true
});
this.setFormDataState({
status: "Processing encryption keys..."
});
const passwordSuccess = await this.processPasswordChange();
this.formData.statusError = !passwordSuccess;
this.formData.processing = passwordSuccess;
this.setFormDataState({
statusError: !passwordSuccess,
processing: passwordSuccess
});
if (!passwordSuccess) {
this.formData.status = "Unable to process your password. Please try again.";
this.setFormDataState({
status: "Unable to process your password. Please try again."
});
return;
}
this.lockContinue = false;
if (this.changePassword) {
this.formData.status = "Successfully changed password.";
} else if (this.securityUpdate) {
this.formData.status = "Successfully performed account update.";
}
this.setState({
lockContinue: false,
formData: {
...this.state.formData,
status: this.props.changePassword
? "Successfully changed password."
: "Successfully performed account update."
}
});
}

async validateCurrentPassword() {
const currentPassword = this.formData.currentPassword;
const newPass = this.securityUpdate ? currentPassword : this.formData.newPassword;
const currentPassword = this.state.formData.currentPassword;
const newPass = this.props.securityUpdate ? currentPassword : this.state.formData.newPassword;
if (!currentPassword || currentPassword.length === 0) {
this.application.alertManager.alert({
text: "Please enter your current password."
});
return false;
}
if (this.changePassword) {
if (this.props.changePassword) {
if (!newPass || newPass.length === 0) {
this.application.alertManager.alert({
text: "Please enter a new password."
});
return false;
}
if (newPass !== this.formData.newPasswordConfirmation) {
if (newPass !== this.state.formData.newPasswordConfirmation) {
this.application.alertManager.alert({
text: "Your new password does not match its confirmation."
});
this.formData.status = null;
this.state.formData.status = null;
return false;
}
}
if (!this.application.getUser().email) {
this.application.alertManager.alert({
text: "We don't have your email stored. Please log out then log back in to fix this issue."
});
this.formData.status = null;
this.state.formData.status = null;
return false;
}

/** Validate current password */
const key = await this.application.validateAccountPassword({
password: this.formData.currentPassword
const success = await this.application.validateAccountPassword({
password: this.state.formData.currentPassword
});
if (key) {
this.currentServerPassword = key.serverPassword;
} else {
if (!success) {
this.application.alertManager.alert({
text: "The current password you entered is not correct. Please try again."
});
}
return !isNullOrUndefined(key);
return success;
}

async processPasswordChange() {
const newPassword = this.securityUpdate
? this.formData.currentPassword
: this.formData.newPassword;
const newPassword = this.props.securityUpdate
? this.state.formData.currentPassword
: this.state.formData.newPassword;

const response = await this.application.changePassword({
email: this.application.getUser().email,
currentPassword: this.formData.currentPassword,
currentPassword: this.state.formData.currentPassword,
newPassword: newPassword
});
if (response.error) {
Expand All @@ -192,7 +201,7 @@ class PasswordWizardCtrl {
}

dismiss() {
if (this.lockContinue) {
if (this.state.lockContinue) {
this.application.alertManager.alert({
text: "Cannot close window until pending tasks are complete."
});
Expand Down
28 changes: 14 additions & 14 deletions app/assets/templates/directives/password-wizard.pug
View file
Expand Up @@ -5,36 +5,36 @@
.sn-component
.sk-panel
.sk-panel-header
.sk-panel-header-title {{ctrl.title}}
.sk-panel-header-title {{ctrl.state.title}}
a.sk-a.info.close-button(ng-click='ctrl.dismiss()') Close
.sk-panel-content
div(ng-if='ctrl.step == 3')
div(ng-if='ctrl.state.step == 3')
.sk-panel-row
.sk-panel-column.stretch
form.sk-panel-form
input.sk-input.contrast(
ng-model='ctrl.formData.currentPassword',
ng-model='ctrl.state.formData.currentPassword',
placeholder='Current Password',
should-focus='true',
sn-autofocus='true',
type='password'
)
input.sk-input.contrast(
ng-if='ctrl.changePassword',
ng-model='ctrl.formData.newPassword',
ng-if='ctrl.props.changePassword',
ng-model='ctrl.state.formData.newPassword',
placeholder='New Password',
type='password'
)
input.sk-input.contrast(
ng-if='ctrl.changePassword',
ng-model='ctrl.formData.newPasswordConfirmation',
ng-if='ctrl.props.changePassword',
ng-model='ctrl.state.formData.newPasswordConfirmation',
placeholder='Confirm New Password',
type='password'
)
div(ng-if='ctrl.step == 5')
div(ng-if='ctrl.changePassword')
div(ng-if='ctrl.state.step == 5')
div(ng-if='ctrl.props.changePassword')
p.sk-p.sk-panel-row.info-i Your password has been successfully changed.
div(ng-if='ctrl.securityUpdate')
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
Expand All @@ -43,8 +43,8 @@
.sk-panel-footer
.empty
a.sk-a.info.right(
ng-class="{'disabled' : ctrl.lockContinue}",
ng-class="{'disabled' : ctrl.state.lockContinue}",
ng-click='ctrl.nextStep()',
ng-disabled='ctrl.lockContinue')
.sk-spinner.small.inline.info.mr-5(ng-if='ctrl.showSpinner')
| {{ctrl.continueTitle}}
ng-disabled='ctrl.state.lockContinue')
.sk-spinner.small.inline.info.mr-5(ng-if='ctrl.state.showSpinner')
| {{ctrl.state.continueTitle}}

0 comments on commit 6fc53f3

Please sign in to comment.