tweak ui

packages/client/src/pages/admin/security.vue

@@ -2,12 +2,15 @@
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
 		<div class="_formRoot">
-			<FormLink to="/admin/bot-protection" class="_formBlock">
-				<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}
+			<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>
-			</FormLink>
+
+				<XBotProtection/>
+			</FormFolder>
 		</div>
 	</FormSuspense>
 </MkSpacer>
@@ -15,22 +18,24 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormLink from '@/components/form/link.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 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,
 		FormInfo,
 		FormSection,
 		FormSuspense,
+		XBotProtection,
 	},
 
 	emits: ['info'],