mirror of
https://github.com/mjl-/mox.git
synced 2025-07-10 10:34:40 +03:00
for username/email input field in login form, automatically resize so also longer addresses are fully visible
feedback from jsfan3 in issue #58, thanks!
This commit is contained in:
@ -1362,6 +1362,7 @@ const login = async (reason) => {
|
||||
const origFocus = document.activeElement;
|
||||
let reasonElem;
|
||||
let fieldset;
|
||||
let autosize;
|
||||
let username;
|
||||
let password;
|
||||
const root = dom.div(style({ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: zindexes.login, animation: 'fadein .15s ease-in' }), dom.div(reasonElem = reason ? dom.div(style({ marginBottom: '2ex', textAlign: 'center' }), reason) : dom.div(), dom.div(style({ backgroundColor: 'white', borderRadius: '.25em', padding: '1em', boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)', border: '1px solid #ddd', maxWidth: '95vw', overflowX: 'auto', maxHeight: '95vh', overflowY: 'auto', marginBottom: '20vh' }), dom.form(async function submit(e) {
|
||||
@ -1391,7 +1392,7 @@ const login = async (reason) => {
|
||||
finally {
|
||||
fieldset.disabled = false;
|
||||
}
|
||||
}, fieldset = dom.fieldset(dom.h1('Mail'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), username = dom.input(attr.required(''), attr.placeholder('jane@example.org'))), 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.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')))))));
|
||||
document.body.appendChild(root);
|
||||
username.focus();
|
||||
});
|
||||
@ -2393,6 +2394,7 @@ const compose = (opts) => {
|
||||
// data-value is used for size of ::after css pseudo-element to stretch input field.
|
||||
autosizeElem.dataset.value = inputElem.value;
|
||||
}, function change() {
|
||||
autosizeElem.dataset.value = inputElem.value;
|
||||
fetchRecipientSecurity();
|
||||
}), securityBar = dom.span(dom._class('securitybar'), style({
|
||||
margin: '0 1px',
|
||||
|
Reference in New Issue
Block a user