From 70d710c9a9199c4ab017de065ec6e69400afc22a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 16 May 2019 16:08:50 +0900
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=94=BB=E9=9D=A2=E3=81=A7re?=
 =?UTF-8?q?CAPTCHA=E3=81=AE=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                       |  5 ++--
 src/client/app/admin/views/instance.vue | 32 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index bb991459c..f34b01563 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1253,8 +1253,9 @@ admin/views/instance.vue:
   recaptcha-config: "reCAPTCHAの設定"
   recaptcha-info: "reCAPTCHAを有効にする場合、reCAPTCHAトークンを取得する必要があります。https://www.google.com/recaptcha/intro/ にアクセスしてトークンを取得してください。"
   enable-recaptcha: "reCAPTCHAを有効にする"
-  recaptcha-site-key: "reCAPTCHA site key"
-  recaptcha-secret-key: "reCAPTCHA secret key"
+  recaptcha-site-key: "サイトキー"
+  recaptcha-secret-key: "シークレットキー"
+  recaptcha-preview: "プレビュー"
   hidden-tags: "非表示ハッシュタグ"
   hidden-tags-info: "集計から除外するハッシュタグを改行で区切って記述します。"
   external-service-integration-config: "外部サービス連携"
diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue
index 3ac4d6d72..72ae3384b 100644
--- a/src/client/app/admin/views/instance.vue
+++ b/src/client/app/admin/views/instance.vue
@@ -165,6 +165,10 @@
 				</ui-horizon-group>
 			</template>
 		</section>
+		<section v-if="enableRecaptcha && recaptchaSiteKey">
+			<header>{{ $t('recaptcha-preview') }}</header>
+			<div ref="recaptcha" style="margin: 16px 0 0 0;" :key="recaptchaSiteKey"></div>
+		</section>
 		<section>
 			<ui-button @click="updateMeta"><fa :icon="faSave"/> {{ $t('save') }}</ui-button>
 		</section>
@@ -376,6 +380,34 @@ export default Vue.extend({
 		});
 	},
 
+	mounted() {
+		const renderRecaptchaPreview = () => {
+			if (!(window as any).grecaptcha) return;
+			if (!this.$refs.recaptcha) return;
+			if (!this.recaptchaSiteKey) return;
+			(window as any).grecaptcha.render(this.$refs.recaptcha, {
+				sitekey: this.recaptchaSiteKey
+			});
+		};
+
+		window.onRecaotchaLoad = () => {
+			renderRecaptchaPreview();
+		};
+
+		const head = document.getElementsByTagName('head')[0];
+		const script = document.createElement('script');
+		script.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=onRecaotchaLoad');
+		head.appendChild(script);
+
+		this.$watch('enableRecaptcha', () => {
+			renderRecaptchaPreview();
+		});
+
+		this.$watch('recaptchaSiteKey', () => {
+			renderRecaptchaPreview();
+		});
+	},
+
 	methods: {
 		invite() {
 			this.$root.api('admin/invite').then(x => {