homeflowjs 1.0.83 → 1.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/user/user-sign-in-form/user-sign-in-form.component.jsx

@@ -1,35 +1,78 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import notify from '../../app/notify';
-import { signInUser } from '../../actions/user.actions'
+import { signInUser } from '../../actions/user.actions';
 import { setLoading } from '../../actions/app.actions';
+import { useRecaptcha } from '../../hooks';
+
+const UserSignInForm = ({
+  children,
+  signInUser,
+  userCredentials,
+  setLoading,
+  withRecaptcha,
+  ...otherProps
+}) => {
+  const formRef = useRef(null);
+  const [isRequestCompleted, setIsRequestCompleted] = useState(null);
+
+  const onRecaptchaSubmit = (recaptchaData) => {
+    signInUser(userCredentials).then(({ success }) => {
+      if (success) {
+        notify('You have successfully signed in', 'success');
+      } else {
+        notify('Sign in failed, please try again', 'error');
+      }
+    })
+      .catch(() => notify('Sign in failed, please try again', 'error'))
+      .finally(() => {
+        setLoading({ userSignIn: false });
+        setIsRequestCompleted((prevState) => !prevState)
+      });
+  };
+
+  const { onRecaptchaRender, onResetRecaptcha } = useRecaptcha({
+    formID: 'login-form',
+    formRef,
+    onRecaptchaSubmit,
+  });
+
+  useEffect(() => {
+    if (isRequestCompleted) {
+      onResetRecaptcha();
+    }
+  }, [isRequestCompleted]);
 
-const UserSignInForm = ({ children, signInUser, userCredentials, setLoading, ...otherProps }) => {
   const handleSubmit = (e) => {
     e.preventDefault();
     setLoading({ userSignIn: true });
-
-    signInUser(userCredentials)
-      .then(({ success }) => {
-        if (success) {
-          notify('You have successfully signed in', 'success');
-        } else {
-          notify('Sign in failed, please try again', 'error');
-        }
-      })
-      .catch(() => notify('Sign in failed, please try again', 'error'))
-      .finally(() => setLoading({ userSignIn: false }));
+    setIsRequestCompleted(false);
+    if (withRecaptcha) {
+      onRecaptchaRender();
+    } else {
+      onRecaptchaSubmit();
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit} {...otherProps}>
+    <form onSubmit={handleSubmit} {...otherProps} ref={formRef}>
       {children}
     </form>
   );
 };
 
-const mapStateToProps = state => ({
+UserSignInForm.propTypes = {
+  userCredentials: PropTypes.object.isRequired,
+  withRecaptcha: PropTypes.bool,
+};
+
+UserSignInForm.defaultProps = {
+  withRecaptcha: false,
+};
+
+const mapStateToProps = (state) => ({
   userCredentials: state.user.userCredentials,
 });
 
@@ -38,7 +81,4 @@ const mapDispatchToProps = {
   setLoading,
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(UserSignInForm)
+export default connect(mapStateToProps, mapDispatchToProps)(UserSignInForm);