Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update add bans

Browse source 
*actions working : add field, delete all, delete one and submit
This commit is contained in:
Jordan Blasenhauer 2024-01-19 23:18:29 +01:00
parent 0cfb72836b
commit 9befdb9eca
4 changed files with 318 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

201
src/ui/static/js/bans.js
View file

@ -364,68 +364,82 @@ class AddBanModal {
this.addBanInp = document.querySelector("input[data-ban-add-inp]");
this.addFieldBtn = document.querySelector("button[data-ban-add-new]");
this.listEl = document.querySelector(`[data-bans-add-ban-list]`);
this.submitBtn = document.querySelector(`button[data-bans-modal-submit]`);
this.removeAllFieldBtn = document.querySelector(
"button[data-ban-add-delete-all]",
"button[data-add-ban-delete-all-item]",
);
this.formEl = document.querySelector("form[data-ban-add-form]");
this.itemCount = 1;
this.setDatepicker("0"); // for default field
this.init();
}
init() {
// delete item
this.modal.addEventListener("click", (e) => {
try {
if (e.target.hasAttribute("data-add-ban-delete-item")) {
e.target.closest("li").remove();
this.updateActionBtns();
}
} catch (e) {}
try {
if (e.target.hasAttribute("data-add-ban-delete-all-item")) {
this.listEl.querySelectorAll("li").forEach((item) => {
item.remove();
});
}
} catch (e) {}
try {
if (e.target.closest("button").hasAttribute("data-bans-modal-close")) {
this.closeModal();
}
} catch (e) {}
this.updateActionBtns();
});
//open modal
this.openBtn.addEventListener("click", (e) => {
this.openModal();
});
this.modal.addEventListener("click", (e) => {
//close
try {
if (e.target.closest("button").hasAttribute("data-bans-modal-close")) {
this.closeModal();
}
} catch (err) {}
});
// add field
this.addFieldBtn.addEventListener("click", (e) => {
const field = document.createElement("div");
field.classList.add("flex", "items-center", "mb-2");
field.innerHTML = `
<input
type="text"
name="ban_add"
class="w-full px-2 py-1 border rounded-md border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-300"
placeholder="IP"
required
/>
<button
type="button"
class="ml-2 px-2 py-1 border rounded-md border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-300"
data-ban-add-delete
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
`;
this.formEl.insertBefore(field, this.removeAllFieldBtn);
this.addItem();
this.updateActionBtns();
});
// Check that all inputs have a value to submit
this.listEl.addEventListener("input", (e) => {
console.log(e.target);
this.checkInpValidity();
});
this.listEl.addEventListener("change", (e) => {
console.log(e.target);
this.checkInpValidity();
});
this.formEl.addEventListener("submit", (e) => {
e.preventDefault();
this.addBanInp.setAttribute("value", this.addBanInp.value);
this.formEl.submit();
// prepare data
const data = [];
this.listEl.querySelectorAll("li").forEach((item) => {
const ip = item.querySelector("input[data-bans-add-ip]").value;
const banEnd = item.querySelector("input[data-bans-add-ban-end]").value;
data.push({
ip: ip,
ban_end: banEnd,
ban_start: +Date.now().toString().substring(0, 10),
reason: "ui",
});
});
console.log(data);
this.addBanInp.setAttribute("value", data);
// this.formEl.submit();
});
}
@ -438,6 +452,105 @@ class AddBanModal {
this.modal.classList.add("hidden");
this.modal.classList.remove("flex");
}
checkInpValidity() {
const inps = this.listEl.querySelectorAll("input");
let isAllValid = true;
for (let i = 0; i < inps.length; i++) {
const inpEl = inps[i];
if (!inpEl.checkValidity()) {
isAllValid = false;
break;
}
}
isAllValid
? this.submitBtn.removeAttribute("disabled")
: this.submitBtn.setAttribute("disabled", "");
}
// Check if items and update button disabled/enabled states
updateActionBtns() {
const items = this.listEl.querySelectorAll("li");
const itemsCount = items.length;
itemsCount
? this.removeAllFieldBtn.removeAttribute("disabled")
: this.removeAllFieldBtn.setAttribute("disabled", "");
itemsCount ? null : this.submitBtn.setAttribute("disabled", "");
}
addItem() {
// add item
this.itemCount++;
let item = `<li
data-bans-add-ban-list
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
>
<div class="mx-1.5 col-span-5">
<label for="ip-${this.itemCount}" class="sr-only">ip</label>
<input
data-bans-add-ip
type="text"
id="ip-${this.itemCount}"
name="ip-${this.itemCount}"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="127.0.0.1"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-5">
<label for="ban-end-${this.itemCount}" class="sr-only">Ban end</label>
<input
data-bans-add-ban-end
type="text"
id="ban-end-${this.itemCount}"
name="ban-end-${this.itemCount}"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="01/01/2021 00:00:00"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-2 flex justify-center items-center">
<button
data-add-ban-delete-item
type="button"
class="dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center p-2 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 pointer-events-none"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
</div>
</li>`;
let cleanHTML = DOMPurify.sanitize(item);
this.listEl.insertAdjacentHTML("beforeend", cleanHTML);
this.setDatepicker(this.itemCount);
}
setDatepicker(id) {
// instanciate datepicker
const dateOptions = {
locale: "en",
dateFormat: "m/d/Y",
};
flatpickr(`input#ban-end-${id}`, dateOptions);
}
}
const setDropdown = new Dropdown();

321
src/ui/templates/bans_modal.html vendored
View file

@ -5,198 +5,191 @@
>
<div
data-bans-modal-card
class="overflow-y-auto mx-0 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full sm:min-w-[500px] max-w-[1000px] flex flex-col justify-between break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="overflow-y-auto mx-0 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full sm:min-w-[500px] max-w-[650px] flex flex-col justify-between break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<div>
<div class="w-full flex justify-between mb-2">
<p
data-bans-modal-title
class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-200 mb-2 font-sans font-semibold leading-normal uppercase text-md"
>
ADD BANS
</p>
<button
class="-translate-y-1"
aria-label="close modal"
data-bans-modal-close
>
<svg
class="transition duration-300 ease-in-out dark:opacity-90 h-6 w-6 sm:h-7 sm:w-7 fill-slate-800 dark:fill-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
/>
</svg>
</button>
</div>
<div
data-bans-tabs-header
class="flex flex-col sm:flex-row justify-start items-start sm:items-center gap-x-4 gap-y-2 my-3"
>
<button
data-ban-add-new
type="button"
class="dark:bg-green-500/90 duration-300 dark:opacity-90 flex justify-center items-center px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2">Add field</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button
data-ban-add-delete-all
type="button"
disabled
class="dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2">Delete all</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 w-7">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</button>
</div>
<div
class="col-span-12 overflow-y-auto overflow-x-auto"
>
<div data-{{current_endpoint}}-bans-list>
<!-- list container-->
<div class="overflow-hidden min-w-[900px] w-full grid grid-cols-12 rounded p-2">
<!-- header-->
<div>
<div class="w-full flex justify-between mb-2">
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
data-bans-modal-title
class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-200 mb-2 font-sans font-semibold leading-normal uppercase text-md"
>
IP
ADD BANS
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
<button
class="-translate-y-1"
aria-label="close modal"
data-bans-modal-close
>
Ban start
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
>
Ban end
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 border-b border-gray-400"
>
Reason
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-1 m-0 pb-2 pl-4 border-b border-gray-400"
>
Delete
</p>
<!-- end header-->
<!-- list -->
<ul class="col-span-12 w-full h-full" data-bans-add-ban-list>
<li
data-bans-add-ban-list
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
<svg
class="transition duration-300 ease-in-out dark:opacity-90 h-6 w-6 sm:h-7 sm:w-7 fill-slate-800 dark:fill-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<div class="mx-1.5 col-span-3">
<label for="ip" class="sr-only">ip</label>
<input
type="text"
id="ip"
name="ip"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="127.0.0.1"
pattern="(.*?)"
required
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
/>
</div>
<div class="mx-1.5 col-span-3">
<label for="ban-start" class="sr-only">Ban start</label>
<input
type="text"
id="ban-start"
name="ban-start"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="01/01/2021 00:00:00"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-3">
<label for="ban-end" class="sr-only">Ban end</label>
<input
type="text"
id="ban-end"
name="ban-end"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="01/01/2021 00:00:00"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-2">
<label for="reason" class="sr-only">reason</label>
<input
type="text"
id="reason"
name="reason"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="ui"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-1 flex justify-center items-center">
<button
data-add-ban
type="button"
class="dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center p-2 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</button>
</div>
</li>
</ul>
<!-- end list-->
</svg>
</button>
</div>
<div
data-bans-tabs-header
class="flex flex-col sm:flex-row justify-start items-start sm:items-center gap-x-4 gap-y-2 my-3"
>
<button
data-ban-add-new
type="button"
class="disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0 dark:bg-green-500/90 duration-300 dark:opacity-90 flex justify-center items-center px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2 pointer-events-none">Add field</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-7 h-7 pointer-events-none"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</button>
<button
data-add-ban-delete-all-item
type="button"
class="disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0 dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2 pointer-events-none">Delete all</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-7 h-7 pointer-events-none"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
</div>
<div class="col-span-12 overflow-y-auto overflow-x-auto">
<div data-{{current_endpoint}}-bans-list>
<!-- list container-->
<div
class="overflow-hidden min-w-[600px] w-full grid grid-cols-12 rounded p-2"
>
<!-- header-->
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-5 m-0 pb-2 border-b border-gray-400"
>
IP
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-5 m-0 pb-2 border-b border-gray-400"
>
Ban end
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 pl-4 border-b border-gray-400"
>
Delete
</p>
<!-- end header-->
<!-- list -->
<ul class="col-span-12 w-full h-full" data-bans-add-ban-list>
<li
data-bans-add-ban-list
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
>
<div class="mx-1.5 col-span-5">
<label for="ip-0" class="sr-only">ip</label>
<input
data-bans-add-ip
type="text"
id="ip-0"
name="ip-0"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="127.0.0.1"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-5">
<label for="ban-end-0" class="sr-only">Ban end</label>
<input
data-bans-add-ban-end
type="text"
id="ban-end-0"
name="ban-end-0"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="01/01/2021 00:00:00"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-2 flex justify-center items-center">
<button
data-add-ban-delete-item
type="button"
class="dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center p-2 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 pointer-events-none"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
</div>
</li>
</ul>
<!-- end list-->
</div>
<!-- end list container-->
</div>
</div>
<!-- end list container-->
</div>
</div>
</div>
<form
data-ban-add-form
data-ban-add-form
class="w-full flex flex-col justify-between"
id="form-new"
action="/bans"
method="POST"
>
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
<input type="hidden" name="operation" value="ban">
<input data-ban-add-inp type="hidden" name="data" value="">
<input type="hidden" name="csrf_token" value="{{csrf_token()}}" />
<input type="hidden" name="operation" value="ban" />
<input data-ban-add-inp type="hidden" name="data" value="" />
<!-- action button -->
<div class="w-full justify-center flex mt-6 mb-4">
<button
data-bans-modal-close
type="button"
class="close-btn mr-3 text-base"
class="close-btn mr-3 text-base"
>
Close
</button>
<button data-bans-modal-submit type="submit" class="valid-btn">
<button disabled data-bans-modal-submit type="submit" class="valid-btn">
Add
</button>
</div>
<!-- end action button-->
</form>
</div>
</div>
<!-- end modal -->

3
src/ui/templates/head.html vendored
View file

@ -48,6 +48,9 @@
{% elif current_endpoint == "block_requests" %}
<script type="module" src="./js/requests.js"></script>
{% elif current_endpoint == "bans" %}
<link rel="stylesheet" type="text/css" href="./css/flatpickr.css" />
<link rel="stylesheet" type="text/css" href="./css/flatpickr.dark.css" />
<script defer src="./js/utils/flatpickr.js"></script>
<script type="module" src="./js/bans.js"></script>
{% endif %}
</head>