diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
new file mode 100644
index 0000000000..fe12202014
--- /dev/null
+++ b/packages/client/src/components/form/folder.vue
@@ -0,0 +1,101 @@
+<template>
+<div class="dwzlatin" :class="{ opened }">
+ <div class="header _button" @click="toggle">
+ <span class="icon"><slot name="icon"></slot></span>
+ <span class="text"><slot name="label"></slot></span>
+ <span class="right">
+ <span class="text"><slot name="suffix"></slot></span>
+ <i v-if="opened" class="fas fa-angle-up icon"></i>
+ <i v-else class="fas fa-angle-down icon"></i>
+ </span>
+ </div>
+ <keep-alive>
+ <div v-if="openedAtLeastOnce" v-show="opened" class="body">
+ <MkSpacer :margin-min="14" :margin-max="22">
+ <slot></slot>
+ </MkSpacer>
+ </div>
+ </keep-alive>
+</div>
+</template>
+
+<script lang="ts" setup>
+let opened = $ref(false);
+let openedAtLeastOnce = $ref(false);
+
+const toggle = () => {
+ opened = !opened;
+ if (opened) {
+ openedAtLeastOnce = true;
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+.dwzlatin {
+ display: block;
+
+ > .header {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 14px 12px 14px;
+ background: var(--buttonBg);
+ border-radius: 6px;
+
+ &:hover {
+ text-decoration: none;
+ background: var(--buttonHoverBg);
+ }
+
+ &.active {
+ color: var(--accent);
+ background: var(--buttonHoverBg);
+ }
+
+ > .icon {
+ margin-right: 0.75em;
+ flex-shrink: 0;
+ text-align: center;
+ opacity: 0.8;
+
+ &:empty {
+ display: none;
+
+ & + .text {
+ padding-left: 4px;
+ }
+ }
+ }
+
+ > .text {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 12px;
+ }
+
+ > .right {
+ margin-left: auto;
+ opacity: 0.7;
+ white-space: nowrap;
+
+ > .text:not(:empty) {
+ margin-right: 0.75em;
+ }
+ }
+ }
+
+ > .body {
+ background: var(--panel);
+ border-radius: 0 0 6px 6px;
+ }
+
+ &.opened {
+ > .header {
+ border-radius: 6px 6px 0 0;
+ }
+ }
+}
+</style>
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 5a97083841..81b09fb4d9 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -1,70 +1,55 @@
<template>
-<FormBase>
+<div>
<FormSuspense :p="init">
- <FormRadios v-model="provider">
- <template #desc><i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}</template>
- <option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option>
- <option value="hcaptcha">hCaptcha</option>
- <option value="recaptcha">reCAPTCHA</option>
- </FormRadios>
+ <div class="_formRoot">
+ <FormRadios v-model="provider" class="_formBlock">
+ <option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option>
+ <option value="hcaptcha">hCaptcha</option>
+ <option value="recaptcha">reCAPTCHA</option>
+ </FormRadios>
- <template v-if="provider === 'hcaptcha'">
- <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
- <div class="_debobigegoLabel">hCaptcha</div>
- <div class="main">
- <FormInput v-model="hcaptchaSiteKey">
- <template #prefix><i class="fas fa-key"></i></template>
- <span>{{ $ts.hcaptchaSiteKey }}</span>
- </FormInput>
- <FormInput v-model="hcaptchaSecretKey">
- <template #prefix><i class="fas fa-key"></i></template>
- <span>{{ $ts.hcaptchaSecretKey }}</span>
- </FormInput>
- </div>
- </div>
- <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
- <div class="_debobigegoLabel">{{ $ts.preview }}</div>
- <div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
+ <template v-if="provider === 'hcaptcha'">
+ <FormInput v-model="hcaptchaSiteKey" class="_formBlock">
+ <template #prefix><i class="fas fa-key"></i></template>
+ <template #label>{{ $ts.hcaptchaSiteKey }}</template>
+ </FormInput>
+ <FormInput v-model="hcaptchaSecretKey" class="_formBlock">
+ <template #prefix><i class="fas fa-key"></i></template>
+ <template #label>{{ $ts.hcaptchaSecretKey }}</template>
+ </FormInput>
+ <FormSlot class="_formBlock">
+ <template #label>{{ $ts.preview }}</template>
<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
- </div>
- </div>
- </template>
- <template v-else-if="provider === 'recaptcha'">
- <div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
- <div class="_debobigegoLabel">reCAPTCHA</div>
- <div class="main">
- <FormInput v-model="recaptchaSiteKey">
- <template #prefix><i class="fas fa-key"></i></template>
- <span>{{ $ts.recaptchaSiteKey }}</span>
- </FormInput>
- <FormInput v-model="recaptchaSecretKey">
- <template #prefix><i class="fas fa-key"></i></template>
- <span>{{ $ts.recaptchaSecretKey }}</span>
- </FormInput>
- </div>
- </div>
- <div v-if="recaptchaSiteKey" v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
- <div class="_debobigegoLabel">{{ $ts.preview }}</div>
- <div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
+ </FormSlot>
+ </template>
+ <template v-else-if="provider === 'recaptcha'">
+ <FormInput v-model="recaptchaSiteKey" class="_formBlock">
+ <template #prefix><i class="fas fa-key"></i></template>
+ <template #label>{{ $ts.recaptchaSiteKey }}</template>
+ </FormInput>
+ <FormInput v-model="recaptchaSecretKey" class="_formBlock">
+ <template #prefix><i class="fas fa-key"></i></template>
+ <template #label>{{ $ts.recaptchaSecretKey }}</template>
+ </FormInput>
+ <FormSlot v-if="recaptchaSiteKey" class="_formBlock">
+ <template #label>{{ $ts.preview }}</template>
<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
- </div>
- </div>
- </template>
+ </FormSlot>
+ </template>
- <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ </div>
</FormSuspense>
-</FormBase>
+</div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
-import FormRadios from '@/components/debobigego/radios.vue';
-import FormInput from '@/components/debobigego/input.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 FormRadios from '@/components/form/radios.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSlot from '@/components/form/slot.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance';
@@ -73,11 +58,9 @@ export default defineComponent({
components: {
FormRadios,
FormInput,
- FormBase,
- FormGroup,
FormButton,
- FormInfo,
FormSuspense,
+ FormSlot,
MkCaptcha: defineAsyncComponent(() => import('@/components/captcha.vue')),
},
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 935b785b08..a628ce87ae 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -10,7 +10,7 @@
</div>
<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
- <MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+ <MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div>
@@ -228,13 +228,9 @@ export default defineComponent({
case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue'));
case 'object-storage': return defineAsyncComponent(() => import('./object-storage.vue'));
case 'security': return defineAsyncComponent(() => import('./security.vue'));
- case 'bot-protection': return defineAsyncComponent(() => import('./bot-protection.vue'));
case 'service-worker': return defineAsyncComponent(() => import('./service-worker.vue'));
case 'relays': return defineAsyncComponent(() => import('./relays.vue'));
case 'integrations': return defineAsyncComponent(() => import('./integrations.vue'));
- case 'integrations/twitter': return defineAsyncComponent(() => import('./integrations-twitter.vue'));
- case 'integrations/github': return defineAsyncComponent(() => import('./integrations-github.vue'));
- case 'integrations/discord': return defineAsyncComponent(() => import('./integrations-discord.vue'));
case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue'));
case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
case 'other-settings': return defineAsyncComponent(() => import('./other-settings.vue'));
diff --git a/packages/client/src/pages/admin/integrations-discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
similarity index 94%
rename from packages/client/src/pages/admin/integrations-discord.vue
rename to packages/client/src/pages/admin/integrations.discord.vue
index 9367ef04f1..8303afa3b0 100644
--- a/packages/client/src/pages/admin/integrations-discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -1,6 +1,6 @@
<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
- <FormSuspense :p="init">
+<FormSuspense :p="init">
+ <div class="_formRoot">
<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
<template #label>{{ $ts.enable }}</template>
</FormSwitch>
@@ -20,8 +20,8 @@
</template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
- </FormSuspense>
-</MkSpacer>
+ </div>
+</FormSuspense>
</template>
<script lang="ts">
diff --git a/packages/client/src/pages/admin/integrations-github.vue b/packages/client/src/pages/admin/integrations.github.vue
similarity index 94%
rename from packages/client/src/pages/admin/integrations-github.vue
rename to packages/client/src/pages/admin/integrations.github.vue
index 7c257b6ec8..c0316c317a 100644
--- a/packages/client/src/pages/admin/integrations-github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -1,6 +1,6 @@
<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
- <FormSuspense :p="init">
+<FormSuspense :p="init">
+ <div class="_formRoot">
<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
<template #label>{{ $ts.enable }}</template>
</FormSwitch>
@@ -20,8 +20,8 @@
</template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
- </FormSuspense>
-</MkSpacer>
+ </div>
+</FormSuspense>
</template>
<script lang="ts">
diff --git a/packages/client/src/pages/admin/integrations-twitter.vue b/packages/client/src/pages/admin/integrations.twitter.vue
similarity index 94%
rename from packages/client/src/pages/admin/integrations-twitter.vue
rename to packages/client/src/pages/admin/integrations.twitter.vue
index 4709103ee6..5feabcc39d 100644
--- a/packages/client/src/pages/admin/integrations-twitter.vue
+++ b/packages/client/src/pages/admin/integrations.twitter.vue
@@ -1,6 +1,6 @@
<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
- <FormSuspense :p="init">
+<FormSuspense :p="init">
+ <div class="_formRoot">
<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
<template #label>{{ $ts.enable }}</template>
</FormSwitch>
@@ -20,8 +20,8 @@
</template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
- </FormSuspense>
-</MkSpacer>
+ </div>
+</FormSuspense>
</template>
<script lang="ts">
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index 6a6432d2e1..455fb6f4d6 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,36 +1,48 @@
<template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init">
- <FormLink to="/admin/integrations/twitter" class="_formBlock">
- <i class="fab fa-twitter"></i> Twitter
+ <FormFolder class="_formBlock">
+ <template #icon><i class="fab fa-twitter"></i></template>
+ <template #label>Twitter</template>
<template #suffix>{{ enableTwitterIntegration ? $ts.enabled : $ts.disabled }}</template>
- </FormLink>
- <FormLink to="/admin/integrations/github" class="_formBlock">
- <i class="fab fa-github"></i> GitHub
+ <XTwitter/>
+ </FormFolder>
+ <FormFolder to="/admin/integrations/github" class="_formBlock">
+ <template #icon><i class="fab fa-github"></i></template>
+ <template #label>GitHub</template>
<template #suffix>{{ enableGithubIntegration ? $ts.enabled : $ts.disabled }}</template>
- </FormLink>
- <FormLink to="/admin/integrations/discord" class="_formBlock">
- <i class="fab fa-discord"></i> Discord
+ <XGithub/>
+ </FormFolder>
+ <FormFolder to="/admin/integrations/discord" class="_formBlock">
+ <template #icon><i class="fab fa-discord"></i></template>
+ <template #label>Discord</template>
<template #suffix>{{ enableDiscordIntegration ? $ts.enabled : $ts.disabled }}</template>
- </FormLink>
+ <XDiscord/>
+ </FormFolder>
</FormSuspense>
</MkSpacer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
-import FormLink from '@/components/form/link.vue';
+import FormFolder from '@/components/form/folder.vue';
import FormSecion from '@/components/form/section.vue';
import FormSuspense from '@/components/form/suspense.vue';
+import XTwitter from './integrations.twitter.vue';
+import XGithub from './integrations.github.vue';
+import XDiscord from './integrations.discord.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance';
export default defineComponent({
components: {
- FormLink,
+ FormFolder,
FormSecion,
FormSuspense,
+ XTwitter,
+ XGithub,
+ XDiscord,
},
emits: ['info'],
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index eb214a21c8..eb47a3fa1f 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -1,34 +1,31 @@
<template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init">
- <FormGroup>
- <FormInput v-model="summalyProxy">
+ <FormSection>
+ <FormInput v-model="summalyProxy" class="_formBlock">
<template #prefix><i class="fas fa-link"></i></template>
- Summaly Proxy URL
+ <template #label>Summaly Proxy URL</template>
</FormInput>
- </FormGroup>
- <FormGroup>
- <FormInput v-model="deeplAuthKey">
+ </FormSection>
+ <FormSection>
+ <FormInput v-model="deeplAuthKey" class="_formBlock">
<template #prefix><i class="fas fa-key"></i></template>
- DeepL Auth Key
+ <template #label>DeepL Auth Key</template>
</FormInput>
- <FormSwitch v-model="deeplIsPro">
- Pro account
+ <FormSwitch v-model="deeplIsPro" class="_formBlock">
+ <template #label>Pro account</template>
</FormSwitch>
- </FormGroup>
- <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ </FormSection>
</FormSuspense>
-</FormBase>
+</MkSpacer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance';
@@ -37,9 +34,7 @@ export default defineComponent({
components: {
FormSwitch,
FormInput,
- FormBase,
- FormGroup,
- FormButton,
+ FormSection,
FormSuspense,
},
@@ -51,6 +46,12 @@ export default defineComponent({
title: this.$ts.other,
icon: 'fas fa-cogs',
bg: 'var(--bg)',
+ actions: [{
+ asFullButton: true,
+ icon: 'fas fa-check',
+ text: this.$ts.save,
+ handler: this.save,
+ }],
},
summalyProxy: '',
deeplAuthKey: '',
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 14ef92a747..9878df9122 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -1,42 +1,32 @@
<template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init">
- <FormGroup>
- <FormKeyValueView>
- <template #key>{{ $ts.proxyAccount }}</template>
- <template #value>{{ proxyAccount ? `@${proxyAccount.username}` : $ts.none }}</template>
- </FormKeyValueView>
- <template #caption>{{ $ts.proxyAccountDescription }}</template>
- </FormGroup>
+ <MkInfo class="_formBlock">{{ $ts.proxyAccountDescription }}</MkInfo>
+ <MkKeyValue class="_formBlock">
+ <template #key>{{ $ts.proxyAccount }}</template>
+ <template #value>{{ proxyAccount ? `@${proxyAccount.username}` : $ts.none }}</template>
+ </MkKeyValue>
- <FormButton primary @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton>
+ <FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton>
</FormSuspense>
-</FormBase>
+</MkSpacer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormTextarea from '@/components/debobigego/textarea.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import MkKeyValue from '@/components/key-value.vue';
+import FormButton from '@/components/ui/button.vue';
+import MkInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance';
export default defineComponent({
components: {
- FormKeyValueView,
- FormInput,
- FormBase,
- FormGroup,
+ MkKeyValue,
FormButton,
- FormTextarea,
- FormInfo,
+ MkInfo,
FormSuspense,
},
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 49f3c63e82..719a3c2651 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,29 +1,25 @@
<template>
-<FormBase>
+<MkSpacer :content-max="800">
<XQueue :connection="connection" domain="inbox">
<template #title>In</template>
</XQueue>
<XQueue :connection="connection" domain="deliver">
<template #title>Out</template>
</XQueue>
- <FormButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</FormButton>
-</FormBase>
+ <MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
+</MkSpacer>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import MkButton from '@/components/ui/button.vue';
import XQueue from './queue.chart.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os';
import { stream } from '@/stream';
import * as symbols from '@/symbols';
export default defineComponent({
components: {
- FormBase,
- FormButton,
MkButton,
XQueue,
},
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 91b10b68cc..d6ca9e0cba 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/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'],
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index bc82b0ca84..e290b095ac 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -1,42 +1,41 @@
<template>
-<FormBase>
+<div class="_formRoot">
<FormGroup>
<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
<FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch>
</FormGroup>
- <FormSwitch v-model="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
+ <FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
- <FormRadios v-model="columnAlign">
- <template #desc>{{ $ts._deck.columnAlign }}</template>
+ <FormRadios v-model="columnAlign" class="_formBlock">
+ <template #label>{{ $ts._deck.columnAlign }}</template>
<option value="left">{{ $ts.left }}</option>
<option value="center">{{ $ts.center }}</option>
</FormRadios>
- <FormRadios v-model="columnHeaderHeight">
- <template #desc>{{ $ts._deck.columnHeaderHeight }}</template>
+ <FormRadios v-model="columnHeaderHeight" class="_formBlock">
+ <template #label>{{ $ts._deck.columnHeaderHeight }}</template>
<option :value="42">{{ $ts.narrow }}</option>
<option :value="45">{{ $ts.medium }}</option>
<option :value="48">{{ $ts.wide }}</option>
</FormRadios>
- <FormInput v-model="columnMargin" type="number">
- <span>{{ $ts._deck.columnMargin }}</span>
+ <FormInput v-model="columnMargin" type="number" class="_formBlock">
+ <template #label>{{ $ts._deck.columnMargin }}</template>
<template #suffix>px</template>
</FormInput>
- <FormLink @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
-</FormBase>
+ <FormLink class="_formBlock" @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
+</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormRadios from '@/components/debobigego/radios.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormLink from '@/components/form/link.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormInput from '@/components/form/input.vue';
+import FormGroup from '@/components/form/group.vue';
import { deckStore } from '@/ui/deck/deck-store';
import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload';
@@ -48,7 +47,6 @@ export default defineComponent({
FormLink,
FormInput,
FormRadios,
- FormBase,
FormGroup,
},