feat: port auth store to pinia

src/views/user/settings/Avatar.vue

@@ -64,17 +64,17 @@ export default { name: 'user-settings-avatar' }
 <script setup lang="ts">
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {Cropper} from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
 import AvatarService from '@/services/avatar'
 import AvatarModel from '@/models/avatar'
-import { useTitle } from '@/composables/useTitle'
-import { success } from '@/message'
+import {useTitle} from '@/composables/useTitle'
+import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const AVATAR_PROVIDERS = computed(() => ({
 	default: t('misc.default'),
@@ -102,7 +102,7 @@ avatarStatus()
 async function updateAvatarStatus() {
 	await avatarService.update(new AvatarModel({avatarProvider: avatarProvider.value}))
 	success({message: t('user.settings.avatar.statusUpdateSuccess')})
-	store.commit('auth/reloadAvatar')
+	authStore.reloadAvatar()
 }
 
 const cropper = ref()
@@ -121,7 +121,7 @@ async function uploadAvatar() {
 		const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
 		await avatarService.create(blob)
 		success({message: t('user.settings.avatar.setSuccess')})
-		store.commit('auth/reloadAvatar')
+		authStore.reloadAvatar()
 	} finally {
 		loading.value = false
 		isCropAvatar.value = false

src/views/user/settings/Caldav.vue

@@ -68,7 +68,6 @@
 <script lang="ts" setup>
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
@@ -80,6 +79,7 @@ import CaldavTokenService from '@/services/caldavToken'
 import { formatDateShort } from '@/helpers/time/formatDate'
 import type {ICaldavToken} from '@/modelTypes/ICaldavToken'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const copy = useCopyToClipboard()
 
@@ -105,10 +105,10 @@ async function deleteToken(token: ICaldavToken) {
 	success(r)
 }
 
-const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
-const username = computed(() => store.state.auth.info?.username)
+const username = computed(() => authStore.info?.username)
 const caldavUrl = computed(() => `${configStore.apiBase}/dav/principals/${username.value}/`)
 const caldavEnabled = computed(() => configStore.caldavEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 </script>

src/views/user/settings/DataExport.vue

@@ -44,22 +44,22 @@ export default {name: 'user-settings-data-export'}
 
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import DataExportService from '@/services/dataExport'
-import { useTitle } from '@/composables/useTitle'
+import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 useTitle(() => `${t('user.export.title')} - ${t('user.settings.title')}`)
 
 const dataExportService = shallowReactive(new DataExportService())
 const password = ref('')
 const errPasswordRequired = ref(false)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 const passwordInput = ref()
 
 async function requestDataExport() {

src/views/user/settings/Deletion.vue

@@ -88,7 +88,6 @@ export default { name: 'user-settings-deletion' }
 
 <script setup lang="ts">
 import {ref, shallowReactive, computed} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import AccountDeleteService from '@/services/accountDelete'
@@ -96,6 +95,7 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
@@ -105,11 +105,11 @@ const accountDeleteService = shallowReactive(new AccountDeleteService())
 const password = ref('')
 const errPasswordRequired = ref(false)
 
-const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
 const userDeletionEnabled = computed(() => configStore.userDeletionEnabled)
-const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
+const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))
 
 const passwordInput = ref()
 async function deleteAccount() {
@@ -133,7 +133,7 @@ async function cancelDeletion() {
 
 	await accountDeleteService.cancel(password.value)
 	success({message: t('user.deletion.scheduledCancelSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 	password.value = ''
 }
 </script>

src/views/user/settings/EmailUpdate.vue

@@ -43,18 +43,18 @@ export default { name: 'user-settings-update-email' }
 <script setup lang="ts">
 import {reactive, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import EmailUpdateService from '@/services/emailUpdate'
 import EmailUpdateModel from '@/models/emailUpdate'
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.updateEmailTitle')} - ${t('user.settings.title')}`)
 
-const store = useStore()
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 const emailUpdate = reactive(new EmailUpdateModel())
 const emailUpdateService = shallowReactive(new EmailUpdateService())

src/views/user/settings/General.vue

@@ -149,6 +149,7 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import { useListStore } from '@/stores/lists'
+import { useAuthStore } from '@/stores/auth'
 
 export default defineComponent({
 	name: 'user-settings-general',
@@ -227,7 +228,8 @@ const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
 const quickAddMagicMode = ref(getQuickAddMagicMode())
 
 const store = useStore()
-const settings = ref({...store.state.auth.settings})
+const authStore = useAuthStore()
+const settings = ref({...authStore.settings})
 const id = ref(createRandomID())
 const availableLanguageOptions = ref(
 	Object.entries(availableLanguages)
@@ -236,13 +238,13 @@ const availableLanguageOptions = ref(
 )
 
 watch(
-	() => store.state.auth.settings,
+	() => authStore.settings,
 	() => {
 		// Only setting if we don't have values set yet to avoid overriding edited values
 		if (!objectIsEmpty(settings.value)) {
 			return
 		}
-		settings.value = {...store.state.auth.settings}
+		settings.value = {...authStore.settings}
 	},
 	{immediate: true},
 )
@@ -265,7 +267,7 @@ async function updateSettings() {
 	localStorage.setItem(playSoundWhenDoneKey, playSoundWhenDone.value ? 'true' : 'false')
 	setQuickAddMagicMode(quickAddMagicMode.value)
 
-	await store.dispatch('auth/saveUserSettings', {
+	await authStore.saveUserSettings({
 		settings: {...settings.value},
 	})
 }

src/views/user/settings/PasswordUpdate.vue

@@ -57,24 +57,24 @@ export default {name: 'user-settings-password-update'}
 
 <script setup lang="ts">
 import {ref, reactive, shallowReactive, computed} from 'vue'
-import { useI18n } from 'vue-i18n'
-import {useStore} from '@/store'
+import {useI18n} from 'vue-i18n'
 
 import PasswordUpdateService from '@/services/passwordUpdateService'
 import PasswordUpdateModel from '@/models/passwordUpdate'
 
 import {useTitle} from '@/composables/useTitle'
 import {success, error} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const passwordUpdateService = shallowReactive(new PasswordUpdateService())
 const passwordUpdate = reactive(new PasswordUpdateModel())
 const passwordConfirm = ref('')
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 useTitle(() => `${t('user.settings.newPasswordTitle')} - ${t('user.settings.title')}`)
 
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 async function updatePassword() {
 	if (passwordConfirm.value !== passwordUpdate.newPassword) {