117 lines
3.8 KiB
JavaScript
117 lines
3.8 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { inject as service } from '@ember/service';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { action, set } from '@ember/object';
|
|
import { task, timeout } from 'ember-concurrency';
|
|
import { numberToWord } from 'vault/helpers/number-to-word';
|
|
/**
|
|
* @module MfaForm
|
|
* The MfaForm component is used to enter a passcode when mfa is required to login
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <Mfa::MfaForm @clusterId={this.model.id} @authData={this.authData} />
|
|
* ```
|
|
* @param {string} clusterId - id of selected cluster
|
|
* @param {object} authData - data from initial auth request -- { mfa_requirement, backend, data }
|
|
* @param {function} onSuccess - fired when passcode passes validation
|
|
* @param {function} onError - fired for multi-method or non-passcode method validation errors
|
|
*/
|
|
|
|
export const TOTP_VALIDATION_ERROR =
|
|
'The passcode failed to validate. If you entered the correct passcode, contact your administrator.';
|
|
|
|
export default class MfaForm extends Component {
|
|
@service auth;
|
|
|
|
@tracked countdown;
|
|
@tracked error;
|
|
@tracked codeDelayMessage;
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
// trigger validation immediately when passcode is not required
|
|
const passcodeOrSelect = this.constraints.filter((constraint) => {
|
|
return constraint.methods.length > 1 || constraint.methods.findBy('uses_passcode');
|
|
});
|
|
if (!passcodeOrSelect.length) {
|
|
this.validate.perform();
|
|
}
|
|
}
|
|
|
|
get constraints() {
|
|
return this.args.authData.mfa_requirement.mfa_constraints;
|
|
}
|
|
get multiConstraint() {
|
|
return this.constraints.length > 1;
|
|
}
|
|
get singleConstraintMultiMethod() {
|
|
return !this.isMultiConstraint && this.constraints[0].methods.length > 1;
|
|
}
|
|
get singlePasscode() {
|
|
return (
|
|
!this.isMultiConstraint &&
|
|
this.constraints[0].methods.length === 1 &&
|
|
this.constraints[0].methods[0].uses_passcode
|
|
);
|
|
}
|
|
get description() {
|
|
let base = 'Multi-factor authentication is enabled for your account.';
|
|
if (this.singlePasscode) {
|
|
base += ' Enter your authentication code to log in.';
|
|
}
|
|
if (this.singleConstraintMultiMethod) {
|
|
base += ' Select the MFA method you wish to use.';
|
|
}
|
|
if (this.multiConstraint) {
|
|
const num = this.constraints.length;
|
|
base += ` ${numberToWord(num, true)} methods are required for successful authentication.`;
|
|
}
|
|
return base;
|
|
}
|
|
|
|
@task *validate() {
|
|
try {
|
|
this.error = null;
|
|
const response = yield this.auth.totpValidate({
|
|
clusterId: this.args.clusterId,
|
|
...this.args.authData,
|
|
});
|
|
this.args.onSuccess(response);
|
|
} catch (error) {
|
|
const errors = error.errors || [];
|
|
const codeUsed = errors.find((e) => e.includes('code already used'));
|
|
const rateLimit = errors.find((e) => e.includes('maximum TOTP validation attempts'));
|
|
const delayMessage = codeUsed || rateLimit;
|
|
|
|
if (delayMessage) {
|
|
const reason = codeUsed ? 'This code has already been used' : 'Maximum validation attempts exceeded';
|
|
this.codeDelayMessage = `${reason}. Please wait until a new code is available.`;
|
|
this.newCodeDelay.perform(delayMessage);
|
|
} else if (this.singlePasscode) {
|
|
this.error = TOTP_VALIDATION_ERROR;
|
|
} else {
|
|
this.args.onError(this.auth.handleError(error));
|
|
}
|
|
}
|
|
}
|
|
|
|
@task *newCodeDelay(message) {
|
|
// parse validity period from error string to initialize countdown
|
|
this.countdown = parseInt(message.match(/(\d\w seconds)/)[0].split(' ')[0]);
|
|
while (this.countdown) {
|
|
yield timeout(1000);
|
|
this.countdown--;
|
|
}
|
|
}
|
|
|
|
@action onSelect(constraint, id) {
|
|
set(constraint, 'selectedId', id);
|
|
set(constraint, 'selectedMethod', constraint.methods.findBy('id', id));
|
|
}
|
|
@action submit(e) {
|
|
e.preventDefault();
|
|
this.validate.perform();
|
|
}
|
|
}
|