web/satellite: resolve issues with registration form resubmission

This change fixes an issue where the account registration form could
not be resubmitted if any of the following occured in the previous
submission attempt:
- The Terms of Service checkbox was unchecked
- The beta satellite terms checkbox was unchecked
- The captcha modal was closed by clicking outside its boundaries

Resolves #5167

Change-Id: If00443dc715ccd37332559af019a1c4f6c6cb61f

web/satellite/src/views/registration/RegisterArea.vue

@@ -188,7 +188,7 @@
                     <div v-if="isBetaSatellite" class="register-area__input-area__container__warning">
                         <div class="register-area__input-area__container__warning__header">
                             <label class="container">
-                                <input v-model="areBetaTermsAccepted" type="checkbox">
+                                <input type="checkbox" @change="onBetaTermsAcceptedToggled">
                                 <span class="checkmark" :class="{'error': areBetaTermsAcceptedError}" />
                             </label>
                             <h2 class="register-area__input-area__container__warning__header__label">
@@ -216,7 +216,7 @@
                     </div>
                     <div class="register-area__input-area__container__checkbox-area">
                         <label class="checkmark-container">
-                            <input id="terms" v-model="isTermsAccepted" type="checkbox">
+                            <input id="terms" type="checkbox" @change="onTermsAcceptedToggled">
                             <span class="checkmark" :class="{'error': isTermsAcceptedError}" />
                         </label>
                         <label class="register-area__input-area__container__checkbox-area__msg-box" for="terms">
@@ -228,36 +228,24 @@
                             </p>
                         </label>
                     </div>
-                    <div v-if="recaptchaEnabled" class="register-area__input-area__container__captcha-wrapper">
+                    <VueRecaptcha
-                        <div v-if="captchaError" class="register-area__input-area__container__captcha-wrapper__label-container">
+                        v-if="recaptchaEnabled"
-                            <ErrorIcon />
+                        ref="captcha"
-                            <p class="register-area__input-area__container__captcha-wrapper__label-container__error">reCAPTCHA is required</p>
+                        :sitekey="recaptchaSiteKey"
-                        </div>
+                        :load-recaptcha-script="true"
-                        <VueRecaptcha
+                        size="invisible"
-                            ref="recaptcha"
+                        @verify="onCaptchaVerified"
-                            :sitekey="recaptchaSiteKey"
+                        @error="onCaptchaError"
-                            :load-recaptcha-script="true"
+                    />
-                            size="invisible"
+                    <VueHcaptcha
-                            @verify="onCaptchaVerified"
+                        v-else-if="hcaptchaEnabled"
-                            @expired="onCaptchaError"
+                        ref="captcha"
-                            @error="onCaptchaError"
+                        :sitekey="hcaptchaSiteKey"
-                        />
+                        :re-captcha-compat="false"
-                    </div>
+                        size="invisible"
-                    <div v-else-if="hcaptchaEnabled" class="register-area__input-area__container__captcha-wrapper">
+                        @verify="onCaptchaVerified"
-                        <div v-if="captchaError" class="register-area__input-area__container__captcha-wrapper__label-container">
+                        @error="onCaptchaError"
-                            <ErrorIcon />
+                    />
-                            <p class="register-area__input-area__container__captcha-wrapper__label-container__error">HCaptcha is required</p>
-                        </div>
-                        <VueHcaptcha
-                            ref="hcaptcha"
-                            :sitekey="hcaptchaSiteKey"
-                            :re-captcha-compat="false"
-                            size="invisible"
-                            @verify="onCaptchaVerified"
-                            @expired="onCaptchaError"
-                            @error="onCaptchaError"
-                        />
-                    </div>
                     <v-button
                         class="register-area__input-area__container__button"
                         width="100%"
@@ -301,7 +289,6 @@ import BottomArrowIcon from '../../../static/images/common/lightBottomArrow.svg'
 import SelectedCheckIcon from '../../../static/images/common/selectedCheck.svg';
 import LogoIcon from '../../../static/images/logo.svg';
 import LogoWithPartnerIcon from '../../../static/images/partnerStorjLogo.svg';
-import ErrorIcon from '../../../static/images/register/ErrorInfo.svg';
 
 import { AuthHttpApi } from '@/api/auth';
 import { RouteConfig } from '@/router';
@@ -337,7 +324,6 @@ type ViewConfig = {
         VInput,
         VButton,
         BottomArrowIcon,
-        ErrorIcon,
         SelectedCheckIcon,
         LogoIcon,
         PasswordStrength,
@@ -398,8 +384,7 @@ export default class RegisterArea extends Vue {
     public readonly loginPath: string = RouteConfig.Login.path;
 
     public $refs!: {
-        recaptcha: VueRecaptcha;
+        captcha: VueRecaptcha | VueHcaptcha;
-        hcaptcha: VueHcaptcha;
     };
 
     public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@@ -481,16 +466,6 @@ export default class RegisterArea extends Vue {
             return;
         }
 
-        this.isLoading = true;
-
-        if (this.$refs.recaptcha && !this.captchaResponseToken) {
-            this.$refs.recaptcha.execute();
-            return;
-        } if (this.$refs.hcaptcha && !this.captchaResponseToken) {
-            this.$refs.hcaptcha.execute();
-            return;
-        }
-
         await this.createUser();
     }
 
@@ -612,11 +587,27 @@ export default class RegisterArea extends Vue {
     }
 
     /**
-     * Handles captcha error and expiry.
+     * Handles captcha error.
      */
     public onCaptchaError(): void {
         this.captchaResponseToken = '';
-        this.captchaError = true;
+        this.$notify.error('The captcha encountered an error. Please try again.');
+    }
+
+    /**
+     * Executes when the Terms of Service checkbox has been toggled.
+     */
+    public onTermsAcceptedToggled(event: Event): void {
+        this.isTermsAccepted = (event.target as HTMLInputElement).checked;
+        this.isTermsAcceptedError = false;
+    }
+
+    /**
+     * Executes when the beta satellite terms checkbox has been toggled.
+     */
+    public onBetaTermsAcceptedToggled(event: Event): void {
+        this.areBetaTermsAccepted = (event.target as HTMLInputElement).checked;
+        this.areBetaTermsAcceptedError = false;
     }
 
     /**
@@ -718,6 +709,12 @@ export default class RegisterArea extends Vue {
             return;
         }
 
+        if (this.$refs.captcha && !this.captchaResponseToken) {
+            this.$refs.captcha.execute();
+            return;
+        }
+
+        this.isLoading = true;
         this.user.isProfessional = this.isProfessional;
         this.user.haveSalesContact = this.haveSalesContact;
 
@@ -735,17 +732,11 @@ export default class RegisterArea extends Vue {
 
             await this.detectBraveBrowser() ? await this.$router.push(braveSuccessPath) : window.location.href = nonBraveSuccessPath;
         } catch (error) {
-            if (this.$refs.recaptcha) {
-                this.$refs.recaptcha.reset();
-                this.captchaResponseToken = '';
-            }
-            if (this.$refs.hcaptcha) {
-                this.$refs.hcaptcha.reset();
-                this.captchaResponseToken = '';
-            }
             await this.$notify.error(error.message);
         }
 
+        this.$refs.captcha?.reset();
+        this.captchaResponseToken = '';
         this.isLoading = false;
     }
 }
@@ -1166,20 +1157,6 @@ export default class RegisterArea extends Vue {
                 &__button {
                     margin-top: 30px;
                 }
-
-                &__captcha-wrapper__label-container {
-                    margin-top: 30px;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-end;
-                    padding-bottom: 8px;
-
-                    &__error {
-                        font-size: 16px;
-                        margin-left: 10px;
-                        color: #ff5560;
-                    }
-                }
             }
 
             &__footer {