feat: add timezone setting (#1379)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1379
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/http-common/index.js

@@ -1,7 +1,18 @@
 import axios from 'axios'
+import {getToken} from '@/helpers/auth'
 
-export const HTTPFactory = () => {
+export function HTTPFactory() {
 	return axios.create({
 		baseURL: window.API_URL,
 	})
 }
+
+export function AuthenticatedHTTPFactory(token = getToken()) {	
+	return axios.create({
+		baseURL: window.API_URL,
+		headers: {
+			Authorization: `Bearer ${token}`,
+			'Content-Type': 'application/json',
+		},
+	})
+}

src/i18n/lang/en.json

@@ -85,7 +85,8 @@
         "weekStartSunday": "Sunday",
         "weekStartMonday": "Monday",
         "language": "Language",
-        "defaultList": "Default List"
+        "defaultList": "Default List",
+        "timezone": "Time Zone"
       },
       "totp": {
         "title": "Two Factor Authentication",

src/models/userSettings.js

@@ -11,6 +11,7 @@ export default class UserSettingsModel extends AbstractModel {
 			overdueTasksRemindersEnabled: true,
 			defaultListId: undefined,
 			weekStart: 0,
+			timezone: '',
 		}
 	}
 }

src/store/modules/auth.js

@@ -1,4 +1,4 @@
-import {HTTPFactory} from '@/http-common'
+import {HTTPFactory, AuthenticatedHTTPFactory} from '@/http-common'
 import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {objectToSnakeCase} from '@/helpers/case'
 import {LOADING} from '../mutation-types'
@@ -215,13 +215,9 @@ export default {
 				return
 			}
 
-			const HTTP = HTTPFactory()
+			const HTTP = AuthenticatedHTTPFactory(jwt)
 			try {
-				const response = await HTTP.get('user', {
+				const response = await HTTP.get('user')
-					headers: {
-						Authorization: `Bearer ${jwt}`,
-					},
-				})
 				const info = new UserModel(response.data)
 				info.type = state.info.type
 				info.email = state.info.email

src/views/user/settings/General.vue

@@ -92,9 +92,9 @@
 		</div>
 		<div class="field">
 			<label class="is-flex is-align-items-center">
-					<span>
+				<span>
-						{{ $t('user.settings.appearance.title') }}
+					{{ $t('user.settings.appearance.title') }}
-					</span>
+				</span>
 				<div class="select ml-2">
 					<select v-model="activeColorSchemeSetting">
 						<!-- TODO: use the Vikunja logo in color scheme as option buttons -->
@@ -105,6 +105,20 @@
 				</div>
 			</label>
 		</div>
+		<div class="field">
+			<label class="is-flex is-align-items-center">
+				<span>
+					{{ $t('user.settings.general.timezone') }}
+				</span>
+				<div class="select ml-2">
+					<select v-model="settings.timezone">
+						<option v-for="tz in availableTimezones" :key="tz">
+							{{ tz }}
+						</option>
+					</select>
+				</div>
+			</label>
+		</div>
 
 		<x-button
 			:loading="loading"
@@ -118,7 +132,7 @@
 </template>
 
 <script>
-import {computed, watch} from 'vue'
+import {computed, watch, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import {playSoundWhenDoneKey, playPop} from '@/helpers/playPop'
@@ -129,6 +143,7 @@ import ListSearch from '@/components/tasks/partials/listSearch'
 import {createRandomID} from '@/helpers/randomId'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {success} from '@/message'
+import {AuthenticatedHTTPFactory} from '@/http-common'
 
 const DEFAULT_LIST_ID = 0
 
@@ -155,6 +170,18 @@ function useColorSchemeSetting() {
 	}
 }
 
+function useAvailableTimezones() {
+	const availableTimezones = ref([])
+
+	const HTTP = AuthenticatedHTTPFactory()
+	HTTP.get('user/timezones')
+		.then(r => {
+			availableTimezones.value = r.data.sort()
+		})
+
+	return availableTimezones
+}
+
 function getPlaySoundWhenDoneSetting() {
 	return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
 }
@@ -193,6 +220,7 @@ export default {
 	setup() {
 		return {
 			...useColorSchemeSetting(),
+			availableTimezones: useAvailableTimezones(),
 		}
 	},