zoeissleeping/passport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

style changes, nicer link management, api reorg
Some checks are pending
Build and Push Docker Image to GHCR / build-and-push (push) Waiting to run
Details

Browse Source
This commit is contained in:
Zoe
2025-09-22 21:31:35 -05:00
parent a1e5346fdf
commit bc8b9d172b
4 changed files with 185 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
templates/views/admin/index.hbs
View File

@@ -1,10 +1,23 @@
<section class="flex justify-center w-full transition-[filter] duration-300 ease-[cubic-bezier(0.45,_0,_0.55,_1)]">
<header class="flex w-full p-3">
<a href="/" class="flex items-center flex-row gap-2 text-white border-b hover:border-transparent justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="m9 14l-4-4l4-4" />
<path d="M5 10h11a4 4 0 1 1 0 8h-1" />
</g>
</svg>
Return to home
</a>
</header>
<section class="flex justify-center w-full">
<div class="w-full sm:w-4/5 p-2.5">
{{#each Categories}}
<div class="flex items-center">
<div class="flex items-center" key="category-{{this.ID}}">
<img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
src="{{this.Icon}}" />
<h2 class="capitalize">{{this.Name}}</h2>
<h2 class="capitalize break-all">{{this.Name}}</h2>
<button onclick="deleteCategory({{this.ID}})"
class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
@@ -14,15 +27,15 @@
</div>
<div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
{{#each this.Links}}
<div
<div key="link-{{this.ID}}"
class="rounded-2xl bg-[#211F23] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform,translate] ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-1 relative">
<img class="object-contain mr-2 select-none rounded-md" width="64" height="64" draggable="false"
src="{{this.Icon}}" alt="{{this.Name}}" />
<div>
<img class="mr-2 select-none rounded-md aspect-square object-cover" width="64" height="64"
draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
<div class="break-all">
<h3>{{this.Name}}</h3>
<p class="text-[#D7D7D7]">{{this.Description}}</p>
</div>
<button onclick="deleteLink({{this.ID}})"
<button onclick="deleteLink({{this.ID}}, {{this.CategoryID}})"
class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer absolute right-1 top-1"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round"
@@ -58,31 +71,33 @@
class="flex modal-bg fixed top-0 left-0 bottom-0 right-0 bg-[#00000070] justify-center items-center">
<div class="bg-[#151316] rounded-xl overflow-hidden w-fit p-4 modal">
<h3>Add A link</h3>
<form id="link-form" action="/api/links" method="post" class="flex flex-col gap-y-3 my-2">
<form id="link-form" action="/api/links" method="post"
class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
<div>
<label for="linkName">Name</label>
<input
class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
<input required
class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none transition-colors duration-300 ease-out"
type="text" name="name" placeholder="Name" id="linkName" />
</div>
<div>
<label for="linkDesc">Description</label>
<label for="linkDesc">Description (optional)</label>
<input
class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none transition-colors duration-300 ease-out"
type="text" name="description" placeholder="Description" id="linkDesc" />
</div>
<div>
<label for="linkURL">URL</label>
<input
class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
type="text" name="url" placeholder="URL" id="linkURL" />
<input required
class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none transition-colors duration-300 ease-out"
type="url" name="url" placeholder="URL" id="linkURL" />
</div>
<div>
<label for="linkIcon">Icon</label>
<input class="w-full text-white py-2 px-4 rounded bg-[#1C1C21] border border-[#56565b]/30" type="file"
name="icon" id="linkIcon" accept="image/*" />
<input required
class="w-full text-white py-2 px-4 rounded bg-[#1C1C21] border border-[#56565b]/30 transition-colors duration-300 ease-out"
type="file" name="icon" id="linkIcon" accept="image/*" />
</div>
<button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Add</button>
<button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Add link</button>
</form>
<span id="link-message"></span>
</div>
@@ -104,7 +119,8 @@
<input class="w-full text-white py-2 px-4 rounded bg-[#1C1C21] border border-[#56565b]/30" type="file"
name="icon" id="linkIcon" accept=".svg" />
</div>
<button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Create</button>
<button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Create
category</button>
</form>
<span id="category-message"></span>
</div>
@@ -121,6 +137,7 @@
function openCategoryModal() {
pageElement.style.filter = "blur(20px)";
document.getElementById("category-form").reset();
categoryModalBg.classList.add("is-visible");
categoryModal.classList.add("is-visible");
@@ -131,12 +148,17 @@
categoryModalBg.classList.remove("is-visible");
categoryModal.classList.remove("is-visible");
document.getElementById("category-form").querySelectorAll("[required]").forEach((el) => {
el.classList.remove("invalid:border-[#861024]");
});
}
function openLinkModal(categoryID) {
targetCategoryID = categoryID;
pageElement.style.filter = "blur(20px)";
document.getElementById("link-form").reset();
linkModalBg.classList.add("is-visible");
linkModal.classList.add("is-visible");
@@ -147,35 +169,48 @@
linkModalBg.classList.remove("is-visible");
linkModal.classList.remove("is-visible");
document.getElementById("link-form").querySelectorAll("[required]").forEach((el) => {
el.classList.remove("invalid:border-[#861024]");
});
}
async function deleteLink(linkID) {
let res = await fetch(`/api/links/${linkID}`, {
async function deleteLink(linkID, categoryID) {
let res = await fetch(`/api/category/${categoryID}/link/${linkID}`, {
method: "DELETE"
});
if (res.status === 200) {
location.reload();
let linkEl = document.querySelector(`[key="link-${linkID}"]`);
linkEl.remove();
}
}
async function deleteCategory(categoryID) {
let res = await fetch(`/api/categories/${categoryID}`, {
let res = await fetch(`/api/category/${categoryID}`, {
method: "DELETE"
});
if (res.status === 200) {
location.reload();
let categoryEl = document.querySelector(`[key="category-${categoryID}"]`);
// get the next element and remove it (its the link grid)
let nextEl = categoryEl.nextElementSibling;
nextEl.remove();
categoryEl.remove();
}
}
document.getElementById("link-form").querySelector("button").addEventListener("click", (event) => {
document.getElementById("link-form").querySelectorAll("[required]").forEach((el) => {
el.classList.add("invalid:border-[#861024]");
});
});
document.getElementById("link-form").addEventListener("submit", async (event) => {
event.preventDefault();
let data = new FormData(event.target);
data.append("category_id", targetCategoryID);
let res = await fetch(`/api/links`, {
let res = await fetch(`/api/category/${targetCategoryID}/link`, {
method: "POST",
body: data
});
@@ -190,11 +225,17 @@
}
});
document.getElementById("category-form").querySelector("button").addEventListener("click", (event) => {
document.getElementById("category-form").querySelectorAll("[required]").forEach((el) => {
el.classList.add("invalid:border-[#861024]");
});
});
document.getElementById("category-form").addEventListener("submit", async (event) => {
event.preventDefault();
let data = new FormData(event.target);
let res = await fetch(`/api/categories`, {
let res = await fetch(`/api/category`, {
method: "POST",
body: data
});