Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve user settings #2087

Merged
merged 11 commits into from
Aug 3, 2023
Merged

Improve user settings #2087

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d680ea1
Improve user settings
qwerty287 Aug 2, 2023
79926f1
Fix lint/tc
qwerty287 Aug 2, 2023
dff0440
Merge branch 'main' into user-settings
qwerty287 Aug 3, 2023
6433bd2
Rename key
qwerty287 Aug 3, 2023
911b510
Update translation structure
qwerty287 Aug 3, 2023
fa08d5f
remove old component
qwerty287 Aug 3, 2023
cb609f7
Add header
qwerty287 Aug 3, 2023
971dbc1
Unified design
qwerty287 Aug 3, 2023
76af3bc
Update web/src/components/user/UserAPITab.vue
qwerty287 Aug 3, 2023
31532ea
Rename id to `general`
qwerty287 Aug 3, 2023
82d02bc
Merge branch 'main' into user-settings
qwerty287 Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions web/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@ declare module '@vue/runtime-core' {
Tab: typeof import('./src/components/layout/scaffold/Tab.vue')['default']
Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
TextField: typeof import('./src/components/form/TextField.vue')['default']
UserAPITab: typeof import('./src/components/user/UserAPITab.vue')['default']
UserGeneralTab: typeof import('./src/components/user/UserGeneralTab.vue')['default']
Warning: typeof import('./src/components/atomic/Warning.vue')['default']
}
}
27 changes: 19 additions & 8 deletions web/src/assets/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,16 +425,27 @@
}
},
"user": {
"settings": "User Settings",
"settings": {
"settings": "User Settings",
"general": {
"general": "General",
"language": "Language"
},
"api": {
"api": "API",
"desc": "Personal Access Token and API usage",
"token": "Personal Access Token",
"shell_setup": "Shell setup",
"api_usage": "Example API Usage",
"cli_usage": "Example CLI Usage",
"dl_cli": "Download CLI",
"shell_setup_before": "do shell setup steps before",
"reset_token": "Reset token",
"swagger_ui": "Swagger UI",
}
},
"oauth_error": "Error while authenticating against OAuth provider",
"internal_error": "Some internal error occurred",
"access_denied": "You are not allowed to login",
"token": "Personal Access Token",
"shell_setup": "Shell setup",
"api_usage": "Example API Usage",
"cli_usage": "Example CLI Usage",
"dl_cli": "Download CLI",
"shell_setup_before": "do shell setup steps before",
"reset_token": "Reset token"
}
}
2 changes: 1 addition & 1 deletion web/src/components/layout/header/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<!-- Active Pipelines Indicator -->
<ActivePipelines v-if="user" class="navbar-icon" />
<!-- User Avatar -->
<IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings')" class="navbar-icon !p-1.5">
<IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
<img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
</IconButton>
<!-- Login Button -->
Expand Down
95 changes: 95 additions & 0 deletions web/src/components/user/UserAPITab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<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>
<Button class="ml-auto" :text="$t('user.settings.api.reset_token')" @click="resetToken" />
</div>
<pre class="code-box">{{ token }}</pre>
</div>

<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>
<pre class="code-box">{{ usageWithShell }}</pre>
</div>

<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>
<a
v-if="enableSwagger"
:href="`${address}/swagger/index.html`"
target="_blank"
class="ml-4 text-wp-link-100 hover:text-wp-link-200"
>{{ $t('user.settings.api.swagger_ui') }}</a
>
</div>
<pre class="code-box">{{ usageWithCurl }}</pre>
</div>

<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>
<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>
<pre class="code-box">{{ usageWithCli }}</pre>
</div>
</Panel>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';

import Button from '~/components/atomic/Button.vue';
import useApiClient from '~/compositions/useApiClient';
import useConfig from '~/compositions/useConfig';

const { t } = useI18n();
const { enableSwagger } = useConfig();

const apiClient = useApiClient();
const token = ref<string | undefined>();

onMounted(async () => {
token.value = await apiClient.getToken();
});

const address = `${window.location.protocol}//${window.location.host}`; // port is included in location.host

const usageWithShell = computed(() => {
let usage = `export WOODPECKER_SERVER="${address}"\n`;
usage += `export WOODPECKER_TOKEN="${token.value}"\n`;
return usage;
});

const usageWithCurl = `# ${t(
'user.settings.api.shell_setup_before',
)}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;

const usageWithCli = `# ${t('user.settings.api.shell_setup_before')}\nwoodpecker info`;

const cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';

const resetToken = async () => {
token.value = await apiClient.resetToken();
window.location.href = `${address}/logout`;
};
</script>
48 changes: 48 additions & 0 deletions web/src/components/user/UserGeneralTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<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>
<SelectField v-model="selectedLocale" :options="localeOptions" />
</div>
</Panel>
</template>

<script lang="ts" setup>
import { useLocalStorage } from '@vueuse/core';
import dayjs from 'dayjs';
import TimeAgo from 'javascript-time-ago';
import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

import SelectField from '~/components/form/SelectField.vue';
import { setI18nLanguage } from '~/compositions/useI18n';

const { locale } = useI18n();

const localeOptions = computed(() =>
SUPPORTED_LOCALES.map((supportedLocale) => ({
value: supportedLocale,
text: new Intl.DisplayNames(supportedLocale, { type: 'language' }).of(supportedLocale) || supportedLocale,
})),
);

const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
const selectedLocale = computed<string>({
async set(_selectedLocale) {
await setI18nLanguage(_selectedLocale);
storedLocale.value = _selectedLocale;
dayjs.locale(_selectedLocale);
TimeAgo.setDefaultLocale(_selectedLocale);
},
get() {
return storedLocale.value;
},
});
</script>
18 changes: 3 additions & 15 deletions web/src/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,22 +131,10 @@ const routes: RouteRecordRaw[] = [
},
{
path: '/admin',
component: (): Component => import('~/views/RouterView.vue'),
name: 'admin-settings',
component: (): Component => import('~/views/admin/AdminSettings.vue'),
props: true,
meta: { authentication: 'required' },
children: [
{
path: '',
name: 'admin',
component: (): Component => import('~/views/admin/Admin.vue'),
props: true,
},
{
path: 'settings',
name: 'admin-settings',
component: (): Component => import('~/views/admin/AdminSettings.vue'),
props: true,
},
],
},

{
Expand Down
117 changes: 12 additions & 105 deletions web/src/views/User.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,21 @@
<template>
<Scaffold>
<template #title>{{ $t('user.settings') }}</template>
<Scaffold enable-tabs>
<template #title>{{ $t('user.settings.settings') }}</template>
<template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
<div class="space-y-4 flex flex-col">
<SelectField v-model="selectedLocale" :options="localeOptions" />

<div>
<div class="flex items-center mb-2">
<h2 class="text-lg text-wp-text-100">{{ $t('user.token') }}</h2>
<Button class="ml-4" :text="$t('user.reset_token')" @click="resetToken" />
</div>
<pre class="code-box">{{ token }}</pre>
</div>

<div>
<h2 class="text-lg text-wp-text-100">{{ $t('user.shell_setup') }}</h2>
<pre class="code-box">{{ usageWithShell }}</pre>
</div>

<div>
<div class="flex items-center">
<h2 class="text-lg text-wp-text-100">{{ $t('user.api_usage') }}</h2>
<a
v-if="enableSwagger"
:href="`${address}/swagger/index.html`"
target="_blank"
class="ml-4 text-wp-link-100 hover:text-wp-link-200"
>Swagger UI</a
>
</div>
<pre class="code-box">{{ usageWithCurl }}</pre>
</div>

<div>
<div class="flex items-center">
<h2 class="text-lg text-wp-text-100">{{ $t('user.cli_usage') }}</h2>
<a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
$t('user.dl_cli')
}}</a>
</div>
<pre class="code-box">{{ usageWithCli }}</pre>
</div>
</div>
<Tab id="settings" :title="$t('user.settings.general.general')">
<UserGeneralTab />
</Tab>
<Tab id="api" :title="$t('user.settings.api.api')">
<UserAPITab />
</Tab>
</Scaffold>
</template>

<script lang="ts" setup>
import { useLocalStorage } from '@vueuse/core';
import dayjs from 'dayjs';
import TimeAgo from 'javascript-time-ago';
import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';

import Button from '~/components/atomic/Button.vue';
import SelectField from '~/components/form/SelectField.vue';
import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
import useApiClient from '~/compositions/useApiClient';
import useConfig from '~/compositions/useConfig';
import { setI18nLanguage } from '~/compositions/useI18n';

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

const apiClient = useApiClient();
const token = ref<string | undefined>();

onMounted(async () => {
token.value = await apiClient.getToken();
});

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

const usageWithShell = computed(() => {
let usage = `export WOODPECKER_SERVER="${address}"\n`;
usage += `export WOODPECKER_TOKEN="${token.value}"\n`;
return usage;
});

const usageWithCurl = `# ${t(
'user.shell_setup_before',
)}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;

const usageWithCli = `# ${t('user.shell_setup_before')}\nwoodpecker info`;

const cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';

const localeOptions = computed(() =>
SUPPORTED_LOCALES.map((supportedLocale) => ({
value: supportedLocale,
text: new Intl.DisplayNames(supportedLocale, { type: 'language' }).of(supportedLocale) || supportedLocale,
})),
);

const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
const selectedLocale = computed<string>({
async set(_selectedLocale) {
await setI18nLanguage(_selectedLocale);
storedLocale.value = _selectedLocale;
dayjs.locale(_selectedLocale);
TimeAgo.setDefaultLocale(_selectedLocale);
},
get() {
return storedLocale.value;
},
});
import Tab from '~/components/layout/scaffold/Tab.vue';
import UserAPITab from '~/components/user/UserAPITab.vue';
import UserGeneralTab from '~/components/user/UserGeneralTab.vue';

const resetToken = async () => {
token.value = await apiClient.resetToken();
window.location.href = `${address}/logout`;
};
const address = `${window.location.protocol}//${window.location.host}`; // port is included in location.host
</script>
24 changes: 0 additions & 24 deletions web/src/views/admin/Admin.vue
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion web/src/views/org/OrgRepos.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<template #titleActions>
<IconButton
v-if="orgPermissions.admin"
v-if="!org.is_user && orgPermissions.admin"
xoxys marked this conversation as resolved.
Show resolved Hide resolved
icon="settings"
:to="{ name: 'org-settings' }"
:title="$t('org.settings.settings')"
Expand Down
Loading