mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-28 16:55:32 +00:00
208 lines
6.9 KiB
Plaintext
208 lines
6.9 KiB
Plaintext
{{ $model := . }}
|
|
|
|
|
|
<script src="/assets/js/qrcode.min.js"></script>
|
|
|
|
<script type="module">
|
|
const qrElement = document.getElementById('qr');
|
|
const tokenElement = document.getElementById('token');
|
|
const accessUrl = "{{ $model.access_url }}";
|
|
|
|
/**
|
|
* @param {number} timeout - Maximum time to wait in milliseconds.
|
|
* @param {number} interval - How often to check in milliseconds.
|
|
* @returns {Promise<Function>} Resolves with the QRCode constructor when available.
|
|
*/
|
|
function getQRCodeWhenAvailable(timeout = 5000, interval = 100) {
|
|
return new Promise((resolve, reject) => {
|
|
let elapsedTime = 0;
|
|
const checkInterval = setInterval(() => {
|
|
if (typeof window.QRCode === 'function') {
|
|
clearInterval(checkInterval);
|
|
resolve(window.QRCode); // Resolve with the QRCode object/function
|
|
} else {
|
|
elapsedTime += interval;
|
|
if (elapsedTime >= timeout) {
|
|
clearInterval(checkInterval);
|
|
console.error('Timed out waiting for QRCode to become available.');
|
|
reject(new Error('QRCode not available after ' + timeout + 'ms. Check if qrcode.min.js is loaded correctly and sets window.QRCode.'));
|
|
}
|
|
}
|
|
}, interval);
|
|
});
|
|
}
|
|
|
|
// INFO: We have to wait for the QRCode object to be available. It's messy.
|
|
async function genQRCode() {
|
|
const QRCode = await getQRCodeWhenAvailable();
|
|
if (qrElement && accessUrl && qrElement.innerHTML.trim() === '') {
|
|
new QRCode(qrElement, {
|
|
text: accessUrl,
|
|
width: 1280,
|
|
height: 1280,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
});
|
|
setTimeout(() => {
|
|
qrElement.classList.remove('hidden');
|
|
}, 20);
|
|
}
|
|
}
|
|
|
|
genQRCode();
|
|
if (tokenElement) {
|
|
tokenElement.addEventListener('focus', () => tokenElement.select());
|
|
}
|
|
</script>
|
|
|
|
<div class="flex max-w-md mx-auto !pt-44 user-invites">
|
|
<div class="flex-col w-full">
|
|
{{- if not $model.redirect_url -}}
|
|
<a href="/" class="text-gray-700 hover:text-slate-950 mb-9 block">
|
|
<i class="ri-arrow-left-s-line"></i> Startseite
|
|
</a>
|
|
{{- else -}}
|
|
<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950 mb-9 block">
|
|
<i class="ri-arrow-left-s-line"></i> Zurück
|
|
</a>
|
|
{{- end -}}
|
|
<!--
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold text-slate-900 text-center">Benutzer einladen</h1>
|
|
</div>
|
|
-->
|
|
<div
|
|
class="col-span-9 grid grid-cols-3 justify-between mb-4 py-1 px-1 border rounded-md gap-x-2
|
|
bg-slate-200 user-chooser">
|
|
<a
|
|
href="/user/management/access/User?redirectTo={{ $model.redirect_url }}"
|
|
class="text-center px-4 text-gray-700 hover:text-slate-950 block"
|
|
{{ if eq $model.role "User" }}aria-current="page"{{ end }}>
|
|
Benutzer
|
|
</a>
|
|
<a
|
|
href="/user/management/access/Editor?redirectTo={{ $model.redirect_url }}"
|
|
class="text-gray-700 hover:text-slate-950 block px-4 text-center"
|
|
{{ if eq $model.role "Editor" }}aria-current="page"{{ end }}>
|
|
Redakteur
|
|
</a>
|
|
<a
|
|
href="/user/management/access/Admin?redirectTo={{ $model.redirect_url }}"
|
|
class="text-gray-700 hover:text-slate-950 text-center px-4 block"
|
|
{{ if eq $model.role "Admin" }}aria-current="page"{{ end }}>
|
|
Admin
|
|
</a>
|
|
</div>
|
|
<!--
|
|
<div class="flex justify-center mt-8 items-baseline">
|
|
<div>
|
|
<img class="h-20 w-20 border" src="/assets/favicon.png" />
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="col-span-7 col-start-2 mb-4 p-4 border rounded-lg shadow hidden" id="qr"></div>
|
|
<div class="col-span-9 mb-6 flex flex-col">
|
|
<div class="flex flex-row">
|
|
<input
|
|
type="text"
|
|
name="token"
|
|
id="token"
|
|
class="w-full text-center border border-slate-300 rounded-md shadow-sm
|
|
focus:border-slate-500 focus:ring-slate-500 p-1 px-2 overflow-ellipsis"
|
|
value="{{ $model.access_url }}"
|
|
deactive
|
|
readonly />
|
|
<button
|
|
type="button"
|
|
class="ml-2 inline-flex justify-center py-2 px-3 border border-transparent rounded-md
|
|
shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer
|
|
focus:outline-none no-underline
|
|
focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"
|
|
onclick="navigator.clipboard.writeText('{{ $model.access_url }}')">
|
|
<i class="ri-file-copy-line"></i>
|
|
</button>
|
|
<a
|
|
href="{{ $model.relative_url }}"
|
|
target="_blank"
|
|
class="ml-2 inline-flex justify-center py-2 px-3 border border-transparent rounded-md
|
|
shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer
|
|
focus:outline-none no-underline
|
|
focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
|
|
<i class="ri-external-link-line"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col-span-9 text-center text-slate-400 mb-1 mt-3">
|
|
Gültig bis zum
|
|
{{ $model.validUntil }}
|
|
</div>
|
|
<div class="mt-2 text-sm text-slate-600 flex flex-row gap-x-2">
|
|
<div>
|
|
<i class="ri-information-line"></i>
|
|
</div>
|
|
<div>
|
|
Unter diesem Link können neue Accounts registriert werden. Geben Sie diesen Link an neue
|
|
Nutzer der Datenbank weiter.
|
|
</div>
|
|
</div>
|
|
{{ if eq $model.role "User" }}
|
|
<div class="mt-1 text-sm text-blue-600 flex flex-row gap-x-2">
|
|
<div>
|
|
<i class="ri-information-line"></i>
|
|
</div>
|
|
<div>Benutzer können private Felder und Daten einsehen, aber nicht bearbeiten.</div>
|
|
</div>
|
|
{{ else if eq $model.role "Admin" }}
|
|
<div class="mt-1 text-sm text-red-600 flex flex-row gap-x-2">
|
|
<div>
|
|
<i class="ri-information-line"></i>
|
|
</div>
|
|
<div>
|
|
Administratoren können alle Felder und Daten einsehen und bearbeiten. Administratoren
|
|
können Nutzer einladen und löschen.
|
|
</div>
|
|
</div>
|
|
{{ else if eq $model.role "Editor" }}
|
|
<div class="mt-1 text-sm text-orange-600 flex flex-row gap-x-2">
|
|
<div>
|
|
<i class="ri-information-line"></i>
|
|
</div>
|
|
<div>Redakteure können alle Felder und Daten der Datenbank einsehen und bearbeiten.</div>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
<form class="w-full grid grid-cols-9 gap-4" method="POST">
|
|
<input
|
|
type="hidden"
|
|
name="csrf_nonce"
|
|
id="csrf_nonce"
|
|
required
|
|
value="{{ $model.csrf_nonce }}" />
|
|
<input
|
|
type="hidden"
|
|
name="csrf_token"
|
|
id="csrf_token"
|
|
required
|
|
value="{{ $model.csrf_token }}" />
|
|
|
|
<div class="col-span-9 flex flex-row items-center justify-center">
|
|
<button
|
|
type="submit"
|
|
class="inline-flex justify-center py-2 px-3 border border-transparent rounded-full
|
|
shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer
|
|
focus:outline-none no-underline
|
|
focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
|
|
<i class="ri-loop-left-line"></i>
|
|
</button>
|
|
</div>
|
|
<!--
|
|
<div class="col-span-3">
|
|
<a href="/forgot-password" class="text-sm text-slate-600 hover:text-slate-900">
|
|
Passwort vergessen?
|
|
</a>
|
|
</div>
|
|
-->
|
|
</form>
|
|
</div>
|
|
</div>
|