add ticket purchase page
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me> Reviewed-on: http://git.simonis.lol/projects/abiball/pulls/13 Reviewed-by: jank1619 <jan@kjan.email>
This commit is contained in:
117
assets/controllers/csrf_protection_controller.js
Normal file
117
assets/controllers/csrf_protection_controller.js
Normal file
@ -0,0 +1,117 @@
|
||||
const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
|
||||
const tokenCheck = /^[-_\/+a-zA-Z0-9]{24,}$/;
|
||||
|
||||
// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
|
||||
document.addEventListener(
|
||||
"submit",
|
||||
function (event) {
|
||||
generateCsrfToken(event.target);
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
|
||||
// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
|
||||
document.addEventListener("turbo:submit-start", function (event) {
|
||||
const h = generateCsrfHeaders(event.detail.formSubmission.formElement);
|
||||
Object.keys(h).map(function (k) {
|
||||
event.detail.formSubmission.fetchRequest.headers[k] = h[k];
|
||||
});
|
||||
});
|
||||
|
||||
// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
|
||||
document.addEventListener("turbo:submit-end", function (event) {
|
||||
removeCsrfToken(event.detail.formSubmission.formElement);
|
||||
});
|
||||
|
||||
export function generateCsrfToken(formElement) {
|
||||
const csrfField = formElement.querySelector(
|
||||
'input[data-controller="csrf-protection"], input[name="_csrf_token"]',
|
||||
);
|
||||
|
||||
if (!csrfField) {
|
||||
return;
|
||||
}
|
||||
|
||||
let csrfCookie = csrfField.getAttribute("data-csrf-protection-cookie-value");
|
||||
let csrfToken = csrfField.value;
|
||||
|
||||
if (!csrfCookie && nameCheck.test(csrfToken)) {
|
||||
csrfField.setAttribute(
|
||||
"data-csrf-protection-cookie-value",
|
||||
(csrfCookie = csrfToken),
|
||||
);
|
||||
csrfField.defaultValue = csrfToken = btoa(
|
||||
String.fromCharCode.apply(
|
||||
null,
|
||||
(window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18)),
|
||||
),
|
||||
);
|
||||
csrfField.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
|
||||
if (csrfCookie && tokenCheck.test(csrfToken)) {
|
||||
const cookie =
|
||||
csrfCookie +
|
||||
"_" +
|
||||
csrfToken +
|
||||
"=" +
|
||||
csrfCookie +
|
||||
"; path=/; samesite=strict";
|
||||
document.cookie =
|
||||
window.location.protocol === "https:"
|
||||
? "__Host-" + cookie + "; secure"
|
||||
: cookie;
|
||||
}
|
||||
}
|
||||
|
||||
export function generateCsrfHeaders(formElement) {
|
||||
const headers = {};
|
||||
const csrfField = formElement.querySelector(
|
||||
'input[data-controller="csrf-protection"], input[name="_csrf_token"]',
|
||||
);
|
||||
|
||||
if (!csrfField) {
|
||||
return headers;
|
||||
}
|
||||
|
||||
const csrfCookie = csrfField.getAttribute(
|
||||
"data-csrf-protection-cookie-value",
|
||||
);
|
||||
|
||||
if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
|
||||
headers[csrfCookie] = csrfField.value;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
export function removeCsrfToken(formElement) {
|
||||
const csrfField = formElement.querySelector(
|
||||
'input[data-controller="csrf-protection"], input[name="_csrf_token"]',
|
||||
);
|
||||
|
||||
if (!csrfField) {
|
||||
return;
|
||||
}
|
||||
|
||||
const csrfCookie = csrfField.getAttribute(
|
||||
"data-csrf-protection-cookie-value",
|
||||
);
|
||||
|
||||
if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
|
||||
const cookie =
|
||||
csrfCookie +
|
||||
"_" +
|
||||
csrfField.value +
|
||||
"=0; path=/; samesite=strict; max-age=0";
|
||||
|
||||
document.cookie =
|
||||
window.location.protocol === "https:"
|
||||
? "__Host-" + cookie + "; secure"
|
||||
: cookie;
|
||||
}
|
||||
}
|
||||
|
||||
/* stimulusFetch: 'lazy' */
|
||||
export default "csrf-protection-controller";
|
||||
204
assets/controllers/form_controller.js
Normal file
204
assets/controllers/form_controller.js
Normal file
@ -0,0 +1,204 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
import { loadStripe } from "@stripe/stripe-js";
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = [
|
||||
"key",
|
||||
"submit",
|
||||
"firstname",
|
||||
"lastname",
|
||||
"email",
|
||||
"phone",
|
||||
"ticketType",
|
||||
"foodType",
|
||||
"note",
|
||||
];
|
||||
|
||||
stripe;
|
||||
|
||||
async connect() {
|
||||
this.stripe = await loadStripe(this.keyTarget.textContent);
|
||||
}
|
||||
|
||||
addEntry(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const template = this.element
|
||||
.querySelector(".forms")
|
||||
.firstElementChild.cloneNode(true);
|
||||
|
||||
template.querySelectorAll("select, input").forEach((element) => {
|
||||
element.value = "";
|
||||
if (element.id) {
|
||||
element.id = `${element.id}_${Date.now()}`;
|
||||
}
|
||||
});
|
||||
|
||||
template.querySelectorAll("label").forEach((label) => {
|
||||
const forAttribute = label.getAttribute("for");
|
||||
if (forAttribute) {
|
||||
label.setAttribute("for", `${forAttribute}_${Date.now()}`);
|
||||
}
|
||||
});
|
||||
|
||||
template.classList.add("opacity-0");
|
||||
this.element.querySelector(".forms").appendChild(template);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
template.classList.remove("opacity-0");
|
||||
template.classList.add("transition-all", "duration-300");
|
||||
});
|
||||
}
|
||||
|
||||
removeEntry(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const forms = this.element.querySelector(".forms");
|
||||
if (forms.childElementCount <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ticketElement = event.currentTarget.closest(".bg-white\\/80");
|
||||
if (!ticketElement) return;
|
||||
|
||||
ticketElement.classList.add("opacity-0", "transition-all", "duration-300");
|
||||
setTimeout(() => {
|
||||
ticketElement.remove();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
submit(event) {
|
||||
event.preventDefault();
|
||||
if (!this.validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.submitTarget.querySelector("span").classList.add("hidden");
|
||||
this.submitTarget.querySelector("svg.arrow").classList.add("hidden");
|
||||
this.submitTarget.querySelector("svg.loader").classList.remove("hidden");
|
||||
|
||||
const tickets = this.element.querySelectorAll(".forms > div");
|
||||
const personalData = this.getPersonalData();
|
||||
const ticketData = this.getTicketData(tickets);
|
||||
|
||||
const formData = {
|
||||
personal: personalData,
|
||||
tickets: ticketData,
|
||||
};
|
||||
|
||||
fetch("/ticket/submit", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(formData),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}).then((response) => {
|
||||
if (!response.ok) {
|
||||
this.submitTarget.querySelector("svg.error").classList.add("hidden");
|
||||
this.submitTarget
|
||||
.querySelector("svg.loader")
|
||||
.classList.remove("hidden");
|
||||
this.submitTarget.querySelector("span").classList.remove("hidden");
|
||||
this.showError(
|
||||
"Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.",
|
||||
);
|
||||
} else {
|
||||
response.json().then((data) => {
|
||||
this.stripe.redirectToCheckout({
|
||||
sessionId: data.id,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
validateForm() {
|
||||
let isValid = true;
|
||||
|
||||
["firstname", "lastname", "email"].forEach((field) => {
|
||||
const target = this[`${field}Target`];
|
||||
if (!target.value.trim()) {
|
||||
this.showFieldError(target);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.element.querySelectorAll(".forms > div").forEach((ticket) => {
|
||||
const selects = ticket.querySelectorAll("select[required]");
|
||||
selects.forEach((select) => {
|
||||
if (!select.value) {
|
||||
this.showFieldError(select);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
showFieldError(element) {
|
||||
element.classList.add(
|
||||
"border-red-500",
|
||||
"focus:border-red-500",
|
||||
"focus:ring-red-200",
|
||||
);
|
||||
element.addEventListener(
|
||||
"input",
|
||||
() => {
|
||||
element.classList.remove(
|
||||
"border-red-500",
|
||||
"focus:border-red-500",
|
||||
"focus:ring-red-200",
|
||||
);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
const errorDiv = document.createElement("div");
|
||||
errorDiv.className =
|
||||
"fixed top-4 right-4 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-lg transform transition-all duration-500 opacity-0 translate-x-4";
|
||||
errorDiv.innerHTML = `
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<twig:ux:icon name="mdi:alert-circle" class="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-red-700">${message}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(errorDiv);
|
||||
requestAnimationFrame(() => {
|
||||
errorDiv.classList.remove("opacity-0", "translate-x-4");
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
errorDiv.classList.add("opacity-0", "translate-x-4");
|
||||
setTimeout(() => errorDiv.remove(), 500);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
getTicketData(tickets) {
|
||||
return Array.from(tickets).map((ticket) => this.extractTicketData(ticket));
|
||||
}
|
||||
|
||||
getPersonalData() {
|
||||
return {
|
||||
firstname: this.firstnameTarget.value.trim(),
|
||||
lastname: this.lastnameTarget.value.trim(),
|
||||
email: this.emailTarget.value.trim(),
|
||||
phone: this.phoneTarget.value.trim(),
|
||||
};
|
||||
}
|
||||
|
||||
extractTicketData(ticket) {
|
||||
return {
|
||||
ticket: parseInt(ticket.querySelector('select[name="ticket"]').value),
|
||||
food: parseInt(ticket.querySelector('select[name="food"]').value),
|
||||
note: ticket.querySelector('input[name="note"]').value.trim(),
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user