Zoe
3ffd439f88
All checks were successful
Build and Push Docker Image to GHCR / build-and-push (push) Successful in 1h19m23s
This commit includes many bug fixes and improvements to the admin UI. More errors are caught and displayed to the user. Submit buttons now display a loading state while the request is being processed. Several inconsistencies and style issues in the admin UI have been fixed. Image upload inputs now have an accurate accept attribute, so tat users cannot upload images that are unsupported. Finally, in development mode, the page is outlined in dashed yello to help me not go insane when I forget that I'm using the deployed site and thats why my changes arent doing anything, and the API returns 400 errors when images are unsupported formats.
152 lines
7.4 KiB
Handlebars
152 lines
7.4 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Passport</title>
|
|
<link rel="favicon" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
|
|
href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2" />
|
|
{{{embedFile "assets/styles/adminUi.css"}}}
|
|
</head>
|
|
|
|
<body>
|
|
<div id="blur-target">
|
|
<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>
|
|
|
|
{{> 'partials/category-grid' }}
|
|
</div>
|
|
|
|
<input type="file" id="icon-upload" accept="image/*" style="display: none;" />
|
|
<div id="modal-container" role="dialog" aria-modal="true" class="modal-bg">
|
|
<div class="modal">
|
|
{{> 'partials/modals/category-form' }}
|
|
{{> 'partials/modals/link-form' }}
|
|
{{> 'partials/modals/delete-link' }}
|
|
{{> 'partials/modals/delete-category' }}
|
|
</div>
|
|
</div>
|
|
|
|
<template id="template-loading-spinner">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE
|
|
-->
|
|
<path fill="#EAEAEA" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
|
opacity=".25" />
|
|
<path fill="#EAEAEA"
|
|
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
|
|
<animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0
|
|
12 12;360 12 12" />
|
|
</path>
|
|
</svg>
|
|
</template>
|
|
|
|
<!-- store a blank link card so that if we add a new link we can clone it to make the editing experience easier -->
|
|
<template id="template-link-card">
|
|
<div data-card>
|
|
<div>
|
|
<img width="64" height="64" draggable="false" />
|
|
</div>
|
|
<div>
|
|
<h3></h3>
|
|
<!-- add 2 to the height to account for the border -->
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="template-category">
|
|
<div>
|
|
<div class="category-header">
|
|
<div>
|
|
<img width="32" height="32" draggable="false" />
|
|
</div>
|
|
<h2></h2>
|
|
</div>
|
|
<div class="link-grid">
|
|
<div class="new-link-card link-card admin">
|
|
<svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="M12 5v14m-7-7h14" />
|
|
</svg>
|
|
<div>
|
|
<h3>Add a link</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="template-edit-actions">
|
|
<div>
|
|
<div class="action-container">
|
|
<button class="action-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
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="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
|
|
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
<button class="text-error action-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div id="teleport-storage" class="absolute -top-full -left-full hidden">
|
|
<!-- These are the elements that appear when the user enters edit mode, they allow for the cancelation/confirmation of the edit -->
|
|
<div class="action-container" id="confirm-actions">
|
|
<button class="action-button text-success" onclick="confirmEdit(event)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m5 12l5 5L20 7" />
|
|
</svg>
|
|
</button>
|
|
<button class="action-button text-error" onclick="cancelEdit()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- This is the element that appears on top of the icon when the user is editing it that allows for changing the icon -->
|
|
<button id="select-icon-button" onclick="selectIcon()" class="select-icon-button" draggable="false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{{embedFile "scripts/admin.js"}}}
|
|
</body>
|
|
|
|
{{{devContent}}}
|
|
|
|
</html> |