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 @@ +
+
{{ $t('recaptcha-preview') }}
+
+
{{ $t('save') }}
@@ -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 => {