Add small cookie notice to base.html

mikaelGusse · Sep 3, 2024 · 2f421ae · 2f421ae
1 parent 2eeb8b4
commit 2f421ae
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 1 deletion.
diff --git a/assets/css/cookie-notice.css b/assets/css/cookie-notice.css
@@ -0,0 +1,12 @@
+.cookie-notice {
+    display: flex;
+    border-bottom: 1px solid #eee;
+    justify-content: space-between;
+    margin: auto;
+    padding: 10px;
+    gap: 10px;
+}
+
+#cookie-notice-dismiss {
+    justify-content: flex-end;
+}
diff --git a/assets/js/cookie-notice.js b/assets/js/cookie-notice.js
@@ -0,0 +1,10 @@
+document.getElementById('cookie-notice-dismiss').addEventListener('click', function() {
+  document.getElementById('cookie-notice').style.display = 'none';
+
+  document.cookie = "cookiesConfirmed=true; max-age=" + (60 * 60 * 24 * 365);
+});
+
+
+if (document.cookie.includes('cookiesConfirmed')) {
+  document.getElementById('cookie-notice').style.display = 'none';
+}
diff --git a/e2e_tests/helpers.py b/e2e_tests/helpers.py
@@ -12,6 +12,8 @@ def __init__(self, name: str, label: str = None):
         self.name = name
         self.label = label if label else name
 
+def dismiss_cookie_notice(page: Page):
+    page.get_by_role("button", name="Close").click()
 
 def login(page: Page, username: str, password: str):
     page.goto("http://localhost:8000/?hl=en")

diff --git a/e2e_tests/test_compare_submissions.py b/e2e_tests/test_compare_submissions.py
@@ -1,5 +1,5 @@
 from playwright.sync_api import Page, expect
-from e2e_tests.helpers import upload_submission, login, logout, File
+from e2e_tests.helpers import upload_submission, login, logout, File, dismiss_cookie_notice
 
 
 def test_compare_submissions(page: Page) -> None:
@@ -8,6 +8,7 @@ def test_compare_submissions(page: Page) -> None:
     green = "rgb(212, 237, 218)"
     red = "rgb(248, 215, 218)"
     login(page, "student", "student")
+    dismiss_cookie_notice(page)
     page.get_by_role("link", name="Def. Course Current DEF000 1.").click()
     upload_submission(
         page,

diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
@@ -1927,6 +1927,10 @@ msgstr "signature title"
 msgid "LABEL_SMALL_PRINT"
 msgstr "small print"
 
+#: templates/base.html
+msgid "COOKIE_NOTICE_TEXT"
+msgstr "This website uses cookies to improve functionality. You agree to our cookie policy by using this site."
+
 #: diploma/models.py
 msgid "LABEL_POINT_LIMITS"
 msgstr "point limits"

diff --git a/locale/fi/LC_MESSAGES/django.po b/locale/fi/LC_MESSAGES/django.po
@@ -6060,3 +6060,7 @@ msgstr "Järjestelmätason saavutettavuusselostetta ei löytynyt."
 #: userprofile/views.py
 msgid "NO_SUPPORT_PAGE"
 msgstr "Ei tukisivua. Ota yhteys ylläpitäjään!"
+
+#: templates/base.html
+msgid "COOKIE_NOTICE_TEXT"
+msgstr "Tämä sivusto käyttää evästeitä toiminnalisuuden parantamiseksi. Käyttämällä sivustoa hyväksyt evästeiden käytön."
diff --git a/templates/base.html b/templates/base.html
@@ -74,6 +74,7 @@
 	<link rel="stylesheet" href="{% static 'css/main.css' %}" />
 	<link rel="stylesheet" href="{% static 'css/submission.css' %}" />
 	<link rel="stylesheet" href="{% static 'django_colortag.css' %}" />
+	<link rel="stylesheet" href="{% static 'css/cookie-notice.css' %}" />
 	<script src="{% static 'js/polyfill-find.js' %}"></script>
 	<script src="{% static 'js/focus-visible-polyfill.min.js' %}"></script>
 	<script src="{% static 'js/aplus.js' %}"></script>
@@ -249,6 +250,12 @@ <h4>{% translate "SITE" %}</h4>
 		<footer role="contentinfo">
 			<div class="site-footer navbar navbar-default navbar-fixed-bottom" role="presentation">
 				<div class="container-fluid">
+
+					<div id="cookie-notice" class="cookie-notice">
+						<p>{% translate "COOKIE_NOTICE_TEXT" %}</p>
+						<button id="cookie-notice-dismiss" class="btn btn-primary">{% translate "CLOSE" %}</button>
+					</div>
+
 					<ul class="nav navbar-nav">
 						{% block footercontent %}{% endblock %}
 						<li><a href="{% url 'privacy_notice' %}">{% translate "PRIVACY_NOTICE" %}</a></li>
@@ -310,3 +317,4 @@ <h4 class="modal-title"></h4>
 </body>
 
 </html>
+<script src="{% static 'js/cookie-notice.js' %}"></script>