Auto-format token and join-code inputs with dashes while typing
Shared wireCodeMask helper: uppercase, dash every 4 chars, raw-length cap, caret preserved, backspace over a dash deletes the char before it.
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
// Two panels: create a new account (one-time token reveal) or log in with an
|
||||
// existing account number.
|
||||
import { api } from '../api.js';
|
||||
import { el, mount, toast } from '../dom.js';
|
||||
import { el, mount, toast, wireCodeMask } from '../dom.js';
|
||||
import { groupCode, normalizeCode } from '../format.js';
|
||||
|
||||
export function renderAuth(container, ctx) {
|
||||
@@ -123,8 +123,10 @@ export function renderAuth(container, ctx) {
|
||||
autocapitalize: 'characters',
|
||||
spellcheck: 'false',
|
||||
placeholder: 'XXXX-XXXX-XXXX-XXXX',
|
||||
maxlength: '19',
|
||||
'aria-label': 'Account number',
|
||||
});
|
||||
wireCodeMask(input, 16);
|
||||
const submitBtn = el('button', { class: 'btn btn-primary btn-block', type: 'submit' }, 'Log in');
|
||||
|
||||
async function onSubmit(e) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Trip list dashboard: cards, a "new trip" form, and a "join a trip" form.
|
||||
import { api } from '../api.js';
|
||||
import { el, mount, clear, loading, errorBox, emptyState, toast } from '../dom.js';
|
||||
import { el, mount, clear, loading, errorBox, emptyState, toast, wireCodeMask } from '../dom.js';
|
||||
import { formatRange, ymd, parseYMD, pluralize, normalizeCode } from '../format.js';
|
||||
import { enableTripReorder } from './dragdrop.js';
|
||||
|
||||
@@ -201,8 +201,10 @@ export function renderTrips(container, ctx) {
|
||||
autocapitalize: 'characters',
|
||||
spellcheck: 'false',
|
||||
placeholder: 'XXXX-XXXX',
|
||||
maxlength: '9',
|
||||
'aria-label': 'Join code',
|
||||
});
|
||||
wireCodeMask(codeInput, 8);
|
||||
const errorEl = el('p', { class: 'form-error' });
|
||||
const submitBtn = el('button', { class: 'btn btn-primary', type: 'submit' }, 'Join trip');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user