forked from Aaron/Kino-Website
761 lines
30 KiB
JavaScript
761 lines
30 KiB
JavaScript
function readStorageJson(key, fallbackValue) {
|
|
const raw = localStorage.getItem(key);
|
|
|
|
if (!raw || raw === "undefined" || raw === "null") {
|
|
return fallbackValue;
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(raw);
|
|
} catch (error) {
|
|
console.warn(`Konnte LocalStorage-Wert fuer ${key} nicht lesen.`, error);
|
|
return fallbackValue;
|
|
}
|
|
}
|
|
|
|
function normalizeUser(user) {
|
|
if (!user || typeof user !== "object") {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
salutation: user.salutation || "",
|
|
firstName: user.firstName || "",
|
|
lastName: user.lastName || "",
|
|
birthday: user.birthday || "",
|
|
street: user.street || "",
|
|
houseNumber: user.houseNumber || "",
|
|
zip: user.zip || "",
|
|
city: user.city || "",
|
|
country: user.country || "Deutschland",
|
|
email: user.email || "",
|
|
passwordHash: user.passwordHash || (user.password ? hashPassword(user.password) : ""),
|
|
orders: Array.isArray(user.orders) ? user.orders : [],
|
|
paymentMethods: Array.isArray(user.paymentMethods) ? user.paymentMethods : []
|
|
};
|
|
}
|
|
|
|
function hashPassword(password) {
|
|
let hashA = 0xdeadbeef;
|
|
let hashB = 0x41c6ce57;
|
|
const text = String(password || "");
|
|
|
|
for (let index = 0; index < text.length; index += 1) {
|
|
const charCode = text.charCodeAt(index);
|
|
hashA = Math.imul(hashA ^ charCode, 2654435761);
|
|
hashB = Math.imul(hashB ^ charCode, 1597334677);
|
|
}
|
|
|
|
hashA = Math.imul(hashA ^ (hashA >>> 16), 2246822507) ^ Math.imul(hashB ^ (hashB >>> 13), 3266489909);
|
|
hashB = Math.imul(hashB ^ (hashB >>> 16), 2246822507) ^ Math.imul(hashA ^ (hashA >>> 13), 3266489909);
|
|
|
|
return `hash$${(hashB >>> 0).toString(16).padStart(8, "0")}${(hashA >>> 0).toString(16).padStart(8, "0")}`;
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value || "")
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
function formatEuro(value) {
|
|
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
|
|
}
|
|
|
|
function persistUsers() {
|
|
localStorage.setItem("eagleUsers", JSON.stringify(users));
|
|
}
|
|
|
|
function persistCurrentUser() {
|
|
if (currentUser) {
|
|
localStorage.setItem("currentUser", JSON.stringify(currentUser));
|
|
} else {
|
|
localStorage.removeItem("currentUser");
|
|
}
|
|
}
|
|
|
|
let users = readStorageJson("eagleUsers", []);
|
|
if (!Array.isArray(users)) {
|
|
users = [];
|
|
}
|
|
users = users.map(normalizeUser).filter(Boolean);
|
|
persistUsers();
|
|
|
|
let currentUser = normalizeUser(readStorageJson("currentUser", null));
|
|
if (currentUser && currentUser.email) {
|
|
const storedMatch = users.find((user) => user.email === currentUser.email);
|
|
if (storedMatch) {
|
|
currentUser = storedMatch;
|
|
persistCurrentUser();
|
|
} else {
|
|
users.push(currentUser);
|
|
persistUsers();
|
|
persistCurrentUser();
|
|
}
|
|
}
|
|
|
|
function registerUser() {
|
|
if (!validateRegisterForm()) {
|
|
return;
|
|
}
|
|
|
|
const salutation = document.getElementById("reg-salutation")?.value.trim() || "";
|
|
const firstName = document.getElementById("reg-firstname")?.value.trim() || "";
|
|
const lastName = document.getElementById("reg-lastname")?.value.trim() || "";
|
|
const birthday = document.getElementById("reg-birthday")?.value.trim() || "";
|
|
const street = document.getElementById("reg-street")?.value.trim() || "";
|
|
const houseNumber = document.getElementById("reg-house-number")?.value.trim() || "";
|
|
const zip = document.getElementById("reg-zip")?.value.trim() || "";
|
|
const city = document.getElementById("reg-city")?.value.trim() || "";
|
|
const country = document.getElementById("reg-country")?.value.trim() || "";
|
|
const email = (document.getElementById("reg-email")?.value.trim() || "").toLowerCase();
|
|
const password = document.getElementById("reg-password")?.value || "";
|
|
|
|
const existingUser = users.find((user) => user.email.toLowerCase() === email);
|
|
if (existingUser) {
|
|
setFieldError(document.getElementById("reg-email"), "Diese E-Mail ist bereits registriert.");
|
|
return;
|
|
}
|
|
|
|
const newUser = {
|
|
salutation,
|
|
firstName,
|
|
lastName,
|
|
birthday,
|
|
street,
|
|
houseNumber,
|
|
zip,
|
|
city,
|
|
country,
|
|
email,
|
|
passwordHash: hashPassword(password),
|
|
orders: [],
|
|
paymentMethods: []
|
|
};
|
|
|
|
users.push(newUser);
|
|
currentUser = newUser;
|
|
|
|
persistUsers();
|
|
persistCurrentUser();
|
|
|
|
document.getElementById("register-modal")?.classList.add("hidden");
|
|
|
|
openAccountDashboard();
|
|
}
|
|
|
|
function loginUser() {
|
|
if (!validateLoginForm()) {
|
|
return;
|
|
}
|
|
|
|
const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase();
|
|
const password = document.getElementById("login-password")?.value || "";
|
|
const passwordHash = hashPassword(password);
|
|
|
|
const user = users.find(
|
|
(entry) => entry.email.toLowerCase() === email && entry.passwordHash === passwordHash
|
|
);
|
|
|
|
if (!user) {
|
|
document.getElementById("login-error")?.classList.remove("hidden");
|
|
setFieldError(document.getElementById("login-email"), "E-Mail oder Passwort stimmen nicht.");
|
|
setFieldError(document.getElementById("login-password"), "E-Mail oder Passwort stimmen nicht.");
|
|
return;
|
|
}
|
|
|
|
currentUser = user;
|
|
persistCurrentUser();
|
|
openAccountDashboard();
|
|
}
|
|
|
|
function openAccountDashboard() {
|
|
const accountView = document.getElementById("account-view");
|
|
if (!accountView) {
|
|
return;
|
|
}
|
|
|
|
if (!currentUser) {
|
|
accountView.innerHTML = "<div class='account-login-box'><h2>Mein Konto</h2><p>Bitte melde dich an oder registriere dich.</p></div>";
|
|
return;
|
|
}
|
|
|
|
accountView.innerHTML = `
|
|
<div class="account-panel">
|
|
<div class="account-panel-header">
|
|
<h2>Mein Konto</h2>
|
|
<div class="account-header-actions">
|
|
<button class="account-edit-btn" type="button" onclick="renderPersonalInfo(true)" aria-label="Persönliche Daten bearbeiten" title="Daten bearbeiten">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="account-logout-btn" onclick="logoutUser()">Abmelden</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="account-tabs">
|
|
<button class="account-tab-btn" onclick="renderPersonalInfo()">Persönliche Daten</button>
|
|
<button class="account-tab-btn" onclick="renderOrders()">Meine Bestellungen</button>
|
|
<button class="account-tab-btn" onclick="renderPayments()">Zahlungsmethoden</button>
|
|
</div>
|
|
|
|
<div id="account-tab-content"></div>
|
|
</div>
|
|
`;
|
|
|
|
renderPersonalInfo();
|
|
}
|
|
|
|
function renderPersonalInfo(isEditing = false) {
|
|
const target = document.getElementById("account-tab-content");
|
|
if (!target || !currentUser) {
|
|
return;
|
|
}
|
|
|
|
if (isEditing) {
|
|
target.innerHTML = `
|
|
<div class="account-card account-personal-card">
|
|
<div class="account-card-title-row">
|
|
<h3>Persönliche Daten bearbeiten</h3>
|
|
<span>E-Mail bleibt unverändert</span>
|
|
</div>
|
|
<div class="account-edit-form">
|
|
<label class="auth-field">
|
|
<span>Anrede</span>
|
|
<select id="account-edit-salutation">
|
|
<option value="">Bitte wählen</option>
|
|
<option value="Frau" ${currentUser.salutation === "Frau" ? "selected" : ""}>Frau</option>
|
|
<option value="Herr" ${currentUser.salutation === "Herr" ? "selected" : ""}>Herr</option>
|
|
<option value="Divers" ${currentUser.salutation === "Divers" ? "selected" : ""}>Divers</option>
|
|
</select>
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Vorname</span>
|
|
<input type="text" id="account-edit-firstname" value="${escapeHtml(currentUser.firstName)}" required data-required-message="Vorname ist ein Pflichtfeld.">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Nachname</span>
|
|
<input type="text" id="account-edit-lastname" value="${escapeHtml(currentUser.lastName)}" required data-required-message="Nachname ist ein Pflichtfeld.">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Geburtstag</span>
|
|
<input type="date" id="account-edit-birthday" value="${escapeHtml(currentUser.birthday)}">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Straße</span>
|
|
<input type="text" id="account-edit-street" value="${escapeHtml(currentUser.street)}">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Nr.</span>
|
|
<input type="text" id="account-edit-house-number" value="${escapeHtml(currentUser.houseNumber)}">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>PLZ</span>
|
|
<input type="text" id="account-edit-zip" value="${escapeHtml(currentUser.zip)}">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Ort</span>
|
|
<input type="text" id="account-edit-city" value="${escapeHtml(currentUser.city)}">
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field">
|
|
<span>Land</span>
|
|
<select id="account-edit-country">
|
|
<option value="Deutschland" ${currentUser.country === "Deutschland" ? "selected" : ""}>Deutschland</option>
|
|
<option value="Österreich" ${currentUser.country === "Österreich" ? "selected" : ""}>Österreich</option>
|
|
<option value="Schweiz" ${currentUser.country === "Schweiz" ? "selected" : ""}>Schweiz</option>
|
|
<option value="Luxemburg" ${currentUser.country === "Luxemburg" ? "selected" : ""}>Luxemburg</option>
|
|
</select>
|
|
<span class="field-error"></span>
|
|
</label>
|
|
<label class="auth-field account-email-locked">
|
|
<span>E-Mail</span>
|
|
<input type="email" value="${escapeHtml(currentUser.email)}" disabled>
|
|
<small>Die E-Mail-Adresse ist fest mit deinem Konto verbunden.</small>
|
|
</label>
|
|
</div>
|
|
<div class="account-edit-actions">
|
|
<button type="button" class="account-secondary-btn" onclick="renderPersonalInfo()">Abbrechen</button>
|
|
<button type="button" class="account-save-btn" onclick="savePersonalInfo()">Speichern</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
target.innerHTML = `
|
|
<div class="account-card account-personal-card">
|
|
<h3>Persönliche Daten</h3>
|
|
<div class="account-personal-grid">
|
|
<p><span>Anrede</span><strong>${escapeHtml(currentUser.salutation || "-")}</strong></p>
|
|
<p><span>Vorname</span><strong>${escapeHtml(currentUser.firstName || "-")}</strong></p>
|
|
<p><span>Nachname</span><strong>${escapeHtml(currentUser.lastName || "-")}</strong></p>
|
|
<p><span>Geburtstag</span><strong>${escapeHtml(currentUser.birthday || "-")}</strong></p>
|
|
<p><span>Straße</span><strong>${escapeHtml(currentUser.street || "-")}</strong></p>
|
|
<p><span>Nr.</span><strong>${escapeHtml(currentUser.houseNumber || "-")}</strong></p>
|
|
<p><span>PLZ</span><strong>${escapeHtml(currentUser.zip || "-")}</strong></p>
|
|
<p><span>Ort</span><strong>${escapeHtml(currentUser.city || "-")}</strong></p>
|
|
<p><span>Land</span><strong>${escapeHtml(currentUser.country || "-")}</strong></p>
|
|
<p><span>E-Mail</span><strong>${escapeHtml(currentUser.email || "-")}</strong></p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function savePersonalInfo() {
|
|
if (!currentUser) {
|
|
return;
|
|
}
|
|
|
|
const requiredFields = ["account-edit-firstname", "account-edit-lastname"];
|
|
const isValid = requiredFields
|
|
.map((id) => validateAccountField(document.getElementById(id)))
|
|
.every(Boolean);
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
currentUser.salutation = document.getElementById("account-edit-salutation")?.value || "";
|
|
currentUser.firstName = document.getElementById("account-edit-firstname")?.value.trim() || "";
|
|
currentUser.lastName = document.getElementById("account-edit-lastname")?.value.trim() || "";
|
|
currentUser.birthday = document.getElementById("account-edit-birthday")?.value || "";
|
|
currentUser.street = document.getElementById("account-edit-street")?.value.trim() || "";
|
|
currentUser.houseNumber = document.getElementById("account-edit-house-number")?.value.trim() || "";
|
|
currentUser.zip = document.getElementById("account-edit-zip")?.value.trim() || "";
|
|
currentUser.city = document.getElementById("account-edit-city")?.value.trim() || "";
|
|
currentUser.country = document.getElementById("account-edit-country")?.value || "Deutschland";
|
|
|
|
const userIndex = users.findIndex((user) => user.email === currentUser.email);
|
|
if (userIndex >= 0) {
|
|
users[userIndex] = currentUser;
|
|
}
|
|
|
|
persistUsers();
|
|
persistCurrentUser();
|
|
renderPersonalInfo();
|
|
}
|
|
|
|
function getFieldWrapper(input) {
|
|
if (!input) {
|
|
return null;
|
|
}
|
|
|
|
return input.closest(".auth-field") || document.querySelector(`[data-field-for="${input.id}"]`);
|
|
}
|
|
|
|
function setFieldError(input, message) {
|
|
const wrapper = getFieldWrapper(input);
|
|
if (!wrapper) {
|
|
return;
|
|
}
|
|
|
|
input.dataset.touched = "true";
|
|
wrapper.classList.add("is-invalid");
|
|
const error = wrapper.querySelector(".field-error");
|
|
if (error) {
|
|
error.textContent = message;
|
|
}
|
|
}
|
|
|
|
function clearFieldError(input) {
|
|
const wrapper = getFieldWrapper(input);
|
|
if (!wrapper) {
|
|
return;
|
|
}
|
|
|
|
wrapper.classList.remove("is-invalid");
|
|
const error = wrapper.querySelector(".field-error");
|
|
if (error) {
|
|
error.textContent = "";
|
|
}
|
|
}
|
|
|
|
function validateAccountField(input) {
|
|
if (!input) {
|
|
return true;
|
|
}
|
|
|
|
const value = (input.value || "").trim();
|
|
if (input.required && !value) {
|
|
setFieldError(input, input.dataset.requiredMessage || "Dieses Feld ist ein Pflichtfeld.");
|
|
return false;
|
|
}
|
|
|
|
if (input.type === "email" && value && !value.includes("@")) {
|
|
setFieldError(input, input.dataset.emailMessage || "Bitte gib eine gültige E-Mail-Adresse ein.");
|
|
return false;
|
|
}
|
|
|
|
if (input.type === "password" && value && (value.length < 8 || value.length > 32)) {
|
|
setFieldError(input, input.dataset.passwordMessage || "Passwort muss 8 bis 32 Zeichen haben.");
|
|
return false;
|
|
}
|
|
|
|
clearFieldError(input);
|
|
return true;
|
|
}
|
|
|
|
function validateRegisterForm() {
|
|
const fieldIds = [
|
|
"reg-salutation",
|
|
"reg-firstname",
|
|
"reg-lastname",
|
|
"reg-birthday",
|
|
"reg-street",
|
|
"reg-house-number",
|
|
"reg-zip",
|
|
"reg-city",
|
|
"reg-country",
|
|
"reg-email",
|
|
"reg-password"
|
|
];
|
|
|
|
return fieldIds
|
|
.map((id) => validateAccountField(document.getElementById(id)))
|
|
.every(Boolean);
|
|
}
|
|
|
|
function validateLoginForm() {
|
|
return ["login-email", "login-password"]
|
|
.map((id) => validateAccountField(document.getElementById(id)))
|
|
.every(Boolean);
|
|
}
|
|
|
|
function initAccountFieldValidation() {
|
|
const fieldSelector = [
|
|
"#login-email",
|
|
"#login-password",
|
|
"#reg-salutation",
|
|
"#reg-firstname",
|
|
"#reg-lastname",
|
|
"#reg-birthday",
|
|
"#reg-street",
|
|
"#reg-house-number",
|
|
"#reg-zip",
|
|
"#reg-city",
|
|
"#reg-country",
|
|
"#reg-email",
|
|
"#reg-password"
|
|
].join(",");
|
|
|
|
document.querySelectorAll(fieldSelector).forEach((input) => {
|
|
input.addEventListener("blur", () => {
|
|
input.dataset.touched = "true";
|
|
validateAccountField(input);
|
|
});
|
|
|
|
input.addEventListener("input", () => {
|
|
input.dataset.touched = "true";
|
|
if (input.type !== "hidden") {
|
|
validateAccountField(input);
|
|
}
|
|
});
|
|
|
|
input.addEventListener("change", () => {
|
|
input.dataset.touched = "true";
|
|
validateAccountField(input);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".gender-selector button").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const salutationInput = document.getElementById("reg-salutation");
|
|
if (!salutationInput) {
|
|
return;
|
|
}
|
|
|
|
salutationInput.value = button.dataset.gender || "";
|
|
salutationInput.dataset.touched = "true";
|
|
button.closest(".gender-selector")?.querySelectorAll("button").forEach((item) => {
|
|
item.classList.toggle("active", item === button);
|
|
});
|
|
validateAccountField(salutationInput);
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderOrders() {
|
|
const target = document.getElementById("account-tab-content");
|
|
if (!target || !currentUser) {
|
|
return;
|
|
}
|
|
|
|
const orders = Array.isArray(currentUser.orders) ? currentUser.orders : [];
|
|
|
|
if (!orders.length) {
|
|
target.innerHTML = `
|
|
<div class="account-card">
|
|
<h3>Meine Bestellungen</h3>
|
|
<p>Noch keine Bestellungen vorhanden.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const orderHtml = orders
|
|
.map((order, index) => {
|
|
const movieItems = Array.isArray(order.items)
|
|
? order.items.filter((item) => item.category === "movie")
|
|
: [];
|
|
const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
|
|
const previewTitle = previewItem?.title || "Bestellung";
|
|
const ticketsCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);
|
|
|
|
return `
|
|
<button type="button" class="order-box order-item-btn" data-order-index="${index}">
|
|
<div class="order-item-head">
|
|
<h4>${escapeHtml(previewTitle)}</h4>
|
|
<span>${formatEuro(order.total || 0)}</span>
|
|
</div>
|
|
<p><strong>Datum:</strong> ${escapeHtml(order.date || "-")}</p>
|
|
<p><strong>Anzahl:</strong> ${ticketsCount}x</p>
|
|
</button>
|
|
`;
|
|
})
|
|
.join("");
|
|
|
|
target.innerHTML = `
|
|
<div class="account-orders-shell">
|
|
<h3>Meine Bestellungen</h3>
|
|
<p class="account-payments-note">Klicke auf eine Bestellung, um genauere Informationen zu sehen.</p>
|
|
<div class="account-orders-grid">${orderHtml}</div>
|
|
<div id="order-ticket-details" class="order-ticket-details hidden"></div>
|
|
</div>
|
|
`;
|
|
|
|
const detailTarget = document.getElementById("order-ticket-details");
|
|
const orderButtons = Array.from(target.querySelectorAll(".order-item-btn"));
|
|
|
|
const renderOrderTicket = (orderIndex) => {
|
|
const order = orders[orderIndex];
|
|
if (!order || !detailTarget) {
|
|
return;
|
|
}
|
|
|
|
const movieItems = Array.isArray(order.items)
|
|
? order.items.filter((item) => item.category === "movie")
|
|
: [];
|
|
const primaryMovie = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
|
|
const poster = primaryMovie?.img || "";
|
|
const seats = movieItems.map((item) => item.seatId).filter(Boolean).join(", ") || "-";
|
|
const ticketCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);
|
|
const hall = primaryMovie?.hall || "-";
|
|
const time = primaryMovie?.time ? `${primaryMovie.time} Uhr` : "-";
|
|
|
|
detailTarget.innerHTML = `
|
|
<article class="order-ticket-card">
|
|
<div class="order-ticket-poster">
|
|
${poster
|
|
? `<img src="${escapeHtml(poster)}" alt="${escapeHtml(primaryMovie?.title || "Film")}">`
|
|
: `<div class="order-ticket-poster-fallback">Kein Poster</div>`}
|
|
</div>
|
|
<div class="order-ticket-content">
|
|
<div class="order-ticket-brand">EAGLE'S IMAX | Bestell-Details</div>
|
|
<h4>${escapeHtml(primaryMovie?.title || "Bestellung")}</h4>
|
|
<div class="order-ticket-grid">
|
|
<p><span>Datum</span><strong>${escapeHtml(order.date || "-")}</strong></p>
|
|
<p><span>Saal</span><strong>${escapeHtml(hall)}</strong></p>
|
|
<p><span>Uhrzeit</span><strong>${escapeHtml(time)}</strong></p>
|
|
<p><span>Tickets</span><strong>${ticketCount}x</strong></p>
|
|
<p><span>Sitze</span><strong>${escapeHtml(seats)}</strong></p>
|
|
<p><span>Gesamt</span><strong>${formatEuro(order.total || 0)}</strong></p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
`;
|
|
|
|
detailTarget.classList.remove("hidden");
|
|
orderButtons.forEach((button) => {
|
|
button.classList.toggle("active", Number(button.dataset.orderIndex) === orderIndex);
|
|
});
|
|
};
|
|
|
|
orderButtons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const orderIndex = Number(button.dataset.orderIndex || -1);
|
|
if (orderIndex >= 0) {
|
|
renderOrderTicket(orderIndex);
|
|
}
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
function renderPayments() {
|
|
const target = document.getElementById("account-tab-content");
|
|
if (!target || !currentUser) {
|
|
return;
|
|
}
|
|
|
|
target.innerHTML = `
|
|
<div class="account-card">
|
|
<h3>Zahlungsmethoden</h3>
|
|
<p class="account-payments-note">Hier kannst du deine bevorzugten Zahlungsmethoden verwalten.</p>
|
|
<div class="account-payment-grid">
|
|
<button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-card">
|
|
<div class="payment-logo-slot">
|
|
<img src="img/mastercard.png" alt="Mastercard">
|
|
</div>
|
|
<h4>Visa / Mastercard</h4>
|
|
<p>Karteninformationen hinterlegen</p>
|
|
</button>
|
|
<button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-paypal">
|
|
<div class="payment-logo-slot">
|
|
<img src="img/paypal.png" alt="PayPal">
|
|
</div>
|
|
<h4>PayPal</h4>
|
|
<p>Konto verbinden</p>
|
|
</button>
|
|
<button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-apple">
|
|
<div class="payment-logo-slot">
|
|
<img src="img/applepay.png" alt="Apple Pay">
|
|
</div>
|
|
<h4>Apple Pay</h4>
|
|
<p>Gerät freischalten</p>
|
|
</button>
|
|
<button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-google">
|
|
<div class="payment-logo-slot">
|
|
<img src="img/googlepay.png" alt="Google Pay">
|
|
</div>
|
|
<h4>Google Pay</h4>
|
|
<p>Wallet verknüpfen</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pay-modal-card" class="pay-modal-overlay hidden">
|
|
<div class="pay-modal-panel pay-modal-card-style">
|
|
<button type="button" class="pay-close-btn" data-pay-close>×</button>
|
|
<div class="pay-modal-head">
|
|
<img src="img/mastercard.png" alt="Kreditkarte">
|
|
<h4>Kreditkarte hinterlegen</h4>
|
|
</div>
|
|
<div class="pay-form-grid">
|
|
<label>Kartennummer
|
|
<input type="text" placeholder="1234 5678 9012 3456">
|
|
</label>
|
|
<div class="pay-form-row">
|
|
<label>Exp. Datum
|
|
<input type="text" placeholder="MM/JJ">
|
|
</label>
|
|
<label>CVV
|
|
<input type="text" placeholder="123">
|
|
</label>
|
|
</div>
|
|
<label>Name auf Karte
|
|
<input type="text" placeholder="Max Mustermann">
|
|
</label>
|
|
</div>
|
|
<button type="button" class="pay-submit-btn">Karte speichern</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pay-modal-paypal" class="pay-modal-overlay hidden">
|
|
<div class="pay-modal-panel pay-modal-paypal-style">
|
|
<button type="button" class="pay-close-btn" data-pay-close>×</button>
|
|
<div class="pay-modal-head">
|
|
<img src="img/paypal.png" alt="PayPal">
|
|
<h4>PayPal verbinden</h4>
|
|
</div>
|
|
<p>Einloggen und dein PayPal-Konto mit deinem Kino-Account verbinden.</p>
|
|
<label>E-Mail
|
|
<input type="email" placeholder="name@beispiel.de">
|
|
</label>
|
|
<label>Passwort
|
|
<input type="password" placeholder="Passwort">
|
|
</label>
|
|
<button type="button" class="pay-submit-btn paypal-btn">Mit PayPal fortfahren</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pay-modal-apple" class="pay-modal-overlay hidden">
|
|
<div class="pay-modal-panel pay-modal-apple-style">
|
|
<button type="button" class="pay-close-btn" data-pay-close>×</button>
|
|
<div class="pay-modal-head">
|
|
<img src="img/applepay.png" alt="Apple Pay">
|
|
<h4>Apple Pay einrichten</h4>
|
|
</div>
|
|
<p>Apple Pay wirkt schlicht, klar und fokussiert. Hinterlege hier die bevorzugte Karte für schnelle Zahlungen.</p>
|
|
<label>Apple-ID E-Mail
|
|
<input type="email" placeholder="appleid@beispiel.de">
|
|
</label>
|
|
<label>Bevorzugte Karte
|
|
<input type="text" placeholder="Visa, Mastercard, ...">
|
|
</label>
|
|
<button type="button" class="pay-submit-btn apple-btn">Zu Wallet hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pay-modal-google" class="pay-modal-overlay hidden">
|
|
<div class="pay-modal-panel pay-modal-google-style">
|
|
<button type="button" class="pay-close-btn" data-pay-close>×</button>
|
|
<div class="pay-modal-head">
|
|
<img src="img/googlepay.png" alt="Google Pay">
|
|
<h4>Google Pay einrichten</h4>
|
|
</div>
|
|
<p>Verbinde deine Wallet, damit zukünftige Bestellungen in wenigen Klicks abgeschlossen werden.</p>
|
|
<label>Google-Konto
|
|
<input type="email" placeholder="konto@gmail.com">
|
|
</label>
|
|
<label>Standard-Zahlungsquelle
|
|
<input type="text" placeholder="z. B. Visa 1234">
|
|
</label>
|
|
<button type="button" class="pay-submit-btn google-btn">Wallet verbinden</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const modals = Array.from(target.querySelectorAll(".pay-modal-overlay"));
|
|
const triggers = Array.from(target.querySelectorAll(".account-pay-trigger"));
|
|
const closeButtons = Array.from(target.querySelectorAll("[data-pay-close]"));
|
|
|
|
const closeAllPaymentModals = () => {
|
|
modals.forEach((modal) => modal.classList.add("hidden"));
|
|
document.body.style.overflow = "auto";
|
|
};
|
|
|
|
triggers.forEach((trigger) => {
|
|
trigger.addEventListener("click", () => {
|
|
closeAllPaymentModals();
|
|
const targetId = trigger.getAttribute("data-pay-modal");
|
|
const modal = targetId ? target.querySelector(`#${targetId}`) : null;
|
|
|
|
if (modal) {
|
|
modal.classList.remove("hidden");
|
|
document.body.style.overflow = "hidden";
|
|
}
|
|
});
|
|
});
|
|
|
|
closeButtons.forEach((button) => {
|
|
button.addEventListener("click", closeAllPaymentModals);
|
|
});
|
|
|
|
modals.forEach((modal) => {
|
|
modal.addEventListener("click", (event) => {
|
|
if (event.target === modal) {
|
|
closeAllPaymentModals();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function logoutUser() {
|
|
currentUser = null;
|
|
persistCurrentUser();
|
|
window.location.reload();
|
|
}
|