Merge branch 'main' into feature/blur-hash

# Conflicts:
#	package.json

originalMedia/images/cool.svg

@@ -49,7 +49,7 @@
      inkscape:label="ink_ext_XXXXXX 1"
      style="display:inline"
      transform="translate(-92.67749,-674.48297)"><circle
-       style="fill:#5974d9;fill-opacity:1;stroke:none;stroke-width:2.88757133;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       style="fill:#196aff;fill-opacity:1;stroke:none;stroke-width:2.88757133;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
        id="path920"
        cx="242.67749"
        cy="828.77881"

package.json

@@ -17,17 +17,17 @@
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
-    "@github/hotkey": "1.6.0",
+    "@github/hotkey": "1.6.1",
     "@kyvg/vue3-notification": "2.3.4",
     "@sentry/tracing": "6.16.1",
     "@sentry/vue": "6.16.1",
     "@vue/compat": "3.2.26",
-    "@vueuse/core": "7.3.0",
-    "@vueuse/router": "7.3.0",
+    "@vueuse/core": "7.4.0",
+    "@vueuse/router": "7.4.0",
     "blurhash": "^1.1.4",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.64.0",
+    "codemirror": "5.65.0",
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.27.0",
     "dompurify": "2.3.4",
@@ -38,7 +38,7 @@
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.7",
+    "marked": "4.0.8",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.7.9",
@@ -61,34 +61,34 @@
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "@types/flexsearch": "0.7.2",
     "@types/jest": "27.0.3",
-    "@typescript-eslint/eslint-plugin": "5.6.0",
-    "@typescript-eslint/parser": "5.6.0",
+    "@typescript-eslint/eslint-plugin": "5.7.0",
+    "@typescript-eslint/parser": "5.7.0",
     "@vitejs/plugin-legacy": "1.6.4",
-    "@vitejs/plugin-vue": "2.0.0",
+    "@vitejs/plugin-vue": "2.0.1",
     "@vue/eslint-config-typescript": "9.1.0",
     "autoprefixer": "10.4.0",
     "axios": "0.24.0",
-    "browserslist": "4.18.1",
-    "caniuse-lite": "1.0.30001286",
+    "browserslist": "4.19.1",
+    "caniuse-lite": "1.0.30001291",
     "cypress": "9.1.1",
     "cypress-file-upload": "5.0.8",
-    "esbuild": "0.14.3",
-    "eslint": "8.4.1",
+    "esbuild": "0.14.6",
+    "eslint": "8.5.0",
     "eslint-plugin-vue": "8.2.0",
-    "express": "4.17.1",
+    "express": "4.17.2",
     "faker": "5.5.3",
-    "jest": "27.4.4",
-    "netlify-cli": "8.0.20",
-    "postcss": "8.4.4",
-    "postcss-preset-env": "7.0.1",
+    "jest": "27.4.5",
+    "netlify-cli": "8.2.1",
+    "postcss": "8.4.5",
+    "postcss-preset-env": "7.0.2",
     "rollup": "2.61.1",
     "rollup-plugin-visualizer": "5.5.2",
     "sass": "1.45.0",
-    "slugify": "1.6.3",
-    "ts-jest": "27.1.1",
-    "typescript": "4.5.3",
-    "vite": "2.7.1",
-    "vite-plugin-pwa": "0.11.11",
+    "slugify": "1.6.4",
+    "ts-jest": "27.1.2",
+    "typescript": "4.5.4",
+    "vite": "2.7.4",
+    "vite-plugin-pwa": "0.11.12",
     "vite-svg-loader": "3.1.1",
     "vue-tsc": "0.29.8",
     "wait-on": "6.0.0",

src/components/input/multiselect.vue

@@ -457,7 +457,7 @@ export default {
 			text-transform: none;
 			font-family: $family-sans-serif;
 			font-weight: normal;
-			padding: .5rem 0;
+			padding: .5rem;
 			border: none;
 			cursor: pointer;
 
@@ -477,7 +477,7 @@ export default {
 				font-size: .75rem;
 				color: transparent;
 				transition: color $transition;
-				padding: 0 .5rem;
+				padding-left: .5rem;
 			}
 
 			&:focus, &:hover {

src/components/tasks/partials/listSearch.vue

@@ -16,60 +16,54 @@
 	</multiselect>
 </template>
 
-<script>
-import ListModel from '../../../models/list'
+<script lang="ts" setup>
+import {reactive, ref, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+import ListModel from '@/models/list'
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
-	name: 'listSearch',
-	data() {
-		return {
-			list: new ListModel(),
-			foundLists: [],
-		}
-	},
-	props: {
-		modelValue: {
-			required: false,
-		},
-	},
-	emits: ['update:modelValue', 'selected'],
-	components: {
-		Multiselect,
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.list = value
-			},
-			immeditate: true,
-			deep: true,
-		},
-	},
-	methods: {
-		findLists(query) {
-			this.foundLists = this.$store.getters['lists/searchList'](query)
-		},
+const store = useStore()
+const {t} = useI18n()
 
-		select(list) {
-			this.list = list
-			this.$emit('selected', list)
-			this.$emit('update:modelValue', list)
-		},
-
-		namespace(namespaceId) {
-			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
-			if (namespace !== null) {
-				return namespace.title
-			}
-			return this.$t('list.shared')
+const list = reactive(new ListModel())
+const props = defineProps({
+	modelValue: {
+		validator(value) {
+			return value instanceof ListModel
 		},
+		required: false,
 	},
+})
+const emit = defineEmits(['update:modelValue'])
+
+watchEffect(() => {
+	Object.assign(list, props.modelValue)
+})
+
+const foundLists = ref([])
+function findLists(query: string) {
+	if (query === '') {
+		select(null)
+	}
+	foundLists.value = store.getters['lists/searchList'](query)
+}
+
+function select(l: ListModel | null) {
+	Object.assign(list, l)
+	emit('update:modelValue', list)
+}
+
+function namespace(namespaceId: number) {
+	const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
+	return namespace !== null
+		? namespace.title
+		: t('list.shared')
 }
 </script>
 
 <style lang="scss" scoped>
 .list-namespace-title {
-  color: var(--grey-500);
+	color: var(--grey-500);
 }
 </style>

src/directives/focus.js

@@ -5,7 +5,7 @@ export default {
 		// auto focusing elements on mobile can be annoying since in these cases the
 		// keyboard always pops up and takes half of the available space on the screen.
 		// The threshhold is the same as the breakpoints in css.
-		if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
+		if (window.innerWidth > 769 || modifiers?.always) {
 			el.focus()
 		}
 	},

src/helpers/redirectToProvider.ts

@@ -1,4 +1,5 @@
 import {createRandomID} from '@/helpers/randomId'
+import {parseURL} from 'ufo'
 
 interface Provider {
 	name: string
@@ -7,7 +8,15 @@ interface Provider {
 	clientId: string
 }
 
-export const redirectToProvider = (provider: Provider, redirectUrl: string) => {
+export const redirectToProvider = (provider: Provider, redirectUrl: string = '') => {
+
+	// We're not using the redirect url provided by the server to allow redirects when using the electron app.
+	// The implications are not quite clear yet hence the logic to pass in another redirect url still exists.
+	if (redirectUrl === '') {
+		const {host, protocol} = parseURL(window.location.href)
+		redirectUrl = `${protocol}//${host}/auth/openid/`
+	}
+
 	const state = createRandomID(24)
 	localStorage.setItem('state', state)
 

src/i18n/lang/cs-CZ.json

@@ -36,7 +36,7 @@
       "password": "Heslo",
       "passwordRepeat": "Zopakovat heslo",
       "passwordPlaceholder": "např. • • • • • • • •",
-      "forgotPassword": "Forgot your password?",
+      "forgotPassword": "Zapomenuté heslo?",
       "resetPassword": "Obnovit heslo",
       "resetPasswordAction": "Poslat odkaz na obnovení hesla",
       "resetPasswordSuccess": "Zkontrolujte doručenou poštu! Měli byste mít e-mail s pokyny, jak obnovit své heslo.",
@@ -475,7 +475,7 @@
     "showMenu": "Zobrazit nabídku",
     "hideMenu": "Skrýt nabídku",
     "forExample": "Například:",
-    "welcomeBack": "Welcome Back!"
+    "welcomeBack": "Vítejte zpět!"
   },
   "input": {
     "resetColor": "Obnovit barvu",
@@ -813,7 +813,7 @@
     "url": "Vikunja URL",
     "urlPlaceholder": "např. https://localhost:3456",
     "change": "změnit",
-    "use": "Using Vikunja installation at {0}",
+    "use": "Používá se instalace Vikunja v {0}",
     "error": "Nelze najít nebo použít instalaci Vikunja na \"{domain}\". Zkuste prosím jinou url.",
     "success": "Pomocí instalace Vikunja na \"{domain}\".",
     "urlRequired": "Je vyžadována adresa URL."

src/store/modules/config.js

@@ -83,7 +83,7 @@ export default {
 				ctx.state.auth.openidConnect.providers.length === 1 &&
 				window.location.pathname.startsWith('/login') // Kinda hacky, but prevents an endless loop.
 			) {
-				redirectToProvider(ctx.state.auth.openidConnect.providers[0], ctx.state.auth.openidConnect.redirectUrl)
+				redirectToProvider(ctx.state.auth.openidConnect.providers[0])
 			}
 		},
 	},

src/views/tasks/TaskDetailView.vue

@@ -238,7 +238,7 @@
 						</h3>
 						<div class="field has-addons">
 							<div class="control is-expanded">
-								<list-search @selected="changeList" ref="moveList"/>
+								<list-search @update:modelValue="changeList" ref="moveList"/>
 							</div>
 						</div>
 					</div>

src/views/user/Login.vue

@@ -205,9 +205,7 @@ export default {
 			}
 		},
 
-		redirectToProvider(provider) {
-			redirectToProvider(provider, this.openidConnect.redirectUrl)
-		},
+		redirectToProvider,
 	},
 }
 </script>

src/views/user/settings/General.vue

@@ -131,8 +131,10 @@ import {playPop} from '@/helpers/playPop'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {success} from '@/message'
 
+const DEFAULT_LIST_ID = 0
+
 function useColorSchemeSetting() {
-	const { t } = useI18n()
+	const {t} = useI18n()
 	const colorSchemeSettings = computed(() => ({
 		light: t('user.settings.appearance.colorScheme.light'),
 		auto: t('user.settings.appearance.colorScheme.system'),
@@ -141,9 +143,11 @@ function useColorSchemeSetting() {
 
 	const {store} = useColorScheme()
 	watch(store, (schemeId) => {
-		success({message: t('user.settings.appearance.setSuccess', {
-			colorScheme: colorSchemeSettings.value[schemeId],
-		})})
+		success({
+			message: t('user.settings.appearance.setSuccess', {
+				colorScheme: colorSchemeSettings.value[schemeId],
+			}),
+		})
 	})
 
 	return {
@@ -178,8 +182,13 @@ export default {
 				.map(l => ({code: l[0], title: l[1]}))
 				.sort((a, b) => a.title.localeCompare(b.title))
 		},
-		defaultList() {
-			return this.$store.getters['lists/getListById'](this.settings.defaultListId)
+		defaultList: {
+			get() {
+				return this.$store.getters['lists/getListById'](this.settings.defaultListId)
+			},
+			set(l) {
+				this.settings.defaultListId = l ? l.id : DEFAULT_LIST_ID
+			},
 		},
 	},
 
@@ -204,12 +213,13 @@ export default {
 			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
 			saveLanguage(this.language)
 			setQuickAddMagicMode(this.quickAddMagicMode)
-			this.settings.defaultListId = this.defaultList ? this.defaultList.id : 0
 
-			await this.userSettingsService.update(this.settings)
-			this.$store.commit('auth/setUserSettings', {
+			const settings = {
 				...this.settings,
-			})
+			}
+
+			await this.userSettingsService.update(settings)
+			this.$store.commit('auth/setUserSettings', settings)
 			this.$message.success({message: this.$t('user.settings.general.savedSuccess')})
 		},
 	},