From d793ce888ba3971edab1bb6f63f971acbbf7cb12 Mon Sep 17 00:00:00 2001
From: Daniel Biegler <DanielBiegler@users.noreply.github.com>
Date: Wed, 21 Feb 2024 00:55:13 +0100
Subject: [PATCH] Support international emails in login (#21454)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/poor-cameras-march.md                         | 5 +++++
 .../routes/login/components/login-form/login-form.vue    | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/poor-cameras-march.md

diff --git a/.changeset/poor-cameras-march.md b/.changeset/poor-cameras-march.md
new file mode 100644
index 0000000000..13c68c78d4
--- /dev/null
+++ b/.changeset/poor-cameras-march.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed an issue that prevented logging in when emails contained unicode characters
diff --git a/app/src/routes/login/components/login-form/login-form.vue b/app/src/routes/login/components/login-form/login-form.vue
index c0cab47ccc..55c21a6627 100644
--- a/app/src/routes/login/components/login-form/login-form.vue
+++ b/app/src/routes/login/components/login-form/login-form.vue
@@ -56,7 +56,10 @@ const errorFormatted = computed(() => {
 });
 
 async function onSubmit() {
-	if (email.value === null || password.value === null) {
+	// Simple RegEx, not for validation, but to prevent unnecessary login requests when the value is clearly invalid
+	const emailRegex = /^\S+@\S+$/;
+
+	if (email.value === null || !emailRegex.test(email.value) || password.value === null) {
 		error.value = 'INVALID_PAYLOAD';
 		return;
 	}
@@ -77,7 +80,7 @@ async function onSubmit() {
 
 		const redirectQuery = router.currentRoute.value.query.redirect as string;
 
-		let lastPage: string | undefined;
+		let lastPage: string | null = null;
 
 		if (userStore.currentUser && 'last_page' in userStore.currentUser) {
 			lastPage = userStore.currentUser.last_page;
@@ -97,7 +100,7 @@ async function onSubmit() {
 </script>
 
 <template>
-	<form @submit.prevent="onSubmit">
+	<form novalidate @submit.prevent="onSubmit">
 		<v-input v-model="email" autofocus autocomplete="username" type="email" :placeholder="t('email')" />
 		<v-input v-model="password" type="password" autocomplete="current-password" :placeholder="t('password')" />