Add support for hCaptcha

src/client/components/hcaptcha.vue

@@ -0,0 +1,76 @@
+<template>
+	<div ref="hCaptcha"></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+declare global {
+	interface Window {
+		hcaptcha?: {
+			render(container: string | Node, options: {
+				readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
+			}): string;
+			remove(id: string): void;
+			execute(id: string): void;
+			reset(id: string): void;
+			getResponse(id: string): string;
+		};
+	}
+}
+
+export default Vue.extend({
+	props: {
+		sitekey: {
+			type: String,
+      required: true,
+		},
+		value: {
+			type: String,
+		},
+	},
+
+	data() {
+		return {
+			available: false,
+		};
+	},
+
+	created() {
+		if (window.hcaptcha) {
+			this.available = true;
+		} else {
+			const script = document.createElement('script');
+			script.addEventListener('load', () => this.available = true);
+			script.src = 'https://hcaptcha.com/1/api.js?render=explicit';
+			script.async = true;
+			document.head.appendChild(script);
+		}
+	},
+
+	mounted() {
+		if (this.available) {
+			this.render();
+		} else {
+			this.$watch('available', this.render);
+		}
+	},
+
+	methods: {
+		render() {
+			if (this.$refs.hCaptcha instanceof Element) {
+				window.hcaptcha!.render(this.$refs.hCaptcha, {
+					sitekey: this.sitekey,
+					theme: this.$store.state.device.darkMode ? 'dark' : 'light',
+					callback: this.callback,
+					'expired-callback': this.callback,
+					'error-callback': this.callback,
+				});
+			}
+		},
+		callback(response?: string) {
+			this.$emit('input', typeof response == 'string' ? response : null);
+		},
+	},
+});
+</script>

src/client/components/signup.vue

@@ -42,7 +42,8 @@
 			</i18n>
 		</mk-switch>
 		<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
-		<mk-button type="submit" :disabled=" submitting || !(meta.tosUrl ? ToSAgreement : true) || passwordRetypeState == 'not-match'" primary>{{ $t('start') }}</mk-button>
+		<h-captcha v-if="meta.enableHcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<mk-button type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</mk-button>
 	</template>
 </form>
 </template>
@@ -65,6 +66,7 @@ export default Vue.extend({
 		MkButton,
 		MkInput,
 		MkSwitch,
+		hCaptcha: () => import('./hcaptcha.vue').then(x => x.default),
 	},
 
 	data() {
@@ -80,6 +82,7 @@ export default Vue.extend({
 			passwordRetypeState: null,
 			submitting: false,
 			ToSAgreement: false,
+			hCaptchaResponse: null,
 			faLock, faExclamationTriangle, faSpinner, faCheck, faKey
 		}
 	},
@@ -96,7 +99,14 @@ export default Vue.extend({
 		meta() {
 			return this.$store.state.instance.meta;
 		},
-		
+
+		shouldDisableSubmitting(): boolean {
+			return this.submitting ||
+				this.meta.tosUrl && !this.ToSAgreement ||
+				this.meta.enableHcaptcha && !this.hCaptchaResponse ||
+				this.passwordRetypeState == 'not-match';
+		},
+
 		shouldShowProfileUrl(): boolean {
 			return (this.username != '' &&
 				this.usernameState != 'invalid-format' &&
@@ -115,10 +125,11 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		const head = document.getElementsByTagName('head')[0];
-		const script = document.createElement('script');
-		script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
-		head.appendChild(script);
+		if (this.meta.enableRecaptcha) {
+			const script = document.createElement('script');
+			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
+			document.head.appendChild(script);
+		}
 	},
 
 	methods: {
@@ -177,6 +188,7 @@ export default Vue.extend({
 				username: this.username,
 				password: this.password,
 				invitationCode: this.invitationCode,
+				'hcaptcha-response': this.hCaptchaResponse,
 				'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
 			}).then(() => {
 				this.$root.api('signin', {

src/client/components/url-preview.vue

@@ -4,7 +4,7 @@
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
 </div>
 <div v-else-if="tweetUrl && detail" class="twitter">
-	<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkmode ? 'dark' : null">
+	<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkMode ? 'dark' : null">
 		<a :href="url"></a>
 	</blockquote>
 </div>