Существует ли состояние «загрузки» или «отправки» в AWS Amplify при отправке форм? - PullRequest
Новая
       13

Существует ли состояние «загрузки» или «отправки» в AWS Amplify при отправке форм?

0 голосов
/ 29 сентября 2019

Я использую пользовательские версии компонентов аутентификации с AWS Amplify.В качестве примера, вот моя форма входа в систему: 

import React from 'react'
import ReactMarkdown from 'react-markdown'
import { SignIn as AmpSignIn } from 'aws-amplify-react'

// Components
import CTA from 'components/CTA'

// Language
import { formLanguage } from 'language'

// Style
import style from './index.module.css'

export class SignIn extends AmpSignIn {
    constructor(props) {
        super(props)

        /* eslint-disable-next-line */
        this._validAuthStates = ['signIn', 'signedOut', 'signedUp']
    }

    showComponent() {
        return (
            <form
                className={ style.Form }
                onSubmit={ event => {
                    event.preventDefault()
                    super.signIn()
                } }
            >
                <fieldset className={ style.Fieldset }>
                    <legend className={ style.Legend }>
                        <ReactMarkdown
                            escapeHtml={ false }
                            source={ formLanguage.titles.signIn }
                        />
                    </legend>

                    <label
                        className={ style.Label }
                        htmlFor="email"
                    >
                        { formLanguage.labels.email }
                        <input
                            autoFocus
                            className={ style.Input }
                            id="email"
                            key="email"
                            name="email"
                            onChange={ this.handleInputChange }
                            type="email"
                        />
                    </label>
                    <label
                        className={ style.Label }
                        htmlFor="password"
                    >
                        { formLanguage.labels.password }
                        <input
                            data-test-password
                            className={ style.Input }
                            name="password"
                            onChange={ this.handleInputChange }
                            type="password"
                        />
                    </label>

                    <CTA
                        noCancel
                        stacked
                        buttonVariant="secondary"
                        error=""
                        isDisabled={ false }
                        isSubmitting={ false }
                        labels={ { ...formLanguage.cta.signIn } }
                        onForgotPassword={
                            () => super.changeState('forgotPassword')
                        }
                        onSetAuthStep={ () => {} }
                        secondaryActions="signIn"
                    />
                </fieldset>
            </form>
        )
    }
}

// export default Form
export default SignIn

Мне нужно иметь возможность показывать загрузочную графику поверх формы, когда пользователь нажимает «Отправить», а затем его, когда действие завершается.Я знаю, они добавили loading состояние к форме входа в систему некоторое время назад, но похоже, что все другие формы еще не получили такой же обработки.Я также использую ForgotPassword и SignOut.Сам компонент ForgotPassword представляет собой две формы в одной, и при медленном соединении возникает неловкая пауза между отправкой вашего имени пользователя и отображением второй формы, когда вы вводите свой проверочный код.

Использование существующих реквизитов / состояния для этихкомпоненты auth, есть ли способ узнать, когда форма была отправлена ​​и когда она получила ответ?

...