dcrubro/ssnj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login in registracija

Browse Source
This commit is contained in:
DcruBro
2026-05-04 14:30:54 +02:00
parent de2c6749e5
commit e48734dfa7
6 changed files with 311 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
scripts/login.js Normal file
View File

@@ -0,0 +1,45 @@
const errmsg = `
<div class="form-group">
<p class="page-paragraph-error">Napaka pri prijavi! Preverite uporabniško ime in geslo oz. poskusite kasneje.</p>
</div>
`;
document.getElementById("login-form").addEventListener("submit", async function(event) {
event.preventDefault();
// Izbriši prejšnje napake
const previousErrors = document.querySelectorAll(".page-paragraph-error");
previousErrors.forEach(error => error.remove());
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const form = document.getElementById("login-form");
try {
const response = await fetch("http://localhost:3000/prijava", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ "username": username, "password": password })
});
const data = await response.json().catch(() => ({}));
if (response.status === 200) {
// Nastavi cookie, 3 ure veljaven
document.cookie = `token=${data.token}; max-age=${3 * 60 * 60}; path=/; secure; samesite=strict`;
window.location.href = "/";
return;
}
const message = data.message || "Napaka pri prijavi! Preverite uporabniško ime in geslo oz. poskusite kasneje.";
form.insertAdjacentHTML(
"beforeend",
`<div class="form-group"><p class="page-paragraph-error">${message}</p></div>`
);
} catch (error) {
form.insertAdjacentHTML("beforeend", errmsg);
}
});

29
scripts/main.js
View File

@@ -8,6 +8,7 @@ const headerHtml = `
<a class="nav-btn" href="/about.html">O projektu</a>
<a class="nav-btn" href="/contact.html">Kontakt</a>
<a class="nav-btn" href="/extras.html">Dodatki</a>
<div id="nav-login-holder"></div>
<button id="theme-toggle" class="toggle-btn" onclick="toggleTheme()" aria-label="Toggle colour scheme" aria-pressed="false">
<div class="track"><div class="knob"></div></div>
@@ -38,7 +39,12 @@ function updateToggleState(theme) {
icon.textContent = theme === 'dark' ? '🌙' : '☀';
toggleButton.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
toggleButton.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
toggleButton.setAttribute('aria-label', theme === 'dark' ? 'Svetli način' : 'Temni način');
}
function logout() {
// Odstrani cookie tako, da ga nastaviš z max-age=0
document.cookie = 'token=; max-age=0; path=/; secure; samesite=strict';
}
document.addEventListener("DOMContentLoaded", function() {
@@ -50,6 +56,27 @@ document.addEventListener("DOMContentLoaded", function() {
element.innerHTML = headerHtml;
}
// Dodaj gumb za prijavo, če uporabnik ni prijavljen
const isLoggedIn = document.cookie.split(';').some(cookie => cookie.trim().startsWith('token='));
if (!isLoggedIn) {
const navRight = document.querySelector('.nav-right');
if (navRight) {
const loginBtn = `<a class="nav-btn nav-btn-primary" href="/login.html">Prijava</a>`;
// Najdi zadnji <a> element in dodaj gumb za njim
const lastLink = navRight.querySelector('a:last-child');
document.getElementById("nav-login-holder").innerHTML = loginBtn;
}
} else {
const navRight = document.querySelector('.nav-right');
if (navRight) {
const logoutBtn = `<a class="nav-btn nav-btn-primary" href="/">Odjava</a>`;
// Najdi zadnji <a> element in dodaj gumb za njim
const lastLink = navRight.querySelector('a:last-child');
document.getElementById("nav-login-holder").innerHTML = logoutBtn;
document.querySelector('.nav-btn-primary').addEventListener('click', logout);
}
}
for (let element of document.getElementsByClassName("page-footer")) {
element.innerHTML = footerHtml;
}

78
scripts/register.js Normal file
View File

@@ -0,0 +1,78 @@
const errmsg = `
<div class="form-group">
<p class="page-paragraph-error">Napaka pri registraciji! Preverite vnešene podatke oz. poskusite kasneje.</p>
</div>
`;
document.getElementById("login-form").addEventListener("submit", async function(event) {
event.preventDefault();
// Izbriši prejšnje napake
const previousErrors = document.querySelectorAll(".page-paragraph-error");
previousErrors.forEach(error => error.remove());
// Izbriši prejšnje uspehe
const previousSuccesses = document.querySelectorAll(".page-paragraph-success");
previousSuccesses.forEach(success => success.remove());
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirm-password").value;
const form = document.getElementById("login-form");
try {
// Veljavnost vnosa
if (!username || !email || !password || !confirmPassword) {
form.insertAdjacentHTML(
"beforeend",
`<div class="form-group"><p class="page-paragraph-error">Vsa polja so obvezna!</p></div>`
);
return;
}
if (!email.includes("@")) {
form.insertAdjacentHTML(
"beforeend",
`<div class="form-group"><p class="page-paragraph-error">Neveljaven email naslov!</p></div>`
);
return;
}
if (password !== confirmPassword) {
form.insertAdjacentHTML(
"beforeend",
`<div class="form-group"><p class="page-paragraph-error">Gesli se ne ujemata!</p></div>`
);
return;
}
const response = await fetch("http://localhost:3000/registracija", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ "username": username, "email": email, "password": password })
});
const data = await response.json().catch(() => ({}));
if (response.status === 200) {
setTimeout(() => {
form.insertAdjacentHTML(
"beforeend",
`<div class="form-group"><p class="page-paragraph-success">Uspešna registracija! Preusmerjanje na prijavo...</p></div>`
);
}, 500);
window.location.href = "/login.html";
return;
}
const message = data.message || "Napaka pri registraciji! Preverite vnešene podatke oz. poskusite kasneje.";
form.insertAdjacentHTML(
"beforeend",
`<div class="form-group"><p class="page-paragraph-error">${message}</p></div>`
);
} catch (error) {
form.insertAdjacentHTML("beforeend", errmsg);
}
});