From d680ea11ff702de7a8e0e5e242e24c5aa517742f Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Wed, 2 Aug 2023 09:44:58 +0200
Subject: [PATCH 1/9] Improve user settings

---
 web/components.d.ts                         |   2 +
 web/src/assets/locales/en.json              |  24 ++--
 web/src/components/layout/header/Navbar.vue |   2 +-
 web/src/components/user/UserAPITab.vue      |  80 ++++++++++++
 web/src/components/user/UserSettingsTab.vue |  45 +++++++
 web/src/router.ts                           |  18 +--
 web/src/views/User.vue                      | 129 +++++---------------
 web/src/views/admin/Admin.vue               |  24 ----
 web/src/views/org/OrgRepos.vue              |   2 +-
 web/src/views/org/OrgWrapper.vue            |  11 +-
 10 files changed, 186 insertions(+), 151 deletions(-)
 create mode 100644 web/src/components/user/UserAPITab.vue
 create mode 100644 web/src/components/user/UserSettingsTab.vue
 delete mode 100644 web/src/views/admin/Admin.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index 0aa7ba65da..b495c7845f 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -101,6 +101,8 @@ declare module '@vue/runtime-core' {
     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']
+    UserAPITab: typeof import('./src/components/user/UserAPITab.vue')['default']
+    UserSettingsTab: typeof import('./src/components/user/UserSettingsTab.vue')['default']
     Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }
 }
diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 2a8f61ff7a..339b7f3771 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -425,16 +425,24 @@
         }
     },
     "user": {
-        "settings": "User Settings",
+        "user_settings": "User Settings",
+        "settings": {
+            "settings": "Settings",
+            "language": "Language"
+        },
+        "api": {
+            "api": "API",
+            "token": "Personal Access Token",
+            "shell_setup": "Shell setup",
+            "api_usage": "Example API Usage",
+            "cli_usage": "Example CLI Usage",
+            "dl_cli": "Download CLI",
+            "shell_setup_before": "do shell setup steps before",
+            "reset_token": "Reset token",
+            "swagger_ui": "Sagger UI",
+        },
         "oauth_error": "Error while authenticating against OAuth provider",
         "internal_error": "Some internal error occurred",
         "access_denied": "You are not allowed to login",
-        "token": "Personal Access Token",
-        "shell_setup": "Shell setup",
-        "api_usage": "Example API Usage",
-        "cli_usage": "Example CLI Usage",
-        "dl_cli": "Download CLI",
-        "shell_setup_before": "do shell setup steps before",
-        "reset_token": "Reset token"
     }
 }
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 08eb2e8ffe..f7e1d6438b 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -42,7 +42,7 @@
       <!-- Active Pipelines Indicator -->
       <ActivePipelines v-if="user" class="navbar-icon" />
       <!-- User Avatar -->
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings')" class="navbar-icon !p-1.5">
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.user_settings')" class="navbar-icon !p-1.5">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <!-- Login Button -->
diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
new file mode 100644
index 0000000000..8baf5e29a6
--- /dev/null
+++ b/web/src/components/user/UserAPITab.vue
@@ -0,0 +1,80 @@
+<template>
+  <Panel>
+    <div>
+      <div class="flex items-center mb-2">
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.api.token') }}</h2>
+        <Button class="ml-4" :text="$t('user.api.reset_token')" @click="resetToken" />
+      </div>
+      <pre class="code-box">{{ token }}</pre>
+    </div>
+
+    <div>
+      <h2 class="text-lg text-wp-text-100">{{ $t('user.api.shell_setup') }}</h2>
+      <pre class="code-box">{{ usageWithShell }}</pre>
+    </div>
+
+    <div>
+      <div class="flex items-center">
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.api.api_usage') }}</h2>
+        <a
+          :href="`${address}/swagger/index.html`"
+          target="_blank"
+          class="ml-4 text-wp-link-100 hover:text-wp-link-200"
+          >{{ $t('user.api.swagger_ui') }}</a
+        >
+      </div>
+      <pre class="code-box">{{ usageWithCurl }}</pre>
+    </div>
+
+    <div>
+      <div class="flex items-center">
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.api.cli_usage') }}</h2>
+        <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
+          $t('user.api.dl_cli')
+        }}</a>
+      </div>
+      <pre class="code-box">{{ usageWithCli }}</pre>
+    </div>
+  </Panel>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { setI18nLanguage } from '~/compositions/useI18n';
+
+const { t, locale } = useI18n();
+
+const apiClient = useApiClient();
+const token = ref<string | undefined>();
+
+onMounted(async () => {
+  token.value = await apiClient.getToken();
+});
+
+// eslint-disable-next-line no-restricted-globals
+const address = `${location.protocol}//${location.host}`; // port is included in location.host
+
+const usageWithShell = computed(() => {
+  let usage = `export WOODPECKER_SERVER="${address}"\n`;
+  usage += `export WOODPECKER_TOKEN="${token.value}"\n`;
+  return usage;
+});
+
+const usageWithCurl = `# ${t(
+  'user.api.shell_setup_before',
+)}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;
+
+const usageWithCli = `# ${t('user.api.shell_setup_before')}\nwoodpecker info`;
+
+const cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';
+
+const resetToken = async () => {
+  token.value = await apiClient.resetToken();
+  window.location.href = `${address}/logout`;
+};
+</script>
diff --git a/web/src/components/user/UserSettingsTab.vue b/web/src/components/user/UserSettingsTab.vue
new file mode 100644
index 0000000000..1c4d68160b
--- /dev/null
+++ b/web/src/components/user/UserSettingsTab.vue
@@ -0,0 +1,45 @@
+<template>
+  <Panel>
+    <div class="flex flex-col">
+      <div class="flex items-center text-wp-text-100 font-bold mb-2">
+        <label v-bind="$attrs">{{ $t('user.settings.language') }}</label>
+      </div>
+      <SelectField v-model="selectedLocale" :options="localeOptions" />
+    </div>
+  </Panel>
+</template>
+
+<script lang="ts" setup>
+import { useLocalStorage } from '@vueuse/core';
+import dayjs from 'dayjs';
+import TimeAgo from 'javascript-time-ago';
+import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import SelectField from '~/components/form/SelectField.vue';
+import InputField from '~/components/form/InputField.vue';
+import { setI18nLanguage } from '~/compositions/useI18n';
+
+const { t, locale } = useI18n();
+
+const localeOptions = computed(() =>
+  SUPPORTED_LOCALES.map((supportedLocale) => ({
+    value: supportedLocale,
+    text: new Intl.DisplayNames(supportedLocale, { type: 'language' }).of(supportedLocale) || supportedLocale,
+  })),
+);
+
+const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
+const selectedLocale = computed<string>({
+  async set(_selectedLocale) {
+    await setI18nLanguage(_selectedLocale);
+    storedLocale.value = _selectedLocale;
+    dayjs.locale(_selectedLocale);
+    TimeAgo.setDefaultLocale(_selectedLocale);
+  },
+  get() {
+    return storedLocale.value;
+  },
+});
+</script>
diff --git a/web/src/router.ts b/web/src/router.ts
index ea33cc561f..0abee7e0a0 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -131,22 +131,10 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/admin',
-    component: (): Component => import('~/views/RouterView.vue'),
+    name: 'admin-settings',
+    component: (): Component => import('~/views/admin/AdminSettings.vue'),
+    props: true,
     meta: { authentication: 'required' },
-    children: [
-      {
-        path: '',
-        name: 'admin',
-        component: (): Component => import('~/views/admin/Admin.vue'),
-        props: true,
-      },
-      {
-        path: 'settings',
-        name: 'admin-settings',
-        component: (): Component => import('~/views/admin/AdminSettings.vue'),
-        props: true,
-      },
-    ],
   },
 
   {
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 8658e626c2..713fa5bf62 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -1,111 +1,40 @@
 <template>
-  <Scaffold>
-    <template #title>{{ $t('user.settings') }}</template>
+  <Scaffold enable-tabs>
+    <template #title>{{ $t('user.user_settings') }}</template>
     <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
-    <div class="space-y-4 flex flex-col">
-      <SelectField v-model="selectedLocale" :options="localeOptions" />
-
-      <div>
-        <div class="flex items-center mb-2">
-          <h2 class="text-lg text-wp-text-100">{{ $t('user.token') }}</h2>
-          <Button class="ml-4" :text="$t('user.reset_token')" @click="resetToken" />
-        </div>
-        <pre class="code-box">{{ token }}</pre>
-      </div>
-
-      <div>
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.shell_setup') }}</h2>
-        <pre class="code-box">{{ usageWithShell }}</pre>
-      </div>
-
-      <div>
-        <div class="flex items-center">
-          <h2 class="text-lg text-wp-text-100">{{ $t('user.api_usage') }}</h2>
-          <a
-            :href="`${address}/swagger/index.html`"
-            target="_blank"
-            class="ml-4 text-wp-link-100 hover:text-wp-link-200"
-            >Swagger UI</a
-          >
-        </div>
-        <pre class="code-box">{{ usageWithCurl }}</pre>
-      </div>
-
-      <div>
-        <div class="flex items-center">
-          <h2 class="text-lg text-wp-text-100">{{ $t('user.cli_usage') }}</h2>
-          <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
-            $t('user.dl_cli')
-          }}</a>
-        </div>
-        <pre class="code-box">{{ usageWithCli }}</pre>
-      </div>
-    </div>
+    <Tab id="settings" :title="$t('user.settings.settings')">
+      <UserSettingsTab />
+    </Tab>
+    <Tab id="api" :title="$t('user.api.api')">
+      <UserAPITab />
+    </Tab>
   </Scaffold>
 </template>
 
 <script lang="ts" setup>
-import { useLocalStorage } from '@vueuse/core';
-import dayjs from 'dayjs';
-import TimeAgo from 'javascript-time-ago';
-import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
-import { computed, onMounted, ref } from 'vue';
+/*import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-
-import Button from '~/components/atomic/Button.vue';
-import SelectField from '~/components/form/SelectField.vue';
+import { useRouter } from 'vue-router';
+*/
+import UserSettingsTab from '~/components/user/UserSettingsTab.vue';
+import UserAPITab from '~/components/user/UserAPITab.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
-import useApiClient from '~/compositions/useApiClient';
-import { setI18nLanguage } from '~/compositions/useI18n';
-
-const { t, locale } = useI18n();
-
-const apiClient = useApiClient();
-const token = ref<string | undefined>();
+import Tab from '~/components/layout/scaffold/Tab.vue';
+/*
+const notifications = useNotifications();
+const router = useRouter();
+const i18n = useI18n();
+const { user } = useAuthentication();
 
 onMounted(async () => {
-  token.value = await apiClient.getToken();
-});
-
-// eslint-disable-next-line no-restricted-globals
-const address = `${location.protocol}//${location.host}`; // port is included in location.host
-
-const usageWithShell = computed(() => {
-  let usage = `export WOODPECKER_SERVER="${address}"\n`;
-  usage += `export WOODPECKER_TOKEN="${token.value}"\n`;
-  return usage;
-});
-
-const usageWithCurl = `# ${t(
-  'user.shell_setup_before',
-)}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;
-
-const usageWithCli = `# ${t('user.shell_setup_before')}\nwoodpecker info`;
-
-const cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';
-
-const localeOptions = computed(() =>
-  SUPPORTED_LOCALES.map((supportedLocale) => ({
-    value: supportedLocale,
-    text: new Intl.DisplayNames(supportedLocale, { type: 'language' }).of(supportedLocale) || supportedLocale,
-  })),
-);
-
-const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
-const selectedLocale = computed<string>({
-  async set(_selectedLocale) {
-    await setI18nLanguage(_selectedLocale);
-    storedLocale.value = _selectedLocale;
-    dayjs.locale(_selectedLocale);
-    TimeAgo.setDefaultLocale(_selectedLocale);
-  },
-  get() {
-    return storedLocale.value;
-  },
-});
-
-const resetToken = async () => {
-  token.value = await apiClient.resetToken();
-  window.location.href = `${address}/logout`;
-};
+  if (!user?.admin) {
+    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
+    await router.replace({ name: 'home' });
+  }
+
+  if (!user?.admin) {
+    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
+    await router.replace({ name: 'home' });
+  }
+});*/
 </script>
diff --git a/web/src/views/admin/Admin.vue b/web/src/views/admin/Admin.vue
deleted file mode 100644
index 26747d7616..0000000000
--- a/web/src/views/admin/Admin.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="flex m-auto">Administration</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
-
-import useAuthentication from '~/compositions/useAuthentication';
-import router from '~/router';
-
-export default defineComponent({
-  name: 'Admin',
-
-  setup() {
-    const authentication = useAuthentication();
-
-    onMounted(async () => {
-      if (!authentication.user || !authentication.user.admin) {
-        await router.replace({ name: 'home' });
-      }
-    });
-  },
-});
-</script>
diff --git a/web/src/views/org/OrgRepos.vue b/web/src/views/org/OrgRepos.vue
index 44509d3978..ca96403a87 100644
--- a/web/src/views/org/OrgRepos.vue
+++ b/web/src/views/org/OrgRepos.vue
@@ -6,7 +6,7 @@
 
     <template #titleActions>
       <IconButton
-        v-if="orgPermissions.admin"
+        v-if="!org.is_user && orgPermissions.admin"
         icon="settings"
         :to="{ name: 'org-settings' }"
         :title="$t('org.settings.settings')"
diff --git a/web/src/views/org/OrgWrapper.vue b/web/src/views/org/OrgWrapper.vue
index 0c1dc06291..f7436feac3 100644
--- a/web/src/views/org/OrgWrapper.vue
+++ b/web/src/views/org/OrgWrapper.vue
@@ -6,7 +6,7 @@
 
     <template #titleActions>
       <IconButton
-        v-if="orgPermissions.admin"
+        v-if="!org.is_user && orgPermissions.admin"
         :to="{ name: 'repo-settings' }"
         :title="$t('org.settings.settings')"
         icon="settings"
@@ -41,7 +41,14 @@ provide('org-permissions', orgPermissions);
 
 async function load() {
   org.value = await apiClient.getOrg(orgId.value);
-  orgPermissions.value = await apiClient.getOrgPermissions(org.value.id);
+  if (org.value.is_user) {
+    orgPermissions.value = {
+      member: true,
+      admin: true,
+    };
+  } else {
+    orgPermissions.value = await apiClient.getOrgPermissions(org.value.id);
+  }
 }
 
 onMounted(load);

From 79926f1763a0fe1f5b9aede50c6b93648ceb9c96 Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Wed, 2 Aug 2023 09:57:24 +0200
Subject: [PATCH 2/9] Fix lint/tc

---
 web/src/components/user/UserAPITab.vue      |  7 ++----
 web/src/components/user/UserSettingsTab.vue |  5 ++---
 web/src/views/User.vue                      | 25 +++------------------
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
index 8baf5e29a6..88490c3883 100644
--- a/web/src/components/user/UserAPITab.vue
+++ b/web/src/components/user/UserAPITab.vue
@@ -43,11 +43,9 @@ import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import useApiClient from '~/compositions/useApiClient';
-import { setI18nLanguage } from '~/compositions/useI18n';
 
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 const apiClient = useApiClient();
 const token = ref<string | undefined>();
@@ -56,8 +54,7 @@ onMounted(async () => {
   token.value = await apiClient.getToken();
 });
 
-// eslint-disable-next-line no-restricted-globals
-const address = `${location.protocol}//${location.host}`; // port is included in location.host
+const address = `${window.location.protocol}//${window.location.host}`; // port is included in location.host
 
 const usageWithShell = computed(() => {
   let usage = `export WOODPECKER_SERVER="${address}"\n`;
diff --git a/web/src/components/user/UserSettingsTab.vue b/web/src/components/user/UserSettingsTab.vue
index 1c4d68160b..821a866d06 100644
--- a/web/src/components/user/UserSettingsTab.vue
+++ b/web/src/components/user/UserSettingsTab.vue
@@ -2,7 +2,7 @@
   <Panel>
     <div class="flex flex-col">
       <div class="flex items-center text-wp-text-100 font-bold mb-2">
-        <label v-bind="$attrs">{{ $t('user.settings.language') }}</label>
+        <label>{{ $t('user.settings.language') }}</label>
       </div>
       <SelectField v-model="selectedLocale" :options="localeOptions" />
     </div>
@@ -18,10 +18,9 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import SelectField from '~/components/form/SelectField.vue';
-import InputField from '~/components/form/InputField.vue';
 import { setI18nLanguage } from '~/compositions/useI18n';
 
-const { t, locale } = useI18n();
+const { locale } = useI18n();
 
 const localeOptions = computed(() =>
   SUPPORTED_LOCALES.map((supportedLocale) => ({
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 713fa5bf62..3a574c3474 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -12,29 +12,10 @@
 </template>
 
 <script lang="ts" setup>
-/*import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-*/
-import UserSettingsTab from '~/components/user/UserSettingsTab.vue';
-import UserAPITab from '~/components/user/UserAPITab.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
-/*
-const notifications = useNotifications();
-const router = useRouter();
-const i18n = useI18n();
-const { user } = useAuthentication();
-
-onMounted(async () => {
-  if (!user?.admin) {
-    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
-    await router.replace({ name: 'home' });
-  }
+import UserAPITab from '~/components/user/UserAPITab.vue';
+import UserSettingsTab from '~/components/user/UserSettingsTab.vue';
 
-  if (!user?.admin) {
-    notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
-    await router.replace({ name: 'home' });
-  }
-});*/
+const address = `${window.location.protocol}//${window.location.host}`; // port is included in location.host
 </script>

From 6433bd28670393a98d52e1ad36e8e4f07f275f0f Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Thu, 3 Aug 2023 09:01:59 +0200
Subject: [PATCH 3/9] Rename key

---
 web/src/assets/locales/en.json              | 2 +-
 web/src/components/layout/header/Navbar.vue | 2 +-
 web/src/views/User.vue                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 339b7f3771..35d6d296df 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -425,7 +425,7 @@
         }
     },
     "user": {
-        "user_settings": "User Settings",
+        "settings_title": "User Settings",
         "settings": {
             "settings": "Settings",
             "language": "Language"
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 522e3c91a4..89e492acec 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -44,7 +44,7 @@
       <!-- Active Pipelines Indicator -->
       <ActivePipelines v-if="user" class="navbar-icon" />
       <!-- User Avatar -->
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.user_settings')" class="navbar-icon !p-1.5">
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings_title')" class="navbar-icon !p-1.5">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <!-- Login Button -->
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 3a574c3474..3f2e133a1c 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -1,6 +1,6 @@
 <template>
   <Scaffold enable-tabs>
-    <template #title>{{ $t('user.user_settings') }}</template>
+    <template #title>{{ $t('user.settings_title') }}</template>
     <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
     <Tab id="settings" :title="$t('user.settings.settings')">
       <UserSettingsTab />

From 911b510e46a702f54acee88e5f2eafe20a7e007b Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Thu, 3 Aug 2023 09:33:30 +0200
Subject: [PATCH 4/9] Update translation structure

---
 web/components.d.ts                           |  1 +
 web/src/assets/locales/en.json                | 30 ++++++++++---------
 web/src/components/layout/header/Navbar.vue   |  2 +-
 web/src/components/user/UserAPITab.vue        | 18 +++++------
 ...UserSettingsTab.vue => UserGeneralTab.vue} |  2 +-
 web/src/views/User.vue                        | 10 +++----
 6 files changed, 33 insertions(+), 30 deletions(-)
 rename web/src/components/user/{UserSettingsTab.vue => UserGeneralTab.vue} (95%)

diff --git a/web/components.d.ts b/web/components.d.ts
index b495c7845f..9208cb871e 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -102,6 +102,7 @@ declare module '@vue/runtime-core' {
     Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
     TextField: typeof import('./src/components/form/TextField.vue')['default']
     UserAPITab: typeof import('./src/components/user/UserAPITab.vue')['default']
+    UserGeneralTab: typeof import('./src/components/user/UserGeneralTab.vue')['default']
     UserSettingsTab: typeof import('./src/components/user/UserSettingsTab.vue')['default']
     Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }
diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 35d6d296df..c34915e180 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -425,21 +425,23 @@
         }
     },
     "user": {
-        "settings_title": "User Settings",
         "settings": {
-            "settings": "Settings",
-            "language": "Language"
-        },
-        "api": {
-            "api": "API",
-            "token": "Personal Access Token",
-            "shell_setup": "Shell setup",
-            "api_usage": "Example API Usage",
-            "cli_usage": "Example CLI Usage",
-            "dl_cli": "Download CLI",
-            "shell_setup_before": "do shell setup steps before",
-            "reset_token": "Reset token",
-            "swagger_ui": "Sagger UI",
+            "settings": "User Settings",
+            "general": {
+                "general": "General",
+                "language": "Language"
+            },
+            "api": {
+              "api": "API",
+              "token": "Personal Access Token",
+              "shell_setup": "Shell setup",
+              "api_usage": "Example API Usage",
+              "cli_usage": "Example CLI Usage",
+              "dl_cli": "Download CLI",
+              "shell_setup_before": "do shell setup steps before",
+              "reset_token": "Reset token",
+              "swagger_ui": "Sagger UI",
+          }
         },
         "oauth_error": "Error while authenticating against OAuth provider",
         "internal_error": "Some internal error occurred",
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 89e492acec..55f48f5b8c 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -44,7 +44,7 @@
       <!-- Active Pipelines Indicator -->
       <ActivePipelines v-if="user" class="navbar-icon" />
       <!-- User Avatar -->
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings_title')" class="navbar-icon !p-1.5">
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <!-- Login Button -->
diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
index 271d15b93b..8608c3b1d4 100644
--- a/web/src/components/user/UserAPITab.vue
+++ b/web/src/components/user/UserAPITab.vue
@@ -2,26 +2,26 @@
   <Panel>
     <div>
       <div class="flex items-center mb-2">
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.api.token') }}</h2>
-        <Button class="ml-4" :text="$t('user.api.reset_token')" @click="resetToken" />
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.token') }}</h2>
+        <Button class="ml-4" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
       </div>
       <pre class="code-box">{{ token }}</pre>
     </div>
 
     <div>
-      <h2 class="text-lg text-wp-text-100">{{ $t('user.api.shell_setup') }}</h2>
+      <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.shell_setup') }}</h2>
       <pre class="code-box">{{ usageWithShell }}</pre>
     </div>
 
     <div>
       <div class="flex items-center">
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.api.api_usage') }}</h2>
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.api_usage') }}</h2>
         <a
           v-if="enableSwagger"
           :href="`${address}/swagger/index.html`"
           target="_blank"
           class="ml-4 text-wp-link-100 hover:text-wp-link-200"
-          >{{ $t('user.api.swagger_ui') }}</a
+          >{{ $t('user.settings.api.swagger_ui') }}</a
         >
       </div>
       <pre class="code-box">{{ usageWithCurl }}</pre>
@@ -29,9 +29,9 @@
 
     <div>
       <div class="flex items-center">
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.api.cli_usage') }}</h2>
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.cli_usage') }}</h2>
         <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
-          $t('user.api.dl_cli')
+          $t('user.settings.api.dl_cli')
         }}</a>
       </div>
       <pre class="code-box">{{ usageWithCli }}</pre>
@@ -66,10 +66,10 @@ const usageWithShell = computed(() => {
 });
 
 const usageWithCurl = `# ${t(
-  'user.api.shell_setup_before',
+  'user.settings.api.shell_setup_before',
 )}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;
 
-const usageWithCli = `# ${t('user.api.shell_setup_before')}\nwoodpecker info`;
+const usageWithCli = `# ${t('user.settings.api.shell_setup_before')}\nwoodpecker info`;
 
 const cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';
 
diff --git a/web/src/components/user/UserSettingsTab.vue b/web/src/components/user/UserGeneralTab.vue
similarity index 95%
rename from web/src/components/user/UserSettingsTab.vue
rename to web/src/components/user/UserGeneralTab.vue
index 821a866d06..f9c9d6d549 100644
--- a/web/src/components/user/UserSettingsTab.vue
+++ b/web/src/components/user/UserGeneralTab.vue
@@ -2,7 +2,7 @@
   <Panel>
     <div class="flex flex-col">
       <div class="flex items-center text-wp-text-100 font-bold mb-2">
-        <label>{{ $t('user.settings.language') }}</label>
+        <label>{{ $t('user.settings.general.language') }}</label>
       </div>
       <SelectField v-model="selectedLocale" :options="localeOptions" />
     </div>
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 3f2e133a1c..1326c2c8de 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -1,11 +1,11 @@
 <template>
   <Scaffold enable-tabs>
-    <template #title>{{ $t('user.settings_title') }}</template>
+    <template #title>{{ $t('user.settings.settings') }}</template>
     <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
-    <Tab id="settings" :title="$t('user.settings.settings')">
-      <UserSettingsTab />
+    <Tab id="settings" :title="$t('user.settings.general.general')">
+      <UserGeneralTab />
     </Tab>
-    <Tab id="api" :title="$t('user.api.api')">
+    <Tab id="api" :title="$t('user.settings.api.api')">
       <UserAPITab />
     </Tab>
   </Scaffold>
@@ -15,7 +15,7 @@
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
 import UserAPITab from '~/components/user/UserAPITab.vue';
-import UserSettingsTab from '~/components/user/UserSettingsTab.vue';
+import UserGeneralTab from '~/components/user/UserGeneralTab.vue';
 
 const address = `${window.location.protocol}//${window.location.host}`; // port is included in location.host
 </script>

From fa08d5f3708eeac25ceac188cce53e3479a6f96b Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Thu, 3 Aug 2023 09:39:05 +0200
Subject: [PATCH 5/9] remove old component

---
 web/components.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index 9208cb871e..75639a4869 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -103,7 +103,6 @@ declare module '@vue/runtime-core' {
     TextField: typeof import('./src/components/form/TextField.vue')['default']
     UserAPITab: typeof import('./src/components/user/UserAPITab.vue')['default']
     UserGeneralTab: typeof import('./src/components/user/UserGeneralTab.vue')['default']
-    UserSettingsTab: typeof import('./src/components/user/UserSettingsTab.vue')['default']
     Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }
 }

From cb609f7f34ab4bc250893660601691ef158a9e5c Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Thu, 3 Aug 2023 09:55:19 +0200
Subject: [PATCH 6/9] Add header

---
 web/src/assets/locales/en.json             | 1 +
 web/src/components/user/UserAPITab.vue     | 7 +++++++
 web/src/components/user/UserGeneralTab.vue | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index c34915e180..fa8c462ad1 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -433,6 +433,7 @@
             },
             "api": {
               "api": "API",
+              "desc": "Personal Access Token and API usage",
               "token": "Personal Access Token",
               "shell_setup": "Shell setup",
               "api_usage": "Example API Usage",
diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
index 8608c3b1d4..1e0ef46f39 100644
--- a/web/src/components/user/UserAPITab.vue
+++ b/web/src/components/user/UserAPITab.vue
@@ -1,5 +1,12 @@
 <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>
       <div class="flex items-center mb-2">
         <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.token') }}</h2>
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/components/user/UserGeneralTab.vue
index f9c9d6d549..b3ee598efd 100644
--- a/web/src/components/user/UserGeneralTab.vue
+++ b/web/src/components/user/UserGeneralTab.vue
@@ -1,5 +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">
       <div class="flex items-center text-wp-text-100 font-bold mb-2">
         <label>{{ $t('user.settings.general.language') }}</label>

From 971dbc17210f01350b38d7c30b3b67819ffe1591 Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Thu, 3 Aug 2023 10:00:16 +0200
Subject: [PATCH 7/9] Unified design

---
 web/src/assets/locales/en.json             |  2 +-
 web/src/components/user/UserAPITab.vue     | 28 ++++++++++++++--------
 web/src/components/user/UserGeneralTab.vue |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index fa8c462ad1..3c0fda8a7c 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -441,7 +441,7 @@
               "dl_cli": "Download CLI",
               "shell_setup_before": "do shell setup steps before",
               "reset_token": "Reset token",
-              "swagger_ui": "Sagger UI",
+              "swagger_ui": "Swagger UI",
           }
         },
         "oauth_error": "Error while authenticating against OAuth provider",
diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
index 1e0ef46f39..3fbe0217e4 100644
--- a/web/src/components/user/UserAPITab.vue
+++ b/web/src/components/user/UserAPITab.vue
@@ -7,22 +7,28 @@
       </div>
     </div>
 
-    <div>
+    <div class="mt-2 mb-4">
       <div class="flex items-center mb-2">
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.token') }}</h2>
+        <div class="flex items-center text-wp-text-100 font-bold">
+          <label>{{ $t('user.settings.api.token') }}</label>
+        </div>
         <Button class="ml-4" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
       </div>
       <pre class="code-box">{{ token }}</pre>
     </div>
 
-    <div>
-      <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.shell_setup') }}</h2>
+    <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>
       <pre class="code-box">{{ usageWithShell }}</pre>
     </div>
 
-    <div>
-      <div class="flex items-center">
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.api_usage') }}</h2>
+    <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>
         <a
           v-if="enableSwagger"
           :href="`${address}/swagger/index.html`"
@@ -34,9 +40,11 @@
       <pre class="code-box">{{ usageWithCurl }}</pre>
     </div>
 
-    <div>
-      <div class="flex items-center">
-        <h2 class="text-lg text-wp-text-100">{{ $t('user.settings.api.cli_usage') }}</h2>
+    <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>
         <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
           $t('user.settings.api.dl_cli')
         }}</a>
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/components/user/UserGeneralTab.vue
index b3ee598efd..0ac44d949b 100644
--- a/web/src/components/user/UserGeneralTab.vue
+++ b/web/src/components/user/UserGeneralTab.vue
@@ -4,7 +4,7 @@
       <h1 class="ml-2 text-xl text-wp-text-100">{{ $t('user.settings.general.general') }}</h1>
     </div>
 
-    <div class="flex flex-col">
+    <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>

From 76af3bc9f729cebcace933c8d412b24d5679eb2c Mon Sep 17 00:00:00 2001
From: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Date: Thu, 3 Aug 2023 10:26:25 +0200
Subject: [PATCH 8/9] Update web/src/components/user/UserAPITab.vue

Co-authored-by: Robert Kaussow <xoxys@rknet.org>
---
 web/src/components/user/UserAPITab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/user/UserAPITab.vue b/web/src/components/user/UserAPITab.vue
index 3fbe0217e4..aa0909f919 100644
--- a/web/src/components/user/UserAPITab.vue
+++ b/web/src/components/user/UserAPITab.vue
@@ -9,10 +9,10 @@
 
     <div class="mt-2 mb-4">
       <div class="flex items-center mb-2">
-        <div class="flex items-center text-wp-text-100 font-bold">
+        <div class="flex flex-row items-center text-wp-text-100 font-bold">
           <label>{{ $t('user.settings.api.token') }}</label>
         </div>
-        <Button class="ml-4" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
+        <Button class="ml-auto" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
       </div>
       <pre class="code-box">{{ token }}</pre>
     </div>

From 31532eac22a88ad56637bd0ec1c77b68923d8406 Mon Sep 17 00:00:00 2001
From: qwerty287 <ndev@web.de>
Date: Thu, 3 Aug 2023 10:31:23 +0200
Subject: [PATCH 9/9] Rename id to `general`

---
 web/src/views/User.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 1326c2c8de..19f7f242da 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -2,7 +2,7 @@
   <Scaffold enable-tabs>
     <template #title>{{ $t('user.settings.settings') }}</template>
     <template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
-    <Tab id="settings" :title="$t('user.settings.general.general')">
+    <Tab id="general" :title="$t('user.settings.general.general')">
       <UserGeneralTab />
     </Tab>
     <Tab id="api" :title="$t('user.settings.api.api')">