1 files changed, 40 insertions, 33 deletions

diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index adfb2e786c..d069891647 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -1,44 +1,58 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormLink to="/admin/bot-protection">
-			<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}
-			<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
-			<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
-			<template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
-		</FormLink>
+		<div class="_formRoot">
+			<FormFolder class="_formBlock">
+				<template #icon><i class="fas fa-shield-alt"></i></template>
+				<template #label>{{ $ts.botProtection }}</template>
+				<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
+				<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
+				<template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
 
-		<FormSwitch v-model="enableRegistration">{{ $ts.enableRegistration }}</FormSwitch>
+				<XBotProtection/>
+			</FormFolder>
 
-		<FormSwitch v-model="emailRequiredForSignup">{{ $ts.emailRequiredForSignup }}</FormSwitch>
+			<FormFolder class="_formBlock">
+				<template #label>Summaly Proxy</template>
 
-		<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+				<div class="_formRoot">
+					<FormInput v-model="summalyProxy" class="_formBlock">
+						<template #prefix><i class="fas fa-link"></i></template>
+						<template #label>Summaly Proxy URL</template>
+					</FormInput>
+
+					<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+				</div>
+			</FormFolder>
+		</div>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormFolder from '@/components/form/folder.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSection from '@/components/form/section.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import XBotProtection from './bot-protection.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 
 export default defineComponent({
 	components: {
-		FormLink,
+		FormFolder,
 		FormSwitch,
-		FormBase,
-		FormGroup,
-		FormButton,
 		FormInfo,
+		FormSection,
 		FormSuspense,
+		FormButton,
+		FormInput,
+		XBotProtection,
 	},
 
 	emits: ['info'],
@@ -50,30 +64,23 @@ export default defineComponent({
 				icon: 'fas fa-lock',
 				bg: 'var(--bg)',
 			},
+			summalyProxy: '',
 			enableHcaptcha: false,
 			enableRecaptcha: false,
-			enableRegistration: false,
-			emailRequiredForSignup: false,
 		}
 	},
 
-	async mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async init() {
 			const meta = await os.api('meta', { detail: true });
+			this.summalyProxy = meta.summalyProxy;
 			this.enableHcaptcha = meta.enableHcaptcha;
 			this.enableRecaptcha = meta.enableRecaptcha;
-			this.enableRegistration = !meta.disableRegistration;
-			this.emailRequiredForSignup = meta.emailRequiredForSignup;
 		},
-	
+
 		save() {
 			os.apiWithDialog('admin/update-meta', {
-				disableRegistration: !this.enableRegistration,
-				emailRequiredForSignup: this.emailRequiredForSignup,
+				summalyProxy: this.summalyProxy,
 			}).then(() => {
 				fetchInstance();
 			});