Improve user settings (#2087)

Make the user settings tabbed as well, currently only holding "Settings"
(language) and "API". Can be extended with user secrets (#1739) etc.
later.
![Screenshot 2023-08-02 at 09-56-00
Woodpecker](https://github.com/woodpecker-ci/woodpecker/assets/80460567/15d82800-8a4d-47fe-aa77-33462f63585e)
![Screenshot 2023-08-02 at 09-56-05
Woodpecker](https://github.com/woodpecker-ci/woodpecker/assets/80460567/de2640be-144c-4190-adb6-56d43a38bdda)

---------

Co-authored-by: Robert Kaussow <xoxys@rknet.org>

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']
+    UserGeneralTab: typeof import('./src/components/user/UserGeneralTab.vue')['default']
     Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }
 }

web/src/assets/locales/en.json

@@ -425,16 +425,27 @@
         }
     },
     "user": {
-        "settings": "User Settings",
+        "settings": {
+            "settings": "User Settings",
+            "general": {
+                "general": "General",
+                "language": "Language"
+            },
+            "api": {
+              "api": "API",
+              "desc": "Personal Access Token and API usage",
+              "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": "Swagger 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"
     }
 }

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')" 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 -->

web/src/components/user/UserAPITab.vue

@@ -0,0 +1,95 @@
+<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>
+        <Button class="ml-auto" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
+      </div>
+      <pre class="code-box">{{ token }}</pre>
+    </div>
+
+    <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 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`"
+          target="_blank"
+          class="ml-4 text-wp-link-100 hover:text-wp-link-200"
+          >{{ $t('user.settings.api.swagger_ui') }}</a
+        >
+      </div>
+      <pre class="code-box">{{ usageWithCurl }}</pre>
+    </div>
+
+    <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>
+      </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 useApiClient from '~/compositions/useApiClient';
+import useConfig from '~/compositions/useConfig';
+
+const { t } = useI18n();
+const { enableSwagger } = useConfig();
+
+const apiClient = useApiClient();
+const token = ref<string | undefined>();
+
+onMounted(async () => {
+  token.value = await apiClient.getToken();
+});
+
+const address = `${window.location.protocol}//${window.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.settings.api.shell_setup_before',
+)}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;
+
+const usageWithCli = `# ${t('user.settings.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>

web/src/components/user/UserGeneralTab.vue

@@ -0,0 +1,48 @@
+<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>
+      <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 { setI18nLanguage } from '~/compositions/useI18n';
+
+const { 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>

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,
-      },
-    ],
   },
 
   {

web/src/views/User.vue

@@ -1,114 +1,21 @@
 <template>
-  <Scaffold>
-    <template #title>{{ $t('user.settings') }}</template>
+  <Scaffold enable-tabs>
+    <template #title>{{ $t('user.settings.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
-            v-if="enableSwagger"
-            :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="general" :title="$t('user.settings.general.general')">
+      <UserGeneralTab />
+    </Tab>
+    <Tab id="api" :title="$t('user.settings.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 { useI18n } from 'vue-i18n';
-
-import Button from '~/components/atomic/Button.vue';
-import SelectField from '~/components/form/SelectField.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
-import useApiClient from '~/compositions/useApiClient';
-import useConfig from '~/compositions/useConfig';
-import { setI18nLanguage } from '~/compositions/useI18n';
+import Tab from '~/components/layout/scaffold/Tab.vue';
+import UserAPITab from '~/components/user/UserAPITab.vue';
+import UserGeneralTab from '~/components/user/UserGeneralTab.vue';
 
-const { t, locale } = useI18n();
-const { enableSwagger } = useConfig();
-
-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.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`;
-};
+const address = `${window.location.protocol}//${window.location.host}`; // port is included in location.host
 </script>

web/src/views/admin/Admin.vue

@@ -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>

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')"

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);