From 78608392208cb73351354cda5678daee232159d8 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Tue, 28 Apr 2020 14:29:33 +0900
Subject: Add support for hCaptcha

---
 src/client/components/hcaptcha.vue    | 76 +++++++++++++++++++++++++++++++++++
 src/client/components/signup.vue      | 24 ++++++++---
 src/client/components/url-preview.vue |  2 +-
 3 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 src/client/components/hcaptcha.vue

(limited to 'src/client/components')

diff --git a/src/client/components/hcaptcha.vue b/src/client/components/hcaptcha.vue
new file mode 100644
index 0000000000..e54eb314a3
--- /dev/null
+++ b/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>
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 9f3ae8db28..5d16a82bac 100644
--- a/src/client/components/signup.vue
+++ b/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', {
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 94d07cbaed..c2dd0038be 100644
--- a/src/client/components/url-preview.vue
+++ b/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>
-- 
cgit v1.2.3-freya


From b862c055ae81a0ed1f239fb43edf699cd70f711e Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Tue, 28 Apr 2020 14:55:12 +0900
Subject: Fix bug

---
 src/client/components/hcaptcha.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/hcaptcha.vue b/src/client/components/hcaptcha.vue
index e54eb314a3..4711b303d7 100644
--- a/src/client/components/hcaptcha.vue
+++ b/src/client/components/hcaptcha.vue
@@ -23,7 +23,7 @@ export default Vue.extend({
 	props: {
 		sitekey: {
 			type: String,
-      required: true,
+			required: true,
 		},
 		value: {
 			type: String,
@@ -37,13 +37,22 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (window.hcaptcha) {
+		if (window.hcaptcha) { // loaded
 			this.available = true;
 		} else {
+			const alreadyLoading = document.getElementById('hcaptcha');
+
+			if (alreadyLoading) { // loading
+				alreadyLoading.addEventListener('load', () => this.available = true);
+
+				return;
+			} // init
+
 			const script = document.createElement('script');
 			script.addEventListener('load', () => this.available = true);
-			script.src = 'https://hcaptcha.com/1/api.js?render=explicit';
 			script.async = true;
+			script.id = 'hcaptcha';
+			script.src = 'https://hcaptcha.com/1/api.js?render=explicit';
 			document.head.appendChild(script);
 		}
 	},
-- 
cgit v1.2.3-freya


From 9daa9007935578ed1d12d46916d913d802816087 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Wed, 29 Apr 2020 05:30:58 +0900
Subject: Refactor codes

---
 src/client/components/hcaptcha.vue     | 20 ++++++--------------
 src/client/pages/instance/settings.vue |  3 +--
 src/server/api/private/signup.ts       |  2 +-
 3 files changed, 8 insertions(+), 17 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/hcaptcha.vue b/src/client/components/hcaptcha.vue
index 4711b303d7..f493366486 100644
--- a/src/client/components/hcaptcha.vue
+++ b/src/client/components/hcaptcha.vue
@@ -40,20 +40,12 @@ export default Vue.extend({
 		if (window.hcaptcha) { // loaded
 			this.available = true;
 		} else {
-			const alreadyLoading = document.getElementById('hcaptcha');
-
-			if (alreadyLoading) { // loading
-				alreadyLoading.addEventListener('load', () => this.available = true);
-
-				return;
-			} // init
-
-			const script = document.createElement('script');
-			script.addEventListener('load', () => this.available = true);
-			script.async = true;
-			script.id = 'hcaptcha';
-			script.src = 'https://hcaptcha.com/1/api.js?render=explicit';
-			document.head.appendChild(script);
+			(document.getElementById('hcaptcha') || (x => document.head.appendChild(Object.assign(x, {
+				async: true,
+				id: 'hcaptcha',
+				src: 'https://hcaptcha.com/1/api.js?render=explicit',
+			})))(document.createElement('script')))
+				.addEventListener('load', () => this.available = true);
 		}
 	},
 
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 088db8763e..1292316b22 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -371,11 +371,10 @@ export default Vue.extend({
 			}
 
 			if (recaptchaLoaded) { // loaded
-				delete window.onRecaptchaLoad;
 				renderRecaptchaPreview();
 			} else { // init
 				window.onRecaptchaLoad = () => {
-					recaptchaLoaded = true;
+					recaptchaLoaded = delete window.onRecaptchaLoad;
 					renderRecaptchaPreview();
 				};
 				const script = document.createElement('script');
diff --git a/src/server/api/private/signup.ts b/src/server/api/private/signup.ts
index e23fe43583..04d0501b6c 100644
--- a/src/server/api/private/signup.ts
+++ b/src/server/api/private/signup.ts
@@ -14,7 +14,7 @@ export default async (ctx: Koa.Context) => {
 	// ただしテスト時はこの機構は障害となるため無効にする
 	if (process.env.NODE_ENV !== 'test' && instance.enableHcaptcha && instance.hcaptchaSecretKey) {
 		const success = await verify(instance.hcaptchaSecretKey, body['hcaptcha-response']).then(
-			({ 'error-codes': x }) => !x || !x.length,
+			({ success }) => success,
 			() => false,
 		);
 
-- 
cgit v1.2.3-freya


From 805472482e4197dc0bbda64e163d8fc6ff3d8d57 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Wed, 29 Apr 2020 06:09:17 +0900
Subject: Refactor code

---
 src/client/components/hcaptcha.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/hcaptcha.vue b/src/client/components/hcaptcha.vue
index f493366486..4bc03342fe 100644
--- a/src/client/components/hcaptcha.vue
+++ b/src/client/components/hcaptcha.vue
@@ -40,11 +40,11 @@ export default Vue.extend({
 		if (window.hcaptcha) { // loaded
 			this.available = true;
 		} else {
-			(document.getElementById('hcaptcha') || (x => document.head.appendChild(Object.assign(x, {
+			(document.getElementById('hcaptcha') || document.head.appendChild(Object.assign(document.createElement('script'), {
 				async: true,
 				id: 'hcaptcha',
 				src: 'https://hcaptcha.com/1/api.js?render=explicit',
-			})))(document.createElement('script')))
+			})))
 				.addEventListener('load', () => this.available = true);
 		}
 	},
-- 
cgit v1.2.3-freya


From 77adf26236855b4b43a1072ad2dc6a904bef7d39 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Wed, 29 Apr 2020 09:15:18 +0900
Subject: Factorize *captcha component

---
 src/client/components/captcha.vue       | 119 ++++++++++++++++++++++++++++++
 src/client/components/hcaptcha.vue      |  77 --------------------
 src/client/components/signup-dialog.vue |   2 +-
 src/client/components/signup.vue        |  33 ++++-----
 src/client/pages/instance/settings.vue  | 123 +++++++++++---------------------
 5 files changed, 179 insertions(+), 175 deletions(-)
 create mode 100644 src/client/components/captcha.vue
 delete mode 100644 src/client/components/hcaptcha.vue

(limited to 'src/client/components')

diff --git a/src/client/components/captcha.vue b/src/client/components/captcha.vue
new file mode 100644
index 0000000000..6b1ee6f0b2
--- /dev/null
+++ b/src/client/components/captcha.vue
@@ -0,0 +1,119 @@
+<template>
+<div>
+	<span v-if="!available">{{ $t('waiting') }}<mk-ellipsis/></span>
+	<div ref="captcha"></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../i18n';
+
+type Captcha = {
+	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;
+};
+
+type CaptchaProvider = 'hcaptcha' | 'grecaptcha';
+
+type CaptchaContainer = {
+	readonly [_ in CaptchaProvider]?: Captcha;
+};
+
+declare global {
+	interface Window extends CaptchaContainer {
+	}
+}
+
+export default Vue.extend({
+	i18n,
+	props: {
+		provider: {
+			type: String,
+			required: true,
+		},
+		sitekey: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: String,
+		},
+	},
+
+	data() {
+		return {
+			available: false,
+		};
+	},
+
+	computed: {
+		loaded() {
+			return !!window[this.provider as CaptchaProvider];
+		},
+		src() {
+			const endpoint = ({
+				hcaptcha: 'https://hcaptcha.com/1',
+				grecaptcha: 'https://www.google.com/recaptcha',
+			} as Record<PropertyKey, unknown>)[this.provider];
+
+			return `${typeof endpoint == 'string' ? endpoint : 'about:invalid'}/api.js?render=explicit`;
+		},
+		captcha() {
+			return window[this.provider as CaptchaProvider] || {} as unknown as Captcha;
+		},
+	},
+
+	created() {
+		if (this.loaded) {
+			this.available = true;
+		} else {
+			(document.getElementById(this.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
+				async: true,
+				id: this.provider,
+				src: this.src,
+			})))
+				.addEventListener('load', () => this.available = true);
+		}
+	},
+
+	mounted() {
+		if (this.available) {
+			this.requestRender();
+		} else {
+			this.$watch('available', this.requestRender);
+		}
+	},
+
+	beforeDestroy() {
+		this.reset();
+	},
+
+	methods: {
+		reset() {
+			this.captcha?.reset();
+		},
+		requestRender() {
+			if (this.captcha.render && this.$refs.captcha instanceof Element) {
+				this.captcha.render(this.$refs.captcha, {
+					sitekey: this.sitekey,
+					theme: this.$store.state.device.darkMode ? 'dark' : 'light',
+					callback: this.callback,
+					'expired-callback': this.callback,
+					'error-callback': this.callback,
+				});
+			} else {
+				setTimeout(this.requestRender.bind(this), 1);
+			}
+		},
+		callback(response?: string) {
+			this.$emit('input', typeof response == 'string' ? response : null);
+		},
+	},
+});
+</script>
diff --git a/src/client/components/hcaptcha.vue b/src/client/components/hcaptcha.vue
deleted file mode 100644
index 4bc03342fe..0000000000
--- a/src/client/components/hcaptcha.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<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) { // loaded
-			this.available = true;
-		} else {
-			(document.getElementById('hcaptcha') || document.head.appendChild(Object.assign(document.createElement('script'), {
-				async: true,
-				id: 'hcaptcha',
-				src: 'https://hcaptcha.com/1/api.js?render=explicit',
-			})))
-				.addEventListener('load', () => this.available = true);
-		}
-	},
-
-	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>
diff --git a/src/client/components/signup-dialog.vue b/src/client/components/signup-dialog.vue
index 10cdf3a567..4db79af512 100644
--- a/src/client/components/signup-dialog.vue
+++ b/src/client/components/signup-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }">
+<x-window ref="window" :width="366" :height="506" @closed="() => { $emit('closed'); destroyDom(); }">
 	<template #header>{{ $t('signup') }}</template>
 	<x-signup :auto-set="autoSet" @signup="onSignup"/>
 </x-window>
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 5d16a82bac..7e8bac7760 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -41,8 +41,8 @@
 				<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
 			</i18n>
 		</mk-switch>
-		<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
-		<h-captcha v-if="meta.enableHcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
 		<mk-button type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</mk-button>
 	</template>
 </form>
@@ -66,7 +66,7 @@ export default Vue.extend({
 		MkButton,
 		MkInput,
 		MkSwitch,
-		hCaptcha: () => import('./hcaptcha.vue').then(x => x.default),
+		captcha: () => import('./captcha.vue').then(x => x.default),
 	},
 
 	data() {
@@ -83,6 +83,7 @@ export default Vue.extend({
 			submitting: false,
 			ToSAgreement: false,
 			hCaptchaResponse: null,
+			reCaptchaResponse: null,
 			faLock, faExclamationTriangle, faSpinner, faCheck, faKey
 		}
 	},
@@ -124,14 +125,6 @@ export default Vue.extend({
 		}
 	},
 
-	mounted() {
-		if (this.meta.enableRecaptcha) {
-			const script = document.createElement('script');
-			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
-			document.head.appendChild(script);
-		}
-	},
-
 	methods: {
 		onChangeUsername() {
 			if (this.username == '') {
@@ -189,7 +182,7 @@ export default Vue.extend({
 				password: this.password,
 				invitationCode: this.invitationCode,
 				'hcaptcha-response': this.hCaptchaResponse,
-				'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
+				'g-recaptcha-response': this.meta.reCaptchaResponse,
 			}).then(() => {
 				this.$root.api('signin', {
 					username: this.username,
@@ -199,17 +192,25 @@ export default Vue.extend({
 				});
 			}).catch(() => {
 				this.submitting = false;
+				this.$refs.hcaptcha?.reset?.();
+				this.$refs.recaptcha?.reset?.();
 
 				this.$root.dialog({
 					type: 'error',
 					text: this.$t('error')
 				});
-
-				if (this.meta.enableRecaptcha) {
-					(window as any).grecaptcha.reset();
-				}
 			});
 		}
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.mk-signup {
+	padding: 32px 0 0;
+
+	.captcha {
+		margin: 16px 0;
+	}
+}
+</style>
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 008d6ef1ab..f0fa846999 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -41,15 +41,15 @@
 	<section class="_card">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
+			<mk-switch v-model="enableHcaptcha" @input="guide('enableHcaptcha')">{{ $t('enableHcaptcha') }}</mk-switch>
 			<template v-if="enableHcaptcha">
 				<mk-input v-model="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSiteKey') }}</mk-input>
 				<mk-input v-model="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSecretKey') }}</mk-input>
 			</template>
 		</div>
-		<div class="_content" v-if="enableHcaptcha && hcaptchaSiteKey">
+		<div class="_content" v-if="enableHcaptcha">
 			<header>{{ $t('preview') }}</header>
-			<h-captcha v-if="enableHcaptcha" :sitekey="hcaptchaSiteKey"/>
+			<captcha v-if="enableHcaptcha" provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 		</div>
 		<div class="_footer">
 			<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -59,7 +59,7 @@
 	<section class="_card">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
+			<mk-switch v-model="enableRecaptcha" @input="guide('enableRecaptcha')">{{ $t('enableRecaptcha') }}</mk-switch>
 			<template v-if="enableRecaptcha">
 				<mk-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSiteKey') }}</mk-input>
 				<mk-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSecretKey') }}</mk-input>
@@ -67,7 +67,7 @@
 		</div>
 		<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
 			<header>{{ $t('preview') }}</header>
-			<div ref="recaptcha" style="margin: 16px 0 0 0;" :key="recaptchaSiteKey"></div>
+			<captcha v-if="enableRecaptcha" provider="grecaptcha" :sitekey="recaptchaSiteKey"/>
 		</div>
 		<div class="_footer">
 			<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -213,12 +213,6 @@ import { url } from '../../config';
 import i18n from '../../i18n';
 import getAcct from '../../../misc/acct/render';
 
-declare global {
-	interface Window {
-		onRecaptchaLoad?: Function;
-	}
-}
-
 export default Vue.extend({
 	i18n,
 
@@ -234,12 +228,11 @@ export default Vue.extend({
 		MkTextarea,
 		MkSwitch,
 		MkInfo,
-		hCaptcha: () => import('../../components/hcaptcha.vue').then(x => x.default),
+		Captcha: () => import('../../components/captcha.vue').then(x => x.default),
 	},
 
 	data() {
 		return {
-			loaded: false,
 			url,
 			proxyAccount: null,
 			proxyAccountId: null,
@@ -299,41 +292,6 @@ export default Vue.extend({
 		},
 	},
 
-	watch: {
-		enableHcaptcha(enabled) {
-			if (enabled && this.loaded && this.enableRecaptcha) {
-				this.$root.dialog({
-					type: 'question', // warning だと間違って cancel するかもしれない
-					showCancelButton: true,
-					title: this.$t('settingGuide'),
-					text: this.$t('avoidMultiCaptchaConfirm'),
-				}).then(({ canceled }) => {
-					if (canceled) {
-						return;
-					}
-
-					this.enableRecaptcha = false;
-				});
-			}
-		},
-		enableRecaptcha(enabled) {
-			if (enabled && this.loaded && this.enableHcaptcha) {
-				this.$root.dialog({
-					type: 'question', // warning だと間違って cancel するかもしれない
-					showCancelButton: true,
-					title: this.$t('settingGuide'),
-					text: this.$t('avoidMultiCaptchaConfirm'),
-				}).then(({ canceled }) => {
-					if (canceled) {
-						return;
-					}
-
-					this.enableHcaptcha = false;
-				});
-			}
-		}
-	},
-
 	created() {
 		this.name = this.meta.name;
 		this.description = this.meta.description;
@@ -388,43 +346,46 @@ export default Vue.extend({
 				this.proxyAccount = proxyAccount;
 			});
 		}
-
-		this.loaded = true;
 	},
 
-	mounted() {
-		const renderRecaptchaPreview = () => {
-			if (!(window as any).grecaptcha) return;
-			if (!this.$refs.recaptcha) return;
-			if (!this.enableRecaptcha) return;
-			if (!this.recaptchaSiteKey) return;
-			(window as any).grecaptcha.render(this.$refs.recaptcha, {
-				sitekey: this.recaptchaSiteKey
-			});
-		};
-		let recaptchaLoaded: boolean = false;
-		const requestRenderRecaptchaPreview = () => {
-			if (window.onRecaptchaLoad) { // loading
-				return;
-			}
+	methods: {
+		guide(key: 'enableHcaptcha' | 'enableRecaptcha') {
+			({
+				enableHcaptcha() {
+					if (this.enableHcaptcha && this.enableRecaptcha) {
+						this.$root.dialog({
+							type: 'question', // warning だと間違って cancel するかもしれない
+							showCancelButton: true,
+							title: this.$t('settingGuide'),
+							text: this.$t('avoidMultiCaptchaConfirm'),
+						}).then(({ canceled }) => {
+							if (canceled) {
+								return;
+							}
 
-			if (recaptchaLoaded) { // loaded
-				renderRecaptchaPreview();
-			} else { // init
-				window.onRecaptchaLoad = () => {
-					recaptchaLoaded = delete window.onRecaptchaLoad;
-					renderRecaptchaPreview();
-				};
-				const script = document.createElement('script');
-				script.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad');
-				document.head.appendChild(script);
-			}
-		};
-		this.$watch('enableRecaptcha', requestRenderRecaptchaPreview);
-		this.$watch('recaptchaSiteKey', requestRenderRecaptchaPreview);
-	},
+							this.enableRecaptcha = false;
+						});
+					}
+				},
+				enableRecaptcha() {
+					if (this.enableRecaptcha && this.enableHcaptcha) {
+						this.$root.dialog({
+							type: 'question', // warning だと間違って cancel するかもしれない
+							showCancelButton: true,
+							title: this.$t('settingGuide'),
+							text: this.$t('avoidMultiCaptchaConfirm'),
+						}).then(({ canceled }) => {
+							if (canceled) {
+								return;
+							}
+
+							this.enableHcaptcha = false;
+						});
+					}
+				},
+			})[key]();
+		},
 
-	methods: {
 		invite() {
 			this.$root.api('admin/invite').then(x => {
 				this.$root.dialog({
-- 
cgit v1.2.3-freya


From ca6a70e5557ed8c99470133cde3755de5a2318fd Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Wed, 29 Apr 2020 09:54:21 +0900
Subject: Update signup.vue

---
 src/client/components/signup.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client/components')

diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 7e8bac7760..6452afc886 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -105,6 +105,7 @@ export default Vue.extend({
 			return this.submitting ||
 				this.meta.tosUrl && !this.ToSAgreement ||
 				this.meta.enableHcaptcha && !this.hCaptchaResponse ||
+				this.meta.enableRecaptcha && !this.reCaptchaResponse ||
 				this.passwordRetypeState == 'not-match';
 		},
 
-- 
cgit v1.2.3-freya