Challenge modal TS
This commit is contained in:
Mo Bitar
@@ -1,132 +0,0 @@
|
|||||||
import template from '%/directives/challenge-modal.pug';
|
|
||||||
import { ChallengeType, ChallengeValue, removeFromArray } from 'snjs';
|
|
||||||
import { PureCtrl } from '@Controllers/abstract/pure_ctrl';
|
|
||||||
|
|
||||||
class ChallengeModalCtrl extends PureCtrl {
|
|
||||||
/* @ngInject */
|
|
||||||
constructor(
|
|
||||||
$element,
|
|
||||||
$timeout
|
|
||||||
) {
|
|
||||||
super($timeout);
|
|
||||||
this.$element = $element;
|
|
||||||
this.processingTypes = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
$onInit() {
|
|
||||||
super.$onInit();
|
|
||||||
const values = {};
|
|
||||||
const types = this.challenge.types;
|
|
||||||
for (const type of types) {
|
|
||||||
values[type] = {
|
|
||||||
value: '',
|
|
||||||
invalid: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
types: types,
|
|
||||||
values: values,
|
|
||||||
processing: false
|
|
||||||
});
|
|
||||||
this.orchestrator.setCallbacks({
|
|
||||||
onComplete: () => {
|
|
||||||
this.dismiss();
|
|
||||||
},
|
|
||||||
onValidValue: (value) => {
|
|
||||||
this.state.values[value.type].invalid = false;
|
|
||||||
removeFromArray(this.processingTypes, value.type);
|
|
||||||
this.reloadProcessingStatus();
|
|
||||||
},
|
|
||||||
onInvalidValue: (value) => {
|
|
||||||
this.state.values[value.type].invalid = true;
|
|
||||||
removeFromArray(this.processingTypes, value.type);
|
|
||||||
this.reloadProcessingStatus();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
deinit() {
|
|
||||||
this.application = null;
|
|
||||||
this.orchestrator = null;
|
|
||||||
this.challenge = null;
|
|
||||||
super.deinit();
|
|
||||||
}
|
|
||||||
|
|
||||||
reloadProcessingStatus() {
|
|
||||||
this.setState({
|
|
||||||
processing: this.processingTypes.length > 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
promptForChallenge(challenge) {
|
|
||||||
if (challenge === ChallengeType.LocalPasscode) {
|
|
||||||
return 'Enter your application passcode';
|
|
||||||
} else {
|
|
||||||
return 'Enter your account password';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
cancel() {
|
|
||||||
if (!this.cancelable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.dismiss();
|
|
||||||
}
|
|
||||||
|
|
||||||
onTextValueChange(challenge) {
|
|
||||||
const values = this.state.values;
|
|
||||||
values[challenge].invalid = false;
|
|
||||||
this.setState({ values });
|
|
||||||
}
|
|
||||||
|
|
||||||
validate() {
|
|
||||||
const failed = [];
|
|
||||||
for (const type of this.state.types) {
|
|
||||||
const value = this.state.values[type];
|
|
||||||
if (!value || value.length === 0) {
|
|
||||||
this.state.values[type].invalid = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return failed.length === 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
async submit() {
|
|
||||||
if (!this.validate()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.setState({ processing: true });
|
|
||||||
const values = [];
|
|
||||||
for (const key of Object.keys(this.state.values)) {
|
|
||||||
const type = Number(key);
|
|
||||||
if(this.state.values[key].valid) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const rawValue = this.state.values[key].value;
|
|
||||||
const value = new ChallengeValue(type, rawValue);
|
|
||||||
values.push(value);
|
|
||||||
}
|
|
||||||
this.processingTypes = values.map((v) => v.type);
|
|
||||||
this.orchestrator.submitValues(values);
|
|
||||||
}
|
|
||||||
|
|
||||||
dismiss() {
|
|
||||||
const elem = this.$element;
|
|
||||||
const scope = elem.scope();
|
|
||||||
scope.$destroy();
|
|
||||||
elem.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ChallengeModal {
|
|
||||||
constructor() {
|
|
||||||
this.restrict = 'E';
|
|
||||||
this.template = template;
|
|
||||||
this.controller = ChallengeModalCtrl;
|
|
||||||
this.controllerAs = 'ctrl';
|
|
||||||
this.bindToController = {
|
|
||||||
challenge: '=',
|
|
||||||
orchestrator: '=',
|
|
||||||
application: '='
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
168
app/assets/javascripts/directives/views/challengeModal.ts
Normal file
168
app/assets/javascripts/directives/views/challengeModal.ts
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
import { WebDirective } from './../../types';
|
||||||
|
import { WebApplication } from './../../application';
|
||||||
|
import template from '%/directives/challenge-modal.pug';
|
||||||
|
import {
|
||||||
|
ChallengeType,
|
||||||
|
ChallengeValue,
|
||||||
|
removeFromArray,
|
||||||
|
Challenge,
|
||||||
|
ChallengeOrchestrator
|
||||||
|
} from 'snjs';
|
||||||
|
import { PureCtrl } from '@Controllers/abstract/pure_ctrl';
|
||||||
|
|
||||||
|
type InputValue = {
|
||||||
|
value: string
|
||||||
|
invalid: boolean
|
||||||
|
}
|
||||||
|
type ChallengeModalScope = {
|
||||||
|
application: WebApplication
|
||||||
|
challenge: Challenge
|
||||||
|
orchestrator: ChallengeOrchestrator
|
||||||
|
}
|
||||||
|
|
||||||
|
type Values = Record<ChallengeType, InputValue>
|
||||||
|
|
||||||
|
type ChallengeModalState = {
|
||||||
|
types: ChallengeType[]
|
||||||
|
values: Partial<Values>
|
||||||
|
processing: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
class ChallengeModalCtrl extends PureCtrl implements ChallengeModalScope {
|
||||||
|
private $element: JQLite
|
||||||
|
private processingTypes: ChallengeType[] = []
|
||||||
|
application!: WebApplication
|
||||||
|
challenge!: Challenge
|
||||||
|
orchestrator!: ChallengeOrchestrator
|
||||||
|
|
||||||
|
/* @ngInject */
|
||||||
|
constructor(
|
||||||
|
$element: JQLite,
|
||||||
|
$timeout: ng.ITimeoutService
|
||||||
|
) {
|
||||||
|
super($timeout);
|
||||||
|
this.$element = $element;
|
||||||
|
}
|
||||||
|
|
||||||
|
getState() {
|
||||||
|
return this.state as ChallengeModalState;
|
||||||
|
}
|
||||||
|
|
||||||
|
$onInit() {
|
||||||
|
super.$onInit();
|
||||||
|
const values = {} as Values;
|
||||||
|
const types = this.challenge.types;
|
||||||
|
for (const type of types) {
|
||||||
|
values[type] = {
|
||||||
|
value: '',
|
||||||
|
invalid: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
types: types,
|
||||||
|
values: values,
|
||||||
|
processing: false
|
||||||
|
});
|
||||||
|
this.orchestrator.setCallbacks(
|
||||||
|
(value) => {
|
||||||
|
this.getState().values[value.type]!.invalid = false;
|
||||||
|
removeFromArray(this.processingTypes, value.type);
|
||||||
|
this.reloadProcessingStatus();
|
||||||
|
},
|
||||||
|
(value) => {
|
||||||
|
this.getState().values[value.type]!.invalid = true;
|
||||||
|
removeFromArray(this.processingTypes, value.type);
|
||||||
|
this.reloadProcessingStatus();
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
this.dismiss();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
deinit() {
|
||||||
|
(this.application as any) = undefined;
|
||||||
|
(this.orchestrator as any) = undefined;
|
||||||
|
(this.challenge as any) = undefined;
|
||||||
|
super.deinit();
|
||||||
|
}
|
||||||
|
|
||||||
|
reloadProcessingStatus() {
|
||||||
|
this.setState({
|
||||||
|
processing: this.processingTypes.length > 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
promptForChallenge(challenge: ChallengeType) {
|
||||||
|
if (challenge === ChallengeType.LocalPasscode) {
|
||||||
|
return 'Enter your application passcode';
|
||||||
|
} else {
|
||||||
|
return 'Enter your account password';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
// if (!this.cancelable) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
this.dismiss();
|
||||||
|
}
|
||||||
|
|
||||||
|
onTextValueChange(challenge: ChallengeType) {
|
||||||
|
const values = this.getState().values;
|
||||||
|
values[challenge]!.invalid = false;
|
||||||
|
this.setState({ values });
|
||||||
|
}
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
const failed = [];
|
||||||
|
for (const type of this.getState().types) {
|
||||||
|
const value = this.getState().values[type];
|
||||||
|
if (!value || value.value.length === 0) {
|
||||||
|
this.getState().values[type]!.invalid = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return failed.length === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.validate()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState({ processing: true });
|
||||||
|
const values = [];
|
||||||
|
for (const key of Object.keys(this.getState().values)) {
|
||||||
|
const type = Number(key) as ChallengeType;
|
||||||
|
if (!this.getState().values[type]!.invalid) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const rawValue = this.getState().values[type]!.value;
|
||||||
|
const value = new ChallengeValue(type, rawValue);
|
||||||
|
values.push(value);
|
||||||
|
}
|
||||||
|
this.processingTypes = values.map((v) => v.type);
|
||||||
|
this.orchestrator.submitValues(values);
|
||||||
|
}
|
||||||
|
|
||||||
|
dismiss() {
|
||||||
|
const elem = this.$element;
|
||||||
|
const scope = elem.scope();
|
||||||
|
scope.$destroy();
|
||||||
|
elem.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ChallengeModal extends WebDirective {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.restrict = 'E';
|
||||||
|
this.template = template;
|
||||||
|
this.controller = ChallengeModalCtrl;
|
||||||
|
this.controllerAs = 'ctrl';
|
||||||
|
this.bindToController = {
|
||||||
|
challenge: '=',
|
||||||
|
orchestrator: '=',
|
||||||
|
application: '='
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user