Try to make these weird templates safer

I think we need to check these snippets rather carefully
somepoint not too far

Signed-off-by: Pratyush Desai <pratyush.desai@liberta.casa>
This commit is contained in:
Pratyush Desai 2025-04-23 09:57:49 +05:30
parent 87feb8fda6
commit 1e75df8c33
Signed by untrusted user: pratyush
GPG Key ID: DBA5BB7505946FAD

View File

@ -1,38 +1,40 @@
<!-- <div id="{{ widget.name }}_container"> <div id="{{ widget.name }}_container">
{% if widget.value %} {% for k, v in widget.value.items %}
{% for k, v in widget.value.items %} <div class="port-entry">
<div class="port-entry"> <input type="text" name="{{ widget.name }}_key[]" value="{{ k }}" placeholder="port/proto">
<input type="text" name="{{ widget.name }}_key" value="{{ k }}" placeholder="port/proto"> <input type="number" name="{{ widget.name }}_value[]" value="{{ v }}" placeholder="host port">
<input type="number" name="{{ widget.name }}_value" value="{{ v }}" placeholder="host port"> <button type="button" class="remove-port-entry">×</button>
<button type="button" onclick="this.parentElement.remove()">×</button> </div>
</div> {% empty %}
{% endfor %} <div class="port-entry">
{% else %} <input type="text" name="{{ widget.name }}_key[]" placeholder="port/proto">
<div class="port-entry"> <input type="number" name="{{ widget.name }}_value[]" placeholder="host port">
<input type="text" name="{{ widget.name }}_key" placeholder="port/proto"> <button type="button" class="remove-port-entry">×</button>
<input type="number" name="{{ widget.name }}_value" placeholder="host port"> </div>
<button type="button" onclick="this.parentElement.remove()">×</button> {% endfor %}
</div>
{% endif %}
<div id="{{ widget.name }}_add"></div>
<button type="button" onclick="addPortField_{{ widget.name|slugify }}()">+ Add</button>
</div> </div>
<button type="button" id="add-port-{{ widget.name|slugify }}">+ Add</button>
<script> <script>
function addPortField_{{ widget.name|slugify }}() { document.addEventListener("DOMContentLoaded", function () {
const container = document.getElementById("{{ widget.name }}_add"); const container = document.getElementById("{{ widget.name }}_container");
const div = document.createElement("div"); const addButton = document.getElementById("add-port-{{ widget.name|slugify }}");
div.classList.add("port-entry"); addButton.addEventListener("click", () => {
div.innerHTML = ` const div = document.createElement("div");
<input type="text" name="{{ widget.name }}_key" placeholder="port/proto"> div.className = "port-entry";
<input type="number" name="{{ widget.name }}_value" placeholder="host port"> div.innerHTML = `
<button type="button" onclick="this.parentElement.remove()">×</button> <input type="text" name="{{ widget.name }}_key[]" placeholder="port/proto">
`; <input type="number" name="{{ widget.name }}_value[]" placeholder="host port">
container.appendChild(div); <button type="button" class="remove-port-entry">×</button>
} `;
container.appendChild(div);
});
container.addEventListener("click", (e) => {
if (e.target.classList.contains("remove-port-entry")) {
e.target.parentElement.remove();
}
});
});
</script> </script>
<style> <style>
.port-entry { .port-entry {
margin-bottom: 5px; margin-bottom: 5px;
@ -40,62 +42,4 @@
.port-entry input { .port-entry input {
margin-right: 5px; margin-right: 5px;
} }
</style> </style>
-->
<div id="{{ widget.name }}_container">
{% if widget.value %}
{% for k, v in widget.value.items %}
<div class="port-entry">
<input type="text" name="{{ widget.name }}_key" value="{{ k }}" placeholder="port/proto">
<input type="number" name="{{ widget.name }}_value" value="{{ v }}" placeholder="host port">
<button type="button" class="remove-port-entry">×</button>
</div>
{% endfor %}
{% else %}
<div class="port-entry">
<input type="text" name="{{ widget.name }}_key" placeholder="port/proto">
<input type="number" name="{{ widget.name }}_value" placeholder="host port">
<button type="button" class="remove-port-entry">×</button>
</div>
{% endif %}
<div id="{{ widget.name }}_add"></div>
<button type="button" id="add-port-{{ widget.name|slugify }}">+ Add</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const addButton = document.getElementById("add-port-{{ widget.name|slugify }}");
const container = document.getElementById("{{ widget.name }}_add");
// Event listener for the add button
addButton.addEventListener("click", function () {
const div = document.createElement("div");
div.classList.add("port-entry");
div.innerHTML = `
<input type="text" name="{{ widget.name }}_key" placeholder="port/proto">
<input type="number" name="{{ widget.name }}_value" placeholder="host port">
<button type="button" class="remove-port-entry">×</button>
`;
container.appendChild(div);
});
// Delegate event listener for the remove button
container.addEventListener("click", function (e) {
if (e.target && e.target.classList.contains("remove-port-entry")) {
e.target.parentElement.remove();
}
});
});
</script>
<style>
.port-entry {
margin-bottom: 5px;
}
.port-entry input {
margin-right: 5px;
}
</style>