dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Key fields: keep the browser's password UI away, fix the keyboard layout

Browse source 
"Trying to use a different provider on the web app glitches out completely" -
an iPhone photo of the first-run gate with iOS's saved-password sheet laid
over it ("password for proxmox...") and the provider field stuck under the
keyboard.

- The key fields (gate, Settings, provider rows) were type=password with
  autocomplete=off, which iOS/Safari and 1Password/LastPass read as a login.
  They now carry autoComplete="new-password", data-form-type="other",
  data-lpignore="true", autoCorrect/autoCapitalize=off and inputMode=text:
  the mask stays, the password overlay goes. The custom base URL gets
  inputMode=url and the same hints.
- The gate's keyboard handling scrolled to the Continue button instead of the
  field being edited, so with the provider rows open the keyboard covered the
  input and the locked wrapper could not be scrolled to it. The wrapper is
  user-scrollable again, alignment anchors on the focused element (Continue
  is the fallback), and the corner controls hide while the keyboard is up
  rather than landing on the card.

providers-test drives a fake visualViewport (340px, installed before mount)
and pins the three layout contracts plus the hardening attributes. All 16
suites green, contrast clean. Version 0.7.2, SW v94.
This commit is contained in:
Martin Dvořák 2026-10-16 10:12:20 +00:00
commit 84a94581dc
7 changed files with 154 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/SettingsDialog.tsx
View file

@ -318,8 +318,15 @@ export function SettingsDialog({
if (event.key === "Enter") save();
}}
placeholder={t("settings.pasteKey")}
autoComplete="off"
/* Not a login: keep the browser's password UI away
(see the gate for the same treatment). */
autoComplete="new-password"
autoCorrect="off"
autoCapitalize="off"
spellCheck={false}
inputMode="text"
data-form-type="other"
data-lpignore="true"
className="w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] py-3 pl-3 pr-12 font-mono text-xs text-frost-950 outline-none transition placeholder:font-sans placeholder:text-[var(--text-subtle)] focus:border-accent-500 dark:text-frost-50"
/>
<button
@ -682,8 +689,15 @@ export function SettingsDialog({
if (event.key === "Enter") save();
}}
placeholder={t("settings.pasteKey")}
autoComplete="off"
/* Not a login: keep the browser's password UI away
(see the gate for the same treatment). */
autoComplete="new-password"
autoCorrect="off"
autoCapitalize="off"
spellCheck={false}
inputMode="text"
data-form-type="other"
data-lpignore="true"
className="w-full min-w-0 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 font-mono text-xs text-frost-950 outline-none transition placeholder:font-sans placeholder:text-[var(--text-subtle)] focus:border-accent-500 dark:text-frost-50 sm:min-w-40 sm:flex-1"
/>
<div className="flex items-center gap-2 sm:contents">