仅在通过身份验证时关闭模式

时间:2019-07-14 00:16:42

标签: javascript reactjs modal-dialog

为了创建交易,必须首先在确认对话框模式中对用户进行身份验证(密码)。用户通过身份验证后,将关闭模式并显示交易。如果未正确验证用户身份,则模式仍将关闭,并显示一条带有该错误的提示消息。我想更改此逻辑,以便用户的尝试未经身份验证时必须重新输入密码。

以异步方式设置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

我希望用户在尝试无效之后仍必须输入密码,并且模态不会消失。同样,在用户输入正确的密码之后,也会关闭模式。

0 个答案:

没有答案