mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-11-25 19:31:05 +00:00
Create settings-panel vue component and use InputFields (#2177)
Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
qwerty287
GitHub
parent
2a157cfe7b
commit
06d1f3c92e
16 changed files with 153 additions and 218 deletions
1
web/components.d.ts
vendored
1
web/components.d.ts
vendored
|
|
@ -98,6 +98,7 @@ declare module '@vue/runtime-core' {
|
|||
SecretList: typeof import('./src/components/secrets/SecretList.vue')['default']
|
||||
SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
|
||||
SelectField: typeof import('./src/components/form/SelectField.vue')['default']
|
||||
Settings: typeof import('./src/components/layout/Settings.vue')['default']
|
||||
Tab: typeof import('./src/components/layout/scaffold/Tab.vue')['default']
|
||||
Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
|
||||
TextField: typeof import('./src/components/form/TextField.vue')['default']
|
||||
|
|
|
|||
|
|
@ -1,19 +1,14 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.agents.agents') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.agents.desc') }}</p>
|
||||
</div>
|
||||
<Settings :title="$t('admin.settings.agents.agents')" :desc="$t('admin.settings.agents.desc')">
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedAgent"
|
||||
class="ml-auto"
|
||||
:text="$t('admin.settings.agents.show')"
|
||||
start-icon="back"
|
||||
@click="selectedAgent = undefined"
|
||||
/>
|
||||
<Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
|
||||
</div>
|
||||
<Button v-else :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
|
||||
</template>
|
||||
|
||||
<div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
|
||||
<ListItem
|
||||
|
|
@ -122,7 +117,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -137,7 +132,7 @@ import ListItem from '~/components/atomic/ListItem.vue';
|
|||
import Checkbox from '~/components/form/Checkbox.vue';
|
||||
import InputField from '~/components/form/InputField.vue';
|
||||
import TextField from '~/components/form/TextField.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
|
|
|
|||
|
|
@ -1,35 +1,25 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.queue.queue') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.queue.desc') }}</p>
|
||||
<Settings :title="$t('admin.settings.queue.queue')" :desc="$t('admin.settings.queue.desc')">
|
||||
<template #titleActions>
|
||||
<div v-if="queueInfo">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
v-if="queueInfo.paused"
|
||||
:text="$t('admin.settings.queue.resume')"
|
||||
start-icon="play"
|
||||
@click="resumeQueue"
|
||||
/>
|
||||
<Button v-else :text="$t('admin.settings.queue.pause')" start-icon="pause" @click="pauseQueue" />
|
||||
<Icon
|
||||
:name="queueInfo.paused ? 'pause' : 'play'"
|
||||
:class="{
|
||||
'text-wp-state-error-100': queueInfo.paused,
|
||||
'text-wp-state-ok-100': !queueInfo.paused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
v-if="queueInfo.paused"
|
||||
class="ml-auto"
|
||||
:text="$t('admin.settings.queue.resume')"
|
||||
start-icon="play"
|
||||
@click="resumeQueue"
|
||||
/>
|
||||
<Button
|
||||
v-else
|
||||
class="ml-auto"
|
||||
:text="$t('admin.settings.queue.pause')"
|
||||
start-icon="pause"
|
||||
@click="pauseQueue"
|
||||
/>
|
||||
<Icon
|
||||
:name="queueInfo.paused ? 'pause' : 'play'"
|
||||
:class="{
|
||||
'text-wp-state-error-100': queueInfo.paused,
|
||||
'text-wp-state-ok-100': !queueInfo.paused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<AdminQueueStats :stats="queueInfo?.stats" />
|
||||
|
|
@ -81,7 +71,7 @@
|
|||
</ListItem>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -92,7 +82,7 @@ import Badge from '~/components/atomic/Badge.vue';
|
|||
import Button from '~/components/atomic/Button.vue';
|
||||
import Icon from '~/components/atomic/Icon.vue';
|
||||
import ListItem from '~/components/atomic/ListItem.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
import { QueueInfo } from '~/lib/api/types/queue';
|
||||
|
|
|
|||
|
|
@ -1,29 +1,19 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.secrets.secrets') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">
|
||||
{{ $t('admin.settings.secrets.desc') }}
|
||||
<DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" />
|
||||
</p>
|
||||
<Warning :text="$t('admin.settings.secrets.warning')" />
|
||||
</div>
|
||||
<Settings
|
||||
:title="$t('admin.settings.secrets.secrets')"
|
||||
:desc="$t('admin.settings.secrets.desc')"
|
||||
docs-url="docs/usage/secrets"
|
||||
:warning="$t('admin.settings.secrets.warning')"
|
||||
>
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedSecret"
|
||||
class="ml-auto"
|
||||
:text="$t('admin.settings.secrets.show')"
|
||||
start-icon="back"
|
||||
@click="selectedSecret = undefined"
|
||||
/>
|
||||
<Button
|
||||
v-else
|
||||
class="ml-auto"
|
||||
:text="$t('admin.settings.secrets.add')"
|
||||
start-icon="plus"
|
||||
@click="showAddSecret"
|
||||
/>
|
||||
</div>
|
||||
<Button v-else :text="$t('admin.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
|
||||
</template>
|
||||
|
||||
<SecretList
|
||||
v-if="!selectedSecret"
|
||||
|
|
@ -42,7 +32,7 @@
|
|||
@save="createSecret"
|
||||
@cancel="selectedSecret = undefined"
|
||||
/>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -51,9 +41,7 @@ import { computed, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import DocsLink from '~/components/atomic/DocsLink.vue';
|
||||
import Warning from '~/components/atomic/Warning.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import SecretEdit from '~/components/secrets/SecretEdit.vue';
|
||||
import SecretList from '~/components/secrets/SecretList.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
|
|
|
|||
|
|
@ -1,19 +1,14 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.users.users') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.users.desc') }}</p>
|
||||
</div>
|
||||
<Settings :title="$t('admin.settings.users.users')" :desc="$t('admin.settings.users.desc')">
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedUser"
|
||||
class="ml-auto"
|
||||
:text="$t('admin.settings.users.show')"
|
||||
start-icon="back"
|
||||
@click="selectedUser = undefined"
|
||||
/>
|
||||
<Button v-else class="ml-auto" :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
|
||||
</div>
|
||||
<Button v-else :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
|
||||
</template>
|
||||
|
||||
<div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
|
||||
<ListItem
|
||||
|
|
@ -83,7 +78,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -97,7 +92,7 @@ import IconButton from '~/components/atomic/IconButton.vue';
|
|||
import ListItem from '~/components/atomic/ListItem.vue';
|
||||
import InputField from '~/components/form/InputField.vue';
|
||||
import TextField from '~/components/form/TextField.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<div class="flex flex-col mt-2 mb-4">
|
||||
<div class="flex items-center text-wp-text-100 font-bold mb-2">
|
||||
<label v-bind="$attrs">{{ label }}</label>
|
||||
<div class="flex items-center mb-2">
|
||||
<label class="text-wp-text-100 font-bold" v-bind="$attrs">{{ label }}</label>
|
||||
<DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
|
||||
<slot v-else-if="$slots['titleActions']" name="titleActions" />
|
||||
</div>
|
||||
<slot />
|
||||
<div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
|
||||
|
|
|
|||
33
web/src/components/layout/Settings.vue
Normal file
33
web/src/components/layout/Settings.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ title }}</h1>
|
||||
<p v-if="desc" class="text-sm text-wp-text-alt-100">
|
||||
{{ desc }}
|
||||
<DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
|
||||
</p>
|
||||
<Warning v-if="warning" class="mt-1" :text="warning" />
|
||||
</div>
|
||||
|
||||
<div class="ml-auto">
|
||||
<slot v-if="$slots.titleActions" name="titleActions" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DocsLink from '~/components/atomic/DocsLink.vue';
|
||||
import Warning from '~/components/atomic/Warning.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
desc?: string;
|
||||
docsUrl?: string;
|
||||
warning?: string;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -1,22 +1,18 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('org.settings.secrets.secrets') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">
|
||||
{{ $t('org.settings.secrets.desc') }}
|
||||
<DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
|
||||
</p>
|
||||
</div>
|
||||
<Settings
|
||||
:title="$t('org.settings.secrets.secrets')"
|
||||
:desc="$t('org.settings.secrets.desc')"
|
||||
docs-url="docs/usage/secrets"
|
||||
>
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedSecret"
|
||||
class="ml-auto"
|
||||
:text="$t('org.settings.secrets.show')"
|
||||
start-icon="back"
|
||||
@click="selectedSecret = undefined"
|
||||
/>
|
||||
<Button v-else class="ml-auto" :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
|
||||
</div>
|
||||
<Button v-else :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
|
||||
</template>
|
||||
|
||||
<SecretList
|
||||
v-if="!selectedSecret"
|
||||
|
|
@ -35,7 +31,7 @@
|
|||
@save="createSecret"
|
||||
@cancel="selectedSecret = undefined"
|
||||
/>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import DocsLink from '~/components/atomic/DocsLink.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import SecretEdit from '~/components/secrets/SecretEdit.vue';
|
||||
import SecretList from '~/components/secrets/SecretList.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.actions.actions') }}</h1>
|
||||
</div>
|
||||
|
||||
<Settings :title="$t('repo.settings.actions.actions')">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<Button
|
||||
class="mr-4 my-1"
|
||||
|
|
@ -42,7 +38,7 @@
|
|||
@click="deleteRepo"
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -51,7 +47,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import { useRouter } from 'vue-router';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.badge.badge') }}</h1>
|
||||
<a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
|
||||
<Settings :title="$t('repo.settings.badge.badge')">
|
||||
<template #titleActions>
|
||||
<a v-if="badgeUrl" :href="badgeUrl" target="_blank">
|
||||
<img :src="badgeUrl" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<InputField :label="$t('repo.settings.badge.type')">
|
||||
<SelectField
|
||||
|
|
@ -36,7 +35,7 @@
|
|||
<pre class="code-box">{{ badgeContent }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -46,7 +45,7 @@ import { computed, inject, onMounted, Ref, ref, watch } from 'vue';
|
|||
import { SelectOption } from '~/components/form/form.types';
|
||||
import InputField from '~/components/form/InputField.vue';
|
||||
import SelectField from '~/components/form/SelectField.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import useConfig from '~/compositions/useConfig';
|
||||
import { usePaginate } from '~/compositions/usePaginate';
|
||||
|
|
|
|||
|
|
@ -1,28 +1,14 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.crons.crons') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">
|
||||
{{ $t('repo.settings.crons.desc') }}
|
||||
<DocsLink :topic="$t('repo.settings.crons.crons')" url="docs/usage/crons" />
|
||||
</p>
|
||||
</div>
|
||||
<Settings :title="$t('repo.settings.crons.crons')" :desc="$t('repo.settings.crons.desc')" docs-url="docs/usage/crons">
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedCron"
|
||||
class="ml-auto"
|
||||
start-icon="back"
|
||||
:text="$t('repo.settings.crons.show')"
|
||||
@click="selectedCron = undefined"
|
||||
/>
|
||||
<Button
|
||||
v-else
|
||||
class="ml-auto"
|
||||
start-icon="plus"
|
||||
:text="$t('repo.settings.crons.add')"
|
||||
@click="selectedCron = {}"
|
||||
/>
|
||||
</div>
|
||||
<Button v-else start-icon="plus" :text="$t('repo.settings.crons.add')" @click="selectedCron = {}" />
|
||||
</template>
|
||||
|
||||
<div v-if="!selectedCron" class="space-y-4 text-wp-text-100">
|
||||
<ListItem
|
||||
|
|
@ -89,7 +75,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -97,12 +83,11 @@ import { computed, inject, Ref, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import DocsLink from '~/components/atomic/DocsLink.vue';
|
||||
import IconButton from '~/components/atomic/IconButton.vue';
|
||||
import ListItem from '~/components/atomic/ListItem.vue';
|
||||
import InputField from '~/components/form/InputField.vue';
|
||||
import TextField from '~/components/form/TextField.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import { useDate } from '~/compositions/useDate';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.general.general') }}</h1>
|
||||
</div>
|
||||
|
||||
<Settings :title="$t('repo.settings.general.general')">
|
||||
<form v-if="repoSettings" class="flex flex-col" @submit.prevent="saveRepoSettings">
|
||||
<InputField
|
||||
docs-url="docs/usage/project-settings#pipeline-path"
|
||||
|
|
@ -85,7 +81,7 @@
|
|||
:text="$t('repo.settings.general.save')"
|
||||
/>
|
||||
</form>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -100,7 +96,7 @@ import InputField from '~/components/form/InputField.vue';
|
|||
import NumberField from '~/components/form/NumberField.vue';
|
||||
import RadioField from '~/components/form/RadioField.vue';
|
||||
import TextField from '~/components/form/TextField.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useAuthentication from '~/compositions/useAuthentication';
|
||||
|
|
|
|||
|
|
@ -1,28 +1,18 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.registries.creds') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">
|
||||
{{ $t('repo.settings.registries.desc') }}
|
||||
<DocsLink :topic="$t('repo.settings.registries.creds')" url="docs/usage/registries" />
|
||||
</p>
|
||||
</div>
|
||||
<Settings
|
||||
:title="$t('repo.settings.registries.creds')"
|
||||
:desc="$t('repo.settings.registries.desc')"
|
||||
docs-url="docs/usage/registries"
|
||||
>
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedRegistry"
|
||||
class="ml-auto"
|
||||
start-icon="back"
|
||||
:text="$t('repo.settings.registries.show')"
|
||||
@click="selectedRegistry = undefined"
|
||||
/>
|
||||
<Button
|
||||
v-else
|
||||
class="ml-auto"
|
||||
start-icon="plus"
|
||||
:text="$t('repo.settings.registries.add')"
|
||||
@click="selectedRegistry = {}"
|
||||
/>
|
||||
</div>
|
||||
<Button v-else start-icon="plus" :text="$t('repo.settings.registries.add')" @click="selectedRegistry = {}" />
|
||||
</template>
|
||||
|
||||
<div v-if="!selectedRegistry" class="space-y-4 text-wp-text-100">
|
||||
<ListItem
|
||||
|
|
@ -80,7 +70,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -88,12 +78,11 @@ import { computed, inject, Ref, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import DocsLink from '~/components/atomic/DocsLink.vue';
|
||||
import IconButton from '~/components/atomic/IconButton.vue';
|
||||
import ListItem from '~/components/atomic/ListItem.vue';
|
||||
import InputField from '~/components/form/InputField.vue';
|
||||
import TextField from '~/components/form/TextField.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.secrets.secrets') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">
|
||||
{{ $t('repo.settings.secrets.desc') }}
|
||||
<DocsLink :topic="$t('repo.settings.secrets.secrets')" url="docs/usage/secrets" />
|
||||
</p>
|
||||
</div>
|
||||
<Settings
|
||||
:title="$t('repo.settings.secrets.secrets')"
|
||||
:desc="$t('repo.settings.secrets.desc')"
|
||||
docs-url="docs/usage/secrets"
|
||||
>
|
||||
<template #titleActions>
|
||||
<Button
|
||||
v-if="selectedSecret"
|
||||
class="ml-auto"
|
||||
:text="$t('repo.settings.secrets.show')"
|
||||
start-icon="back"
|
||||
@click="selectedSecret = undefined"
|
||||
/>
|
||||
<Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
|
||||
</div>
|
||||
<Button v-else :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
|
||||
</template>
|
||||
|
||||
<SecretList
|
||||
v-if="!selectedSecret"
|
||||
|
|
@ -35,7 +31,7 @@
|
|||
@save="createSecret"
|
||||
@cancel="selectedSecret = undefined"
|
||||
/>
|
||||
</Panel>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import DocsLink from '~/components/atomic/DocsLink.vue';
|
||||
import Panel from '~/components/layout/Panel.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import SecretEdit from '~/components/secrets/SecretEdit.vue';
|
||||
import SecretList from '~/components/secrets/SecretList.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
|
|
|
|||
|
|
@ -1,34 +1,18 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<div class="ml-2">
|
||||
<h1 class="text-xl text-wp-text-100">{{ $t('user.settings.api.api') }}</h1>
|
||||
<p class="text-sm text-wp-text-alt-100">{{ $t('user.settings.api.desc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 mb-4">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="flex flex-row items-center text-wp-text-100 font-bold">
|
||||
<label>{{ $t('user.settings.api.token') }}</label>
|
||||
</div>
|
||||
<Settings :title="$t('user.settings.api.api')" :desc="$t('user.settings.api.desc')">
|
||||
<InputField :label="$t('user.settings.api.token')">
|
||||
<template #titleActions>
|
||||
<Button class="ml-auto" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
|
||||
</div>
|
||||
</template>
|
||||
<pre class="code-box">{{ token }}</pre>
|
||||
</div>
|
||||
</InputField>
|
||||
|
||||
<div class="mt-2 mb-4">
|
||||
<div class="flex items-center text-wp-text-100 font-bold mb-2">
|
||||
<label>{{ $t('user.settings.api.shell_setup') }}</label>
|
||||
</div>
|
||||
<InputField :label="$t('user.settings.api.shell_setup')">
|
||||
<pre class="code-box">{{ usageWithShell }}</pre>
|
||||
</div>
|
||||
</InputField>
|
||||
|
||||
<div class="mt-2 mb-4">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="flex items-center text-wp-text-100 font-bold">
|
||||
<label>{{ $t('user.settings.api.api_usage') }}</label>
|
||||
</div>
|
||||
<InputField :label="$t('user.settings.api.api_usage')">
|
||||
<template #titleActions>
|
||||
<a
|
||||
v-if="enableSwagger"
|
||||
:href="`${address}/swagger/index.html`"
|
||||
|
|
@ -36,22 +20,19 @@
|
|||
class="ml-4 text-wp-link-100 hover:text-wp-link-200"
|
||||
>{{ $t('user.settings.api.swagger_ui') }}</a
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<pre class="code-box">{{ usageWithCurl }}</pre>
|
||||
</div>
|
||||
</InputField>
|
||||
|
||||
<div class="mt-2 mb-4">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="flex items-center text-wp-text-100 font-bold">
|
||||
<label>{{ $t('user.settings.api.cli_usage') }}</label>
|
||||
</div>
|
||||
<InputField :label="$t('user.settings.api.cli_usage')">
|
||||
<template #titleActions>
|
||||
<a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
|
||||
$t('user.settings.api.dl_cli')
|
||||
}}</a>
|
||||
</div>
|
||||
</template>
|
||||
<pre class="code-box">{{ usageWithCli }}</pre>
|
||||
</div>
|
||||
</Panel>
|
||||
</InputField>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -59,6 +40,8 @@ import { computed, onMounted, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import InputField from '~/components/form/InputField.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import useConfig from '~/compositions/useConfig';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
<template>
|
||||
<Panel>
|
||||
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
|
||||
<h1 class="ml-2 text-xl text-wp-text-100">{{ $t('user.settings.general.general') }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col mt-2 mb-4">
|
||||
<div class="flex items-center text-wp-text-100 font-bold mb-2">
|
||||
<label>{{ $t('user.settings.general.language') }}</label>
|
||||
</div>
|
||||
<Settings :title="$t('user.settings.general.general')">
|
||||
<InputField :label="$t('user.settings.general.language')">
|
||||
<SelectField v-model="selectedLocale" :options="localeOptions" />
|
||||
</div>
|
||||
</Panel>
|
||||
</InputField>
|
||||
</Settings>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -22,6 +15,7 @@ import { computed } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import SelectField from '~/components/form/SelectField.vue';
|
||||
import Settings from '~/components/layout/Settings.vue';
|
||||
import { setI18nLanguage } from '~/compositions/useI18n';
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
|
|
|||
Loading…
Reference in a new issue