Fix UI and backend paths with subpath (#1799) (#2133)

2026-04-15 01:41:56 +00:00 · 2023-08-07 18:43:14 +02:00
parent 4b0db4ec86
commit 239b00ca20
30 changed files with 168 additions and 98 deletions
@@ -101,6 +101,7 @@ 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']
    Warning: typeof import('./src/components/atomic/Warning.vue')['default']
  }
 }
@@ -7,8 +7,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#65a30d" />
    <title>Woodpecker</title>
-    <link rel="stylesheet" href="/assets/custom.css" />
    <script type="" src="/web-config.js"></script>
+    <link rel="stylesheet" href="/assets/custom.css" />
  </head>
  <body>
    <div id="app"></div>
@@ -8,7 +8,7 @@
  },
  "scripts": {
    "start": "vite",
-    "build": "vite build",
+    "build": "vite build --base=/BASE_PATH",
    "serve": "vite preview",
    "lint": "eslint --max-warnings 0 --ext .js,.ts,.vue,.json .",
    "formatcheck": "prettier -c .",
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="white"><path d="M1.263 2.744C2.41 3.832 2.845 4.932 4.118 5.08l.036.007c-.588.606-1.09 1.402-1.443 2.423-.38 1.096-.488 2.285-.614 3.659-.19 2.046-.401 4.364-1.556 7.269-2.486 6.258-1.12 11.63.332 17.317.664 2.604 1.348 5.297 1.642 8.107a.857.857 0 00.633.744.86.86 0 00.922-.323c.227-.313.524-.797.86-1.424.84 3.323 1.355 6.13 1.783 8.697a.866.866 0 001.517.41c2.88-3.463 3.763-8.636 2.184-12.674.459-2.433 1.402-4.45 2.398-6.583.536-1.15 1.08-2.318 1.55-3.566.228-.084.569-.314.79-.441l1.707-.981-.256 1.052a.864.864 0 001.678.408l.68-2.858 1.285-2.95a.863.863 0 10-1.581-.687l-1.152 2.669-2.383 1.372a18.97 18.97 0 00.508-2.981c.432-4.86-.718-9.074-3.066-11.266-.163-.157-.208-.281-.247-.26.095-.12.249-.26.358-.374 2.283-1.693 6.047-.147 8.319.75.589.232.876-.337.316-.67-1.95-1.153-5.948-4.196-8.188-6.193-.313-.275-.527-.607-.89-.913C9.825.555 4.072 3.057 1.355 2.569c-.102-.018-.166.103-.092.175m10.98 5.899c-.06 1.242-.603 1.8-1 2.208-.217.224-.426.436-.524.738-.236.714.008 1.51.66 2.143 1.974 1.84 2.925 5.527 2.538 9.86-.291 3.288-1.448 5.763-2.671 8.385-1.031 2.207-2.096 4.489-2.577 7.259a.853.853 0 00.056.48c1.02 2.434 1.135 6.197-.672 9.46a96.586 96.586 0 00-1.97-8.711c1.964-4.488 4.203-11.75 2.919-17.668-.325-1.497-1.304-3.276-2.387-4.207-.208-.18-.402-.237-.495-.167-.084.06-.151.238-.062.444.55 1.266.879 2.599 1.226 4.276 1.125 5.443-.956 12.49-2.835 16.782l-.116.259-.457.982c-.356-2.014-.85-3.95-1.33-5.84-1.38-5.406-2.68-10.515-.401-16.254 1.247-3.137 1.483-5.692 1.672-7.746.116-1.263.216-2.355.526-3.252.905-2.605 3.062-3.178 4.744-2.852 1.632.316 3.24 1.593 3.156 3.42zm-2.868.62a1.177 1.177 0 10.736-2.236 1.178 1.178 0 10-.736 2.237z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="white"><path d="M1.263 2.744C2.41 3.832 2.845 4.932 4.118 5.08l.036.007c-.588.606-1.09 1.402-1.443 2.423-.38 1.096-.488 2.285-.614 3.659-.19 2.046-.401 4.364-1.556 7.269-2.486 6.258-1.12 11.63.332 17.317.664 2.604 1.348 5.297 1.642 8.107a.857.857 0 00.633.744.86.86 0 00.922-.323c.227-.313.524-.797.86-1.424.84 3.323 1.355 6.13 1.783 8.697a.866.866 0 001.517.41c2.88-3.463 3.763-8.636 2.184-12.674.459-2.433 1.402-4.45 2.398-6.583.536-1.15 1.08-2.318 1.55-3.566.228-.084.569-.314.79-.441l1.707-.981-.256 1.052a.864.864 0 001.678.408l.68-2.858 1.285-2.95a.863.863 0 10-1.581-.687l-1.152 2.669-2.383 1.372a18.97 18.97 0 00.508-2.981c.432-4.86-.718-9.074-3.066-11.266-.163-.157-.208-.281-.247-.26.095-.12.249-.26.358-.374 2.283-1.693 6.047-.147 8.319.75.589.232.876-.337.316-.67-1.95-1.153-5.948-4.196-8.188-6.193-.313-.275-.527-.607-.89-.913C9.825.555 4.072 3.057 1.355 2.569c-.102-.018-.166.103-.092.175m10.98 5.899c-.06 1.242-.603 1.8-1 2.208-.217.224-.426.436-.524.738-.236.714.008 1.51.66 2.143 1.974 1.84 2.925 5.527 2.538 9.86-.291 3.288-1.448 5.763-2.671 8.385-1.031 2.207-2.096 4.489-2.577 7.259a.853.853 0 00.056.48c1.02 2.434 1.135 6.197-.672 9.46a96.586 96.586 0 00-1.97-8.711c1.964-4.488 4.203-11.75 2.919-17.668-.325-1.497-1.304-3.276-2.387-4.207-.208-.18-.402-.237-.495-.167-.084.06-.151.238-.062.444.55 1.266.879 2.599 1.226 4.276 1.125 5.443-.956 12.49-2.835 16.782l-.116.259-.457.982c-.356-2.014-.85-3.95-1.33-5.84-1.38-5.406-2.68-10.515-.401-16.254 1.247-3.137 1.483-5.692 1.672-7.746.116-1.263.216-2.355.526-3.252.905-2.605 3.062-3.178 4.744-2.852 1.632.316 3.24 1.593 3.156 3.42zm-2.868.62a1.177 1.177 0 10.736-2.236 1.178 1.178 0 10-.736 2.237z"/></svg>
@@ -5,7 +5,7 @@
    <div class="flex text-white dark:text-gray-400 items-center space-x-2">
      <!-- Logo -->
      <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
-        <img class="w-8 h-8" src="../../../assets/logo.svg?url" />
+        <WoodpeckerLogo class="w-8 h-8" />
        <span class="text-xs">{{ version }}</span>
      </router-link>
      <!-- Repo Link -->
@@ -53,6 +53,7 @@
 import { defineComponent } from 'vue';
 import { useRoute } from 'vue-router';

+import WoodpeckerLogo from '~/assets/logo.svg?component';
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import useAuthentication from '~/compositions/useAuthentication';
@@ -64,7 +65,7 @@ import ActivePipelines from './ActivePipelines.vue';
 export default defineComponent({
  name: 'Navbar',

-  components: { Button, ActivePipelines, IconButton },
+  components: { Button, ActivePipelines, IconButton, WoodpeckerLogo },

  setup() {
    const config = useConfig();
@@ -72,7 +73,7 @@ export default defineComponent({
    const authentication = useAuthentication();
    const { darkMode } = useDarkMode();
    const docsUrl = config.docs || undefined;
-    const apiUrl = `${config.rootURL ?? ''}/swagger/index.html`;
+    const apiUrl = `${config.rootPath ?? ''}/swagger/index.html`;

    function doLogin() {
      authentication.authenticate(route.fullPath);
@@ -3,7 +3,7 @@
 </template>

 <script lang="ts" setup>
-import WoodpeckerIcon from '../../../assets/woodpecker.svg?component';
+import WoodpeckerIcon from '~/assets/woodpecker.svg?component';
 </script>

 <style scoped>
@@ -48,6 +48,7 @@ import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
 import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
+import useConfig from '~/compositions/useConfig';
 import { usePaginate } from '~/compositions/usePaginate';
 import { Repo } from '~/lib/api/types';

@@ -89,7 +90,7 @@ export default defineComponent({

    const baseUrl = `${window.location.protocol}//${window.location.hostname}${
      window.location.port ? `:${window.location.port}` : ''
-    }`;
+    }${useConfig().rootPath}`;
    const badgeUrl = computed(
      () => `/api/badges/${repo.value.id}/status.svg${branch.value !== '' ? `?branch=${branch.value}` : ''}`,
    );
@@ -7,7 +7,7 @@ let apiClient: WoodpeckerClient | undefined;
 export default (): WoodpeckerClient => {
  if (!apiClient) {
    const config = useConfig();
-    const server = config.rootURL ?? '';
+    const server = config.rootPath;
    const token = null;
    const csrf = config.csrf || null;

@@ -12,6 +12,6 @@ export default () =>
        const config = useUserConfig();
        config.setUserConfig('redirectUrl', url);
      }
-      window.location.href = '/login';
+      window.location.href = `${useConfig().rootPath}/login`;
    },
  } as const);
@@ -7,7 +7,7 @@ declare global {
    WOODPECKER_VERSION: string | undefined;
    WOODPECKER_CSRF: string | undefined;
    WOODPECKER_FORGE: string | undefined;
-    WOODPECKER_ROOT_URL: string | undefined;
+    WOODPECKER_ROOT_PATH: string | undefined;
  }
 }

@@ -17,5 +17,5 @@ export default () => ({
  version: window.WOODPECKER_VERSION,
  csrf: window.WOODPECKER_CSRF || null,
  forge: window.WOODPECKER_FORGE || null,
-  rootURL: window.WOODPECKER_ROOT_URL || null,
+  rootPath: window.WOODPECKER_ROOT_PATH || '',
 });
@@ -1,5 +1,6 @@
 import { computed, ref, watch } from 'vue';

+import useConfig from '~/compositions/useConfig';
 import { useDarkMode } from '~/compositions/useDarkMode';
 import { PipelineStatus } from '~/lib/api/types';

@@ -13,12 +14,16 @@ watch(
  () => {
    const faviconPNG = document.getElementById('favicon-png');
    if (faviconPNG) {
-      (faviconPNG as HTMLLinkElement).href = `/favicons/favicon-${darkMode.value}-${faviconStatus.value}.png`;
+      (faviconPNG as HTMLLinkElement).href = `${useConfig().rootPath}/favicons/favicon-${darkMode.value}-${
+        faviconStatus.value
+      }.png`;
    }

    const faviconSVG = document.getElementById('favicon-svg');
    if (faviconSVG) {
-      (faviconSVG as HTMLLinkElement).href = `/favicons/favicon-${darkMode.value}-${faviconStatus.value}.svg`;
+      (faviconSVG as HTMLLinkElement).href = `${useConfig().rootPath}/favicons/favicon-${darkMode.value}-${
+        faviconStatus.value
+      }.svg`;
    }
  },
  { immediate: true },
@@ -109,7 +109,7 @@ export default class ApiClient {
      access_token: this.token || undefined,
    });
    let _path = this.server ? this.server + path : path;
-    _path = this.token ? `${path}?${query}` : path;
+    _path = this.token ? `${_path}?${query}` : _path;

    const events = new EventSource(_path);
    events.onmessage = (event) => {
@@ -2,16 +2,18 @@ import { Component } from 'vue';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

 import useAuthentication from '~/compositions/useAuthentication';
+import useConfig from '~/compositions/useConfig';
 import useUserConfig from '~/compositions/useUserConfig';

+const { rootPath } = useConfig();
 const routes: RouteRecordRaw[] = [
  {
-    path: '/',
+    path: `${rootPath}/`,
    name: 'home',
-    redirect: '/repos',
+    redirect: `${rootPath}/repos`,
  },
  {
-    path: '/repos',
+    path: `${rootPath}/repos`,
    component: (): Component => import('~/views/RouterView.vue'),
    children: [
      {
@@ -105,7 +107,7 @@ const routes: RouteRecordRaw[] = [
    ],
  },
  {
-    path: '/orgs/:orgId',
+    path: `${rootPath}/orgs/:orgId`,
    component: (): Component => import('~/views/org/OrgWrapper.vue'),
    props: true,
    children: [
@@ -125,12 +127,12 @@ const routes: RouteRecordRaw[] = [
    ],
  },
  {
-    path: '/org/:orgName/:pathMatch(.*)*',
+    path: `${rootPath}/org/:orgName/:pathMatch(.*)*`,
    component: (): Component => import('~/views/org/OrgDeprecatedRedirect.vue'),
    props: true,
  },
  {
-    path: '/admin',
+    path: `${rootPath}/admin`,
    component: (): Component => import('~/views/RouterView.vue'),
    meta: { authentication: 'required' },
    children: [
@@ -150,21 +152,21 @@ const routes: RouteRecordRaw[] = [
  },

  {
-    path: '/user',
+    path: `${rootPath}/user`,
    name: 'user',
    component: (): Component => import('~/views/User.vue'),
    meta: { authentication: 'required' },
    props: true,
  },
  {
-    path: '/login/error',
+    path: `${rootPath}/login/error`,
    name: 'login-error',
    component: (): Component => import('~/views/Login.vue'),
    meta: { blank: true },
    props: true,
  },
  {
-    path: '/do-login',
+    path: `${rootPath}/do-login`,
    name: 'login',
    component: (): Component => import('~/views/Login.vue'),
    meta: { blank: true },
@@ -173,18 +175,18 @@ const routes: RouteRecordRaw[] = [

  // TODO: deprecated routes => remove after some time
  {
-    path: '/:ownerOrOrgId',
+    path: `${rootPath}/:ownerOrOrgId`,
    redirect: (route) => ({ name: 'org', params: route.params }),
  },
  {
-    path: '/:repoOwner/:repoName/:pathMatch(.*)*',
+    path: `${rootPath}/:repoOwner/:repoName/:pathMatch(.*)*`,
    component: () => import('~/views/repo/RepoDeprecatedRedirect.vue'),
    props: true,
  },

  // not found handler
  {
-    path: '/:pathMatch(.*)*',
+    path: `${rootPath}/:pathMatch(.*)*`,
    name: 'not-found',
    component: (): Component => import('~/views/NotFound.vue'),
  },
@@ -8,7 +8,7 @@
      class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:bg-white md:dark:bg-dark-gray-700 dark:border-dark-200 md:flex-row md:w-3xl md:h-sm justify-center"
    >
      <div class="flex md:bg-lime-500 md:dark:bg-lime-900 md:w-3/5 justify-center items-center">
-        <img class="w-48 h-48" src="../assets/logo.svg?url" />
+        <WoodpeckerLogo class="w-48 h-48" />
      </div>
      <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
        <h1 class="text-xl text-color">{{ $t('welcome') }}</h1>
@@ -23,6 +23,7 @@ import { defineComponent, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';

+import WoodpeckerLogo from '~/assets/logo.svg?component';
 import Button from '~/components/atomic/Button.vue';
 import useAuthentication from '~/compositions/useAuthentication';

@@ -31,6 +32,7 @@ export default defineComponent({

  components: {
    Button,
+    WoodpeckerLogo,
  },

  setup() {
@@ -49,9 +49,11 @@ 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';

 const { t, locale } = useI18n();
+const { rootPath } = useConfig();

 const apiClient = useApiClient();
 const token = ref<string | undefined>();
@@ -61,7 +63,7 @@ onMounted(async () => {
 });

 // eslint-disable-next-line no-restricted-globals
-const address = `${location.protocol}//${location.host}`; // port is included in location.host
+const address = `${location.protocol}//${location.host}${rootPath}`; // port is included in location.host

 const usageWithShell = computed(() => {
  let usage = `export WOODPECKER_SERVER="${address}"\n`;
@@ -123,7 +123,7 @@ watch([repositoryId], () => {
  loadRepo();
 });

-const badgeUrl = computed(() => repo.value && `/api/badges/${repo.value.id}/status.svg`);
+const badgeUrl = computed(() => repo.value && `${config.rootPath}/api/badges/${repo.value.id}/status.svg`);

 const activeTab = computed({
  get() {