188 lines
8.4 KiB
Handlebars
188 lines
8.4 KiB
Handlebars
<html>
|
|
<head>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="javascript/main.js"></script>
|
|
<script src="javascript/customModal.js"></script>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="styles/default.css">
|
|
<link rel="stylesheet" href="styles/contextMenu.css">
|
|
<link rel="stylesheet" href="styles/userNotification.css">
|
|
<link rel="stylesheet" href="styles/table.css">
|
|
|
|
|
|
<link rel="stylesheet" href="styles/colors.css" />
|
|
<link rel="stylesheet" href="styles/os.css" />
|
|
|
|
<div id="message-container"></div>
|
|
<div id="copy-toast"></div>
|
|
<title>Radix OS</title>
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
<body id="desktop">
|
|
{{!-- <form id="login-form" action="/login" method="POST"> --}}
|
|
<form id="login-form" class="container" style="width:50vw;height:100vh;align-content:center;">
|
|
<div class="static card" style="flex-direction:column">
|
|
<label for="sAMAccountName">Benutzername:</label>
|
|
<input type="text" value="demo.user" {{!-- autocomplete="username" --}} id="sAMAccountName" name="sAMAccountName" placeholder="< Vorname.Nachname >" data-tooltip="Melde dich mit deinem Windows-Benutzernamen an.<br>Ist dies deine erste Anmeldung, dann vergib ein neues Kennwort!<br><i style='color:green;'>Hat keine Auswirkungen auf deine Windows-Anmeldung</i>" required>
|
|
|
|
<label for="password">Passwort:</label>
|
|
<input type="password" value="changeme!" autocomplete="current-password" id="password" name="password" required>
|
|
<br>
|
|
<button class="bluebutton" type="submit">Einloggen</button>
|
|
</div>
|
|
</form>
|
|
<button class="yellowbutton" id="openSettings" type="button" style="position:absolute;top:10px;right:10px;">Einstellungen</button>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script src="javascript/notifyBubble.js"></script>
|
|
<script src="javascript/tableFilter.js"></script>
|
|
<script src="javascript/requiredFields.js"></script>
|
|
<script src="javascript/loadOnce.js"></script>
|
|
<script src="javascript/JSON.js"></script>
|
|
<script type="text/javascript">
|
|
const sAMAccountName = document.querySelector('#sAMAccountName');
|
|
const form = document.getElementById('login-form');
|
|
|
|
|
|
loadServerStyles(getCookie('theme'));
|
|
setCSSVariable('fontFamily', getCookie('fontFamily') ?? 'Verdana');
|
|
setCSSVariable('fontSize', getCookie('fontSize') ?? '14');
|
|
setCSSVariable('theme', getCookie('theme') ?? 'light');
|
|
|
|
|
|
form.addEventListener('submit', async e => {
|
|
try {
|
|
e.preventDefault(); // verhindert Reload
|
|
let error = null;
|
|
const data = new FormData(form);
|
|
const obj = Object.fromEntries(data.entries());
|
|
|
|
// Sende Daten via Fetch an Backend
|
|
const resSendLoginData = await fetch('/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(obj)
|
|
});
|
|
|
|
if(resSendLoginData.ok) {
|
|
const loginData = await resSendLoginData.json();
|
|
|
|
if(resSendLoginData.status === 200) {
|
|
setTimeout(() => {
|
|
window.history.pushState({ }, '', '/');
|
|
location.reload();
|
|
}, 5000);
|
|
}
|
|
if(resSendLoginData.status === 401) {
|
|
|
|
}
|
|
showMessage('Login', `${dateFormat(new Date(), 'yyyy-mm-dd HH:MM:SS')}<br><br>${loginData.message}`, data.levelId, () => { window.history.pushState({ }, '', '/'); location.reload(); } , 5000);
|
|
} else {
|
|
const errorData = await resSendLoginData.json();
|
|
showMessage('Login', `${dateFormat(new Date(), 'yyyy-mm-dd HH:MM:SS')}<br><br>${errorData.message}`, errorData.levelId, () => { window.history.pushState({ }, '', '/'); location.reload(); } , 5000);
|
|
}
|
|
} catch(err) {
|
|
alert(err)
|
|
}
|
|
});
|
|
|
|
sAMAccountName.addEventListener('blur', async () => {
|
|
if(sAMAccountName.value.trim() === '') {
|
|
sAMAccountName.classList.remove('valid', 'invalid');
|
|
sAMAccountName.removeAttribute('data-tooltip');
|
|
sAMAccountName.setAttribute('data-tooltip', "Melde dich mit deinem Windows-Benutzernamen an.<br>Ist dies deine erste Anmeldung, dann vergib ein neues Kennwort!<br><i style='color:green;'>Hat keine Auswirkungen auf deine Windows-Anmeldung</i>")
|
|
return;
|
|
}
|
|
const responseVerifyAccount = await fetch('/checkLoginName', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ sAMAccountName: sAMAccountName.value })
|
|
});
|
|
if(responseVerifyAccount.ok || responseVerifyAccount.status === 200) {
|
|
sAMAccountName.classList.add('valid');
|
|
sAMAccountName.setAttribute('data-tooltip', `Du kannst dich mit dem Benutzername <b style="color:green;">${sAMAccountName.value}</b> anmelden`)
|
|
} else {
|
|
sAMAccountName.classList.add('invalid');
|
|
sAMAccountName.setAttribute('data-tooltip', `Der Benutzername <b style="color:red;">${sAMAccountName.value}</b> wurde nicht gefunden`)
|
|
}
|
|
});
|
|
|
|
document.querySelector('#openSettings').onclick = async evt => {
|
|
feedbox(
|
|
{ title: `Einstellungen`,
|
|
message: /*html*/`
|
|
<div class="container">
|
|
<div class="card static">
|
|
<label>Farbgebung</label>
|
|
<select id="themeSwitch" onchange="switchTheme(this.value)">
|
|
<option value="dark" ${getCookie('theme') == 'dark' ? 'selected' : ''}>Dunkel</option>
|
|
<option value="light" ${getCookie('theme') == 'light' ? 'selected' : ''}>Hell</option>
|
|
<option value="modern" ${getCookie('theme') == 'modern' ? 'selected' : ''}>Modern</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="card static">
|
|
<label>Schrift</label>
|
|
<select id="fontSelector" size="8" onchange="setFontFamily(this.value)">
|
|
<optgroup label="Sans-Serif (Windows Standard)">
|
|
<option style="font-family:Arial" value="Arial">Arial</option>
|
|
<option style="font-family:Calibri" value="Calibri">Calibri</option>
|
|
<option style="font-family:Candara" value="Candara">Candara</option>
|
|
<option style="font-family:Segoe UI" value="Segoe UI">Segoe UI</option>
|
|
<option style="font-family:Tahoma" value="Tahoma">Tahoma</option>
|
|
<option style="font-family:Trebuchet MS" value="Trebuchet MS">Trebuchet MS</option>
|
|
<option style="font-family:Verdana" value="Verdana">Verdana</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Serif (Windows Standard)">
|
|
<option style="font-family:Cambria" value="Cambria">Cambria</option>
|
|
<option style="font-family:Constantia" value="Constantia">Constantia</option>
|
|
<option style="font-family:Georgia" value="Georgia">Georgia</option>
|
|
<option style="font-family:Times New Roman" value="Times New Roman">Times New Roman</option>
|
|
<option style="font-family:Palatino Linotype" value="Palatino Linotype">Palatino Linotype</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Monospace / Fixed-Width">
|
|
<option style="font-family:Consolas" value="Consolas">Consolas</option>
|
|
<option style="font-family:Courier New" value="Courier New">Courier New</option>
|
|
<option style="font-family:Lucida Console" value="Lucida Console">Lucida Console</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Fun / Decorative (Windows enthält einige)">
|
|
<option style="font-family:Comic Sans MS" value="Comic Sans MS">Comic Sans MS</option>
|
|
<option style="font-family:Impact" value="Impact">Impact</option>
|
|
<option style="font-family:Segoe Script" value="Segoe Script">Segoe Script</option>
|
|
<option style="font-family:Segoe Print" value="Segoe Print">Segoe Print</option>
|
|
</optgroup>
|
|
|
|
</select>
|
|
<div style="display:flex;flex-direction:row;align-items:center">
|
|
<input type="range" id="sizeSlider" min="10" max="32" value="${savedFontSize ?? '14'}" onchange="setFontSize(parseInt(this.value)); sizeValue.textContent = this.value + 'px';">
|
|
<span id="sizeValue">${savedFontSize ?? '14'}px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
buttons: {
|
|
yes: {
|
|
text: '<b>Fertig</b>',
|
|
onClick: async () => {}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
</script>
|
|
</html>
|
|
|
|
|