starred/unifi-voucher-site
1
0
Fork 0
mirror of https://github.com/glenndehaan/unifi-voucher-site.git synced 2026-04-05 08:54:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

Dependency updates. Fixed dark mode colors in details.ejs & email.ejs. Moved navigation to dedicated navigation.ejs file. Implemented user icon. Implemented user menu. Implemented /logout. Implemented Gravatar icon. Moved documentation and feature icons from menu to user menu

Browse Source
This commit is contained in:
Glenn de Haan
2024-09-24 19:09:28 +02:00
parent 88ae8d146c
commit be5f950568
8 changed files with 106 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
template/partials/navigation.ejs Normal file
View File

@@ -0,0 +1,77 @@
<nav class="sticky top-0 z-40 bg-white shadow-sm dark:bg-gray-800">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between">
<div class="flex">
<a href="<%= baseUrl %>/vouchers" class="flex flex-shrink-0 items-center">
<img class="h-12 w-auto" alt="UniFi Voucher Site Logo" width="48" height="48" src="<%= baseUrl %>/images/logo.png">
<div class="hidden sm:block ml-4 text-2xl font-semibold leading-7 text-gray-900 dark:text-white">
UniFi Voucher
</div>
</a>
</div>
<div class="flex items-center">
<% if(new_voucher_button) { %>
<div class="flex-shrink-0">
<button id="create-button-header" type="button" class="relative inline-flex items-center gap-x-1.5 rounded-md bg-sky-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">
<svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
New Voucher
</button>
</div>
<% } %>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="relative">
<button id="user-menu-button" class="flex items-center focus:outline-none focus:ring-2 focus:ring-sky-600 rounded-full">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" alt="User Image" width="44" height="44" src="https://gravatar.com/avatar/<%= userIcon %>?d=mp">
</button>
<div id="user-dropdown" class="hidden absolute bg-white dark:bg-gray-800 right-0 mt-2 w-64 rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5">
<div class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 border-b border-black/5 dark:border-white/5">
Logged in as:<br>
<span class="font-medium"><%= user.email %></span>
</div>
<a href="<%= baseUrl %>/status" aria-label="UniFi Voucher Status" type="button" class="flex px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 items-center">
<svg class="mr-3 h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z" clip-rule="evenodd" />
</svg>
Feature Status
</a>
<a href="https://github.com/glenndehaan/unifi-voucher-site" aria-label="GitHub Project Link" target="_blank" rel="noreferrer noopener" type="button" class="flex px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 items-center">
<svg class="mr-3 h-5 w-5" viewBox="0 0 42 42" fill="currentColor">
<path d="M21,0.5c-11.6,0-21,9.4-21,21c0,9.3,6,17.1,14.4,19.9c1.1,0.2,1.4-0.5,1.4-1c0-0.5,0-1.8,0-3.6C9.9,38.1,8.7,34,8.7,34c-1-2.4-2.3-3.1-2.3-3.1c-1.9-1.3,0.1-1.3,0.1-1.3c2.1,0.1,3.2,2.2,3.2,2.2c1.9,3.2,4.9,2.3,6.1,1.7c0.2-1.4,0.7-2.3,1.3-2.8c-4.7-0.5-9.6-2.3-9.6-10.4c0-2.3,0.8-4.2,2.2-5.6c-0.2-0.5-0.9-2.7,0.2-5.6c0,0,1.8-0.6,5.8,2.2c1.7-0.5,3.5-0.7,5.3-0.7c1.8,0,3.6,0.2,5.3,0.7c4-2.7,5.8-2.2,5.8-2.2c1.1,2.9,0.4,5,0.2,5.6c1.3,1.5,2.2,3.3,2.2,5.6c0,8.1-4.9,9.8-9.6,10.4c0.8,0.6,1.4,1.9,1.4,3.9c0,2.8,0,5.1,0,5.8c0,0.6,0.4,1.2,1.4,1C36,38.7,42,30.8,42,21.5C42,9.9,32.6,0.5,21,0.5z"></path>
</svg>
Documentation
</a>
<% if(!authDisabled) { %>
<div class="border-t border-black/5 dark:border-white/5"></div>
<a href="<%= baseUrl %>/logout" aria-label="Logout" type="button" class="flex w-full text-left px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 items-center">
<svg class="mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</a>
<% } %>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<script>
const userMenuButton = document.getElementById('user-menu-button');
const userDropdown = document.getElementById('user-dropdown');
userMenuButton.addEventListener('click', () => {
userDropdown.classList.toggle('hidden');
});
document.addEventListener('click', (event) => {
if (!userMenuButton.contains(event.target) && !userDropdown.contains(event.target)) {
userDropdown.classList.add('hidden');
}
});
</script>