Add global and organization secrets (#1027)

* Implement database changes and store methods for global and organization secrets

* Add tests for new store methods
* Add organization secret API and UI
* Add global secrets API and UI

* Add suggestions

* Update warning style

* Apply suggestions from code review

Co-authored-by: Anbraten <anton@ju60.de>

* Fix lint warning

Co-authored-by: Anbraten <anton@ju60.de>

web/src/assets/locales/en.json

@@ -31,7 +31,7 @@
     "branches": "Branches",
     "add": "Add repository",
     "user_none": "This organization / user does not have any projects yet.",
-    "not_allowed": "Not allowed to access this repository",
+    "not_allowed": "You are not allowed to access this repository",
 
     "enable": {
       "reload": "Reload repositories",
@@ -43,7 +43,7 @@
 
     "settings": {
       "settings": "Settings",
-      "not_allowed": "Not allowed to access this repository's settings",
+      "not_allowed": "You are not allowed to access this repository's settings",
 
       "general": {
         "general": "General",
@@ -205,6 +205,67 @@
     }
   },
 
+  "org": {
+    "settings": {
+      "settings": "Settings",
+      "not_allowed": "You are not allowed to access this organization's settings",
+
+      "secrets": {
+        "secrets": "Secrets",
+        "desc": "Organization secrets can be passed to all organization's repository individual pipeline steps at runtime as environmental variables.",
+        "none": "There are no organization secrets yet.",
+        "add": "Add secret",
+        "save": "Save secret",
+        "show": "Show secrets",
+        "name": "Name",
+        "value": "Value",
+        "deleted": "Organization secret deleted",
+        "created": "Organization secret created",
+        "saved": "Organization secret saved",
+
+        "images": {
+          "images": "Available for following images",
+          "desc": "Comma separated list of images where this secret is available, leave empty to allow all images"
+        },
+        "events": {
+          "events": "Available at following events",
+          "pr_warning": "Please be careful with this option as a bad actor can submit a malicious pull request that exposes your secrets."
+        }
+      }
+    }
+  },
+
+  "admin": {
+    "settings": {
+      "settings": "Settings",
+      "not_allowed": "You are not allowed to access server settings",
+
+      "secrets": {
+        "secrets": "Secrets",
+        "desc": "Global secrets can be passed to all repositories individual pipeline steps at runtime as environmental variables.",
+        "warning": "These secrets will be available for all server users.",
+        "none": "There are no global secrets yet.",
+        "add": "Add secret",
+        "save": "Save secret",
+        "show": "Show secrets",
+        "name": "Name",
+        "value": "Value",
+        "deleted": "Global secret deleted",
+        "created": "Global secret created",
+        "saved": "Global secret saved",
+
+        "images": {
+          "images": "Available for following images",
+          "desc": "Comma separated list of images where this secret is available, leave empty to allow all images"
+        },
+        "events": {
+          "events": "Available at following events",
+          "pr_warning": "Please be careful with this option as a bad actor can submit a malicious pull request that exposes your secrets."
+        }
+      }
+    }
+  },
+
   "user": {
     "oauth_error": "Error while authenticating against OAuth provider",
     "internal_error": "Some internal error occurred",

web/src/assets/locales/lv.json

@@ -205,6 +205,67 @@
     }
   },
 
+  "org": {
+    "settings": {
+      "settings": "Iestatījumi",
+      "not_allowed": "Nav piekļuves šīs organizācijas iestatījumiem",
+
+      "secrets": {
+        "secrets": "Noslēpumi",
+        "desc": "Noslēpumus var padot visu organizācijas repozitoriju individuāliem konvejerdarba soļiem izpildes laikā kā vides mainīgos.",
+        "none": "Pagaidām nav neviena organizācijas noslēpuma.",
+        "add": "Pievienot noslēpumu",
+        "save": "Saglabāt noslēpumu",
+        "show": "Noslēpumu saraksts",
+        "name": "Nosaukums",
+        "value": "Vērtība",
+        "deleted": "Organizācijas noslēpums dzēsts",
+        "created": "Organizācijas noslēpums izveidots",
+        "saved": "Organizācijas noslēpums saglabāts",
+
+        "images": {
+          "images": "Pieejami šādiem attēliem",
+          "desc": "Ar komatiem atdalīts saraksts ar attēliem, kam šis noslēpums būs pieejams, atstājot tukšu, tas būs pieejams visiem attēliem."
+        },
+        "events": {
+          "events": "Pieejams šādiem notikumiem",
+          "pr_warning": "Uzmanieties, jo šādā veidā tas būs pieejams visiem cilvēkiem, kas var iesūtīt izmaiņu pieprasījumu!"
+        }
+      }
+    }
+  },
+
+  "admin": {
+    "settings": {
+      "settings": "Iestatījumi",
+      "not_allowed": "Nav piekļuves servera iestatījumiem",
+
+      "secrets": {
+        "secrets": "Noslēpumi",
+        "desc": "Noslēpumus var padot visu repozitoriju individuāliem konvejerdarba soļiem izpildes laikā kā vides mainīgos.",
+        "warning": "Šie noslēpumi būs pieejami visiem servera lietotājiem.",
+        "none": "Pagaidām nav neviena globālā noslēpuma.",
+        "add": "Pievienot noslēpumu",
+        "save": "Saglabāt noslēpumu",
+        "show": "Noslēpumu saraksts",
+        "name": "Nosaukums",
+        "value": "Vērtība",
+        "deleted": "Globālais noslēpums dzēsts",
+        "created": "Globālais noslēpums izveidots",
+        "saved": "Globālais noslēpums saglabāts",
+
+        "images": {
+          "images": "Pieejami šādiem attēliem",
+          "desc": "Ar komatiem atdalīts saraksts ar attēliem, kam šis noslēpums būs pieejams, atstājot tukšu, tas būs pieejams visiem attēliem."
+        },
+        "events": {
+          "events": "Pieejams šādiem notikumiem",
+          "pr_warning": "Uzmanieties, jo šādā veidā tas būs pieejams visiem cilvēkiem, kas var iesūtīt izmaiņu pieprasījumu!"
+        }
+      }
+    }
+  },
+
   "user": {
     "oauth_error": "Neizdevās autorizēties, izmantojot, OAuth piegādātāju",
     "internal_error": "Notikusi sistēmas iekšējā kļūda",

web/src/components/admin/settings/AdminSecretsTab.vue

@@ -0,0 +1,143 @@
+<template>
+  <Panel>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+      <div class="ml-2">
+        <h1 class="text-xl text-color">{{ $t('admin.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-color-alt">
+          {{ $t('admin.settings.secrets.desc') }}
+          <DocsLink url="docs/usage/secrets" />
+        </p>
+        <Warning :text="$t('admin.settings.secrets.warning')" />
+      </div>
+      <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>
+
+    <SecretList
+      v-if="!selectedSecret"
+      v-model="secrets"
+      i18n-prefix="admin.settings.secrets."
+      :is-deleting="isDeleting"
+      @edit="editSecret"
+      @delete="deleteSecret"
+    />
+
+    <SecretEdit
+      v-else
+      v-model="selectedSecret"
+      i18n-prefix="admin.settings.secrets."
+      :is-saving="isSaving"
+      @save="createSecret"
+    />
+  </Panel>
+</template>
+
+<script lang="ts">
+import { cloneDeep } from 'lodash';
+import { computed, defineComponent, onMounted, 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 SecretEdit from '~/components/secrets/SecretEdit.vue';
+import SecretList from '~/components/secrets/SecretList.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { Secret, WebhookEvents } from '~/lib/api/types';
+
+const emptySecret = {
+  name: '',
+  value: '',
+  image: [],
+  event: [WebhookEvents.Push],
+};
+
+export default defineComponent({
+  name: 'AdminSecretsTab',
+
+  components: {
+    Button,
+    Panel,
+    DocsLink,
+    SecretList,
+    SecretEdit,
+    Warning,
+  },
+
+  setup() {
+    const apiClient = useApiClient();
+    const notifications = useNotifications();
+    const i18n = useI18n();
+
+    const secrets = ref<Secret[]>([]);
+    const selectedSecret = ref<Partial<Secret>>();
+    const isEditingSecret = computed(() => !!selectedSecret.value?.id);
+
+    async function loadSecrets() {
+      secrets.value = await apiClient.getGlobalSecretList();
+    }
+
+    const { doSubmit: createSecret, isLoading: isSaving } = useAsyncAction(async () => {
+      if (!selectedSecret.value) {
+        throw new Error("Unexpected: Can't get secret");
+      }
+
+      if (isEditingSecret.value) {
+        await apiClient.updateGlobalSecret(selectedSecret.value);
+      } else {
+        await apiClient.createGlobalSecret(selectedSecret.value);
+      }
+      notifications.notify({
+        title: i18n.t(isEditingSecret.value ? 'admin.settings.secrets.saved' : 'admin.settings.secrets.created'),
+        type: 'success',
+      });
+      selectedSecret.value = undefined;
+      await loadSecrets();
+    });
+
+    const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (_secret: Secret) => {
+      await apiClient.deleteGlobalSecret(_secret.name);
+      notifications.notify({ title: i18n.t('admin.settings.secrets.deleted'), type: 'success' });
+      await loadSecrets();
+    });
+
+    function editSecret(secret: Secret) {
+      selectedSecret.value = cloneDeep(secret);
+    }
+
+    function showAddSecret() {
+      selectedSecret.value = cloneDeep(emptySecret);
+    }
+
+    onMounted(async () => {
+      await loadSecrets();
+    });
+
+    return {
+      selectedSecret,
+      secrets,
+      isDeleting,
+      isSaving,
+      showAddSecret,
+      createSecret,
+      editSecret,
+      deleteSecret,
+    };
+  },
+});
+</script>

web/src/components/atomic/Warning.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="text-sm text-gray-600 font-bold rounded-md border border-solid p-2 border-yellow-500 bg-yellow-200 dark:bg-yellow-600 dark:border-yellow-800 dark:text-light-100"
+  >
+    ⚠ {{ text }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Warning',
+
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+});
+</script>

web/src/components/layout/header/Navbar.vue

@@ -26,6 +26,12 @@
         class="!text-white !dark:text-gray-500"
         @click="darkMode = !darkMode"
       />
+      <IconButton
+        v-if="user?.admin"
+        icon="settings"
+        class="!text-white !dark:text-gray-500"
+        :to="{ name: 'admin-settings' }"
+      />
       <router-link v-if="user" :to="{ name: 'user' }">
         <img v-if="user && user.avatar_url" class="w-8" :src="`${user.avatar_url}`" />
       </router-link>

web/src/components/org/settings/OrgSecretsTab.vue

@@ -0,0 +1,147 @@
+<template>
+  <Panel>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+      <div class="ml-2">
+        <h1 class="text-xl text-color">{{ $t('org.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-color-alt">
+          {{ $t('org.settings.secrets.desc') }}
+          <DocsLink url="docs/usage/secrets" />
+        </p>
+      </div>
+      <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>
+
+    <SecretList
+      v-if="!selectedSecret"
+      v-model="secrets"
+      i18n-prefix="org.settings.secrets."
+      :is-deleting="isDeleting"
+      @edit="editSecret"
+      @delete="deleteSecret"
+    />
+
+    <SecretEdit
+      v-else
+      v-model="selectedSecret"
+      i18n-prefix="org.settings.secrets."
+      :is-saving="isSaving"
+      @save="createSecret"
+    />
+  </Panel>
+</template>
+
+<script lang="ts">
+import { cloneDeep } from 'lodash';
+import { computed, defineComponent, inject, onMounted, 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 SecretEdit from '~/components/secrets/SecretEdit.vue';
+import SecretList from '~/components/secrets/SecretList.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { Org, Secret, WebhookEvents } from '~/lib/api/types';
+
+const emptySecret = {
+  name: '',
+  value: '',
+  image: [],
+  event: [WebhookEvents.Push],
+};
+
+export default defineComponent({
+  name: 'OrgSecretsTab',
+
+  components: {
+    Button,
+    Panel,
+    DocsLink,
+    SecretList,
+    SecretEdit,
+  },
+
+  setup() {
+    const apiClient = useApiClient();
+    const notifications = useNotifications();
+    const i18n = useI18n();
+
+    const org = inject<Ref<Org>>('org');
+    const secrets = ref<Secret[]>([]);
+    const selectedSecret = ref<Partial<Secret>>();
+    const isEditingSecret = computed(() => !!selectedSecret.value?.id);
+
+    async function loadSecrets() {
+      if (!org?.value) {
+        throw new Error("Unexpected: Can't load org");
+      }
+
+      secrets.value = await apiClient.getOrgSecretList(org.value.name);
+    }
+
+    const { doSubmit: createSecret, isLoading: isSaving } = useAsyncAction(async () => {
+      if (!org?.value) {
+        throw new Error("Unexpected: Can't load org");
+      }
+
+      if (!selectedSecret.value) {
+        throw new Error("Unexpected: Can't get secret");
+      }
+
+      if (isEditingSecret.value) {
+        await apiClient.updateOrgSecret(org.value.name, selectedSecret.value);
+      } else {
+        await apiClient.createOrgSecret(org.value.name, selectedSecret.value);
+      }
+      notifications.notify({
+        title: i18n.t(isEditingSecret.value ? 'org.settings.secrets.saved' : 'org.settings.secrets.created'),
+        type: 'success',
+      });
+      selectedSecret.value = undefined;
+      await loadSecrets();
+    });
+
+    const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (_secret: Secret) => {
+      if (!org?.value) {
+        throw new Error("Unexpected: Can't load org");
+      }
+
+      await apiClient.deleteOrgSecret(org.value.name, _secret.name);
+      notifications.notify({ title: i18n.t('org.settings.secrets.deleted'), type: 'success' });
+      await loadSecrets();
+    });
+
+    function editSecret(secret: Secret) {
+      selectedSecret.value = cloneDeep(secret);
+    }
+
+    function showAddSecret() {
+      selectedSecret.value = cloneDeep(emptySecret);
+    }
+
+    onMounted(async () => {
+      await loadSecrets();
+    });
+
+    return {
+      selectedSecret,
+      secrets,
+      isDeleting,
+      isSaving,
+      showAddSecret,
+      createSecret,
+      editSecret,
+      deleteSecret,
+    };
+  },
+});
+</script>

web/src/components/repo/settings/SecretsTab.vue

@@ -18,64 +18,22 @@
       <Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
     </div>
 
-    <div v-if="!selectedSecret" class="space-y-4 text-color">
-      <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
-        <span>{{ secret.name }}</span>
-        <div class="ml-auto">
-          <span
-            v-for="event in secret.event"
-            :key="event"
-            class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
-            >{{ event }}</span
-          >
-        </div>
-        <IconButton icon="edit" class="ml-2 w-8 h-8" @click="selectedSecret = secret" />
-        <IconButton
-          icon="trash"
-          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
-          :is-loading="isDeleting"
-          @click="deleteSecret(secret)"
-        />
-      </ListItem>
+    <SecretList
+      v-if="!selectedSecret"
+      v-model="secrets"
+      i18n-prefix="repo.settings.secrets."
+      :is-deleting="isDeleting"
+      @edit="editSecret"
+      @delete="deleteSecret"
+    />
 
-      <div v-if="secrets?.length === 0" class="ml-2">{{ $t('repo.settings.secrets.none') }}</div>
-    </div>
-
-    <div v-else class="space-y-4">
-      <form @submit.prevent="createSecret">
-        <InputField :label="$t('repo.settings.secrets.name')">
-          <TextField
-            v-model="selectedSecret.name"
-            :placeholder="$t('repo.settings.secrets.name')"
-            required
-            :disabled="isEditingSecret"
-          />
-        </InputField>
-
-        <InputField :label="$t('repo.settings.secrets.value')">
-          <TextField
-            v-model="selectedSecret.value"
-            :placeholder="$t('repo.settings.secrets.value')"
-            :lines="5"
-            required
-          />
-        </InputField>
-
-        <InputField :label="$t('repo.settings.secrets.images.images')">
-          <TextField v-model="images" :placeholder="$t('repo.settings.secrets.images.desc')" />
-        </InputField>
-
-        <InputField :label="$t('repo.settings.secrets.events.events')">
-          <CheckboxesField v-model="selectedSecret.event" :options="secretEventsOptions" />
-        </InputField>
-
-        <Button
-          :is-loading="isSaving"
-          type="submit"
-          :text="isEditingSecret ? $t('repo.settings.secrets.save') : $t('repo.settings.secrets.add')"
-        />
-      </form>
-    </div>
+    <SecretEdit
+      v-else
+      v-model="selectedSecret"
+      i18n-prefix="repo.settings.secrets."
+      :is-saving="isSaving"
+      @save="createSecret"
+    />
   </Panel>
 </template>
 
@@ -86,13 +44,9 @@ 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 CheckboxesField from '~/components/form/CheckboxesField.vue';
-import { CheckboxOption } from '~/components/form/form.types';
-import InputField from '~/components/form/InputField.vue';
-import TextField from '~/components/form/TextField.vue';
 import Panel from '~/components/layout/Panel.vue';
+import SecretEdit from '~/components/secrets/SecretEdit.vue';
+import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
@@ -111,12 +65,9 @@ export default defineComponent({
   components: {
     Button,
     Panel,
-    ListItem,
-    IconButton,
-    InputField,
-    TextField,
     DocsLink,
-    CheckboxesField,
+    SecretList,
+    SecretEdit,
   },
 
   setup() {
@@ -125,22 +76,9 @@ export default defineComponent({
     const i18n = useI18n();
 
     const repo = inject<Ref<Repo>>('repo');
-    const secrets = ref<Secret[]>();
+    const secrets = ref<Secret[]>([]);
     const selectedSecret = ref<Partial<Secret>>();
     const isEditingSecret = computed(() => !!selectedSecret.value?.id);
-    const images = computed<string>({
-      get() {
-        return selectedSecret.value?.image?.join(',') || '';
-      },
-      set(value) {
-        if (selectedSecret.value) {
-          selectedSecret.value.image = value
-            .split(',')
-            .map((s) => s.trim())
-            .filter((s) => s !== '');
-        }
-      },
-    });
 
     async function loadSecrets() {
       if (!repo?.value) {
@@ -182,6 +120,10 @@ export default defineComponent({
       await loadSecrets();
     });
 
+    function editSecret(secret: Secret) {
+      selectedSecret.value = cloneDeep(secret);
+    }
+
     function showAddSecret() {
       selectedSecret.value = cloneDeep(emptySecret);
     }
@@ -190,27 +132,14 @@ export default defineComponent({
       await loadSecrets();
     });
 
-    const secretEventsOptions: CheckboxOption[] = [
-      { value: WebhookEvents.Push, text: i18n.t('repo.build.event.push') },
-      { value: WebhookEvents.Tag, text: i18n.t('repo.build.event.tag') },
-      {
-        value: WebhookEvents.PullRequest,
-        text: i18n.t('repo.build.event.pr'),
-        description: i18n.t('repo.settings.secrets.events.pr_warning'),
-      },
-      { value: WebhookEvents.Deploy, text: i18n.t('repo.build.event.deploy') },
-    ];
-
     return {
-      secretEventsOptions,
       selectedSecret,
       secrets,
-      images,
-      isEditingSecret,
-      isSaving,
       isDeleting,
+      isSaving,
       showAddSecret,
       createSecret,
+      editSecret,
       deleteSecret,
     };
   },

web/src/components/secrets/SecretEdit.vue

@@ -0,0 +1,132 @@
+<template>
+  <div v-if="innerValue" class="space-y-4">
+    <form @submit.prevent="save">
+      <InputField :label="$t(i18nPrefix + 'name')">
+        <TextField
+          v-model="innerValue.name"
+          :placeholder="$t(i18nPrefix + 'name')"
+          required
+          :disabled="isEditingSecret"
+        />
+      </InputField>
+
+      <InputField :label="$t(i18nPrefix + 'value')">
+        <TextField v-model="innerValue.value" :placeholder="$t(i18nPrefix + 'value')" :lines="5" required />
+      </InputField>
+
+      <InputField :label="$t(i18nPrefix + 'images.images')">
+        <TextField v-model="images" :placeholder="$t(i18nPrefix + 'images.desc')" />
+      </InputField>
+
+      <InputField :label="$t(i18nPrefix + 'events.events')">
+        <CheckboxesField v-model="innerValue.event" :options="secretEventsOptions" />
+      </InputField>
+
+      <Button
+        :is-loading="isSaving"
+        type="submit"
+        :text="isEditingSecret ? $t(i18nPrefix + 'save') : $t(i18nPrefix + 'add')"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import CheckboxesField from '~/components/form/CheckboxesField.vue';
+import { CheckboxOption } from '~/components/form/form.types';
+import InputField from '~/components/form/InputField.vue';
+import TextField from '~/components/form/TextField.vue';
+import { Secret, WebhookEvents } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'SecretEdit',
+
+  components: {
+    Button,
+    InputField,
+    TextField,
+    CheckboxesField,
+  },
+
+  props: {
+    // used by toRef
+    // eslint-disable-next-line vue/no-unused-properties
+    modelValue: {
+      type: Object as PropType<Partial<Secret>>,
+      default: undefined,
+    },
+
+    isSaving: {
+      type: Boolean,
+    },
+
+    i18nPrefix: {
+      type: String,
+      required: true,
+    },
+  },
+
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    'update:modelValue': (_value: Partial<Secret> | undefined): boolean => true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    save: (_value: Partial<Secret>): boolean => true,
+  },
+
+  setup: (props, ctx) => {
+    const i18n = useI18n();
+
+    const modelValue = toRef(props, 'modelValue');
+    const innerValue = computed({
+      get: () => modelValue.value,
+      set: (value) => {
+        ctx.emit('update:modelValue', value);
+      },
+    });
+    const images = computed<string>({
+      get() {
+        return innerValue.value?.image?.join(',') || '';
+      },
+      set(value) {
+        if (innerValue.value) {
+          innerValue.value.image = value
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => s !== '');
+        }
+      },
+    });
+    const isEditingSecret = computed(() => !!innerValue.value?.id);
+
+    const secretEventsOptions: CheckboxOption[] = [
+      { value: WebhookEvents.Push, text: i18n.t('repo.build.event.push') },
+      { value: WebhookEvents.Tag, text: i18n.t('repo.build.event.tag') },
+      {
+        value: WebhookEvents.PullRequest,
+        text: i18n.t('repo.build.event.pr'),
+        description: i18n.t('repo.settings.secrets.events.pr_warning'),
+      },
+      { value: WebhookEvents.Deploy, text: i18n.t('repo.build.event.deploy') },
+    ];
+
+    function save() {
+      if (!innerValue.value) {
+        return;
+      }
+      ctx.emit('save', innerValue.value);
+    }
+
+    return {
+      innerValue,
+      isEditingSecret,
+      secretEventsOptions,
+      images,
+      save,
+    };
+  },
+});
+</script>

web/src/components/secrets/SecretList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="space-y-4 text-color">
+    <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
+      <span>{{ secret.name }}</span>
+      <div class="ml-auto">
+        <span
+          v-for="event in secret.event"
+          :key="event"
+          class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
+        >
+          {{ event }}
+        </span>
+      </div>
+      <IconButton icon="edit" class="ml-2 w-8 h-8" @click="editSecret(secret)" />
+      <IconButton
+        icon="trash"
+        class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+        :is-loading="isDeleting"
+        @click="deleteSecret(secret)"
+      />
+    </ListItem>
+
+    <div v-if="secrets?.length === 0" class="ml-2">{{ $t(i18nPrefix + 'none') }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRef } from 'vue';
+
+import IconButton from '~/components/atomic/IconButton.vue';
+import ListItem from '~/components/atomic/ListItem.vue';
+import { Secret } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'SecretList',
+
+  components: {
+    ListItem,
+    IconButton,
+  },
+
+  props: {
+    // used by toRef
+    // eslint-disable-next-line vue/no-unused-properties
+    modelValue: {
+      type: Array as PropType<Secret[]>,
+      required: true,
+    },
+
+    isDeleting: {
+      type: Boolean,
+      required: true,
+    },
+
+    i18nPrefix: {
+      type: String,
+      required: true,
+    },
+  },
+
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    edit: (secret: Secret): boolean => true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    delete: (secret: Secret): boolean => true,
+  },
+
+  setup(props, ctx) {
+    const secrets = toRef(props, 'modelValue');
+
+    function editSecret(secret: Secret) {
+      ctx.emit('edit', secret);
+    }
+
+    function deleteSecret(secret: Secret) {
+      ctx.emit('delete', secret);
+    }
+
+    return { secrets, editSecret, deleteSecret };
+  },
+});
+</script>

web/src/lib/api/index.ts

@@ -5,6 +5,7 @@ import {
   BuildFeed,
   BuildLog,
   BuildProc,
+  OrgPermissions,
   Registry,
   Repo,
   RepoPermissions,
@@ -135,6 +136,42 @@ export default class WoodpeckerClient extends ApiClient {
     return this._delete(`/api/repos/${owner}/${repo}/registry/${registryAddress}`);
   }
 
+  getOrgPermissions(owner: string): Promise<OrgPermissions> {
+    return this._get(`/api/orgs/${owner}/permissions`) as Promise<OrgPermissions>;
+  }
+
+  getOrgSecretList(owner: string): Promise<Secret[]> {
+    return this._get(`/api/orgs/${owner}/secrets`) as Promise<Secret[]>;
+  }
+
+  createOrgSecret(owner: string, secret: Partial<Secret>): Promise<unknown> {
+    return this._post(`/api/orgs/${owner}/secrets`, secret);
+  }
+
+  updateOrgSecret(owner: string, secret: Partial<Secret>): Promise<unknown> {
+    return this._patch(`/api/orgs/${owner}/secrets/${secret.name}`, secret);
+  }
+
+  deleteOrgSecret(owner: string, secretName: string): Promise<unknown> {
+    return this._delete(`/api/orgs/${owner}/secrets/${secretName}`);
+  }
+
+  getGlobalSecretList(): Promise<Secret[]> {
+    return this._get(`/api/secrets`) as Promise<Secret[]>;
+  }
+
+  createGlobalSecret(secret: Partial<Secret>): Promise<unknown> {
+    return this._post(`/api/secrets`, secret);
+  }
+
+  updateGlobalSecret(secret: Partial<Secret>): Promise<unknown> {
+    return this._patch(`/api/secrets/${secret.name}`, secret);
+  }
+
+  deleteGlobalSecret(secretName: string): Promise<unknown> {
+    return this._delete(`/api/secrets/${secretName}`);
+  }
+
   getSelf(): Promise<unknown> {
     return this._get('/api/user');
   }

web/src/lib/api/types/index.ts

@@ -1,5 +1,6 @@
 export * from './build';
 export * from './buildConfig';
+export * from './org';
 export * from './registry';
 export * from './repo';
 export * from './secret';

web/src/lib/api/types/org.ts

@@ -0,0 +1,10 @@
+// A version control organization.
+export type Org = {
+  // The name of the organization.
+  name: string;
+};
+
+export type OrgPermissions = {
+  member: boolean;
+  admin: boolean;
+};

web/src/router.ts

@@ -28,6 +28,25 @@ const routes: RouteRecordRaw[] = [
     component: (): Component => import('~/views/ReposOwner.vue'),
     props: true,
   },
+  {
+    path: '/org/:repoOwner',
+    component: (): Component => import('~/views/org/OrgWrapper.vue'),
+    props: true,
+    children: [
+      {
+        path: '',
+        name: 'org',
+        redirect: (route) => ({ name: 'repos-owner', params: route.params }),
+      },
+      {
+        path: 'settings',
+        name: 'org-settings',
+        component: (): Component => import('~/views/org/OrgSettings.vue'),
+        meta: { authentication: 'required' },
+        props: true,
+      },
+    ],
+  },
   {
     path: '/:repoOwner/:repoName',
     name: 'repo-wrapper',
@@ -99,6 +118,13 @@ const routes: RouteRecordRaw[] = [
     meta: { authentication: 'required' },
     props: true,
   },
+  {
+    path: '/admin/settings',
+    name: 'admin-settings',
+    component: (): Component => import('~/views/admin/AdminSettings.vue'),
+    meta: { authentication: 'required' },
+    props: true,
+  },
   {
     path: '/user',
     name: 'user',

web/src/views/ReposOwner.vue

@@ -3,6 +3,7 @@
     <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
       <h1 class="text-xl text-color">{{ repoOwner }}</h1>
       <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
+      <IconButton v-if="orgPermissions.admin" icon="settings" :to="{ name: 'org-settings' }" class="ml-auto" />
     </div>
 
     <div class="space-y-4">
@@ -24,10 +25,13 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
 
+import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import TextField from '~/components/form/TextField.vue';
 import FluidContainer from '~/components/layout/FluidContainer.vue';
+import useApiClient from '~/compositions/useApiClient';
 import { useRepoSearch } from '~/compositions/useRepoSearch';
+import { OrgPermissions } from '~/lib/api/types';
 import RepoStore from '~/store/repos';
 
 export default defineComponent({
@@ -37,6 +41,7 @@ export default defineComponent({
     FluidContainer,
     ListItem,
     TextField,
+    IconButton,
   },
 
   props: {
@@ -47,18 +52,21 @@ export default defineComponent({
   },
 
   setup(props) {
+    const apiClient = useApiClient();
     const repoStore = RepoStore();
     // TODO: filter server side
     const repos = computed(() => Object.values(repoStore.repos).filter((v) => v.owner === props.repoOwner));
     const search = ref('');
+    const orgPermissions = ref<OrgPermissions>({ member: false, admin: false });
 
     const { searchedRepos } = useRepoSearch(repos, search);
 
     onMounted(async () => {
       await repoStore.loadRepos();
+      orgPermissions.value = await apiClient.getOrgPermissions(props.repoOwner);
     });
 
-    return { searchedRepos, search };
+    return { searchedRepos, search, orgPermissions };
   },
 });
 </script>

web/src/views/admin/AdminSettings.vue

@@ -0,0 +1,59 @@
+<template>
+  <FluidContainer>
+    <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
+      <IconButton icon="back" @click="goBack" />
+      <h1 class="text-xl ml-2 text-color">{{ $t('admin.settings.settings') }}</h1>
+    </div>
+
+    <Tabs>
+      <Tab id="secrets" :title="$t('admin.settings.secrets.secrets')">
+        <AdminSecretsTab />
+      </Tab>
+    </Tabs>
+  </FluidContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import AdminSecretsTab from '~/components/admin/settings/AdminSecretsTab.vue';
+import IconButton from '~/components/atomic/IconButton.vue';
+import FluidContainer from '~/components/layout/FluidContainer.vue';
+import Tab from '~/components/tabs/Tab.vue';
+import Tabs from '~/components/tabs/Tabs.vue';
+import useAuthentication from '~/compositions/useAuthentication';
+import useNotifications from '~/compositions/useNotifications';
+import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
+
+export default defineComponent({
+  name: 'AdminSettings',
+
+  components: {
+    FluidContainer,
+    IconButton,
+    Tabs,
+    Tab,
+    AdminSecretsTab,
+  },
+
+  setup() {
+    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' });
+      }
+    });
+
+    return {
+      goBack: useRouteBackOrDefault({ name: 'home' }),
+    };
+  },
+});
+</script>

web/src/views/org/OrgSettings.vue

@@ -0,0 +1,63 @@
+<template>
+  <FluidContainer>
+    <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
+      <IconButton icon="back" @click="goBack" />
+      <h1 class="text-xl ml-2 text-color">{{ $t('org.settings.settings') }}</h1>
+    </div>
+
+    <Tabs>
+      <Tab id="secrets" :title="$t('org.settings.secrets.secrets')">
+        <OrgSecretsTab />
+      </Tab>
+    </Tabs>
+  </FluidContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import IconButton from '~/components/atomic/IconButton.vue';
+import FluidContainer from '~/components/layout/FluidContainer.vue';
+import OrgSecretsTab from '~/components/org/settings/OrgSecretsTab.vue';
+import Tab from '~/components/tabs/Tab.vue';
+import Tabs from '~/components/tabs/Tabs.vue';
+import useNotifications from '~/compositions/useNotifications';
+import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
+import { OrgPermissions } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'OrgSettings',
+
+  components: {
+    FluidContainer,
+    IconButton,
+    Tabs,
+    Tab,
+    OrgSecretsTab,
+  },
+
+  setup() {
+    const notifications = useNotifications();
+    const router = useRouter();
+    const i18n = useI18n();
+
+    const orgPermissions = inject<Ref<OrgPermissions>>('org-permissions');
+    if (!orgPermissions) {
+      throw new Error('Unexpected: "orgPermissions" should be provided at this place');
+    }
+
+    onMounted(async () => {
+      if (!orgPermissions.value.admin) {
+        notifications.notify({ type: 'error', title: i18n.t('org.settings.not_allowed') });
+        await router.replace({ name: 'home' });
+      }
+    });
+
+    return {
+      goBack: useRouteBackOrDefault({ name: 'repos-owner' }),
+    };
+  },
+});
+</script>

web/src/views/org/OrgWrapper.vue

@@ -0,0 +1,61 @@
+<template>
+  <FluidContainer v-if="org && orgPermissions && $route.meta.orgHeader">
+    <div class="flex flex-wrap border-b items-center pb-4 mb-4 dark:border-gray-600 justify-center">
+      <h1 class="text-xl text-color w-full md:w-auto text-center mb-4 md:mb-0">
+        {{ org.name }}
+      </h1>
+      <IconButton v-if="orgPermissions.admin" class="ml-2" :to="{ name: 'repo-settings' }" icon="settings" />
+    </div>
+
+    <router-view />
+  </FluidContainer>
+  <router-view v-else-if="org && orgPermissions" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, provide, ref, toRef, watch } from 'vue';
+
+import IconButton from '~/components/atomic/IconButton.vue';
+import FluidContainer from '~/components/layout/FluidContainer.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { Org, OrgPermissions } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'OrgWrapper',
+
+  components: { FluidContainer, IconButton },
+
+  props: {
+    // used by toRef
+    // eslint-disable-next-line vue/no-unused-properties
+    repoOwner: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const repoOwner = toRef(props, 'repoOwner');
+    const apiClient = useApiClient();
+    const org = computed<Org>(() => ({ name: repoOwner.value }));
+
+    const orgPermissions = ref<OrgPermissions>();
+    provide('org', org);
+    provide('org-permissions', orgPermissions);
+
+    async function load() {
+      orgPermissions.value = await apiClient.getOrgPermissions(repoOwner.value);
+    }
+
+    onMounted(() => {
+      load();
+    });
+
+    watch([repoOwner], () => {
+      load();
+    });
+
+    return { org, orgPermissions };
+  },
+});
+</script>