sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-08-03 01:05:21 +00:00
Code Issues Projects Releases Wiki Activity

enhance modals and terms of use html

Browse Source
This commit is contained in:
Patrick Jentsch
2024-12-23 14:49:06 +01:00
parent d4cd313940
commit 80604bf8de
11 changed files with 357 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/templates/_base/modals.html.j2
View File

@@ -1,34 +1,30 @@
{% if current_user.is_authenticated and not current_user.terms_of_use_accepted %}
<div id="terms-of-use-modal" class="modal modal-fixed-footer">
<div class="modal modal-fixed-footer" id="terms-of-use-modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col s12">
<h1 id="title">Terms of use</h1>
</div>
<div class="col s12">
<div class="switch">
<label>
DE
<input type="checkbox" id="terms-of-use-modal-switch">
<span class="lever"></span>
EN
</label>
</div>
<br>
</div>
<div class="terms-of-use-modal-content hide">
{% include "main/terms_of_use_en.html.j2" %}
</div>
<div class="terms-of-use-modal-content">
{% include "main/terms_of_use_de.html.j2" %}
</div>
</div>
<div class="card-panel primary-color white-text">
<h4 class="m-3 center-align">Terms of use</h4>
</div>
<ul class="tabs tabs-fixed-width z-depth-1">
<li class="tab"><a class="active" href="#terms-of-use-modal-content-german">German</a></li>
<li class="tab"><a href="#terms-of-use-modal-content-english">English</a></li>
</ul>
<div id="terms-of-use-modal-content-german">
{% include 'main/_terms_of_use/german.html.j2' %}
</div>
<div id="terms-of-use-modal-content-english">
{% include 'main/_terms_of_use/english.html.j2' %}
</div>
</div>
<div class="modal-footer">
<span style="margin-right:20px;">I have taken note of the new GTC and agree to their validity in the context of my further use.</span>
<a href="#!" class="modal-close waves-effect waves-green btn">Yes</a>
{% if current_user.is_authenticated %}
{% if current_user.terms_of_use_accepted %}
<a href="#!" class="btn-flat waves-effect waves-light modal-close">Close</a>
{% else %}
<a href="#!" class="btn waves-effect waves-light modal-close">Accept</a>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}

54
app/templates/_base/scripts.html.j2
View File

@@ -83,36 +83,38 @@
{# TODO: Think about implementing the following inside a main.js(.j2) #}
<script>
const app = new nopaque.app.Client();
app.init();
var app;
var currentUserId;
{% if current_user.is_authenticated %}
const currentUserId = {{ current_user.hashid|tojson }};
async function main() {
app = new nopaque.app.Client();
app.init();
app.userHub.add(currentUserId)
.catch((error) => {throw JSON.stringify(error);});
{% if not current_user.is_authenticated %}
const currentUserId = null;
{% else %}
currentUserId = {{ current_user.hashid|tojson }};
{% if not current_user.terms_of_use_accepted %}
M.Modal.getInstance(document.querySelector('#terms-of-use-modal')).open();
{% endif %}
{% else %}
const currentUserId = null;
{% endif %}
try {
await app.userHub.add(currentUserId);
} catch (error) {
app.ui.flash('Failed to load user data.', 'error');
}
// Display flashed messages
for (let [category, message] of {{ get_flashed_messages(with_categories=True)|tojson }}) {
app.ui.flash(message, message);
{% if not current_user.terms_of_use_accepted %}
const termsOfUseModalElement = document.querySelector('#terms-of-use-modal');
const termsOfUseModal = M.Modal.getInstance(termsOfUseModalElement);
termsOfUseModal.open();
{% endif %}
{% endif %}
const flashedMessages = {{ get_flashed_messages()|tojson }};
for (let [category, message] of flashedMessages) {
app.ui.flash(message, message);
}
}
</script>
<script>
let languageModalSwitch = document.querySelector('#terms-of-use-modal-switch');
let termsOfUseModalContent = document.querySelectorAll('.terms-of-use-modal-content');
if (languageModalSwitch) {
languageModalSwitch.addEventListener('change', () => {
termsOfUseModalContent.forEach(content => {
content.classList.toggle('hide');
});
});
}
main();
</script>