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
glenndehaan · Sep 24, 2024 · be5f950 · be5f950
1 parent 88ae8d1
commit be5f950
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,6 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.9",
     "nodemon": "^3.1.7",
-    "tailwindcss": "^3.4.12"
+    "tailwindcss": "^3.4.13"
   }
 }
diff --git a/server.js b/server.js
@@ -2,6 +2,7 @@
  * Import base packages
  */
 const os = require('os');
+const crypto = require('crypto');
 const express = require('express');
 const multer = require('multer');
 const cookieParser = require('cookie-parser');
@@ -156,6 +157,9 @@ if(variables.serviceWeb) {
 
             res.cookie('authorization', jwt.sign(), {httpOnly: true, expires: new Date(Date.now() + 24 * 60 * 60 * 1000)}).redirect(302, `${req.headers['x-ingress-path'] ? req.headers['x-ingress-path'] : ''}/vouchers`);
         });
+        app.get('/logout', (req, res) => {
+            res.cookie('authorization', '', {httpOnly: true, expires: new Date(0)}).redirect(302, `${req.headers['x-ingress-path'] ? req.headers['x-ingress-path'] : ''}/`);
+        });
     }
     app.post('/voucher', [authorization.web], async (req, res) => {
         if (typeof req.body === "undefined") {
@@ -338,8 +342,13 @@ if(variables.serviceWeb) {
             return;
         }
 
+        const user = req.oidc ? await req.oidc.fetchUserInfo() : { email: 'admin' };
+
         res.render('voucher', {
             baseUrl: req.headers['x-ingress-path'] ? req.headers['x-ingress-path'] : '',
+            user: user,
+            userIcon: crypto.createHash('sha256').update(user.email).digest('hex'),
+            authDisabled: variables.authDisabled,
             info: req.flashMessage.type === 'info',
             info_text: req.flashMessage.message || '',
             error: req.flashMessage.type === 'error',
@@ -378,9 +387,14 @@ if(variables.serviceWeb) {
             });
         }
     });
-    app.get('/status', [authorization.web], (req, res) => {
+    app.get('/status', [authorization.web], async (req, res) => {
+        const user = req.oidc ? await req.oidc.fetchUserInfo() : { email: 'admin' };
+
         res.render('status', {
             baseUrl: req.headers['x-ingress-path'] ? req.headers['x-ingress-path'] : '',
+            user: user,
+            userIcon: crypto.createHash('sha256').update(user.email).digest('hex'),
+            authDisabled: variables.authDisabled,
             status: status()
         });
     });

diff --git a/template/components/details.ejs b/template/components/details.ejs
@@ -5,10 +5,10 @@
         <div class="absolute inset-0 overflow-hidden">
             <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
                 <div class="pointer-events-auto w-screen max-w-md">
-                    <div class="flex h-full flex-col divide-y divide-black/5 dark:divide-white/25 bg-white dark:bg-gray-900 shadow-xl">
+                    <div class="flex h-full flex-col divide-y divide-black/5 dark:divide-white/5 bg-white dark:bg-gray-900 shadow-xl">
                         <div class="h-0 flex-1 overflow-y-auto">
                             <div class="flex flex-1 flex-col justify-between">
-                                <div class="divide-y divide-black/5 dark:divide-white/25 px-4 sm:px-6">
+                                <div class="divide-y divide-black/5 dark:divide-white/5 px-4 sm:px-6">
                                     <div class="space-y-6 pb-5 pt-6">
                                         <div>
                                             <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">
@@ -75,7 +75,7 @@
                                         </div>
                                         <% if(guests.length < 1) { %>
                                             <div>
-                                                <div class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-7 text-center">
+                                                <div class="relative block w-full rounded-lg border-2 border-dashed border-gray-600 dark:border-gray-400 p-7 text-center">
                                                     <svg class="mx-auto h-12 w-12 text-gray-600 dark:text-gray-400" stroke="currentColor" stroke-width="1.5" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                                                         <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                                                     </svg>

diff --git a/template/components/email.ejs b/template/components/email.ejs
@@ -5,7 +5,7 @@
         <div class="absolute inset-0 overflow-hidden">
             <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
                 <div class="pointer-events-auto w-screen max-w-md">
-                    <form id="email-forum" class="flex h-full flex-col divide-y divide-black/5 dark:divide-white/25 bg-white dark:bg-gray-900 shadow-xl" action="<%= baseUrl %>/voucher/<%= voucher._id %>/email" method="post" enctype="multipart/form-data">
+                    <form id="email-forum" class="flex h-full flex-col divide-y divide-black/5 dark:divide-white/5 bg-white dark:bg-gray-900 shadow-xl" action="<%= baseUrl %>/voucher/<%= voucher._id %>/email" method="post" enctype="multipart/form-data">
                         <div class="h-0 flex-1 overflow-y-auto">
                             <div class="bg-sky-700 px-4 py-6 sm:px-6">
                                 <div class="flex items-center justify-between">
@@ -16,7 +16,7 @@
                                 </div>
                             </div>
                             <div class="flex flex-1 flex-col justify-between">
-                                <div class="divide-y divide-black/5 dark:divide-white/25 px-4 sm:px-6">
+                                <div class="divide-y divide-black/5 dark:divide-white/5 px-4 sm:px-6">
                                     <div class="space-y-6 pb-5 pt-6">
                                         <div>
                                             <label for="email" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white">Email</label>

diff --git a/template/partials/navigation.ejs b/template/partials/navigation.ejs
@@ -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>
diff --git a/template/status.ejs b/template/status.ejs
@@ -29,38 +29,7 @@
     </head>
     <body class="h-full">
         <div>
-            <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" 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">
-                            <div class="ml-4 flex flex-shrink-0 items-center">
-                                <a href="<%= baseUrl %>/status" aria-label="UniFi Voucher Status" type="button" class="mr-1 relative rounded-full p-1 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white">
-                                    <span class="absolute -inset-1.5"></span>
-                                    <span class="sr-only">UniFi Voucher Status</span>
-                                    <svg class="h-6 w-6 inline-block" 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>
-                                </a>
-                                <a href="https://github.com/glenndehaan/unifi-voucher-site" aria-label="GitHub Project Link" target="_blank" rel="noreferrer noopener" type="button" class="relative rounded-full p-1 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white">
-                                    <span class="absolute -inset-1.5"></span>
-                                    <span class="sr-only">GitHub Project Link</span>
-                                    <svg class="h-6 w-6" 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>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </nav>
+            <%- include('partials/navigation', {new_voucher_button: false}) %>
 
             <main class="mx-auto max-w-7xl">
                 <div class="w-full max-w-4xl mx-auto py-8 px-4 md:px-6">