[UPD] Recaptcha

Fixed recaptcha component
unosquare · Nov 6, 2019 · 179ec63 · 179ec63
1 parent 514b9c4
commit 179ec63
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 35 deletions.
diff --git a/src/Unosquare.PassCore.Web/ClientApp/Components/ChangePassword.tsx b/src/Unosquare.PassCore.Web/ClientApp/Components/ChangePassword.tsx
@@ -6,7 +6,6 @@ import { ChangePasswordDialog } from '../Dialogs/ChangePasswordDialog';
 import { GlobalContext, SnackbarContext } from '../Provider/GlobalContext';
 import { fetchRequest } from '../Utils/FetchRequest';
 import { ChangePasswordForm } from './ChangePasswordForm';
-import { ReCaptcha } from './ReCaptcha';
 
 export const ChangePassword: React.FunctionComponent<any> = ({ }) => {
     const [disabled, setDisabled] = React.useState(true);
@@ -91,7 +90,7 @@ export const ChangePassword: React.FunctionComponent<any> = ({ }) => {
         (value: string, comparedValue: any) => value === comparedValue);
 
     return (
-        <React.Fragment>
+        <>
             <Paper
                 style={{
                     borderRadius: '10px',
@@ -115,18 +114,9 @@ export const ChangePassword: React.FunctionComponent<any> = ({ }) => {
                         onValidated={setDisabled}
                         shouldReset={shouldReset}
                         changeResetState={setReset}
+                        setReCaptchaToken={setToken}
+                        ReCaptchaToken={token}
                     />
-                    {
-                        (recaptcha.siteKey && recaptcha.siteKey !== '' &&
-                            (
-                                <ReCaptcha
-                                    setToken={setToken}
-                                    shouldReset={false}
-                                />
-
-                            )
-                        )
-                    }
                     <Button
                         type='submit'
                         variant='contained'
@@ -145,6 +135,6 @@ export const ChangePassword: React.FunctionComponent<any> = ({ }) => {
                 open={dialogIsOpen}
                 onClose={onCloseDialog}
             />
-        </React.Fragment>
+        </>
     );
 };
diff --git a/src/Unosquare.PassCore.Web/ClientApp/Components/ChangePasswordForm.tsx b/src/Unosquare.PassCore.Web/ClientApp/Components/ChangePasswordForm.tsx
@@ -6,6 +6,7 @@ import { GlobalContext } from '../Provider/GlobalContext';
 import { IChangePasswordFormInitialModel } from '../types/Components';
 import { PasswordGenerator } from './PasswordGenerator';
 import { PasswordStrengthBar } from './PasswordStrengthBar';
+import { ReCaptcha } from './ReCaptcha';
 
 const defaultState: IChangePasswordFormInitialModel = {
     CurrentPassword: '',
@@ -22,6 +23,8 @@ export const ChangePasswordForm: React.FunctionComponent<any> = ({
     onValidated,
     shouldReset,
     changeResetState,
+    setReCaptchaToken,
+    ReCaptchaToken,
 }) => {
 
     const [fields, handleChange] = useStateForModel({ ...defaultState });
@@ -32,6 +35,7 @@ export const ChangePasswordForm: React.FunctionComponent<any> = ({
         usePasswordGeneration,
         useEmail,
         showPasswordMeter,
+        recaptcha,
     } = React.useContext(GlobalContext);
 
     const {
@@ -62,8 +66,15 @@ export const ChangePasswordForm: React.FunctionComponent<any> = ({
     }
 
     React.useEffect(() => {
-        if (parentRef.current && parentRef.current.isFormValid) {
-            parentRef.current.isFormValid().then((response: any) => onValidated(!response));
+        if (parentRef.current !== null && parentRef.current.isFormValid !== null) {
+
+            parentRef.current.isFormValid().then((response: any) => {
+                let validated = response;
+                if (recaptcha.siteKey && recaptcha.siteKey !== '') {
+                    validated = validated && ReCaptchaToken !== '';
+                }
+                onValidated(!validated);
+            });
         }
     });
 
@@ -193,6 +204,19 @@ export const ChangePasswordForm: React.FunctionComponent<any> = ({
                         </>
                     )
             }
+
+            {
+                (recaptcha.siteKey && recaptcha.siteKey !== '' &&
+                    (
+                        <ReCaptcha
+                            setToken={setReCaptchaToken}
+                            shouldReset={false}
+                        />
+
+                    )
+                )
+            }
+
         </FormGroup>
     );
 };
diff --git a/src/Unosquare.PassCore.Web/ClientApp/Components/GoogleReCaptcha/GoogleReCaptcha.tsx b/src/Unosquare.PassCore.Web/ClientApp/Components/GoogleReCaptcha/GoogleReCaptcha.tsx
@@ -9,9 +9,8 @@ interface IReCaptchaProps {
     onError: () => any;
     onExpired: () => any;
     onLoad: () => any;
-    onSuccess: () => any;
     onloadCallback: () => any;
-    verifyCallback: (recaptchaToken: string) => any;
+    onSuccess: (recaptchaToken: string) => any;
     render: string;
     sitekey: string;
     size: 'compact' | 'normal' | 'invisible';
@@ -62,23 +61,13 @@ class GoogleReCaptcha extends React.Component<Partial<IReCaptchaProps>, IReCaptc
         clearInterval(this.readyIntervalId);
     }
 
+    public componentDidMount() {
+        this.renderManually();
+    }
+
     public componentDidUpdate(_prevProps: IReCaptchaProps, prevState: any) {
         if (!prevState.ready && this.state.ready) {
-            this.widgetId = this.grecaptcha().render(
-                this.recaptcha.current,
-                {
-                    'badge': this.props.badge,
-                    'callback': this.props.onSuccess,
-                    'error-callback': this.props.onError,
-                    'expired-callback': this.props.onExpired,
-                    'isolated': this.props.isolated,
-                    'sitekey': this.props.sitekey,
-                    'size': this.props.size,
-                    'tabindex': this.props.tabIndex,
-                    'theme': this.props.theme,
-                },
-                this.props.inherit,
-            );
+            this.renderManually();
         }
     }
 
@@ -129,6 +118,26 @@ class GoogleReCaptcha extends React.Component<Partial<IReCaptchaProps>, IReCaptc
 
     private grecaptcha = () => window.grecaptcha;
 
+    private renderManually = () => {
+        if (this.grecaptcha() && this.grecaptcha().render && this.widgetId === undefined) {
+            this.widgetId = this.grecaptcha().render(
+                this.recaptcha.current,
+                {
+                    'badge': this.props.badge,
+                    'callback': this.props.onSuccess,
+                    'error-callback': this.props.onError,
+                    'expired-callback': this.props.onExpired,
+                    'isolated': this.props.isolated,
+                    'sitekey': this.props.sitekey,
+                    'size': this.props.size,
+                    'tabindex': this.props.tabIndex,
+                    'theme': this.props.theme,
+                },
+                this.props.inherit,
+            );
+        }
+    }
+
     private _updateReadyState = () => {
         if (this.isReady()) {
             this.setState(() => ({

diff --git a/src/Unosquare.PassCore.Web/ClientApp/Components/ReCaptcha.tsx b/src/Unosquare.PassCore.Web/ClientApp/Components/ReCaptcha.tsx
@@ -26,7 +26,7 @@ export const ReCaptcha: React.FunctionComponent<any> = ({ setToken, shouldReset
   return (
     <div
       style={{
-        marginLeft: 'calc(100% - 481px)',
+        marginLeft: 'calc(100% - 440px)',
         marginTop: '25px',
       }}
     >
@@ -36,7 +36,7 @@ export const ReCaptcha: React.FunctionComponent<any> = ({ setToken, shouldReset
         render='explicit'
         sitekey={siteKey}
         onloadCallback={onLoadRecaptcha}
-        verifyCallback={verifyCallback}
+        onSuccess={verifyCallback}
       />
     </div>
   );