disable submit button while login is pending

This commit is contained in:
Sean Yesmunt 2020-07-09 12:50:11 -04:00
parent 86484eb13f
commit 706c4afd04
4 changed files with 16 additions and 4 deletions

View file

@ -5,6 +5,7 @@ import {
selectEmailDoesNotExist,
selectEmailAlreadyExists,
selectUser,
selectEmailNewIsPending,
} from 'redux/selectors/user';
import { doUserCheckIfEmailExists, doClearEmailEntry } from 'redux/actions/user';
import { doSetClientSetting } from 'redux/actions/settings';
@ -15,6 +16,7 @@ const select = state => ({
emailToVerify: selectEmailToVerify(state),
emailDoesNotExist: selectEmailDoesNotExist(state),
emailExists: selectEmailAlreadyExists(state),
isPending: selectEmailNewIsPending(state),
user: selectUser(state),
});

View file

@ -19,6 +19,7 @@ type Props = {
doUserSignIn: (string, ?string) => void,
doUserCheckIfEmailExists: string => void,
doSetClientSetting: (string, boolean) => void,
isPending: boolean,
};
function UserEmailReturning(props: Props) {
@ -30,6 +31,7 @@ function UserEmailReturning(props: Props) {
doClearEmailEntry,
emailDoesNotExist,
doSetClientSetting,
isPending,
} = props;
const { push, location } = useHistory();
const urlParams = new URLSearchParams(location.search);
@ -108,7 +110,7 @@ function UserEmailReturning(props: Props) {
button="primary"
type="submit"
label={__('Sign In')}
disabled={!email || !valid}
disabled={!email || !valid || isPending}
/>
<Button button="link" onClick={handleChangeToSignIn} label={__('Register')} />
</div>

View file

@ -1,5 +1,11 @@
import { connect } from 'react-redux';
import { selectUser, selectUserIsPending, selectEmailToVerify, selectEmailNewErrorMessage } from 'redux/selectors/user';
import {
selectUser,
selectUserIsPending,
selectEmailToVerify,
selectEmailNewErrorMessage,
selectEmailNewIsPending,
} from 'redux/selectors/user';
import { doUserSignIn, doClearEmailEntry } from 'redux/actions/user';
import UserSignIn from './view';
@ -8,6 +14,7 @@ const select = state => ({
userFetchPending: selectUserIsPending(state),
emailToVerify: selectEmailToVerify(state),
errorMessage: selectEmailNewErrorMessage(state),
isPending: selectEmailNewIsPending(state),
});
export default connect(select, {

View file

@ -12,10 +12,11 @@ type Props = {
doClearEmailEntry: () => void,
doUserSignIn: (string, ?string) => void,
onHandleEmailOnly: () => void,
isPending: boolean,
};
export default function UserSignInPassword(props: Props) {
const { errorMessage, doUserSignIn, emailToVerify, onHandleEmailOnly } = props;
const { errorMessage, doUserSignIn, emailToVerify, onHandleEmailOnly, isPending } = props;
const [password, setPassword] = useState('');
const [forgotPassword, setForgotPassword] = React.useState(false);
@ -52,7 +53,7 @@ export default function UserSignInPassword(props: Props) {
/>
<div className="section__actions">
<Button button="primary" type="submit" label={__('Continue')} disabled={!password} />
<Button button="primary" type="submit" label={__('Continue')} disabled={!password || isPending} />
<Button button="link" onClick={handleChangeToSignIn} label={__('Use Magic Link')} />
</div>
</Form>