mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-10 17:39:37 +00:00
dca01e6817
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
161 lines
5.4 KiB
Vue
161 lines
5.4 KiB
Vue
<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>
|
|
<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>
|
|
|
|
<div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
|
|
<ListItem
|
|
v-for="user in users"
|
|
:key="user.id"
|
|
class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
|
|
>
|
|
<img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
|
|
<span>{{ user.login }}</span>
|
|
<Badge
|
|
v-if="user.admin"
|
|
class="ml-auto hidden md:inline-block"
|
|
:label="$t('admin.settings.users.admin.admin')"
|
|
/>
|
|
<IconButton
|
|
icon="edit"
|
|
:title="$t('admin.settings.users.edit_user')"
|
|
class="w-8 h-8"
|
|
:class="{ 'ml-auto': !user.admin, 'ml-2': user.admin }"
|
|
@click="editUser(user)"
|
|
/>
|
|
<IconButton
|
|
icon="trash"
|
|
:title="$t('admin.settings.users.delete_user')"
|
|
class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
|
|
:is-loading="isDeleting"
|
|
@click="deleteUser(user)"
|
|
/>
|
|
</ListItem>
|
|
|
|
<div v-if="users?.length === 0" class="ml-2">{{ $t('admin.settings.users.none') }}</div>
|
|
</div>
|
|
<div v-else>
|
|
<form @submit.prevent="saveUser">
|
|
<InputField :label="$t('admin.settings.users.login')">
|
|
<TextField v-model="selectedUser.login" :disabled="isEditingUser" />
|
|
</InputField>
|
|
|
|
<InputField :label="$t('admin.settings.users.email')">
|
|
<TextField v-model="selectedUser.email" />
|
|
</InputField>
|
|
|
|
<InputField :label="$t('admin.settings.users.avatar_url')">
|
|
<div class="flex gap-2">
|
|
<img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" />
|
|
<TextField v-model="selectedUser.avatar_url" />
|
|
</div>
|
|
</InputField>
|
|
|
|
<InputField :label="$t('admin.settings.users.admin.admin')">
|
|
<Checkbox
|
|
:model-value="selectedUser.admin || false"
|
|
:label="$t('admin.settings.users.admin.placeholder')"
|
|
@update:model-value="selectedUser!.admin = $event"
|
|
/>
|
|
</InputField>
|
|
|
|
<div class="flex gap-2">
|
|
<Button :text="$t('admin.settings.users.cancel')" @click="selectedUser = undefined" />
|
|
|
|
<Button
|
|
:is-loading="isSaving"
|
|
type="submit"
|
|
color="green"
|
|
:text="isEditingUser ? $t('admin.settings.users.save') : $t('admin.settings.users.add')"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { cloneDeep } from 'lodash';
|
|
import { computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import Badge from '~/components/atomic/Badge.vue';
|
|
import Button from '~/components/atomic/Button.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 useApiClient from '~/compositions/useApiClient';
|
|
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
|
import useNotifications from '~/compositions/useNotifications';
|
|
import { usePagination } from '~/compositions/usePaginate';
|
|
import { User } from '~/lib/api/types';
|
|
|
|
const apiClient = useApiClient();
|
|
const notifications = useNotifications();
|
|
const { t } = useI18n();
|
|
|
|
const selectedUser = ref<Partial<User>>();
|
|
const isEditingUser = computed(() => !!selectedUser.value?.id);
|
|
|
|
async function loadUsers(page: number): Promise<User[] | null> {
|
|
return apiClient.getUsers(page);
|
|
}
|
|
|
|
const { resetPage, data: users } = usePagination(loadUsers, () => !selectedUser.value);
|
|
|
|
const { doSubmit: saveUser, isLoading: isSaving } = useAsyncAction(async () => {
|
|
if (!selectedUser.value) {
|
|
throw new Error("Unexpected: Can't get user");
|
|
}
|
|
|
|
if (isEditingUser.value) {
|
|
await apiClient.updateUser(selectedUser.value);
|
|
notifications.notify({
|
|
title: t('admin.settings.users.saved'),
|
|
type: 'success',
|
|
});
|
|
} else {
|
|
selectedUser.value = await apiClient.createUser(selectedUser.value);
|
|
notifications.notify({
|
|
title: t('admin.settings.users.created'),
|
|
type: 'success',
|
|
});
|
|
}
|
|
selectedUser.value = undefined;
|
|
resetPage();
|
|
});
|
|
|
|
const { doSubmit: deleteUser, isLoading: isDeleting } = useAsyncAction(async (_user: User) => {
|
|
// eslint-disable-next-line no-restricted-globals, no-alert
|
|
if (!confirm(t('admin.settings.users.delete_confirm'))) {
|
|
return;
|
|
}
|
|
|
|
await apiClient.deleteUser(_user);
|
|
notifications.notify({ title: t('admin.settings.users.deleted'), type: 'success' });
|
|
resetPage();
|
|
});
|
|
|
|
function editUser(user: User) {
|
|
selectedUser.value = cloneDeep(user);
|
|
}
|
|
|
|
function showAddUser() {
|
|
selectedUser.value = cloneDeep({ login: '' });
|
|
}
|
|
</script>
|