1Password showed "No items to display" on the signup password field
because login and registration shared a single form whose password input
switched autocomplete between current-password and new-password, and the
display-name field was dynamically added via v-if. Per 1Password compatible
website design, unrelated flows must be separate forms with stable fields.
Changes:
- Split into two distinct <form> elements: login (autocomplete
current-password) and signup (autocomplete new-password), each with
unique field ids so 1Password does not cache the field as a login field
- Add passwordrules, minlength=8, and maxlength=128 to the signup password
input so 1Password can generate a password matching the server rules
(min 8 chars)
- Remove the dynamic autocomplete computed and the v-if display-name field;
each form now has a static, complete field set
- Add .fields form styling (flex column, gap) now that the forms sit inside
the card container
Password managers (1Password, Bitwarden, …) could not reliably detect or
fill the auth fields because the inputs were loose labels inside a div with
no real form, no name attributes, and a static autocomplete hint.
Changes:
- Wrap the auth card in a real <form @submit.prevent> so password managers
recognize the credential form and its submit flow
- Add id/name attributes to all fields (username, displayName, password)
- Use a dynamic autocomplete hint on the password field:
current-password for login (autofill) and new-password for registration
(offer a generated strong password)
- Set autocomplete="nickname" on the display-name field so it is not
mistaken for a username or password field
- Mark the close, tab-switch, and OIDC buttons as type="button" so they no
longer default to type="submit" and trigger form submission
- Make the primary action a type="submit" button so Enter submits natively
- Add margin: 0 to .card since it is now a form element
- Add a toggle on the picture-in-picture window to swap the big board
with the mini view of the opponent's field
- Color-coded frame and badge identify whose board is currently shown
(blue = player 1, orange = player 2)
- Block building and rushing while spectating the opponent's board;
the PiP then shows your own field instead
- Clarify duel-mode descriptions in lobby and start screen, add hints
in the multiplayer bar
- Replace previous announcement banners so only one shows at a time
- Add Dockerfile (multi-stage build, unprivileged user, healthcheck),
docker-compose.yml and .dockerignore
- Server now serves static dist/ frontend and WebSocket relay on a
single port (PORT, default 3001) with path-traversal protection,
immutable asset caching and SPA fallback
- Client connects via same origin in production; dedicated ws port is
only used for vite dev/preview
- Document Docker usage, env vars and manual production mode in README