honeypot feature on register form

This commit is contained in:
tykayn 2021-01-05 17:18:53 +01:00 committed by Baptiste Lemoine
parent f3fc67da43
commit 2568db9bed
2 changed files with 104 additions and 12 deletions

View File

@ -8,8 +8,8 @@
title="Info"
type="is-info"
:aria-close-label="$t('Close')"
>{{ $t("You need to login.") }}</b-message
>
>{{ $t("You need to login.") }}
</b-message>
<b-message
v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
type="is-danger"
@ -21,8 +21,8 @@
provider: $route.query.provider,
}
)
}}</b-message
>
}}
</b-message>
<b-message
v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
type="is-danger"
@ -34,8 +34,8 @@
provider: $route.query.provider,
}
)
}}</b-message
>
}}
</b-message>
<b-message
:title="$t('Error')"
type="is-danger"
@ -87,8 +87,8 @@
name: RouteName.SEND_PASSWORD_RESET,
params: { email: credentials.email },
}"
>{{ $t("Forgot your password ?") }}</router-link
>
>{{ $t("Forgot your password ?") }}
</router-link>
</p>
<router-link
class="button is-text"
@ -96,8 +96,8 @@
name: RouteName.RESEND_CONFIRMATION,
params: { email: credentials.email },
}"
>{{ $t("Didn't receive the instructions?") }}</router-link
>
>{{ $t("Didn't receive the instructions?") }}
</router-link>
<p class="control" v-if="config && config.registrationsOpen">
<router-link
class="button is-text"
@ -108,8 +108,8 @@
default_password: credentials.password,
},
}"
>{{ $t("Create an account") }}</router-link
>
>{{ $t("Create an account") }}
</router-link>
</p>
</form>
</div>

View File

@ -87,6 +87,21 @@
:message="errors.email"
label-for="email"
>
<!-- honey pot fields to limit spam account creation on webpage -->
<b-field
class="bees-home"
:label="$t('Password')"
label-for="first_name"
>
<b-input
aria-required="true"
id="first_name"
required
type="text"
password-reveal
v-model="credentials.honey_potter"
/>
</b-field>
<b-input
aria-required="true"
required
@ -171,6 +186,35 @@
</p>
<hr />
<b-field
class="bees-home"
:label="$t('Password')"
label-for="middle_name"
>
<b-input
aria-required="true"
id="middle_name"
required
type="text"
password-reveal
v-model="credentials.honey_potter_two"
/>
</b-field>
<b-field
class="bees-home"
:label="$t('Password')"
label-for="last_name"
>
<b-input
aria-required="true"
id="last_name"
required
type="text"
password-reveal
v-model="credentials.honey_potter_nothing"
/>
</b-field>
<div
class="control"
v-if="config && config.auth.oauthProviders.length > 0"
@ -224,6 +268,12 @@ export default class Register extends Vue {
email: this.email,
password: this.password,
locale: "en",
// honey pot antispam fields
honey_potter: "",
honey_potter_backup: "",
honey_potter_two: "",
honey_potter_two_backup: "",
honey_potter_nothing: "",
};
errors: Record<string, unknown> = {};
@ -243,7 +293,41 @@ export default class Register extends Vue {
return "";
}
mounted() {
this.populate_honeypots();
}
/**
* generate random strings in honeypots
*/
populate_honeypots(): void {
this.credentials.honey_potter = Math.random().toString(16).substr(2, 128);
this.credentials.honey_potter_backup = Object.create(
this.credentials.honey_potter
);
this.credentials.honey_potter_two = Math.random()
.toString(16)
.substr(2, 128);
this.credentials.honey_potter_backup = Object.create(
this.credentials.honey_potter_two
);
}
/**
* checks that honeypots fields did not change
*/
validate_honeypots(): boolean {
return (
this.credentials.honey_potter_nothing === "" &&
this.credentials.honey_potter === this.credentials.honey_potter_backup &&
this.credentials.honey_potter_two ===
this.credentials.honey_potter_two_backup
);
}
async submit(): Promise<void> {
if (this.sendingForm || !this.validate_honeypots()) {
return;
}
this.sendingForm = true;
this.credentials.locale = this.$i18n.locale;
try {
@ -304,4 +388,12 @@ p.create-account {
margin: 1rem auto 2rem;
}
}
.bees-home {
overflow: hidden;
width: 0;
height: 0;
display: block;
position: absolute;
}
</style>