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') }}
+
+
@@ -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 => {