Updated kiosk.json with new translation strings. Updated info.js to reflect the multiple kiosk voucher types. Deprecated the KIOSK_VOUCHER_TYPE environment variable. Implemented the KIOSK_VOUCHER_TYPES environment variable with support for multiple voucher types. Moved the kiosk images (logo.png and bg.jpg) to a kiosk image sub-folder. Redesign of the kiosk.ejs language selector to provide space for custom images. Implemented voucher types within kiosk.ejs. Utilize the bytes converter within voucher.ejs to reformat bytes labels. Updated the docker-compose.yml. Updated the README.md. Implemented /kiosk custom assets overrides. Implemented a type check for the voucher types from kiosk requests

This commit is contained in:
Glenn de Haan
2025-07-09 18:57:32 +02:00
parent c8c3b923b4
commit 454d92b861
11 changed files with 171 additions and 29 deletions

View File

@@ -35,25 +35,13 @@
<% } %>
<div class="fixed top-0 left-0 w-full h-full -z-20">
<img src="<%= baseUrl %>/images/kiosk_bg.jpg" alt="Kiosk Background" class="w-full h-full object-cover"/>
<img src="<%= baseUrl %>/images/kiosk/bg.jpg" alt="Kiosk Background" class="w-full h-full object-cover"/>
</div>
<div class="fixed top-0 left-0 w-full h-full -z-10 bg-white/70 dark:bg-black/70"></div>
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg border border-black/5 dark:border-white/5 shadow-sm z-10 relative">
<div class="p-4 border-b border-black/5 dark:border-white/5">
<% if(typeof voucherCode === 'undefined') { %>
<div class="absolute top-2 right-2">
<form id="locale-form" action="<%= baseUrl %>/kiosk" method="get">
<select id="locale" name="locale" class="max-w-28 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6 **:text-black">
<% Object.keys(languages).forEach((l) => { %>
<option value="<%= l %>-<%= l %>"<%= l === language ? ' selected' : '' %>><%= languages[l] %></option>
<% }); %>
</select>
</form>
</div>
<% } %>
<img class="mx-auto h-24 w-auto" width="48" height="48" alt="UniFi Voucher Site Logo" src="<%= baseUrl %>/images/logo.png">
<img class="mx-auto h-24 w-auto" width="48" height="48" alt="UniFi Voucher Site Logo" src="<%= baseUrl %>/images/kiosk/logo.png">
<h1 class="mt-4 text-2xl font-semibold text-center text-gray-900 dark:text-white"><%= t('title') %></h1>
<% if(error) { %>
@@ -75,7 +63,27 @@
<div class="p-4">
<% if(typeof voucherCode === 'undefined') { %>
<div class="block">
<form id="locale-form" class="mb-6" action="<%= baseUrl %>/kiosk" method="get">
<label for="locale" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"><%= t('language') %></label>
<div class="mt-2">
<select id="locale" name="locale" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6 **:text-black">
<% Object.keys(languages).forEach((l) => { %>
<option value="<%= l %>-<%= l %>"<%= l === language ? ' selected' : '' %>><%= languages[l] %></option>
<% }); %>
</select>
</div>
</form>
<form id="voucher-form" class="space-y-6" action="<%= baseUrl %>/kiosk?locale=<%= language %>-<%= language %>" method="post" enctype="multipart/form-data">
<div class="<%= voucher_types.length < 2 ? 'hidden' : '' %>">
<label for="voucher-type" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"><%= t('type') %></label>
<div class="mt-2">
<select id="voucher-type" name="voucher-type" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6 **:text-black">
<% voucher_types.forEach((type) => { %>
<option value="<%= type.raw %>"><%= timeConvert(type.expiration) %>, <%= type.usage === '1' ? t('singleUse') : type.usage === '0' ? `${t('multiUse')} (${t('unlimitedUse')})` : `${t('multiUse')} (${type.usage}x)` %><%= typeof type.upload !== "undefined" ? `, ${t('uploadLimit')}: ${bytesConvert(type.upload, 1, true)}` : '' %><%= typeof type.download !== "undefined" ? `, ${t('downloadLimit')}: ${bytesConvert(type.download, 1, true)}` : '' %><%= typeof type.megabytes !== "undefined" ? `, ${t('dataLimit')}: ${bytesConvert(type.megabytes, 2)}` : '' %></option>
<% }); %>
</select>
</div>
</div>
<% if(kiosk_name_required) { %>
<div>
<label for="voucher-note" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"><%= t('guestName') %></label>