disable submit button while login is pending

ui/component/userEmailReturning/index.js

@@ -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),
 });
 

ui/component/userEmailReturning/view.jsx

@@ -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>

ui/component/userSignInPassword/index.js

@@ -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, {

ui/component/userSignInPassword/view.jsx

@@ -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>