From 06d1f3c92e03c8249421fe16e9aba524f4cccf54 Mon Sep 17 00:00:00 2001
From: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Date: Mon, 21 Aug 2023 10:23:16 +0200
Subject: [PATCH] Create settings-panel vue component and use InputFields
 (#2177)

Co-authored-by: 6543 <6543@obermui.de>
---
 web/components.d.ts                           |  1 +
 .../admin/settings/AdminAgentsTab.vue         | 17 +++---
 .../admin/settings/AdminQueueTab.vue          | 54 ++++++++-----------
 .../admin/settings/AdminSecretsTab.vue        | 34 ++++--------
 .../admin/settings/AdminUsersTab.vue          | 17 +++---
 web/src/components/form/InputField.vue        |  5 +-
 web/src/components/layout/Settings.vue        | 33 ++++++++++++
 .../components/org/settings/OrgSecretsTab.vue | 25 ++++-----
 .../components/repo/settings/ActionsTab.vue   | 10 ++--
 web/src/components/repo/settings/BadgeTab.vue | 13 +++--
 web/src/components/repo/settings/CronTab.vue  | 27 +++-------
 .../components/repo/settings/GeneralTab.vue   | 10 ++--
 .../repo/settings/RegistriesTab.vue           | 31 ++++-------
 .../components/repo/settings/SecretsTab.vue   | 25 ++++-----
 web/src/components/user/UserAPITab.vue        | 53 +++++++-----------
 web/src/components/user/UserGeneralTab.vue    | 16 ++----
 16 files changed, 153 insertions(+), 218 deletions(-)
 create mode 100644 web/src/components/layout/Settings.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index 75639a486..29d32f4c0 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -98,6 +98,7 @@ declare module '@vue/runtime-core' {
     SecretList: typeof import('./src/components/secrets/SecretList.vue')['default']
     SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
     SelectField: typeof import('./src/components/form/SelectField.vue')['default']
+    Settings: typeof import('./src/components/layout/Settings.vue')['default']
     Tab: typeof import('./src/components/layout/scaffold/Tab.vue')['default']
     Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
     TextField: typeof import('./src/components/form/TextField.vue')['default']
diff --git a/web/src/components/admin/settings/AdminAgentsTab.vue b/web/src/components/admin/settings/AdminAgentsTab.vue
index 04881240a..32b5ef3a4 100644
--- a/web/src/components/admin/settings/AdminAgentsTab.vue
+++ b/web/src/components/admin/settings/AdminAgentsTab.vue
@@ -1,19 +1,14 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.agents.agents') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.agents.desc') }}</p>
-      </div>
+  <Settings :title="$t('admin.settings.agents.agents')" :desc="$t('admin.settings.agents.desc')">
+    <template #titleActions>
       <Button
         v-if="selectedAgent"
-        class="ml-auto"
         :text="$t('admin.settings.agents.show')"
         start-icon="back"
         @click="selectedAgent = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
-    </div>
+      <Button v-else :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
+    </template>
 
     <div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
       <ListItem
@@ -122,7 +117,7 @@
         </div>
       </form>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -137,7 +132,7 @@ import ListItem from '~/components/atomic/ListItem.vue';
 import Checkbox from '~/components/form/Checkbox.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
diff --git a/web/src/components/admin/settings/AdminQueueTab.vue b/web/src/components/admin/settings/AdminQueueTab.vue
index e31979869..6d4eaf5e0 100644
--- a/web/src/components/admin/settings/AdminQueueTab.vue
+++ b/web/src/components/admin/settings/AdminQueueTab.vue
@@ -1,35 +1,25 @@
 <template>
-  <Panel>
-    <div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.queue.queue') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.queue.desc') }}</p>
+  <Settings :title="$t('admin.settings.queue.queue')" :desc="$t('admin.settings.queue.desc')">
+    <template #titleActions>
+      <div v-if="queueInfo">
+        <div class="flex items-center gap-2">
+          <Button
+            v-if="queueInfo.paused"
+            :text="$t('admin.settings.queue.resume')"
+            start-icon="play"
+            @click="resumeQueue"
+          />
+          <Button v-else :text="$t('admin.settings.queue.pause')" start-icon="pause" @click="pauseQueue" />
+          <Icon
+            :name="queueInfo.paused ? 'pause' : 'play'"
+            :class="{
+              'text-wp-state-error-100': queueInfo.paused,
+              'text-wp-state-ok-100': !queueInfo.paused,
+            }"
+          />
+        </div>
       </div>
-
-      <div class="ml-auto flex items-center gap-2">
-        <Button
-          v-if="queueInfo.paused"
-          class="ml-auto"
-          :text="$t('admin.settings.queue.resume')"
-          start-icon="play"
-          @click="resumeQueue"
-        />
-        <Button
-          v-else
-          class="ml-auto"
-          :text="$t('admin.settings.queue.pause')"
-          start-icon="pause"
-          @click="pauseQueue"
-        />
-        <Icon
-          :name="queueInfo.paused ? 'pause' : 'play'"
-          :class="{
-            'text-wp-state-error-100': queueInfo.paused,
-            'text-wp-state-ok-100': !queueInfo.paused,
-          }"
-        />
-      </div>
-    </div>
+    </template>
 
     <div class="flex flex-col">
       <AdminQueueStats :stats="queueInfo?.stats" />
@@ -81,7 +71,7 @@
         </ListItem>
       </div>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -92,7 +82,7 @@ import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
 import { QueueInfo } from '~/lib/api/types/queue';
diff --git a/web/src/components/admin/settings/AdminSecretsTab.vue b/web/src/components/admin/settings/AdminSecretsTab.vue
index 8e1eb2c70..212cd0be6 100644
--- a/web/src/components/admin/settings/AdminSecretsTab.vue
+++ b/web/src/components/admin/settings/AdminSecretsTab.vue
@@ -1,29 +1,19 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('admin.settings.secrets.desc') }}
-          <DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" />
-        </p>
-        <Warning :text="$t('admin.settings.secrets.warning')" />
-      </div>
+  <Settings
+    :title="$t('admin.settings.secrets.secrets')"
+    :desc="$t('admin.settings.secrets.desc')"
+    docs-url="docs/usage/secrets"
+    :warning="$t('admin.settings.secrets.warning')"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedSecret"
-        class="ml-auto"
         :text="$t('admin.settings.secrets.show')"
         start-icon="back"
         @click="selectedSecret = undefined"
       />
-      <Button
-        v-else
-        class="ml-auto"
-        :text="$t('admin.settings.secrets.add')"
-        start-icon="plus"
-        @click="showAddSecret"
-      />
-    </div>
+      <Button v-else :text="$t('admin.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
+    </template>
 
     <SecretList
       v-if="!selectedSecret"
@@ -42,7 +32,7 @@
       @save="createSecret"
       @cancel="selectedSecret = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -51,9 +41,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Warning from '~/components/atomic/Warning.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
 import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';
diff --git a/web/src/components/admin/settings/AdminUsersTab.vue b/web/src/components/admin/settings/AdminUsersTab.vue
index 7197d629c..00a03559c 100644
--- a/web/src/components/admin/settings/AdminUsersTab.vue
+++ b/web/src/components/admin/settings/AdminUsersTab.vue
@@ -1,19 +1,14 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.users.users') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.users.desc') }}</p>
-      </div>
+  <Settings :title="$t('admin.settings.users.users')" :desc="$t('admin.settings.users.desc')">
+    <template #titleActions>
       <Button
         v-if="selectedUser"
-        class="ml-auto"
         :text="$t('admin.settings.users.show')"
         start-icon="back"
         @click="selectedUser = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
-    </div>
+      <Button v-else :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
+    </template>
 
     <div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
       <ListItem
@@ -83,7 +78,7 @@
         </div>
       </form>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -97,7 +92,7 @@ import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 913bc99a0..61d852af6 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center text-wp-text-100 font-bold mb-2">
-      <label v-bind="$attrs">{{ label }}</label>
+    <div class="flex items-center mb-2">
+      <label class="text-wp-text-100 font-bold" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
+      <slot v-else-if="$slots['titleActions']" name="titleActions" />
     </div>
     <slot />
     <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
new file mode 100644
index 000000000..9dbc89ff3
--- /dev/null
+++ b/web/src/components/layout/Settings.vue
@@ -0,0 +1,33 @@
+<template>
+  <Panel>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <div class="ml-2">
+        <h1 class="text-xl text-wp-text-100">{{ title }}</h1>
+        <p v-if="desc" class="text-sm text-wp-text-alt-100">
+          {{ desc }}
+          <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
+        </p>
+        <Warning v-if="warning" class="mt-1" :text="warning" />
+      </div>
+
+      <div class="ml-auto">
+        <slot v-if="$slots.titleActions" name="titleActions" />
+      </div>
+    </div>
+
+    <slot />
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import DocsLink from '~/components/atomic/DocsLink.vue';
+import Warning from '~/components/atomic/Warning.vue';
+import Panel from '~/components/layout/Panel.vue';
+
+defineProps<{
+  title: string;
+  desc?: string;
+  docsUrl?: string;
+  warning?: string;
+}>();
+</script>
diff --git a/web/src/components/org/settings/OrgSecretsTab.vue b/web/src/components/org/settings/OrgSecretsTab.vue
index ad175a325..4d3281732 100644
--- a/web/src/components/org/settings/OrgSecretsTab.vue
+++ b/web/src/components/org/settings/OrgSecretsTab.vue
@@ -1,22 +1,18 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('org.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('org.settings.secrets.desc') }}
-          <DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
-        </p>
-      </div>
+  <Settings
+    :title="$t('org.settings.secrets.secrets')"
+    :desc="$t('org.settings.secrets.desc')"
+    docs-url="docs/usage/secrets"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedSecret"
-        class="ml-auto"
         :text="$t('org.settings.secrets.show')"
         start-icon="back"
         @click="selectedSecret = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
-    </div>
+      <Button v-else :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
+    </template>
 
     <SecretList
       v-if="!selectedSecret"
@@ -35,7 +31,7 @@
       @save="createSecret"
       @cancel="selectedSecret = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
 import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/components/repo/settings/ActionsTab.vue
index 1fdd38a5b..ccf72e39f 100644
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@@ -1,9 +1,5 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.actions.actions') }}</h1>
-    </div>
-
+  <Settings :title="$t('repo.settings.actions.actions')">
     <div class="flex flex-wrap items-center">
       <Button
         class="mr-4 my-1"
@@ -42,7 +38,7 @@
         @click="deleteRepo"
       />
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -51,7 +47,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
index ea85ba8ab..1339f88a0 100644
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@@ -1,11 +1,10 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.badge.badge') }}</h1>
-      <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
+  <Settings :title="$t('repo.settings.badge.badge')">
+    <template #titleActions>
+      <a v-if="badgeUrl" :href="badgeUrl" target="_blank">
         <img :src="badgeUrl" />
       </a>
-    </div>
+    </template>
 
     <InputField :label="$t('repo.settings.badge.type')">
       <SelectField
@@ -36,7 +35,7 @@
         <pre class="code-box">{{ badgeContent }}</pre>
       </div>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -46,7 +45,7 @@ import { computed, inject, onMounted, Ref, ref, watch } from 'vue';
 import { SelectOption } from '~/components/form/form.types';
 import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useConfig from '~/compositions/useConfig';
 import { usePaginate } from '~/compositions/usePaginate';
diff --git a/web/src/components/repo/settings/CronTab.vue b/web/src/components/repo/settings/CronTab.vue
index 8104cddc0..ed69aa309 100644
--- a/web/src/components/repo/settings/CronTab.vue
+++ b/web/src/components/repo/settings/CronTab.vue
@@ -1,28 +1,14 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.crons.crons') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('repo.settings.crons.desc') }}
-          <DocsLink :topic="$t('repo.settings.crons.crons')" url="docs/usage/crons" />
-        </p>
-      </div>
+  <Settings :title="$t('repo.settings.crons.crons')" :desc="$t('repo.settings.crons.desc')" docs-url="docs/usage/crons">
+    <template #titleActions>
       <Button
         v-if="selectedCron"
-        class="ml-auto"
         start-icon="back"
         :text="$t('repo.settings.crons.show')"
         @click="selectedCron = undefined"
       />
-      <Button
-        v-else
-        class="ml-auto"
-        start-icon="plus"
-        :text="$t('repo.settings.crons.add')"
-        @click="selectedCron = {}"
-      />
-    </div>
+      <Button v-else start-icon="plus" :text="$t('repo.settings.crons.add')" @click="selectedCron = {}" />
+    </template>
 
     <div v-if="!selectedCron" class="space-y-4 text-wp-text-100">
       <ListItem
@@ -89,7 +75,7 @@
         </div>
       </form>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -97,12 +83,11 @@ import { computed, inject, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import { useDate } from '~/compositions/useDate';
diff --git a/web/src/components/repo/settings/GeneralTab.vue b/web/src/components/repo/settings/GeneralTab.vue
index f715ed73e..3f12a8cec 100644
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/web/src/components/repo/settings/GeneralTab.vue
@@ -1,9 +1,5 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.general.general') }}</h1>
-    </div>
-
+  <Settings :title="$t('repo.settings.general.general')">
     <form v-if="repoSettings" class="flex flex-col" @submit.prevent="saveRepoSettings">
       <InputField
         docs-url="docs/usage/project-settings#pipeline-path"
@@ -85,7 +81,7 @@
         :text="$t('repo.settings.general.save')"
       />
     </form>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -100,7 +96,7 @@ import InputField from '~/components/form/InputField.vue';
 import NumberField from '~/components/form/NumberField.vue';
 import RadioField from '~/components/form/RadioField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useAuthentication from '~/compositions/useAuthentication';
diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/components/repo/settings/RegistriesTab.vue
index 06c9194e5..3331620fd 100644
--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.vue
@@ -1,28 +1,18 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.registries.creds') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('repo.settings.registries.desc') }}
-          <DocsLink :topic="$t('repo.settings.registries.creds')" url="docs/usage/registries" />
-        </p>
-      </div>
+  <Settings
+    :title="$t('repo.settings.registries.creds')"
+    :desc="$t('repo.settings.registries.desc')"
+    docs-url="docs/usage/registries"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedRegistry"
-        class="ml-auto"
         start-icon="back"
         :text="$t('repo.settings.registries.show')"
         @click="selectedRegistry = undefined"
       />
-      <Button
-        v-else
-        class="ml-auto"
-        start-icon="plus"
-        :text="$t('repo.settings.registries.add')"
-        @click="selectedRegistry = {}"
-      />
-    </div>
+      <Button v-else start-icon="plus" :text="$t('repo.settings.registries.add')" @click="selectedRegistry = {}" />
+    </template>
 
     <div v-if="!selectedRegistry" class="space-y-4 text-wp-text-100">
       <ListItem
@@ -80,7 +70,7 @@
         </div>
       </form>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -88,12 +78,11 @@ import { computed, inject, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/components/repo/settings/SecretsTab.vue
index 814e8cd83..277d0b0c2 100644
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.vue
@@ -1,22 +1,18 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('repo.settings.secrets.desc') }}
-          <DocsLink :topic="$t('repo.settings.secrets.secrets')" url="docs/usage/secrets" />
-        </p>
-      </div>
+  <Settings
+    :title="$t('repo.settings.secrets.secrets')"
+    :desc="$t('repo.settings.secrets.desc')"
+    docs-url="docs/usage/secrets"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedSecret"
-        class="ml-auto"
         :text="$t('repo.settings.secrets.show')"
         start-icon="back"
         @click="selectedSecret = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
-    </div>
+      <Button v-else :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
+    </template>
 
     <SecretList
       v-if="!selectedSecret"
@@ -35,7 +31,7 @@
       @save="createSecret"
       @cancel="selectedSecret = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
 import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';
diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
index fdf4250ab..2402612df 100644
--- a/web/src/components/user/UserAPITab.vue
+++ b/web/src/components/user/UserAPITab.vue
@@ -1,34 +1,18 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('user.settings.api.api') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('user.settings.api.desc') }}</p>
-      </div>
-    </div>
-
-    <div class="mt-2 mb-4">
-      <div class="flex items-center mb-2">
-        <div class="flex flex-row items-center text-wp-text-100 font-bold">
-          <label>{{ $t('user.settings.api.token') }}</label>
-        </div>
+  <Settings :title="$t('user.settings.api.api')" :desc="$t('user.settings.api.desc')">
+    <InputField :label="$t('user.settings.api.token')">
+      <template #titleActions>
         <Button class="ml-auto" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
-      </div>
+      </template>
       <pre class="code-box">{{ token }}</pre>
-    </div>
+    </InputField>
 
-    <div class="mt-2 mb-4">
-      <div class="flex items-center text-wp-text-100 font-bold mb-2">
-        <label>{{ $t('user.settings.api.shell_setup') }}</label>
-      </div>
+    <InputField :label="$t('user.settings.api.shell_setup')">
       <pre class="code-box">{{ usageWithShell }}</pre>
-    </div>
+    </InputField>
 
-    <div class="mt-2 mb-4">
-      <div class="flex items-center mb-2">
-        <div class="flex items-center text-wp-text-100 font-bold">
-          <label>{{ $t('user.settings.api.api_usage') }}</label>
-        </div>
+    <InputField :label="$t('user.settings.api.api_usage')">
+      <template #titleActions>
         <a
           v-if="enableSwagger"
           :href="`${address}/swagger/index.html`"
@@ -36,22 +20,19 @@
           class="ml-4 text-wp-link-100 hover:text-wp-link-200"
           >{{ $t('user.settings.api.swagger_ui') }}</a
         >
-      </div>
+      </template>
       <pre class="code-box">{{ usageWithCurl }}</pre>
-    </div>
+    </InputField>
 
-    <div class="mt-2 mb-4">
-      <div class="flex items-center mb-2">
-        <div class="flex items-center text-wp-text-100 font-bold">
-          <label>{{ $t('user.settings.api.cli_usage') }}</label>
-        </div>
+    <InputField :label="$t('user.settings.api.cli_usage')">
+      <template #titleActions>
         <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
           $t('user.settings.api.dl_cli')
         }}</a>
-      </div>
+      </template>
       <pre class="code-box">{{ usageWithCli }}</pre>
-    </div>
-  </Panel>
+    </InputField>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -59,6 +40,8 @@ import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
+import InputField from '~/components/form/InputField.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useConfig from '~/compositions/useConfig';
 
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/components/user/UserGeneralTab.vue
index 0ac44d949..b6df9822a 100644
--- a/web/src/components/user/UserGeneralTab.vue
+++ b/web/src/components/user/UserGeneralTab.vue
@@ -1,16 +1,9 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <h1 class="ml-2 text-xl text-wp-text-100">{{ $t('user.settings.general.general') }}</h1>
-    </div>
-
-    <div class="flex flex-col mt-2 mb-4">
-      <div class="flex items-center text-wp-text-100 font-bold mb-2">
-        <label>{{ $t('user.settings.general.language') }}</label>
-      </div>
+  <Settings :title="$t('user.settings.general.general')">
+    <InputField :label="$t('user.settings.general.language')">
       <SelectField v-model="selectedLocale" :options="localeOptions" />
-    </div>
-  </Panel>
+    </InputField>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -22,6 +15,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import SelectField from '~/components/form/SelectField.vue';
+import Settings from '~/components/layout/Settings.vue';
 import { setI18nLanguage } from '~/compositions/useI18n';
 
 const { locale } = useI18n();