为了创建交易,必须首先在确认对话框模式中对用户进行身份验证(密码)。用户通过身份验证后,将关闭模式并显示交易。如果未正确验证用户身份,则模式仍将关闭,并显示一条带有该错误的提示消息。我想更改此逻辑,以便用户的尝试未经身份验证时必须重新输入密码。
以异步方式设置createTransaction内的状态。 newTransactionModal中的this.closeModal是什么导致模式关闭并重置状态。
NewTransactionModal.js
this.state.showConfirmDialog ? (
<ConfirmDialog
type="New Transaction"
onPasswordChange={this.changePassword}
onConfirm={this.handleCreateClick}
onCancel={this.handleClose}
errMsg = {this.props.passwordErrMsg}
/>
) : null
NewTransactionModal.js
handleCreateClick = () => {
if (this.formIsValid()) {
let path = '/transaction',
transaction = {
type: this.state.transactionType.id,
amount: this.state.transactionAmount,
internalComment: this.state.comment,
userPassword: this.state.password
},
extraDataForError = {
typeName: this.state.transactionType.name,
advertiserName: this.state.advertiser.name,
fundingType: this.state.advertiser.fundingType,
financialDocumentId: this.state.documentId,
financialDocumentType: this.state.document && this.state.document.documentMetadata.documentType
};
if (this.state.transactionType.creditType) {
path += '/transfer';
transaction.debitAdvertiserId = this.state.advertiserId;
transaction.creditAdvertiserId = this.state.transferAdvertiserId;
transaction.debitFinancialDocumentId = this.state.documentId;
transaction.creditFinancialDocumentId = this.state.documentId;
} else {
transaction.advertiserId = this.state.advertiserId;
transaction.financialDocumentId = this.state.documentId;
}
this.props.createTransaction(path, transaction, extraDataForError);
this.closeModal();
}
};
ListTransaction.js
createTransaction = (path, data, extra) => {
const failureMsg = 'Failed to create transaction';
if (!path || !data) {
this.setState({
toastMessage: failureMsg,
toastType: 'error'
});
return;
}
const getErrTransactions = res => {
return [{ transaction: {...data, ...extra}, validations: res.validations, result: res.result }];
};
this.setState({ toastType: 'pending' }, async () => {
try {
const res = await ApiService.post(path, data, this.abortController.signal);
if (res && res.result !== 'FAILURE') {
this.setState({
toastMessage: 'Transaction created',
toastType: 'success',
selected: []
}, () => this.loadData(1));
} else if (res) {
this.handleError(getErrTransactions(res), failureMsg);
} else {
this.setState({toastType: null})
}
} catch (err) {
if (err) {
if (err.name === 'AbortError') {
return false;
} else if (err.json) {
this.setState({
passwordErrMsg: "Please enter a valid password"
})
const jsonErr = await err.json();
this.handleError(jsonErr.result ? getErrTransactions(jsonErr) : jsonErr, failureMsg);
} else {
this.handleError(err, failureMsg);
}
} else {
this.setState({ toastType: null });
}
}
});
};
ListTransactions.js
canCreate ? (
<NewTransactionModal
show={showNewTransactionModal}
types={allowedTransactionTypes}
createTransaction={this.createTransaction}
passwordErrMsg = {this.state.passwordErrMsg}
handlePasswordAttempt = {this.handlePasswordAttempt}
handleRecent={this.handleRecent}
handleClose={this.hideModal}
/>
) : null
我希望用户在尝试无效之后仍必须输入密码,并且模态不会消失。同样,在用户输入正确的密码之后,也会关闭模式。