feat: Login script setup (#2417)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2417
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/helpers/redirectToProvider.ts

@@ -1,14 +1,9 @@
-import {createRandomID} from '@/helpers/randomId'
 import {parseURL} from 'ufo'
 
-export interface Provider {
-	name: string
-	key: string
-	authUrl: string
-	clientId: string
-}
+import {createRandomID} from '@/helpers/randomId'
+import type {IProvider} from '@/types/IProvider'
 
-export const redirectToProvider = (provider: Provider, redirectUrl: string = '') => {
+export const redirectToProvider = (provider: IProvider, 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.

src/stores/auth.ts

@@ -275,6 +275,27 @@ export const useAuthStore = defineStore('auth', {
 			}
 		},
 
+		/**
+		 * Try to verify the email
+		 * @returns {Promise<boolean>} if the email was successfully confirmed
+		 */
+		async verifyEmail() {
+			const emailVerifyToken = localStorage.getItem('emailConfirmToken')
+			if (emailVerifyToken) {
+				const stopLoading = setModuleLoading(this)
+				try {
+					await HTTPFactory().post('user/confirm', {token: emailVerifyToken})
+					localStorage.removeItem('emailConfirmToken')
+					return true
+				} catch(e) {
+					throw new Error(e.response.data.message)
+				} finally {
+					stopLoading()
+				}
+			}
+			return false
+		},
+
 		async saveUserSettings({
 			settings,
 			showMessage = true,

src/stores/base.ts

@@ -132,7 +132,7 @@ export const useBaseStore = defineStore('base', {
 
 		async loadApp() {
 			await checkAndSetApiUrl(window.API_URL)
-			await useAuthStore().checkAuth()
+			useAuthStore().checkAuth()
 		},
 	},
 })

src/stores/config.ts

@@ -4,6 +4,8 @@ import {parseURL} from 'ufo'
 import {HTTPFactory} from '@/http-common'
 import {objectToCamelCase} from '@/helpers/case'
 
+import type {IProvider} from '@/types/IProvider'
+
 export interface ConfigState {
 	version: string,
 	frontendUrl: string,
@@ -29,7 +31,7 @@ export interface ConfigState {
 		openidConnect: {
 			enabled: boolean,
 			redirectUrl: string,
-			providers: [],
+			providers: IProvider[],
 		},
 	},
 }

src/types/IProvider.ts

@@ -0,0 +1,6 @@
+export interface IProvider {
+	name: string;
+	key: string;
+	authUrl: string;
+	clientId: string;
+}

src/views/user/Login.vue

@@ -14,14 +14,14 @@
 						class="input" id="username"
 						name="username"
 						:placeholder="$t('user.auth.usernamePlaceholder')"
-						ref="username"
+						ref="usernameRef"
 						required
 						type="text"
 						autocomplete="username"
 						v-focus
 						@keyup.enter="submit"
 						tabindex="1"
-						@focusout="validateField('username')"
+						@focusout="validateUsernameField()"
 					/>
 				</div>
 				<p class="help is-danger" v-if="!usernameValid">
@@ -39,7 +39,7 @@
 						{{ $t('user.auth.forgotPassword') }}
 					</router-link>
 				</div>
-				<password tabindex="2" @submit="submit" v-model="password" :validate-initially="validatePasswordInitially"/>
+				<Password tabindex="2" @submit="submit" v-model="password" :validate-initially="validatePasswordInitially"/>
 			</div>
 			<div class="field" v-if="needsTotpPasscode">
 				<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
@@ -101,136 +101,112 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {computed, onBeforeMount, ref} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRouter} from 'vue-router'
 import {useDebounceFn} from '@vueuse/core'
-import {mapState} from 'pinia'
 
-import {HTTPFactory} from '@/http-common'
-import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
-import {redirectToProvider} from '../../helpers/redirectToProvider'
-import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password.vue'
-import {setTitle} from '@/helpers/setTitle'
 
-import {useConfigStore} from '@/stores/config'
+import {getErrorText} from '@/message'
+import {redirectToProvider} from '@/helpers/redirectToProvider'
+import {getLastVisited, clearLastVisited} from '@/helpers/saveLastVisited'
+
 import {useAuthStore} from '@/stores/auth'
+import {useConfigStore} from '@/stores/config'
 
-export default defineComponent({
-	components: {
-		Password,
-		Message,
-	},
-	data() {
-		return {
-			confirmedEmailSuccess: false,
-			errorMessage: '',
-			usernameValid: true,
-			password: '',
-			validatePasswordInitially: false,
-			rememberMe: false,
+import {useTitle} from '@/composables/useTitle'
+
+const router = useRouter()
+const {t} = useI18n({useScope: 'global'})
+useTitle(() => t('user.auth.login'))
+
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+
+const registrationEnabled = computed(() => configStore.registrationEnabled)
+const localAuthEnabled = computed(() => configStore.auth.local.enabled)
+
+const openidConnect = computed(() => configStore.auth.openidConnect)
+const hasOpenIdProviders = computed(() => openidConnect.value.enabled && openidConnect.value.providers?.length > 0)
+
+const isLoading = computed(() => authStore.isLoading)
+
+const confirmedEmailSuccess = ref(false)
+const errorMessage = ref('')
+const password = ref('')
+const validatePasswordInitially = ref(false)
+const rememberMe = ref(false)
+
+const authenticated = computed(() => authStore.authenticated)
+
+onBeforeMount(() => {
+	authStore.verifyEmail().then((confirmed) => {
+		confirmedEmailSuccess.value = confirmed
+	}).catch((e: Error) => {
+		errorMessage.value = e.message
+	})
+
+	// Check if the user is already logged in, if so, redirect them to the homepage
+	if (authenticated.value) {
+		const last = getLastVisited()
+		if (last !== null) {
+			router.push({
+				name: last.name,
+				params: last.params,
+			})
+			clearLastVisited()
+		} else {
+			router.push({name: 'home'})
 		}
-	},
-	beforeMount() {
-		const HTTP = HTTPFactory()
-		// Try to verify the email
-		// FIXME: Why is this here? Can we find a better place for this?
-		let emailVerifyToken = localStorage.getItem('emailConfirmToken')
-		if (emailVerifyToken) {
-			const stopLoading = this.setLoading()
-			HTTP.post('user/confirm', {token: emailVerifyToken})
-				.then(() => {
-					localStorage.removeItem('emailConfirmToken')
-					this.confirmedEmailSuccess = true
-				})
-				.catch(e => {
-					this.errorMessage = e.response.data.message
-				})
-				.finally(stopLoading)
-		}
-
-		// Check if the user is already logged in, if so, redirect them to the homepage
-		if (this.authenticated) {
-			const last = getLastVisited()
-			if (last !== null) {
-				this.$router.push({
-					name: last.name,
-					params: last.params,
-				})
-				clearLastVisited()
-			} else {
-				this.$router.push({name: 'home'})
-			}
-		}
-	},
-	created() {
-		setTitle(this.$t('user.auth.login'))
-	},
-	computed: {
-		hasOpenIdProviders() {
-			return this.openidConnect.enabled && this.openidConnect.providers?.length > 0
-		},
-
-		...mapState(useAuthStore, {
-			needsTotpPasscode: state => state.needsTotpPasscode,
-			authenticated: state => state.authenticated,
-			isLoading: state => state.isLoading,
-		}),
-
-		...mapState(useConfigStore, {
-			registrationEnabled: state => state.registrationEnabled,
-			localAuthEnabled: state => state.auth.local.enabled,
-			openidConnect: state => state.auth.openidConnect,
-		}),
-
-		validateField() {
-			// using computed so that debounced function definition stays
-			return useDebounceFn((field) => {
-				this[`${field}Valid`] = this.$refs[field]?.value !== ''
-			}, 100)
-		},
-	},
-	methods: {
-		async submit() {
-			this.errorMessage = ''
-			// Some browsers prevent Vue bindings from working with autofilled values.
-			// To work around this, we're manually getting the values here instead of relying on vue bindings.
-			// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
-			const credentials = {
-				username: this.$refs.username.value,
-				password: this.password,
-				longToken: this.rememberMe,
-			}
-
-			if (credentials.username === '' || credentials.password === '') {
-				// Trigger the validation error messages
-				this.validateField('username')
-				this.validatePasswordInitially = true
-				return
-			}
-
-			if (this.needsTotpPasscode) {
-				credentials.totpPasscode = this.$refs.totpPasscode.value
-			}
-
-			try {
-				const authStore = useAuthStore()
-				await authStore.login(credentials)
-				authStore.setNeedsTotpPasscode(false)
-			} catch (e) {
-				if (e.response?.data.code === 1017 && !this.credentials.totpPasscode) {
-					return
-				}
-
-				const err = getErrorText(e)
-				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
-			}
-		},
-
-		redirectToProvider,
-	},
+	}
 })
+
+const usernameValid = ref(true)
+const usernameRef = ref<HTMLInputElement | null>(null)
+const validateUsernameField = useDebounceFn(() => {
+	usernameValid.value = usernameRef.value?.value !== ''
+}, 100)
+
+const needsTotpPasscode = computed(() => authStore.needsTotpPasscode)
+const totpPasscode = ref<HTMLInputElement | null>(null)
+
+async function submit() {
+	errorMessage.value = ''
+	// Some browsers prevent Vue bindings from working with autofilled values.
+	// To work around this, we're manually getting the values here instead of relying on vue bindings.
+	// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
+	const credentials = {
+		username: usernameRef.value?.value,
+		password: password.value,
+		longToken: rememberMe.value,
+	}
+
+	if (credentials.username === '' || credentials.password === '') {
+		// Trigger the validation error messages
+		validateUsernameField()
+		validatePasswordInitially.value = true
+		return
+	}
+
+	if (needsTotpPasscode.value) {
+		credentials.totpPasscode = totpPasscode.value?.value
+	}
+
+	try {
+		await authStore.login(credentials)
+		authStore.setNeedsTotpPasscode(false)
+	} catch (e) {
+		if (e.response?.data.code === 1017 && !credentials.totpPasscode) {
+			return
+		}
+
+		const err = getErrorText(e)
+		errorMessage.value = typeof err[1] !== 'undefined' ? err[1] : err[0]
+	}
+}
 </script>
 
 <style lang="scss" scoped>