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

web/satellite: Replace checkbox reCAPTCHA with invisible reCAPTCHA

Browse Source 
This change replaces the checkbox reCAPTCHA in the registration page
with an invisible reCAPTCHA.

Change-Id: I5b52e5fe35b551ba88af2404429b23bf38d4f9c1
This commit is contained in:
Jeremy Wharton 2021-08-26 16:55:26 -05:00 committed by Maximillian von Briesen
parent 03d638bbb3
commit f55af3125c
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/satellite/src/views/RegisterArea.vue
View File

@ -200,10 +200,11 @@
<ErrorIcon /> <ErrorIcon />
<p class="register-area__input-area__container__recaptcha-wrapper__label-container__error">reCAPTCHA is required</p> <p class="register-area__input-area__container__recaptcha-wrapper__label-container__error">reCAPTCHA is required</p>
</div> </div>
<vue-recaptcha <VueRecaptcha
ref="recaptcha" ref="recaptcha"
:sitekey="recaptchaSiteKey" :sitekey="recaptchaSiteKey"
load-recaptcha-script="true" load-recaptcha-script="true"
size="invisible"
@verify="onRecaptchaVerified" @verify="onRecaptchaVerified"
@expired="onRecaptchaError" @expired="onRecaptchaError"
@error="onRecaptchaError" @error="onRecaptchaError"
@ -310,6 +311,10 @@ export default class RegisterArea extends Vue {
public readonly loginPath: string = RouteConfig.Login.path; public readonly loginPath: string = RouteConfig.Login.path;
public $refs!: {
recaptcha: VueRecaptcha;
}
/** /**
* Lifecycle hook on component destroy. * Lifecycle hook on component destroy.
* Sets view to default state. * Sets view to default state.
@ -373,20 +378,12 @@ export default class RegisterArea extends Vue {
* Validates input fields and proceeds user creation. * Validates input fields and proceeds user creation.
*/ */
public async onCreateClick(): Promise<void> { public async onCreateClick(): Promise<void> {
if (this.isLoading) { if (this.$refs.recaptcha && !this.recaptchaResponseToken) {
this.$refs.recaptcha.execute();
return; return;
} }
this.isLoading = true;
if (!this.validateFields()) {
this.isLoading = false;
return;
}
await this.createUser(); await this.createUser();
this.isLoading = false;
} }
/** /**
@ -501,6 +498,7 @@ export default class RegisterArea extends Vue {
public onRecaptchaVerified(response: string): void { public onRecaptchaVerified(response: string): void {
this.recaptchaResponseToken = response; this.recaptchaResponseToken = response;
this.recaptchaError = false; this.recaptchaError = false;
this.createUser();
} }
/** /**
@ -508,6 +506,7 @@ export default class RegisterArea extends Vue {
*/ */
public onRecaptchaError(): void { public onRecaptchaError(): void {
this.recaptchaResponseToken = ''; this.recaptchaResponseToken = '';
this.recaptchaError = true;
} }
/** /**
@ -566,11 +565,6 @@ export default class RegisterArea extends Vue {
isNoErrors = false; isNoErrors = false;
} }
if (this.recaptchaEnabled && !this.recaptchaResponseToken) {
this.recaptchaError = true;
isNoErrors = false;
}
return isNoErrors; return isNoErrors;
} }
@ -578,6 +572,16 @@ export default class RegisterArea extends Vue {
* Creates user and toggles successful registration area visibility. * Creates user and toggles successful registration area visibility.
*/ */
private async createUser(): Promise<void> { private async createUser(): Promise<void> {
if (this.isLoading) {
return;
}
if (!this.validateFields()) {
return;
}
this.isLoading = true;
this.user.isProfessional = this.isProfessional; this.user.isProfessional = this.isProfessional;
this.user.haveSalesContact = this.haveSalesContact; this.user.haveSalesContact = this.haveSalesContact;
@ -588,11 +592,11 @@ export default class RegisterArea extends Vue {
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION); await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION);
} catch (error) { } catch (error) {
if (this.$refs.recaptcha) { if (this.$refs.recaptcha) {
(this.$refs.recaptcha as VueRecaptcha).reset(); this.$refs.recaptcha.reset();
} }
await this.$notify.error(error.message); await this.$notify.error(error.message);
this.isLoading = false;
} }
this.isLoading = false;
} }
} }
</script> </script>
@ -1204,6 +1208,10 @@ export default class RegisterArea extends Vue {
} }
} }
::v-deep .grecaptcha-badge {
z-index: 99;
}
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.register-area { .register-area {