Change locale in user settings (#1305)

Closes #1109
This commit is contained in:
Lukas 2022-10-27 02:42:39 +02:00 committed by GitHub
parent 2023518552
commit 9ece7a1c49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 49 deletions

View file

@ -1,7 +1,7 @@
<template>
<select
v-model="innerValue"
class="w-full border border-gray-900 py-1 px-2 rounded-md bg-white focus:outline-none border-gray-900"
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400 w-full border py-1 px-2 rounded-md focus:outline-none"
:class="{
'text-color': innerValue === '',
'text-gray-900': innerValue !== '',

View file

@ -4,12 +4,7 @@
<form @submit.prevent="triggerManualPipeline">
<span class="text-xl text-color">{{ $t('repo.manual_pipeline.title') }}</span>
<InputField :label="$t('repo.manual_pipeline.select_branch')">
<SelectField
v-model="payload.branch"
:options="branches"
required
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
/>
<SelectField v-model="payload.branch" :options="branches" required />
</InputField>
<InputField :label="$t('repo.manual_pipeline.variables.title')">
<span class="text-sm text-color-alt mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>

View file

@ -25,16 +25,10 @@
},
]"
required
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
/>
</InputField>
<InputField :label="$t('repo.settings.badge.branch')">
<SelectField
v-model="branch"
:options="branches"
required
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
/>
<SelectField v-model="branch" :options="branches" required />
</InputField>
<div v-if="badgeContent" class="flex flex-col space-y-4">

View file

@ -1,3 +1,8 @@
import { useLocalStorage } from '@vueuse/core';
export function getUserLanguage(): string {
return navigator.language.split('-')[0];
const browserLocale = navigator.language.split('-')[0];
const selectedLocale = useLocalStorage('woodpecker:locale', browserLocale).value;
return selectedLocale;
}

View file

@ -2,6 +2,8 @@
<FluidContainer class="space-y-4 flex flex-col my-0">
<Button class="ml-auto" :text="$t('logout')" :to="`${address}/logout`" />
<SelectField v-model="selectedLocale" :options="localeOptions" />
<div>
<h2 class="text-lg text-color">{{ $t('user.token') }}</h2>
<pre class="cli-box">{{ token }}</pre>
@ -27,23 +29,20 @@
</FluidContainer>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
<script lang="ts" setup>
import { useLocalStorage } from '@vueuse/core';
import dayjs from 'dayjs';
import TimeAgo from 'javascript-time-ago';
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 FluidContainer from '~/components/layout/FluidContainer.vue';
import useApiClient from '~/compositions/useApiClient';
export default defineComponent({
name: 'User',
const { t, availableLocales, locale } = useI18n();
components: {
FluidContainer,
Button,
},
setup() {
const apiClient = useApiClient();
const token = ref<string | undefined>();
@ -52,7 +51,7 @@ export default defineComponent({
});
// eslint-disable-next-line no-restricted-globals
const address = `${location.protocol}//${location.host}`;
const address = `${location.protocol}//${location.host}`; // port is included in location.host
const usageWithShell = computed(() => {
let usage = `export WOODPECKER_SERVER="${address}"\n`;
@ -60,15 +59,31 @@ export default defineComponent({
return usage;
});
const usageWithCurl = `# ${useI18n().t(
const usageWithCurl = `# ${t(
'user.shell_setup_before',
)}\ncurl -i \${WOODPECKER_SERVER}/api/user -H "Authorization: Bearer \${WOODPECKER_TOKEN}"`;
const usageWithCli = `# ${useI18n().t('user.shell_setup_before')}\nwoodpecker info`;
const usageWithCli = `# ${t('user.shell_setup_before')}\nwoodpecker info`;
const cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';
return { token, usageWithShell, usageWithCurl, usageWithCli, cliDownload, address };
const localeOptions = computed(() =>
availableLocales.map((availableLocale) => ({
value: availableLocale,
text: new Intl.DisplayNames(availableLocale, { type: 'language' }).of(availableLocale) || availableLocale,
})),
);
const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
const selectedLocale = computed<string>({
set(_selectedLocale) {
storedLocale.value = _selectedLocale;
locale.value = _selectedLocale;
dayjs.locale(_selectedLocale);
TimeAgo.setDefaultLocale(_selectedLocale);
},
get() {
return storedLocale.value;
},
});
</script>