From 833356116aacfb012af7637966fbed04d6282db9 Mon Sep 17 00:00:00 2001
From: Johanna Larsson <johanna.a.m.larsson@gmail.com>
Date: Thu, 17 Sep 2026 22:19:16 +0100
Subject: [PATCH] Set inputmode on inputs

This improves mobile behavior for the inputs without affecting other things.

Two inputs set to email, rest to URL pre recommendation in https://tangled.org/tranquil.farm/tranquil-pds/issues/140

Also disables autocapitalize, autocorrect, and spellcheck, while we're at it. All really annoying when typing in handles on a mobile phone.
---
 frontend/src/components/HandleInput.svelte          |  4 ++++
 .../src/components/dashboard/AdminContent.svelte    |  4 ++++
 .../components/dashboard/ControllersContent.svelte  |  8 ++++++++
 .../components/dashboard/DidDocumentContent.svelte  |  4 ++++
 .../src/components/dashboard/SettingsContent.svelte | 13 ++++++++++++-
 .../src/components/migration/InboundWizard.svelte   |  4 ++++
 frontend/src/routes/OAuthDelegation.svelte          |  4 ++++
 frontend/src/routes/OAuthLogin.svelte               |  4 ++++
 frontend/src/routes/RequestPasskeyRecovery.svelte   |  5 ++++-
 frontend/src/routes/ResetPassword.svelte            |  5 ++++-
 10 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/HandleInput.svelte b/frontend/src/components/HandleInput.svelte
index eb1f077..b6b09cf 100644
--- a/frontend/src/components/HandleInput.svelte
+++ b/frontend/src/components/HandleInput.svelte
@@ -64,6 +64,10 @@
   <input
     {id}
     type="text"
+    inputmode="url"
+    autocapitalize="none"
+    autocorrect="off"
+    spellcheck="false"
     value={value}
     {placeholder}
     {disabled}
diff --git a/frontend/src/components/dashboard/AdminContent.svelte b/frontend/src/components/dashboard/AdminContent.svelte
index d20a592..6b78776 100644
--- a/frontend/src/components/dashboard/AdminContent.svelte
+++ b/frontend/src/components/dashboard/AdminContent.svelte
@@ -461,6 +461,10 @@
 
     <input
       type="text"
+      inputmode="url"
+      autocapitalize="none"
+      autocorrect="off"
+      spellcheck="false"
       value={searchQuery}
       oninput={(e) => onSearchInput(e.currentTarget.value)}
       placeholder={$_('admin.searchPlaceholder')}
diff --git a/frontend/src/components/dashboard/ControllersContent.svelte b/frontend/src/components/dashboard/ControllersContent.svelte
index 1120ae9..6626fb8 100644
--- a/frontend/src/components/dashboard/ControllersContent.svelte
+++ b/frontend/src/components/dashboard/ControllersContent.svelte
@@ -422,6 +422,10 @@
               <input
                 id="controllerIdentifier"
                 type="text"
+                inputmode="url"
+                autocapitalize="none"
+                autocorrect="off"
+                spellcheck="false"
                 value={addControllerIdentifier}
                 oninput={(e) => onControllerInput((e.target as HTMLInputElement).value)}
                 onblur={() => { setTimeout(() => { showTypeahead = false }, 200) }}
@@ -541,6 +545,10 @@
             <input
               id="delegatedHandle"
               type="text"
+              inputmode="url"
+              autocapitalize="none"
+              autocorrect="off"
+              spellcheck="false"
               bind:value={newDelegatedHandle}
               placeholder="username"
               disabled={creatingDelegated}
diff --git a/frontend/src/components/dashboard/DidDocumentContent.svelte b/frontend/src/components/dashboard/DidDocumentContent.svelte
index 084486f..acb245f 100644
--- a/frontend/src/components/dashboard/DidDocumentContent.svelte
+++ b/frontend/src/components/dashboard/DidDocumentContent.svelte
@@ -208,6 +208,10 @@
           <input
             id="new-handle"
             type="text"
+            inputmode="url"
+            autocapitalize="none"
+            autocorrect="off"
+            spellcheck="false"
             bind:value={newHandle}
             placeholder={$_('didEditor.handlePlaceholder')}
           />
diff --git a/frontend/src/components/dashboard/SettingsContent.svelte b/frontend/src/components/dashboard/SettingsContent.svelte
index ad9f4e6..c7b51af 100644
--- a/frontend/src/components/dashboard/SettingsContent.svelte
+++ b/frontend/src/components/dashboard/SettingsContent.svelte
@@ -342,7 +342,18 @@
         <form onsubmit={handleUpdateHandle}>
           <div>
             <label for="new-handle-byo">{$_('settings.yourDomain')}</label>
-            <input id="new-handle-byo" type="text" bind:value={newHandle} placeholder={$_('settings.yourDomainPlaceholder')} disabled={handleLoading} required />
+            <input
+              id="new-handle-byo"
+              type="text"
+              inputmode="url"
+              autocapitalize="none"
+              autocorrect="off"
+              spellcheck="false"
+              bind:value={newHandle}
+              placeholder={$_('settings.yourDomainPlaceholder')}
+              disabled={handleLoading}
+              required
+            />
           </div>
           <button type="submit" disabled={handleLoading || !newHandle}>
             {handleLoading ? $_('common.verifying') : $_('settings.verifyAndUpdate')}
diff --git a/frontend/src/components/migration/InboundWizard.svelte b/frontend/src/components/migration/InboundWizard.svelte
index 73a1244..5f93f1d 100644
--- a/frontend/src/components/migration/InboundWizard.svelte
+++ b/frontend/src/components/migration/InboundWizard.svelte
@@ -377,6 +377,10 @@
           <input
             id="source-handle"
             type="text"
+            inputmode="url"
+            autocapitalize="none"
+            autocorrect="off"
+            spellcheck="false"
             placeholder={$_('migration.inbound.sourceAuth.handlePlaceholder')}
             bind:value={handleInput}
             disabled={loading || isResuming}
diff --git a/frontend/src/routes/OAuthDelegation.svelte b/frontend/src/routes/OAuthDelegation.svelte
index d14989d..6c2bf0f 100644
--- a/frontend/src/routes/OAuthDelegation.svelte
+++ b/frontend/src/routes/OAuthDelegation.svelte
@@ -163,6 +163,10 @@
         <input
           id="controller-identifier"
           type="text"
+          inputmode="url"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
           bind:value={controllerIdentifier}
           disabled={submitting}
           required
diff --git a/frontend/src/routes/OAuthLogin.svelte b/frontend/src/routes/OAuthLogin.svelte
index 2f97b2f..eccb6b3 100644
--- a/frontend/src/routes/OAuthLogin.svelte
+++ b/frontend/src/routes/OAuthLogin.svelte
@@ -396,6 +396,10 @@
       <input
         id="username"
         type="text"
+        inputmode="url"
+        autocapitalize="none"
+        autocorrect="off"
+        spellcheck="false"
         bind:value={username}
         placeholder={handlePlaceholder}
         disabled={submitting}
diff --git a/frontend/src/routes/RequestPasskeyRecovery.svelte b/frontend/src/routes/RequestPasskeyRecovery.svelte
index d168f5b..7ca2cee 100644
--- a/frontend/src/routes/RequestPasskeyRecovery.svelte
+++ b/frontend/src/routes/RequestPasskeyRecovery.svelte
@@ -53,6 +53,10 @@
         <input
           id="identifier"
           type="text"
+          inputmode="email"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
           bind:value={identifier}
           placeholder={$_('requestPasskeyRecovery.emailPlaceholder')}
           disabled={submitting}
@@ -75,4 +79,3 @@
     <a href={getFullUrl(routes.login)}>{$_('common.backToLogin')}</a>
   </p>
 </div>
-
diff --git a/frontend/src/routes/ResetPassword.svelte b/frontend/src/routes/ResetPassword.svelte
index 160ff05..21c9b7d 100644
--- a/frontend/src/routes/ResetPassword.svelte
+++ b/frontend/src/routes/ResetPassword.svelte
@@ -120,6 +120,10 @@
         <input
           id="email"
           type="text"
+          inputmode="email"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
           bind:value={email}
           placeholder={$_('resetPassword.emailPlaceholder')}
           disabled={submitting}
@@ -136,4 +140,3 @@
     <a href="/app/login">{$_('common.backToLogin')}</a>
   </p>
 </div>
-