@klauswuestefeld/jux-web 2024.12.3 → 2024.12.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/jux-web.js +41 -17
- package/dist/main.esm.js +41 -17
- package/dist/main.js +41 -17
- package/package.json +1 -1
package/dist/jux-web.js
CHANGED
|
@@ -14852,6 +14852,46 @@ var juxWeb = (function (exports) {
|
|
|
14852
14852
|
return result;
|
|
14853
14853
|
};
|
|
14854
14854
|
|
|
14855
|
+
const authPasswordRow = (type, autoCompleteValue) => {
|
|
14856
|
+
const result = document.createElement(`${type}-row`);
|
|
14857
|
+
result.style.display = 'flex';
|
|
14858
|
+
const label = document.createElement('label');
|
|
14859
|
+
label.textContent = type.charAt(0).toUpperCase() + type.slice(1);
|
|
14860
|
+
label.htmlFor = `input-${type}`;
|
|
14861
|
+
const input = document.createElement('input');
|
|
14862
|
+
input.id = `input-${type}`;
|
|
14863
|
+
input.type = type;
|
|
14864
|
+
input.autocomplete = autoCompleteValue;
|
|
14865
|
+
result.append(label, input);
|
|
14866
|
+
return result;
|
|
14867
|
+
};
|
|
14868
|
+
const authPasswordForm = (clientApp, loginPage, onUserLogin, backgroundImg) => {
|
|
14869
|
+
const result = document.createElement('form');
|
|
14870
|
+
const emailRow = authPasswordRow('email', 'username');
|
|
14871
|
+
const emailInput = emailRow.querySelector('input');
|
|
14872
|
+
const passwordRow = authPasswordRow('password', 'current-password');
|
|
14873
|
+
const passwordInput = passwordRow.querySelector('input');
|
|
14874
|
+
const togglePasswordDisplayBtn = document.createElement('button');
|
|
14875
|
+
togglePasswordDisplayBtn.type = 'button';
|
|
14876
|
+
togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
|
|
14877
|
+
const passwordType = passwordInput.type === 'password' ? 'text' : 'password';
|
|
14878
|
+
passwordInput.type = passwordType;
|
|
14879
|
+
});
|
|
14880
|
+
passwordRow.appendChild(togglePasswordDisplayBtn);
|
|
14881
|
+
const handlePasswordLogin = () => onAuthPasswordLogin({ email: emailInput.value, password: passwordInput.value || null }, onUserLogin, onReturn, clientApp, backgroundImg);
|
|
14882
|
+
const onReturn = () => clientApp.appendChild(loginPage);
|
|
14883
|
+
const button = loginButton('Login', handlePasswordLogin);
|
|
14884
|
+
button.classList.add('auth-password');
|
|
14885
|
+
button.setAttribute('type', 'submit');
|
|
14886
|
+
const submitButton = document.createElement('button');
|
|
14887
|
+
submitButton.style.display = 'none';
|
|
14888
|
+
result.append(emailRow, passwordRow, button, submitButton);
|
|
14889
|
+
result.addEventListener('submit', (ev) => {
|
|
14890
|
+
ev.preventDefault();
|
|
14891
|
+
handlePasswordLogin();
|
|
14892
|
+
});
|
|
14893
|
+
return result;
|
|
14894
|
+
};
|
|
14855
14895
|
const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
|
|
14856
14896
|
const onReturn = () => clientApp.appendChild(loginPage);
|
|
14857
14897
|
loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
|
|
@@ -14870,23 +14910,7 @@ var juxWeb = (function (exports) {
|
|
|
14870
14910
|
section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
|
|
14871
14911
|
}
|
|
14872
14912
|
if (loginTypes.includes('auth-password')) {
|
|
14873
|
-
|
|
14874
|
-
emailField.id = 'input-email';
|
|
14875
|
-
emailField.type = 'email';
|
|
14876
|
-
const passwordRow = document.createElement('password-row');
|
|
14877
|
-
passwordRow.style.display = 'flex';
|
|
14878
|
-
const passwordField = document.createElement('input');
|
|
14879
|
-
passwordField.id = 'input-password';
|
|
14880
|
-
passwordField.type = 'password';
|
|
14881
|
-
const togglePasswordDisplayBtn = document.createElement('button');
|
|
14882
|
-
togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
|
|
14883
|
-
const passwordType = passwordField.type === 'password' ? 'text' : 'password';
|
|
14884
|
-
passwordField.type = passwordType;
|
|
14885
|
-
});
|
|
14886
|
-
passwordRow.append(passwordField, togglePasswordDisplayBtn);
|
|
14887
|
-
const onReturn = () => clientApp.appendChild(loginPage);
|
|
14888
|
-
const button = loginButton('Login', () => onAuthPasswordLogin({ email: emailField.value, password: passwordField.value || null }, onUserLogin, onReturn, clientApp, backgroundImg));
|
|
14889
|
-
section.append(emailField, passwordRow, button);
|
|
14913
|
+
section.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, backgroundImg));
|
|
14890
14914
|
}
|
|
14891
14915
|
};
|
|
14892
14916
|
const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
|
package/dist/main.esm.js
CHANGED
|
@@ -1337,6 +1337,46 @@ const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, cli
|
|
|
1337
1337
|
return result;
|
|
1338
1338
|
};
|
|
1339
1339
|
|
|
1340
|
+
const authPasswordRow = (type, autoCompleteValue) => {
|
|
1341
|
+
const result = document.createElement(`${type}-row`);
|
|
1342
|
+
result.style.display = 'flex';
|
|
1343
|
+
const label = document.createElement('label');
|
|
1344
|
+
label.textContent = type.charAt(0).toUpperCase() + type.slice(1);
|
|
1345
|
+
label.htmlFor = `input-${type}`;
|
|
1346
|
+
const input = document.createElement('input');
|
|
1347
|
+
input.id = `input-${type}`;
|
|
1348
|
+
input.type = type;
|
|
1349
|
+
input.autocomplete = autoCompleteValue;
|
|
1350
|
+
result.append(label, input);
|
|
1351
|
+
return result;
|
|
1352
|
+
};
|
|
1353
|
+
const authPasswordForm = (clientApp, loginPage, onUserLogin, backgroundImg) => {
|
|
1354
|
+
const result = document.createElement('form');
|
|
1355
|
+
const emailRow = authPasswordRow('email', 'username');
|
|
1356
|
+
const emailInput = emailRow.querySelector('input');
|
|
1357
|
+
const passwordRow = authPasswordRow('password', 'current-password');
|
|
1358
|
+
const passwordInput = passwordRow.querySelector('input');
|
|
1359
|
+
const togglePasswordDisplayBtn = document.createElement('button');
|
|
1360
|
+
togglePasswordDisplayBtn.type = 'button';
|
|
1361
|
+
togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
|
|
1362
|
+
const passwordType = passwordInput.type === 'password' ? 'text' : 'password';
|
|
1363
|
+
passwordInput.type = passwordType;
|
|
1364
|
+
});
|
|
1365
|
+
passwordRow.appendChild(togglePasswordDisplayBtn);
|
|
1366
|
+
const handlePasswordLogin = () => onAuthPasswordLogin({ email: emailInput.value, password: passwordInput.value || null }, onUserLogin, onReturn, clientApp, backgroundImg);
|
|
1367
|
+
const onReturn = () => clientApp.appendChild(loginPage);
|
|
1368
|
+
const button = loginButton('Login', handlePasswordLogin);
|
|
1369
|
+
button.classList.add('auth-password');
|
|
1370
|
+
button.setAttribute('type', 'submit');
|
|
1371
|
+
const submitButton = document.createElement('button');
|
|
1372
|
+
submitButton.style.display = 'none';
|
|
1373
|
+
result.append(emailRow, passwordRow, button, submitButton);
|
|
1374
|
+
result.addEventListener('submit', (ev) => {
|
|
1375
|
+
ev.preventDefault();
|
|
1376
|
+
handlePasswordLogin();
|
|
1377
|
+
});
|
|
1378
|
+
return result;
|
|
1379
|
+
};
|
|
1340
1380
|
const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
|
|
1341
1381
|
const onReturn = () => clientApp.appendChild(loginPage);
|
|
1342
1382
|
loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
|
|
@@ -1355,23 +1395,7 @@ const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes
|
|
|
1355
1395
|
section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
|
|
1356
1396
|
}
|
|
1357
1397
|
if (loginTypes.includes('auth-password')) {
|
|
1358
|
-
|
|
1359
|
-
emailField.id = 'input-email';
|
|
1360
|
-
emailField.type = 'email';
|
|
1361
|
-
const passwordRow = document.createElement('password-row');
|
|
1362
|
-
passwordRow.style.display = 'flex';
|
|
1363
|
-
const passwordField = document.createElement('input');
|
|
1364
|
-
passwordField.id = 'input-password';
|
|
1365
|
-
passwordField.type = 'password';
|
|
1366
|
-
const togglePasswordDisplayBtn = document.createElement('button');
|
|
1367
|
-
togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
|
|
1368
|
-
const passwordType = passwordField.type === 'password' ? 'text' : 'password';
|
|
1369
|
-
passwordField.type = passwordType;
|
|
1370
|
-
});
|
|
1371
|
-
passwordRow.append(passwordField, togglePasswordDisplayBtn);
|
|
1372
|
-
const onReturn = () => clientApp.appendChild(loginPage);
|
|
1373
|
-
const button = loginButton('Login', () => onAuthPasswordLogin({ email: emailField.value, password: passwordField.value || null }, onUserLogin, onReturn, clientApp, backgroundImg));
|
|
1374
|
-
section.append(emailField, passwordRow, button);
|
|
1398
|
+
section.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, backgroundImg));
|
|
1375
1399
|
}
|
|
1376
1400
|
};
|
|
1377
1401
|
const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
|
package/dist/main.js
CHANGED
|
@@ -1361,6 +1361,46 @@ const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, cli
|
|
|
1361
1361
|
return result;
|
|
1362
1362
|
};
|
|
1363
1363
|
|
|
1364
|
+
const authPasswordRow = (type, autoCompleteValue) => {
|
|
1365
|
+
const result = document.createElement(`${type}-row`);
|
|
1366
|
+
result.style.display = 'flex';
|
|
1367
|
+
const label = document.createElement('label');
|
|
1368
|
+
label.textContent = type.charAt(0).toUpperCase() + type.slice(1);
|
|
1369
|
+
label.htmlFor = `input-${type}`;
|
|
1370
|
+
const input = document.createElement('input');
|
|
1371
|
+
input.id = `input-${type}`;
|
|
1372
|
+
input.type = type;
|
|
1373
|
+
input.autocomplete = autoCompleteValue;
|
|
1374
|
+
result.append(label, input);
|
|
1375
|
+
return result;
|
|
1376
|
+
};
|
|
1377
|
+
const authPasswordForm = (clientApp, loginPage, onUserLogin, backgroundImg) => {
|
|
1378
|
+
const result = document.createElement('form');
|
|
1379
|
+
const emailRow = authPasswordRow('email', 'username');
|
|
1380
|
+
const emailInput = emailRow.querySelector('input');
|
|
1381
|
+
const passwordRow = authPasswordRow('password', 'current-password');
|
|
1382
|
+
const passwordInput = passwordRow.querySelector('input');
|
|
1383
|
+
const togglePasswordDisplayBtn = document.createElement('button');
|
|
1384
|
+
togglePasswordDisplayBtn.type = 'button';
|
|
1385
|
+
togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
|
|
1386
|
+
const passwordType = passwordInput.type === 'password' ? 'text' : 'password';
|
|
1387
|
+
passwordInput.type = passwordType;
|
|
1388
|
+
});
|
|
1389
|
+
passwordRow.appendChild(togglePasswordDisplayBtn);
|
|
1390
|
+
const handlePasswordLogin = () => onAuthPasswordLogin({ email: emailInput.value, password: passwordInput.value || null }, onUserLogin, onReturn, clientApp, backgroundImg);
|
|
1391
|
+
const onReturn = () => clientApp.appendChild(loginPage);
|
|
1392
|
+
const button = loginButton('Login', handlePasswordLogin);
|
|
1393
|
+
button.classList.add('auth-password');
|
|
1394
|
+
button.setAttribute('type', 'submit');
|
|
1395
|
+
const submitButton = document.createElement('button');
|
|
1396
|
+
submitButton.style.display = 'none';
|
|
1397
|
+
result.append(emailRow, passwordRow, button, submitButton);
|
|
1398
|
+
result.addEventListener('submit', (ev) => {
|
|
1399
|
+
ev.preventDefault();
|
|
1400
|
+
handlePasswordLogin();
|
|
1401
|
+
});
|
|
1402
|
+
return result;
|
|
1403
|
+
};
|
|
1364
1404
|
const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
|
|
1365
1405
|
const onReturn = () => clientApp.appendChild(loginPage);
|
|
1366
1406
|
loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
|
|
@@ -1379,23 +1419,7 @@ const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes
|
|
|
1379
1419
|
section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
|
|
1380
1420
|
}
|
|
1381
1421
|
if (loginTypes.includes('auth-password')) {
|
|
1382
|
-
|
|
1383
|
-
emailField.id = 'input-email';
|
|
1384
|
-
emailField.type = 'email';
|
|
1385
|
-
const passwordRow = document.createElement('password-row');
|
|
1386
|
-
passwordRow.style.display = 'flex';
|
|
1387
|
-
const passwordField = document.createElement('input');
|
|
1388
|
-
passwordField.id = 'input-password';
|
|
1389
|
-
passwordField.type = 'password';
|
|
1390
|
-
const togglePasswordDisplayBtn = document.createElement('button');
|
|
1391
|
-
togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
|
|
1392
|
-
const passwordType = passwordField.type === 'password' ? 'text' : 'password';
|
|
1393
|
-
passwordField.type = passwordType;
|
|
1394
|
-
});
|
|
1395
|
-
passwordRow.append(passwordField, togglePasswordDisplayBtn);
|
|
1396
|
-
const onReturn = () => clientApp.appendChild(loginPage);
|
|
1397
|
-
const button = loginButton('Login', () => onAuthPasswordLogin({ email: emailField.value, password: passwordField.value || null }, onUserLogin, onReturn, clientApp, backgroundImg));
|
|
1398
|
-
section.append(emailField, passwordRow, button);
|
|
1422
|
+
section.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, backgroundImg));
|
|
1399
1423
|
}
|
|
1400
1424
|
};
|
|
1401
1425
|
const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
|