-
-
Notifications
You must be signed in to change notification settings - Fork 453
Improve user settings #2087
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.
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
Merged
Merged
Improve user settings #2087
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
d680ea1
Improve user settings
qwerty287 79926f1
Fix lint/tc
qwerty287 dff0440
Merge branch 'main' into user-settings
qwerty287 6433bd2
Rename key
qwerty287 911b510
Update translation structure
qwerty287 fa08d5f
remove old component
qwerty287 cb609f7
Add header
qwerty287 971dbc1
Unified design
qwerty287 76af3bc
Update web/src/components/user/UserAPITab.vue
qwerty287 31532ea
Rename id to `general`
qwerty287 82d02bc
Merge branch 'main' into user-settings
qwerty287 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <template> | ||
| <Panel> | ||
| <div> | ||
| <div class="flex items-center mb-2"> | ||
| <h2 class="text-lg text-wp-text-100">{{ $t('user.api.token') }}</h2> | ||
| <Button class="ml-4" :text="$t('user.api.reset_token')" @click="resetToken" /> | ||
| </div> | ||
| <pre class="code-box">{{ token }}</pre> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2 class="text-lg text-wp-text-100">{{ $t('user.api.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.api_usage') }}</h2> | ||
| <a | ||
| :href="`${address}/swagger/index.html`" | ||
| target="_blank" | ||
| class="ml-4 text-wp-link-100 hover:text-wp-link-200" | ||
| >{{ $t('user.api.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.api.cli_usage') }}</h2> | ||
| <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{ | ||
| $t('user.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'; | ||
|
|
||
| const { t } = useI18n(); | ||
|
|
||
| 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.api.shell_setup_before', | ||
| )}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`; | ||
|
|
||
| const usageWithCli = `# ${t('user.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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <template> | ||
| <Panel> | ||
| <div class="flex flex-col"> | ||
| <div class="flex items-center text-wp-text-100 font-bold mb-2"> | ||
| <label>{{ $t('user.settings.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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,21 @@ | ||
| <template> | ||
| <Scaffold> | ||
| <template #title>{{ $t('user.settings') }}</template> | ||
| <Scaffold enable-tabs> | ||
| <template #title>{{ $t('user.user_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 | ||
| :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.settings')"> | ||
| <UserSettingsTab /> | ||
| </Tab> | ||
| <Tab id="api" :title="$t('user.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 { setI18nLanguage } from '~/compositions/useI18n'; | ||
|
|
||
| const { t, locale } = useI18n(); | ||
|
|
||
| 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 UserSettingsTab from '~/components/user/UserSettingsTab.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> |
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.