diff options
Diffstat (limited to 'src/client/pages/instance/settings.vue')
| -rw-r--r-- | src/client/pages/instance/settings.vue | 82 |
1 files changed, 61 insertions, 21 deletions
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue index f7db4aa10b..afd6d4cc6d 100644 --- a/src/client/pages/instance/settings.vue +++ b/src/client/pages/instance/settings.vue @@ -39,9 +39,27 @@ </section> <section class="_card"> + <div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div> + <div class="_content"> + <mk-switch v-model="enableHcaptcha" ref="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"> + <header>{{ $t('preview') }}</header> + <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> + </div> + </section> + + <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" ref="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> @@ -49,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> @@ -210,6 +228,7 @@ export default Vue.extend({ MkTextarea, MkSwitch, MkInfo, + Captcha: () => import('../../components/captcha.vue').then(x => x.default), }, data() { @@ -234,6 +253,9 @@ export default Vue.extend({ enableRegistration: false, enableLocalTimeline: false, enableGlobalTimeline: false, + enableHcaptcha: false, + hcaptchaSiteKey: null, + hcaptchaSecretKey: null, enableRecaptcha: false, recaptchaSiteKey: null, recaptchaSecretKey: null, @@ -282,6 +304,9 @@ export default Vue.extend({ this.enableRegistration = !this.meta.disableRegistration; this.enableLocalTimeline = !this.meta.disableLocalTimeline; this.enableGlobalTimeline = !this.meta.disableGlobalTimeline; + this.enableHcaptcha = this.meta.enableHcaptcha; + this.hcaptchaSiteKey = this.meta.hcaptchaSiteKey; + this.hcaptchaSecretKey = this.meta.hcaptchaSecretKey; this.enableRecaptcha = this.meta.enableRecaptcha; this.recaptchaSiteKey = this.meta.recaptchaSiteKey; this.recaptchaSecretKey = this.meta.recaptchaSecretKey; @@ -324,26 +349,38 @@ 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.$refs.enableHcaptcha.$on('change', () => { + 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; + } + + this.enableRecaptcha = false; + }); + } }); - this.$watch('recaptchaSiteKey', () => { - renderRecaptchaPreview(); + + this.$refs.enableRecaptcha.$on('change', () => { + 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; + }); + } }); }, @@ -391,6 +428,9 @@ export default Vue.extend({ disableRegistration: !this.enableRegistration, disableLocalTimeline: !this.enableLocalTimeline, disableGlobalTimeline: !this.enableGlobalTimeline, + enableHcaptcha: this.enableHcaptcha, + hcaptchaSiteKey: this.hcaptchaSiteKey, + hcaptchaSecretKey: this.hcaptchaSecretKey, enableRecaptcha: this.enableRecaptcha, recaptchaSiteKey: this.recaptchaSiteKey, recaptchaSecretKey: this.recaptchaSecretKey, |