Key fields: keep the browser's password UI away, fix the keyboard layout
"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:
parent
afe8c49bd4
commit
84a94581dc
7 changed files with 154 additions and 19 deletions
|
|
@ -115,17 +115,22 @@ function GateScreen() {
|
|||
if (window.matchMedia("(pointer: fine)").matches) inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
// Keep the field and the Continue button in view while the on-screen keyboard
|
||||
// is up (the card itself is locked, so this is done by scrolling the wrapper
|
||||
// programmatically rather than by the user).
|
||||
// Keep what the listener is actually editing in view while the on-screen
|
||||
// keyboard is up: the focused field when there is one (the provider rows sit
|
||||
// far below the Continue button), the button otherwise. The wrapper stays
|
||||
// user-scrollable underneath, this just does the first move.
|
||||
const alignKeyboard = useCallback(() => {
|
||||
const wrap = wrapRef.current;
|
||||
const submit = submitRef.current;
|
||||
if (!wrap || !submit) return;
|
||||
if (!wrap) return;
|
||||
const active = document.activeElement;
|
||||
const focused =
|
||||
active instanceof HTMLElement && active !== wrap && wrap.contains(active) ? active : null;
|
||||
const target = focused ?? submitRef.current;
|
||||
if (!target) return;
|
||||
const wrapBox = wrap.getBoundingClientRect();
|
||||
const btnBox = submit.getBoundingClientRect();
|
||||
const below = btnBox.bottom + 12 - wrapBox.bottom;
|
||||
const above = wrapBox.top + 12 - btnBox.top;
|
||||
const box = target.getBoundingClientRect();
|
||||
const below = box.bottom + 12 - wrapBox.bottom;
|
||||
const above = wrapBox.top + 12 - box.top;
|
||||
if (below > 0) wrap.scrollTop += below;
|
||||
else if (above > 0) wrap.scrollTop -= above;
|
||||
}, []);
|
||||
|
|
@ -205,7 +210,7 @@ function GateScreen() {
|
|||
>
|
||||
{/* corner controls: theme + help ---------------------------------- */}
|
||||
<div
|
||||
className="absolute z-20 flex items-center gap-2"
|
||||
className={cn("absolute z-20 flex items-center gap-2", keyboardOpen && "hidden")}
|
||||
style={{
|
||||
top: "max(env(safe-area-inset-top), 1.25rem)",
|
||||
right: "max(env(safe-area-inset-right), 1.25rem)",
|
||||
|
|
@ -253,10 +258,8 @@ function GateScreen() {
|
|||
<div
|
||||
ref={wrapRef}
|
||||
className={cn(
|
||||
"relative z-10 flex h-full justify-center px-5",
|
||||
keyboardOpen
|
||||
? "items-start touch-none overflow-hidden py-3"
|
||||
: "items-center overflow-y-auto overscroll-contain py-10",
|
||||
"relative z-10 flex h-full justify-center overflow-y-auto overscroll-contain px-5",
|
||||
keyboardOpen ? "items-start py-3" : "items-center py-10",
|
||||
)}
|
||||
>
|
||||
<motion.div
|
||||
|
|
@ -302,9 +305,18 @@ function GateScreen() {
|
|||
if (error) setError(null);
|
||||
}}
|
||||
placeholder={t("gate.placeholder")}
|
||||
autoComplete="off"
|
||||
/* An API key is not a login: "new-password" is what stops
|
||||
iOS/Safari from raising its saved-password sheet over the
|
||||
gate (it offered the user's Proxmox login here once). The
|
||||
data-* hints do the same for 1Password/LastPass. */
|
||||
autoComplete="new-password"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
inputMode="text"
|
||||
enterKeyHint="go"
|
||||
data-form-type="other"
|
||||
data-lpignore="true"
|
||||
disabled={busy}
|
||||
aria-invalid={error?.tone === "invalid" || undefined}
|
||||
aria-describedby={error ? "gate-api-key-error" : undefined}
|
||||
|
|
|
|||
|
|
@ -101,7 +101,10 @@ export function ProvidersSection() {
|
|||
placeholder={t("providers.baseUrlPlaceholder")}
|
||||
aria-label={t("providers.baseUrl")}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
spellCheck={false}
|
||||
inputMode="url"
|
||||
data-form-type="other"
|
||||
className="w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
|
||||
/>
|
||||
) : null}
|
||||
|
|
@ -116,8 +119,16 @@ export function ProvidersSection() {
|
|||
}}
|
||||
placeholder={saved ? t("providers.keySaved") : provider.keyHint}
|
||||
aria-label={`${provider.label} ${t("providers.key")}`}
|
||||
autoComplete="off"
|
||||
/* See the gate: an API key must not raise the browser's
|
||||
saved-password UI ("new-password" + the data hints). */
|
||||
autoComplete="new-password"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
inputMode="text"
|
||||
enterKeyHint="done"
|
||||
data-form-type="other"
|
||||
data-lpignore="true"
|
||||
className="min-w-0 flex-1 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
|
||||
/>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue