From 5d2a3b79c5cb32f91594d05cdd0e90d6b0698445 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Thu, 7 May 2026 16:56:19 +0200
Subject: [PATCH] phase 7

---
 ui/frontend/src/routes/login/+page.svelte | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/ui/frontend/src/routes/login/+page.svelte b/ui/frontend/src/routes/login/+page.svelte
index 6c08cea..9dce69b 100644
--- a/ui/frontend/src/routes/login/+page.svelte
+++ b/ui/frontend/src/routes/login/+page.svelte
@@ -18,6 +18,15 @@
 	let pending = $state(false);
 	let error: string | null = $state(null);
 
+	// Safari ignores `autocomplete="off"` on type=email / login-shaped
+	// fields and pops the Keychain suggester regardless. The classic
+	// workaround is to render the input as `readonly` initially —
+	// Safari does not autofill readonly fields — and drop the
+	// attribute on the first user focus so typing still works. Once
+	// dropped, the flag stays false for the rest of the page life.
+	let emailReadonly = $state(true);
+	let codeReadonly = $state(true);
+
 	function describe(err: unknown): string {
 		if (err instanceof AuthError) {
 			return err.message;
@@ -183,10 +192,12 @@
 				<input
 					type="email"
 					name="galaxy-login-email"
-					autocomplete="off"
+					autocomplete="new-password"
 					autocorrect="off"
 					autocapitalize="off"
 					spellcheck="false"
+					readonly={emailReadonly}
+					onfocus={() => (emailReadonly = false)}
 					bind:value={email}
 					disabled={pending}
 					required
@@ -216,10 +227,12 @@
 					type="text"
 					name="galaxy-login-code"
 					inputmode="numeric"
-					autocomplete="off"
+					autocomplete="new-password"
 					autocorrect="off"
 					autocapitalize="off"
 					spellcheck="false"
+					readonly={codeReadonly}
+					onfocus={() => (codeReadonly = false)}
 					bind:value={code}
 					disabled={pending}
 					required