Enforce synchrone flow with captcha creation

kiwigrid · Jan 14, 2022 · c62aaf1 · c62aaf1
1 parent 5a70506
commit c62aaf1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/screens/auth/retrieve-password/RetrievePassword.tsx b/src/screens/auth/retrieve-password/RetrievePassword.tsx
@@ -23,6 +23,7 @@ interface State {
   captchaSiteKey?: string;
   captchaBaseUrl?: string;
   captcha?: string;
+  performRetrievePassword?: boolean;
   loading?: boolean;
   errorEmail?: Record<string, unknown>[];
 }
@@ -51,7 +52,8 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
       captchaSiteKey: null,
       captchaBaseUrl: null,
       captcha: null,
-      loading: false
+      loading: false,
+      performRetrievePassword: false
     };
   }
 
@@ -76,23 +78,21 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
     this.centralServerProvider.setAutoLoginDisabled(true);
   }
 
-  public recaptchaResponseToken = (captcha: string) => {
-    this.setState({ captcha });
+  public onCaptchaCreated = (captcha: string) => {
+    this.setState({ captcha }, this.state.performRetrievePassword ? () => this.retrievePassword() : () => {});
   };
 
   public retrievePassword = async () => {
     // Check field
     const { tenantSubDomain, email, captcha } = this.state;
     const formIsValid = Utils.validateInput(this, this.formValidationDef)
     // Force captcha regeneration for next signUp click
-    this.setState({captcha: null});
     if (formIsValid && captcha) {
       try {
-        this.setState({ loading: true });
         // Login
         await this.centralServerProvider.retrievePassword(tenantSubDomain, email, captcha);
         // Login Success
-        this.setState({ loading: false });
+        this.setState({ loading: false, performRetrievePassword: false });
         // Show
         Message.showSuccess(I18n.t('authentication.resetSuccess'));
         // Navigate
@@ -112,7 +112,7 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
         );
       } catch (error) {
         // Login failed
-        this.setState({ loading: false });
+        this.setState({ loading: false, performRetrievePassword: false });
         // Check request?
         if (error.request) {
           // Show error
@@ -174,7 +174,7 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
               {loading ? (
                 <Spinner style={formStyle.spinner} color="grey" />
               ) : (
-                <Button primary block style={formStyle.button} onPress={async () => this.retrievePassword()}>
+                <Button primary block style={formStyle.button} onPress={async () => this.setState({loading: true, performRetrievePassword: true, captcha: null})}>
                   <Text style={formStyle.buttonText} uppercase={false}>
                     {I18n.t('authentication.retrievePassword')}
                   </Text>
@@ -185,7 +185,7 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
           {captchaSiteKey && captchaBaseUrl && !captcha && (
             <ReactNativeRecaptchaV3
               action="ResetPassword"
-              onHandleToken={this.recaptchaResponseToken}
+              onHandleToken={(captcha) => this.onCaptchaCreated(captcha)}
               url={captchaBaseUrl}
               siteKey={captchaSiteKey}
             />

diff --git a/src/screens/auth/sign-up/SignUp.tsx b/src/screens/auth/sign-up/SignUp.tsx
@@ -30,6 +30,7 @@ interface State {
   captcha?: string;
   loading?: boolean;
   hideRepeatPassword?: boolean;
+  performSignUp?: boolean;
   hidePassword?: boolean;
   errorEula?: Record<string, unknown>[];
   errorPassword?: Record<string, unknown>[];
@@ -121,7 +122,8 @@ export default class SignUp extends BaseScreen<Props, State> {
       captcha: null,
       loading: false,
       hidePassword: true,
-      hideRepeatPassword: true
+      hideRepeatPassword: true,
+      performSignUp: false
     };
   }
 
@@ -146,21 +148,18 @@ export default class SignUp extends BaseScreen<Props, State> {
     this.centralServerProvider.setAutoLoginDisabled(true);
   }
 
-  public recaptchaResponseToken = (captcha: string) => {
-    this.setState({ captcha });
+  public onCaptchaCreated = (captcha: string) => {
+    this.setState({ captcha }, this.state.performSignUp ? () => this.signUp() : () => {});
   };
 
   public signUp = async () => {
     // Check field
     const { tenantSubDomain, name, firstName, email, password, eula, captcha } = this.state
     const formIsValid = Utils.validateInput(this, this.formValidationDef);
     // Force captcha regeneration for next signUp click
-    this.setState({captcha: null});
     if (formIsValid && captcha && eula) {
-      this.setState({loading: true})
       try {
         // Loading
-        this.setState({ loading: true });
         // Register
         await this.centralServerProvider.register(
           tenantSubDomain,
@@ -173,7 +172,7 @@ export default class SignUp extends BaseScreen<Props, State> {
           captcha
         );
         // Reset
-        this.setState({ loading: false });
+        this.setState({ loading: false, performSignUp: false });
         // Show
         Message.showSuccess(I18n.t('authentication.registerSuccess'));
         // Navigate
@@ -193,7 +192,7 @@ export default class SignUp extends BaseScreen<Props, State> {
         );
       } catch (error) {
         // Reset
-        this.setState({ loading: false });
+        this.setState({ loading: false, performSignUp: false });
         // Check request?
         if (error.request) {
           // Show error
@@ -215,7 +214,7 @@ export default class SignUp extends BaseScreen<Props, State> {
         }
       }
     }
-    this.setState({loading: false})
+    this.setState({loading: false, performSignUp: false})
   };
 
   public onBack(): boolean {
@@ -391,7 +390,7 @@ export default class SignUp extends BaseScreen<Props, State> {
               {loading ? (
                 <Spinner style={formStyle.spinner} color="grey" />
               ) : (
-                <Button disabled={!eula} primary block style={[formStyle.button, (!eula || !captcha) && formStyle.buttonDisabled]} onPress={async () => this.signUp()}>
+                <Button disabled={!eula} primary block style={[formStyle.button, !eula && formStyle.buttonDisabled]} onPress={async () => this.setState({captcha: null, performSignUp: true, loading: true })}>
                   <Text style={formStyle.buttonText} uppercase={false}>
                     {I18n.t('authentication.signUp')}
                   </Text>
@@ -402,7 +401,7 @@ export default class SignUp extends BaseScreen<Props, State> {
           {!captcha && captchaSiteKey && captchaBaseUrl && (
             <ReactNativeRecaptchaV3
               action="RegisterUser"
-              onHandleToken={this.recaptchaResponseToken}
+              onHandleToken={(captcha) => this.onCaptchaCreated(captcha)}
               url={captchaBaseUrl}
               siteKey={captchaSiteKey}
             />