mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-29 13:21:10 +00:00
Code Issues Projects Releases Wiki Activity

Create settings-panel vue component and use InputFields (#2177)

Browse source 
Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
qwerty287 2023-08-21 10:23:16 +02:00 committed by GitHub
parent 2a157cfe7b
commit 06d1f3c92e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 153 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/components.d.ts vendored
View file

@ -98,6 +98,7 @@ declare module '@vue/runtime-core' {
SecretList: typeof import('./src/components/secrets/SecretList.vue')['default'] SecretList: typeof import('./src/components/secrets/SecretList.vue')['default']
SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default'] SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
SelectField: typeof import('./src/components/form/SelectField.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'] Tab: typeof import('./src/components/layout/scaffold/Tab.vue')['default']
Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default'] Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
TextField: typeof import('./src/components/form/TextField.vue')['default'] TextField: typeof import('./src/components/form/TextField.vue')['default']

17
web/src/components/admin/settings/AdminAgentsTab.vue
View file

@ -1,19 +1,14 @@
<template> <template>
<Panel> <Settings :title="$t('admin.settings.agents.agents')" :desc="$t('admin.settings.agents.desc')">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <template #titleActions>
<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>
<Button <Button
v-if="selectedAgent" v-if="selectedAgent"
class="ml-auto"
:text="$t('admin.settings.agents.show')" :text="$t('admin.settings.agents.show')"
start-icon="back" start-icon="back"
@click="selectedAgent = undefined" @click="selectedAgent = undefined"
/> />
<Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" /> <Button v-else :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
</div> </template>
<div v-if="!selectedAgent" class="space-y-4 text-wp-text-100"> <div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
<ListItem <ListItem
@ -122,7 +117,7 @@
</div> </div>
</form> </form>
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -137,7 +132,7 @@ import ListItem from '~/components/atomic/ListItem.vue';
import Checkbox from '~/components/form/Checkbox.vue'; import Checkbox from '~/components/form/Checkbox.vue';
import InputField from '~/components/form/InputField.vue'; import InputField from '~/components/form/InputField.vue';
import TextField from '~/components/form/TextField.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 useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import useNotifications from '~/compositions/useNotifications'; import useNotifications from '~/compositions/useNotifications';

54
web/src/components/admin/settings/AdminQueueTab.vue
View file

@ -1,35 +1,25 @@
<template> <template>
<Panel> <Settings :title="$t('admin.settings.queue.queue')" :desc="$t('admin.settings.queue.desc')">
<div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <template #titleActions>
<div class="ml-2"> <div v-if="queueInfo">
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.queue.queue') }}</h1> <div class="flex items-center gap-2">
<p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.queue.desc') }}</p> <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>
</template>
<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>
<div class="flex flex-col"> <div class="flex flex-col">
<AdminQueueStats :stats="queueInfo?.stats" /> <AdminQueueStats :stats="queueInfo?.stats" />
@ -81,7 +71,7 @@
</ListItem> </ListItem>
</div> </div>
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -92,7 +82,7 @@ import Badge from '~/components/atomic/Badge.vue';
import Button from '~/components/atomic/Button.vue'; import Button from '~/components/atomic/Button.vue';
import Icon from '~/components/atomic/Icon.vue'; import Icon from '~/components/atomic/Icon.vue';
import ListItem from '~/components/atomic/ListItem.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 useApiClient from '~/compositions/useApiClient';
import useNotifications from '~/compositions/useNotifications'; import useNotifications from '~/compositions/useNotifications';
import { QueueInfo } from '~/lib/api/types/queue'; import { QueueInfo } from '~/lib/api/types/queue';

34
web/src/components/admin/settings/AdminSecretsTab.vue
View file

@ -1,29 +1,19 @@
<template> <template>
<Panel> <Settings
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> :title="$t('admin.settings.secrets.secrets')"
<div class="ml-2"> :desc="$t('admin.settings.secrets.desc')"
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.secrets.secrets') }}</h1> docs-url="docs/usage/secrets"
<p class="text-sm text-wp-text-alt-100"> :warning="$t('admin.settings.secrets.warning')"
{{ $t('admin.settings.secrets.desc') }} >
<DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" /> <template #titleActions>
</p>
<Warning :text="$t('admin.settings.secrets.warning')" />
</div>
<Button <Button
v-if="selectedSecret" v-if="selectedSecret"
class="ml-auto"
:text="$t('admin.settings.secrets.show')" :text="$t('admin.settings.secrets.show')"
start-icon="back" start-icon="back"
@click="selectedSecret = undefined" @click="selectedSecret = undefined"
/> />
<Button <Button v-else :text="$t('admin.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
v-else </template>
class="ml-auto"
:text="$t('admin.settings.secrets.add')"
start-icon="plus"
@click="showAddSecret"
/>
</div>
<SecretList <SecretList
v-if="!selectedSecret" v-if="!selectedSecret"
@ -42,7 +32,7 @@
@save="createSecret" @save="createSecret"
@cancel="selectedSecret = undefined" @cancel="selectedSecret = undefined"
/> />
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -51,9 +41,7 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue'; import Button from '~/components/atomic/Button.vue';
import DocsLink from '~/components/atomic/DocsLink.vue'; import Settings from '~/components/layout/Settings.vue';
import Warning from '~/components/atomic/Warning.vue';
import Panel from '~/components/layout/Panel.vue';
import SecretEdit from '~/components/secrets/SecretEdit.vue'; import SecretEdit from '~/components/secrets/SecretEdit.vue';
import SecretList from '~/components/secrets/SecretList.vue'; import SecretList from '~/components/secrets/SecretList.vue';
import useApiClient from '~/compositions/useApiClient'; import useApiClient from '~/compositions/useApiClient';

17
web/src/components/admin/settings/AdminUsersTab.vue
View file

@ -1,19 +1,14 @@
<template> <template>
<Panel> <Settings :title="$t('admin.settings.users.users')" :desc="$t('admin.settings.users.desc')">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <template #titleActions>
<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>
<Button <Button
v-if="selectedUser" v-if="selectedUser"
class="ml-auto"
:text="$t('admin.settings.users.show')" :text="$t('admin.settings.users.show')"
start-icon="back" start-icon="back"
@click="selectedUser = undefined" @click="selectedUser = undefined"
/> />
<Button v-else class="ml-auto" :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" /> <Button v-else :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
</div> </template>
<div v-if="!selectedUser" class="space-y-4 text-wp-text-100"> <div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
<ListItem <ListItem
@ -83,7 +78,7 @@
</div> </div>
</form> </form>
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -97,7 +92,7 @@ import IconButton from '~/components/atomic/IconButton.vue';
import ListItem from '~/components/atomic/ListItem.vue'; import ListItem from '~/components/atomic/ListItem.vue';
import InputField from '~/components/form/InputField.vue'; import InputField from '~/components/form/InputField.vue';
import TextField from '~/components/form/TextField.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 useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import useNotifications from '~/compositions/useNotifications'; import useNotifications from '~/compositions/useNotifications';

5
web/src/components/form/InputField.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<div class="flex flex-col mt-2 mb-4"> <div class="flex flex-col mt-2 mb-4">
<div class="flex items-center text-wp-text-100 font-bold mb-2"> <div class="flex items-center mb-2">
<label v-bind="$attrs">{{ label }}</label> <label class="text-wp-text-100 font-bold" v-bind="$attrs">{{ label }}</label>
<DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" /> <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
<slot v-else-if="$slots['titleActions']" name="titleActions" />
</div> </div>
<slot /> <slot />
<div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100"> <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">

33
web/src/components/layout/Settings.vue Normal file
View 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>

25
web/src/components/org/settings/OrgSecretsTab.vue
View file

@ -1,22 +1,18 @@
<template> <template>
<Panel> <Settings
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> :title="$t('org.settings.secrets.secrets')"
<div class="ml-2"> :desc="$t('org.settings.secrets.desc')"
<h1 class="text-xl text-wp-text-100">{{ $t('org.settings.secrets.secrets') }}</h1> docs-url="docs/usage/secrets"
<p class="text-sm text-wp-text-alt-100"> >
{{ $t('org.settings.secrets.desc') }} <template #titleActions>
<DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
</p>
</div>
<Button <Button
v-if="selectedSecret" v-if="selectedSecret"
class="ml-auto"
:text="$t('org.settings.secrets.show')" :text="$t('org.settings.secrets.show')"
start-icon="back" start-icon="back"
@click="selectedSecret = undefined" @click="selectedSecret = undefined"
/> />
<Button v-else class="ml-auto" :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" /> <Button v-else :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
</div> </template>
<SecretList <SecretList
v-if="!selectedSecret" v-if="!selectedSecret"
@ -35,7 +31,7 @@
@save="createSecret" @save="createSecret"
@cancel="selectedSecret = undefined" @cancel="selectedSecret = undefined"
/> />
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue'; import Button from '~/components/atomic/Button.vue';
import DocsLink from '~/components/atomic/DocsLink.vue'; import Settings from '~/components/layout/Settings.vue';
import Panel from '~/components/layout/Panel.vue';
import SecretEdit from '~/components/secrets/SecretEdit.vue'; import SecretEdit from '~/components/secrets/SecretEdit.vue';
import SecretList from '~/components/secrets/SecretList.vue'; import SecretList from '~/components/secrets/SecretList.vue';
import useApiClient from '~/compositions/useApiClient'; import useApiClient from '~/compositions/useApiClient';

10
web/src/components/repo/settings/ActionsTab.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Panel> <Settings :title="$t('repo.settings.actions.actions')">
<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>
<div class="flex flex-wrap items-center"> <div class="flex flex-wrap items-center">
<Button <Button
class="mr-4 my-1" class="mr-4 my-1"
@ -42,7 +38,7 @@
@click="deleteRepo" @click="deleteRepo"
/> />
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -51,7 +47,7 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import Button from '~/components/atomic/Button.vue'; 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 useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import useNotifications from '~/compositions/useNotifications'; import useNotifications from '~/compositions/useNotifications';

13
web/src/components/repo/settings/BadgeTab.vue
View file

@ -1,11 +1,10 @@
<template> <template>
<Panel> <Settings :title="$t('repo.settings.badge.badge')">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <template #titleActions>
<h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.badge.badge') }}</h1> <a v-if="badgeUrl" :href="badgeUrl" target="_blank">
<a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
<img :src="badgeUrl" /> <img :src="badgeUrl" />
</a> </a>
</div> </template>
<InputField :label="$t('repo.settings.badge.type')"> <InputField :label="$t('repo.settings.badge.type')">
<SelectField <SelectField
@ -36,7 +35,7 @@
<pre class="code-box">{{ badgeContent }}</pre> <pre class="code-box">{{ badgeContent }}</pre>
</div> </div>
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <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 { SelectOption } from '~/components/form/form.types';
import InputField from '~/components/form/InputField.vue'; import InputField from '~/components/form/InputField.vue';
import SelectField from '~/components/form/SelectField.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 useApiClient from '~/compositions/useApiClient';
import useConfig from '~/compositions/useConfig'; import useConfig from '~/compositions/useConfig';
import { usePaginate } from '~/compositions/usePaginate'; import { usePaginate } from '~/compositions/usePaginate';

27
web/src/components/repo/settings/CronTab.vue
View file

@ -1,28 +1,14 @@
<template> <template>
<Panel> <Settings :title="$t('repo.settings.crons.crons')" :desc="$t('repo.settings.crons.desc')" docs-url="docs/usage/crons">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <template #titleActions>
<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>
<Button <Button
v-if="selectedCron" v-if="selectedCron"
class="ml-auto"
start-icon="back" start-icon="back"
:text="$t('repo.settings.crons.show')" :text="$t('repo.settings.crons.show')"
@click="selectedCron = undefined" @click="selectedCron = undefined"
/> />
<Button <Button v-else start-icon="plus" :text="$t('repo.settings.crons.add')" @click="selectedCron = {}" />
v-else </template>
class="ml-auto"
start-icon="plus"
:text="$t('repo.settings.crons.add')"
@click="selectedCron = {}"
/>
</div>
<div v-if="!selectedCron" class="space-y-4 text-wp-text-100"> <div v-if="!selectedCron" class="space-y-4 text-wp-text-100">
<ListItem <ListItem
@ -89,7 +75,7 @@
</div> </div>
</form> </form>
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -97,12 +83,11 @@ import { computed, inject, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue'; import Button from '~/components/atomic/Button.vue';
import DocsLink from '~/components/atomic/DocsLink.vue';
import IconButton from '~/components/atomic/IconButton.vue'; import IconButton from '~/components/atomic/IconButton.vue';
import ListItem from '~/components/atomic/ListItem.vue'; import ListItem from '~/components/atomic/ListItem.vue';
import InputField from '~/components/form/InputField.vue'; import InputField from '~/components/form/InputField.vue';
import TextField from '~/components/form/TextField.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 useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import { useDate } from '~/compositions/useDate'; import { useDate } from '~/compositions/useDate';

10
web/src/components/repo/settings/GeneralTab.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Panel> <Settings :title="$t('repo.settings.general.general')">
<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>
<form v-if="repoSettings" class="flex flex-col" @submit.prevent="saveRepoSettings"> <form v-if="repoSettings" class="flex flex-col" @submit.prevent="saveRepoSettings">
<InputField <InputField
docs-url="docs/usage/project-settings#pipeline-path" docs-url="docs/usage/project-settings#pipeline-path"
@ -85,7 +81,7 @@
:text="$t('repo.settings.general.save')" :text="$t('repo.settings.general.save')"
/> />
</form> </form>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -100,7 +96,7 @@ import InputField from '~/components/form/InputField.vue';
import NumberField from '~/components/form/NumberField.vue'; import NumberField from '~/components/form/NumberField.vue';
import RadioField from '~/components/form/RadioField.vue'; import RadioField from '~/components/form/RadioField.vue';
import TextField from '~/components/form/TextField.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 useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import useAuthentication from '~/compositions/useAuthentication'; import useAuthentication from '~/compositions/useAuthentication';

31
web/src/components/repo/settings/RegistriesTab.vue
View file

@ -1,28 +1,18 @@
<template> <template>
<Panel> <Settings
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> :title="$t('repo.settings.registries.creds')"
<div class="ml-2"> :desc="$t('repo.settings.registries.desc')"
<h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.registries.creds') }}</h1> docs-url="docs/usage/registries"
<p class="text-sm text-wp-text-alt-100"> >
{{ $t('repo.settings.registries.desc') }} <template #titleActions>
<DocsLink :topic="$t('repo.settings.registries.creds')" url="docs/usage/registries" />
</p>
</div>
<Button <Button
v-if="selectedRegistry" v-if="selectedRegistry"
class="ml-auto"
start-icon="back" start-icon="back"
:text="$t('repo.settings.registries.show')" :text="$t('repo.settings.registries.show')"
@click="selectedRegistry = undefined" @click="selectedRegistry = undefined"
/> />
<Button <Button v-else start-icon="plus" :text="$t('repo.settings.registries.add')" @click="selectedRegistry = {}" />
v-else </template>
class="ml-auto"
start-icon="plus"
:text="$t('repo.settings.registries.add')"
@click="selectedRegistry = {}"
/>
</div>
<div v-if="!selectedRegistry" class="space-y-4 text-wp-text-100"> <div v-if="!selectedRegistry" class="space-y-4 text-wp-text-100">
<ListItem <ListItem
@ -80,7 +70,7 @@
</div> </div>
</form> </form>
</div> </div>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -88,12 +78,11 @@ import { computed, inject, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue'; import Button from '~/components/atomic/Button.vue';
import DocsLink from '~/components/atomic/DocsLink.vue';
import IconButton from '~/components/atomic/IconButton.vue'; import IconButton from '~/components/atomic/IconButton.vue';
import ListItem from '~/components/atomic/ListItem.vue'; import ListItem from '~/components/atomic/ListItem.vue';
import InputField from '~/components/form/InputField.vue'; import InputField from '~/components/form/InputField.vue';
import TextField from '~/components/form/TextField.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 useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import useNotifications from '~/compositions/useNotifications'; import useNotifications from '~/compositions/useNotifications';

25
web/src/components/repo/settings/SecretsTab.vue
View file

@ -1,22 +1,18 @@
<template> <template>
<Panel> <Settings
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> :title="$t('repo.settings.secrets.secrets')"
<div class="ml-2"> :desc="$t('repo.settings.secrets.desc')"
<h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.secrets.secrets') }}</h1> docs-url="docs/usage/secrets"
<p class="text-sm text-wp-text-alt-100"> >
{{ $t('repo.settings.secrets.desc') }} <template #titleActions>
<DocsLink :topic="$t('repo.settings.secrets.secrets')" url="docs/usage/secrets" />
</p>
</div>
<Button <Button
v-if="selectedSecret" v-if="selectedSecret"
class="ml-auto"
:text="$t('repo.settings.secrets.show')" :text="$t('repo.settings.secrets.show')"
start-icon="back" start-icon="back"
@click="selectedSecret = undefined" @click="selectedSecret = undefined"
/> />
<Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" /> <Button v-else :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
</div> </template>
<SecretList <SecretList
v-if="!selectedSecret" v-if="!selectedSecret"
@ -35,7 +31,7 @@
@save="createSecret" @save="createSecret"
@cancel="selectedSecret = undefined" @cancel="selectedSecret = undefined"
/> />
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue'; import Button from '~/components/atomic/Button.vue';
import DocsLink from '~/components/atomic/DocsLink.vue'; import Settings from '~/components/layout/Settings.vue';
import Panel from '~/components/layout/Panel.vue';
import SecretEdit from '~/components/secrets/SecretEdit.vue'; import SecretEdit from '~/components/secrets/SecretEdit.vue';
import SecretList from '~/components/secrets/SecretList.vue'; import SecretList from '~/components/secrets/SecretList.vue';
import useApiClient from '~/compositions/useApiClient'; import useApiClient from '~/compositions/useApiClient';

53
web/src/components/user/UserAPITab.vue
View file

@ -1,34 +1,18 @@
<template> <template>
<Panel> <Settings :title="$t('user.settings.api.api')" :desc="$t('user.settings.api.desc')">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <InputField :label="$t('user.settings.api.token')">
<div class="ml-2"> <template #titleActions>
<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" /> <Button class="ml-auto" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
</div> </template>
<pre class="code-box">{{ token }}</pre> <pre class="code-box">{{ token }}</pre>
</div> </InputField>
<div class="mt-2 mb-4"> <InputField :label="$t('user.settings.api.shell_setup')">
<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> <pre class="code-box">{{ usageWithShell }}</pre>
</div> </InputField>
<div class="mt-2 mb-4"> <InputField :label="$t('user.settings.api.api_usage')">
<div class="flex items-center mb-2"> <template #titleActions>
<div class="flex items-center text-wp-text-100 font-bold">
<label>{{ $t('user.settings.api.api_usage') }}</label>
</div>
<a <a
v-if="enableSwagger" v-if="enableSwagger"
:href="`${address}/swagger/index.html`" :href="`${address}/swagger/index.html`"
@ -36,22 +20,19 @@
class="ml-4 text-wp-link-100 hover:text-wp-link-200" class="ml-4 text-wp-link-100 hover:text-wp-link-200"
>{{ $t('user.settings.api.swagger_ui') }}</a >{{ $t('user.settings.api.swagger_ui') }}</a
> >
</div> </template>
<pre class="code-box">{{ usageWithCurl }}</pre> <pre class="code-box">{{ usageWithCurl }}</pre>
</div> </InputField>
<div class="mt-2 mb-4"> <InputField :label="$t('user.settings.api.cli_usage')">
<div class="flex items-center mb-2"> <template #titleActions>
<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">{{ <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
$t('user.settings.api.dl_cli') $t('user.settings.api.dl_cli')
}}</a> }}</a>
</div> </template>
<pre class="code-box">{{ usageWithCli }}</pre> <pre class="code-box">{{ usageWithCli }}</pre>
</div> </InputField>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -59,6 +40,8 @@ import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue'; 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 useApiClient from '~/compositions/useApiClient';
import useConfig from '~/compositions/useConfig'; import useConfig from '~/compositions/useConfig';

16
web/src/components/user/UserGeneralTab.vue
View file

@ -1,16 +1,9 @@
<template> <template>
<Panel> <Settings :title="$t('user.settings.general.general')">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100"> <InputField :label="$t('user.settings.general.language')">
<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" /> <SelectField v-model="selectedLocale" :options="localeOptions" />
</div> </InputField>
</Panel> </Settings>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -22,6 +15,7 @@ import { computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import SelectField from '~/components/form/SelectField.vue'; import SelectField from '~/components/form/SelectField.vue';
import Settings from '~/components/layout/Settings.vue';
import { setI18nLanguage } from '~/compositions/useI18n'; import { setI18nLanguage } from '~/compositions/useI18n';
const { locale } = useI18n(); const { locale } = useI18n();