Change locale in user settings (#1305)

Closes #1109

web/src/components/form/SelectField.vue

@@ -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 !== '',

web/src/components/layout/popups/ManualPipelinePopup.vue

@@ -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>

web/src/components/repo/settings/BadgeTab.vue

@@ -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">

web/src/utils/locale.ts

@@ -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;
 }

web/src/views/User.vue

@@ -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,48 +29,61 @@
   </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,
+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(() =>
+  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);
   },
-
-  setup() {
-    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}`;
-
-    const usageWithShell = computed(() => {
-      let usage = `export WOODPECKER_SERVER="${address}"\n`;
-      usage += `export WOODPECKER_TOKEN="${token.value}"\n`;
-      return usage;
-    });
-
-    const usageWithCurl = `# ${useI18n().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 cliDownload = 'https://github.com/woodpecker-ci/woodpecker/releases';
-
-    return { token, usageWithShell, usageWithCurl, usageWithCli, cliDownload, address };
+  get() {
+    return storedLocale.value;
   },
 });
 </script>