Implemented UI_BACK_BUTTON for kiosk users to navigate to the previou…

…s page. Removed h1 to clean-up UI
glenndehaan · Jan 5, 2025 · 9938262 · 9938262
1 parent aaac79a
commit 9938262
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -128,6 +128,8 @@ services:
       TRANSLATION_DEFAULT: 'en'
       # Enables/disables translation debugging, when enabled only translation keys are shown
       TRANSLATION_DEBUG: 'false'
+      # Enables/disables a back-button next to the logo to go back 1 page in history (Could be used with multi-page kiosks)
+      UI_BACK_BUTTON: 'false'
 ```
 
 ### Home Assistant Add-on

diff --git a/modules/variables.js b/modules/variables.js
@@ -43,6 +43,7 @@ module.exports = {
     logLevel: config('log_level') || process.env.LOG_LEVEL || 'info',
     translationDefault: config('translation_default') || process.env.TRANSLATION_DEFAULT || 'en',
     translationDebug: config('translation_debug') || (process.env.TRANSLATION_DEBUG === 'true') || false,
+    uiBackButton: config('ui_back_button') || (process.env.UI_BACK_BUTTON === 'true') || false,
     gitTag: process.env.GIT_TAG || 'master',
     gitBuild: fs.existsSync('/etc/unifi_voucher_site_build') ? fs.readFileSync('/etc/unifi_voucher_site_build', 'utf-8') : 'Development'
 };
diff --git a/server.js b/server.js
@@ -410,6 +410,7 @@ if(variables.serviceWeb) {
             info_text: req.flashMessage.message || '',
             error: req.flashMessage.type === 'error',
             error_text: req.flashMessage.message || '',
+            uiBackButton: variables.uiBackButton,
             timeConvert: time,
             bytesConvert: bytes,
             email_enabled: variables.smtpFrom !== '' && variables.smtpHost !== '' && variables.smtpPort !== '',
@@ -491,6 +492,7 @@ if(variables.serviceWeb) {
             baseUrl: req.headers['x-ingress-path'] ? req.headers['x-ingress-path'] : '',
             gitTag: variables.gitTag,
             gitBuild: variables.gitBuild,
+            uiBackButton: variables.uiBackButton,
             user: user,
             userIcon: req.oidc ? crypto.createHash('sha256').update(user.email).digest('hex') : '',
             authDisabled: variables.authDisabled,

diff --git a/template/partials/navigation.ejs b/template/partials/navigation.ejs
@@ -2,6 +2,13 @@
     <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">
+                <% if(uiBackButton) { %>
+                    <button aria-label="Back to Previous Page" onclick="window.history.go(-1);">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="text-gray-900 dark:text-white hover:text-gray-700 hover:dark:text-gray-100 w-10 h-10 mr-4" viewBox="0 0 24 24" fill="currentColor">
+                            <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z" clip-rule="evenodd" />
+                        </svg>
+                    </button>
+                <% } %>
                 <a href="<%= baseUrl %>/vouchers" class="flex flex-shrink-0 items-center">
                     <img class="h-12 w-auto" width="48" height="48" 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">

diff --git a/template/voucher.ejs b/template/voucher.ejs
@@ -68,11 +68,7 @@
             <main class="mx-auto max-w-7xl">
                 <header class="flex items-center justify-between border-b border-black/5 dark:border-white/5 px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
                     <div class="grid">
-                        <h1 class="text-2xl font-semibold leading-7 text-gray-900 dark:text-white">
-                            Vouchers
-                        </h1>
-
-                        <form id="filter-sort-form" action="<%= baseUrl %>/vouchers" method="get" class="mt-4">
+                        <form id="filter-sort-form" action="<%= baseUrl %>/vouchers" method="get">
                             <div class="flex flex-col sm:flex-row sm:items-end sm:space-x-4 space-y-2 sm:space-y-0">
                                 <div class="flex flex-col">
                                     <label for="status" class="text-xs text-gray-900 dark:text-white mb-1">Status</label>