Integrated hCaptcha.

pages/auth/signup/+Page.vue

@@ -112,6 +112,14 @@
 				</div>
 			</div>
 
+			<VueHCaptcha
+				v-if="env.captcha.enabled"
+				:sitekey="env.captcha.siteKey"
+				class="captcha"
+				@verify="(verification) => captcha = verification"
+				@expired="captcha = null"
+			/>
+
 			<button class="button button-submit">Sign up</button>
 
 			<a
@@ -124,12 +132,13 @@
 
 <script setup>
 import { ref, onMounted, inject } from 'vue';
+import VueHCaptcha from '@hcaptcha/vue3-hcaptcha';
 
 import { post } from '#/src/api.js';
 import navigate from '#/src/navigate.js';
 
 const pageContext = inject('pageContext');
-const user = pageContext.user;
+const { user, env } = pageContext;
 
 const username = ref('');
 const email = ref('');
@@ -139,6 +148,7 @@ const passwordConfirm = ref('');
 const errorMsg = ref(null);
 const userInput = ref(null);
 const showPassword = ref(false);
+const captcha = ref(null);
 
 async function signup() {
 	errorMsg.value = null;
@@ -148,12 +158,20 @@ async function signup() {
 		return;
 	}
 
+	/*
+	if (env.captcha.enabled && !captcha.value) {
+		errorMsg.value = 'Please complete the CAPTCHA';
+		return;
+	}
+	 */
+
 	try {
 		const newUser = await post('/users', {
 			username: username.value,
 			email: email.value,
 			password: password.value,
 			redirect: pageContext.urlParsed.search.r,
+			captcha: captcha.value,
 		});
 
 		navigate(`/user/${newUser.username}`, null, { redirect: true });
@@ -229,6 +247,16 @@ onMounted(() => {
 	}
 }
 
+.captcha {
+	display: flex;
+	justify-content: center;
+	margin-top: .5rem;
+}
+
+.button-submit {
+	margin-top: .5rem;
+}
+
 .error {
 	background: var(--error);
 	color: var(--text-light);