mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-29 17:25:32 +00:00
Registration form for new users
This commit is contained in:
Simon Martens
207
views/routes/user/management/access/body.gohtml
Normal file
207
views/routes/user/management/access/body.gohtml
Normal file
@@ -0,0 +1,207 @@
|
||||
{{ $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>
|
||||
0
views/routes/user/management/access/head.gohtml
Normal file
0
views/routes/user/management/access/head.gohtml
Normal file
0
views/routes/user/management/body.gohtml
Normal file
0
views/routes/user/management/body.gohtml
Normal file
0
views/routes/user/management/head.gohtml
Normal file
0
views/routes/user/management/head.gohtml
Normal file
Reference in New Issue
Block a user