honeypot feature on register form

js/src/views/User/Login.vue

@@ -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>

js/src/views/User/Register.vue

@@ -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>