管理画面でreCAPTCHAのプレビューを表示するように

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-site-key: "サイトキー"
-  recaptcha-secret-key: "reCAPTCHA secret key"
+  recaptcha-secret-key: "シークレットキー"
+  recaptcha-preview: "プレビュー"
   hidden-tags: "非表示ハッシュタグ"
   hidden-tags-info: "集計から除外するハッシュタグを改行で区切って記述します。"
   external-service-integration-config: "外部サービス連携"

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 => {