JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: resolve issues with registration form resubmission

Browse Source 
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
This commit is contained in:
Jeremy Wharton 2022-09-19 17:40:55 -05:00 committed by Storj Robot
parent 4e71dd302a
commit 07c337f5c4
1 changed files with 47 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
web/satellite/src/views/registration/RegisterArea.vue
View File

@ -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">
<div v-if="captchaError" class="register-area__input-area__container__captcha-wrapper__label-container">
<ErrorIcon />
<p class="register-area__input-area__container__captcha-wrapper__label-container__error">reCAPTCHA is required</p>
</div>
<VueRecaptcha
ref="recaptcha"
v-if="recaptchaEnabled"
ref="captcha"
:sitekey="recaptchaSiteKey"
:load-recaptcha-script="true"
size="invisible"
@verify="onCaptchaVerified"
@expired="onCaptchaError"
@error="onCaptchaError"
/>
</div>
<div v-else-if="hcaptchaEnabled" class="register-area__input-area__container__captcha-wrapper">
<div v-if="captchaError" class="register-area__input-area__container__captcha-wrapper__label-container">
<ErrorIcon />
<p class="register-area__input-area__container__captcha-wrapper__label-container__error">HCaptcha is required</p>
</div>
<VueHcaptcha
ref="hcaptcha"
v-else-if="hcaptchaEnabled"
ref="captcha"
: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;
hcaptcha: VueHcaptcha;
captcha: VueRecaptcha | 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 {