Nun mit login und Einrichten zusätzlicher User

This commit is contained in:
rxf
2025-09-02 18:49:50 +02:00
parent 6466bb2d92
commit 5ccd37b931
12 changed files with 191 additions and 109 deletions

View File

@@ -1,3 +1,46 @@
// Tab-Wechsel Funktion aus index.pug
function showTab(tab) {
document.getElementById('tabInputContent').style.display = tab === 'input' ? '' : 'none';
document.getElementById('tabListContent').style.display = tab === 'list' ? '' : 'none';
const tabUserContent = document.getElementById('tabUserContent');
if (tabUserContent) tabUserContent.style.display = tab === 'user' ? '' : 'none';
document.getElementById('tabInput').classList.toggle('active', tab === 'input');
document.getElementById('tabList').classList.toggle('active', tab === 'list');
const tabUser = document.getElementById('tabUser');
if (tabUser) tabUser.classList.toggle('active', tab === 'user');
}
// User-Tab Handling (nur für Admins)
document.addEventListener('DOMContentLoaded', () => {
const userSaveBtn = document.getElementById('userSaveBtn');
if (userSaveBtn) {
userSaveBtn.addEventListener('click', async () => {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
const role = document.getElementById('role').value;
const userResult = document.getElementById('userResult');
if (!username || !password) {
userResult.textContent = 'Benutzername und Passwort erforderlich.';
return;
}
try {
const res = await fetch('/api/createUser', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password, role })
});
const data = await res.json();
if (data.success) {
userResult.textContent = 'User erfolgreich angelegt!';
} else {
userResult.textContent = data.error || 'Fehler beim Anlegen.';
}
} catch (err) {
userResult.textContent = 'Serverfehler.';
}
});
}
});
function updateSortArrows() {
const arrows = {
@@ -16,13 +59,6 @@ function updateSortArrows() {
});
}
// Tab-Wechsel Funktion aus index.pug
function showTab(tab) {
document.getElementById('tabInputContent').style.display = tab === 'input' ? '' : 'none';
document.getElementById('tabListContent').style.display = tab === 'list' ? '' : 'none';
document.getElementById('tabInput').classList.toggle('active', tab === 'input');
document.getElementById('tabList').classList.toggle('active', tab === 'list');
}
document.addEventListener('DOMContentLoaded', () => {
const saveBtn = document.getElementById('saveBtn');
@@ -39,7 +75,6 @@ document.addEventListener('DOMContentLoaded', () => {
const tabInput = document.getElementById('tabInput');
const tabList = document.getElementById('tabList');
let editId = null;
// Modal für Fehleranzeige
function showModal(message, showCancelButton, callback) {
@@ -206,12 +241,17 @@ function showModal(message, showCancelButton, callback) {
nameInput.value = '';
descriptionInput.value = '';
addressInput.value = '';
editId = null;
if (mitButton) {
saveBtn.textContent = 'Speichern';
}
}
const clearUserForm = () => {
document.getElementById('username').value = ''
document.getElementById('password').value = ''
document.getElementById('role').value = 'user'
}
// Globale Sortier-Variable
window.currentSort = window.currentSort || { key: null, asc: true };
@@ -239,9 +279,9 @@ function showModal(message, showCancelButton, callback) {
<td id="tdBeschreibung">${item.chip.description || ''}</td>
<td id="tdDate">${date}</td>
<td>
<div class=twobuttons>
<button data-id="${item._id}" class="editBtn">Bearbeiten</button>
<button data-id="${item._id}" class="deleteBtn">Löschen</button>
<div class="twobuttons">
<button data-id="${item._id}" class="editBtn" title="Bearbeiten">✏️</button>
<button data-id="${item._id}" class="deleteBtn" title="Löschen">🗑️</button>
</div>
</td>
`;
@@ -320,7 +360,8 @@ function showModal(message, showCancelButton, callback) {
nameInput.value = item.chip.name || '';
descriptionInput.value = item.chip.description || '';
addressInput.value = '';
editId = id;
saveBtn.textContent = 'Aktualisieren';
showTab('input')
try {
const rt = await fetch(`api/holAdresse/${item._id}`)
const data = await rt.json();
@@ -331,8 +372,6 @@ function showModal(message, showCancelButton, callback) {
} catch (e) {
console.log("Fehler beim Adresse holen", e)
}
saveBtn.textContent = 'Aktualisieren';
showTab('input')
}
});
});
@@ -366,8 +405,14 @@ function showModal(message, showCancelButton, callback) {
saveBtn.addEventListener('click', saveEntry);
refreshBtn.addEventListener('click', loadEntries);
cancelBtn.addEventListener('click', () => clearForm(true));
tabInput.addEventListener('click', () => showTab('input'))
tabList.addEventListener('click', () => showTab('list'))
userCancelBtn.addEventListener('click', () => clearUserForm(true));
tabInput.addEventListener('click', () => showTab('input'))
tabList.addEventListener('click', () => showTab('list'))
const tabUser = document.getElementById('tabUser');
if (tabUser) tabUser.addEventListener('click', () => showTab('user'))
loadEntries();
});
});
window.showTab = showTab;

View File

@@ -1,37 +0,0 @@
// public/register.js
document.addEventListener('DOMContentLoaded', () => {
const emailInput = document.getElementById('email');
const emailStatus = document.getElementById('emailStatus');
let debounceTimeout;
emailInput.addEventListener('input', () => {
clearTimeout(debounceTimeout);
const email = emailInput.value.trim();
if (!email) {
emailStatus.textContent = '';
return;
}
// 300ms warten, um zu vermeiden, dass bei jedem Tastendruck eine Anfrage rausgeht
debounceTimeout = setTimeout(async () => {
try {
const res = await fetch(`/api/check-email?email=${encodeURIComponent(email)}`);
const data = await res.json();
if (data.exists) {
emailStatus.textContent = '❌ Diese E-Mail ist schon vergeben';
emailStatus.style.color = 'red';
} else {
emailStatus.textContent = '✅ E-Mail ist frei';
emailStatus.style.color = 'green';
}
} catch (err) {
console.error(err);
emailStatus.textContent = 'Fehler bei der Prüfung';
emailStatus.style.color = 'orange';
}
}, 300);
});
});

View File

@@ -21,6 +21,11 @@
font-weight: bold;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
#tabUser {
margin-left: 50px;
}
/* Modal Fehlerfenster */
.custom-modal-popup {
position: fixed;
@@ -95,6 +100,7 @@ input, button {
table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
}
th, td {
@@ -105,11 +111,11 @@ th, td {
/* Spaltenbreiten über colgroup steuern */
col.col-sensornumber { width: 7em; }
col.col-espid {width: 6em}
col.col-espid {width: 9em}
col.col-bezeichnung { width: 8em; }
col.col-beschreibung{ width: 12em; }
col.col-beschreibung{ width: 15em; }
col.col-date { width: 10em; }
col.col-aktionen { width: 18em; }
col.col-aktionen { width: 2em; }
.controls input#page,
@@ -160,12 +166,33 @@ button:hover {
background: #0056b3;
}
.twobuttons {
display:flex;
width: 100%;
justify-content: space-between;
.editBtn, .deleteBtn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.2s ease;
margin: 0 2px;
}
.editBtn:hover {
background: rgba(0, 123, 255, 0.1);
transform: scale(1.1);
}
.deleteBtn:hover {
background: rgba(220, 53, 69, 0.1);
transform: scale(1.1);
}
.twobuttons {
display: flex;
justify-content: space-between;
width: 100%;
gap: 5px;
}
p.error {
color: red;
font-weight: bold;
@@ -199,4 +226,19 @@ p.error {
#gzahl {
margin-left: 30px;
}
#role {
font-size: 12pt;
padding: 5px 0 5px 3px;
margin-bottom: 20px;
}
#version {
width: 100%;
display: flex;
justify-content: flex-end;
font-size: 70%;
color: #007bff;
margin-top: 15px;
}