web apps: add autocomplete attribute for usernames and passwords

hinted at by chromium developer console
This commit is contained in:
Mechiel Lukkien 2024-11-29 10:40:22 +01:00
parent 96d86ad6f1
commit 09e7ddba9e
No known key found for this signature in database
6 changed files with 8 additions and 6 deletions

View file

@ -913,7 +913,7 @@ const login = async (reason) => {
finally { finally {
fieldset.disabled = false; fieldset.disabled = false;
} }
}, fieldset = dom.fieldset(dom.h1('Account'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), autosize = dom.span(dom._class('autosize'), username = dom.input(attr.required(''), attr.placeholder('jane@example.org'), function change() { autosize.dataset.value = username.value; }, function input() { autosize.dataset.value = username.value; }))), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login'))))))); }, fieldset = dom.fieldset(dom.h1('Account'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), autosize = dom.span(dom._class('autosize'), username = dom.input(attr.required(''), attr.autocomplete('username'), attr.placeholder('jane@example.org'), function change() { autosize.dataset.value = username.value; }, function input() { autosize.dataset.value = username.value; }))), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.autocomplete('current-password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login')))))));
document.body.appendChild(root); document.body.appendChild(root);
username.focus(); username.focus();
}); });

View file

@ -61,6 +61,7 @@ const login = async (reason: string) => {
autosize=dom.span(dom._class('autosize'), autosize=dom.span(dom._class('autosize'),
username=dom.input( username=dom.input(
attr.required(''), attr.required(''),
attr.autocomplete('username'),
attr.placeholder('jane@example.org'), attr.placeholder('jane@example.org'),
function change() { autosize.dataset.value = username.value }, function change() { autosize.dataset.value = username.value },
function input() { autosize.dataset.value = username.value }, function input() { autosize.dataset.value = username.value },
@ -70,7 +71,7 @@ const login = async (reason: string) => {
dom.label( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),
dom.div('Password', style({marginBottom: '.5ex'})), dom.div('Password', style({marginBottom: '.5ex'})),
password=dom.input(attr.type('password'), attr.required('')), password=dom.input(attr.type('password'), attr.autocomplete('current-password'), attr.required('')),
), ),
dom.div( dom.div(
style({textAlign: 'center'}), style({textAlign: 'center'}),

View file

@ -1676,7 +1676,7 @@ const login = async (reason) => {
finally { finally {
fieldset.disabled = false; fieldset.disabled = false;
} }
}, fieldset = dom.fieldset(dom.h1('Admin'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login'))))))); }, fieldset = dom.fieldset(dom.h1('Admin'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.autocomplete('current-password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login')))))));
document.body.appendChild(root); document.body.appendChild(root);
password.focus(); password.focus();
}); });

View file

@ -54,7 +54,7 @@ const login = async (reason: string) => {
dom.label( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),
dom.div('Password', style({marginBottom: '.5ex'})), dom.div('Password', style({marginBottom: '.5ex'})),
password=dom.input(attr.type('password'), attr.required('')), password=dom.input(attr.type('password'), attr.autocomplete('current-password'), attr.required('')),
), ),
dom.div( dom.div(
style({textAlign: 'center'}), style({textAlign: 'center'}),

View file

@ -1725,7 +1725,7 @@ const login = async (reason) => {
finally { finally {
fieldset.disabled = false; fieldset.disabled = false;
} }
}, fieldset = dom.fieldset(dom.h1('Mail'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), autosize = dom.span(dom._class('autosize'), username = dom.input(attr.required(''), attr.placeholder('jane@example.org'), function change() { autosize.dataset.value = username.value; }, function input() { autosize.dataset.value = username.value; }))), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login'))))))); }, fieldset = dom.fieldset(dom.h1('Mail'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), autosize = dom.span(dom._class('autosize'), username = dom.input(attr.required(''), attr.autocomplete('username'), attr.placeholder('jane@example.org'), function change() { autosize.dataset.value = username.value; }, function input() { autosize.dataset.value = username.value; }))), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.autocomplete('current-password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login')))))));
document.body.appendChild(root); document.body.appendChild(root);
username.focus(); username.focus();
}); });

View file

@ -324,6 +324,7 @@ const login = async (reason: string) => {
autosize=dom.span(dom._class('autosize'), autosize=dom.span(dom._class('autosize'),
username=dom.input( username=dom.input(
attr.required(''), attr.required(''),
attr.autocomplete('username'),
attr.placeholder('jane@example.org'), attr.placeholder('jane@example.org'),
function change() { autosize.dataset.value = username.value }, function change() { autosize.dataset.value = username.value },
function input() { autosize.dataset.value = username.value }, function input() { autosize.dataset.value = username.value },
@ -333,7 +334,7 @@ const login = async (reason: string) => {
dom.label( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),
dom.div('Password', style({marginBottom: '.5ex'})), dom.div('Password', style({marginBottom: '.5ex'})),
password=dom.input(attr.type('password'), attr.required('')), password=dom.input(attr.type('password'), attr.autocomplete('current-password'), attr.required('')),
), ),
dom.div( dom.div(
style({textAlign: 'center'}), style({textAlign: 'center'}),