Add explainer view and working SURF attribute

website/age/apps.py

@@ -14,9 +14,8 @@ def ready(self):
         :return: None
         """
         from users.views import AccountFilterView
-        from age.views import (
-            AgeOverviewView,
-        )
+        from tosti.views import ExplainerView
+        from age.views import AgeOverviewView, explainer_page_how_to_verify_age_with_yivi
 
         from age import signals  # noqa
 
@@ -31,4 +30,16 @@ def filter_user_page(user_page_list: list):
             )
             return user_page_list
 
+        def filter_explainer_page(explainer_page_list: list):
+            """Add explainer pages."""
+            explainer_page_list.append(
+                {
+                    "name": "How to verify your age with Yivi?",
+                    "slug": "how-to-verify-your-age-with-yivi",
+                    "renderer": explainer_page_how_to_verify_age_with_yivi,
+                }
+            )
+            return explainer_page_list
+
+        ExplainerView.explainer_tabs.add_filter(filter_explainer_page)
         AccountFilterView.user_data_tabs.add_filter(filter_user_page, 2)

website/age/templates/age/age_overview.html

@@ -1,81 +1,100 @@
 {% load static %}
 
 <h2>Age check</h2>
-{% if minimum_registered_age %}
-    <div class="alert alert-success">
-        You have been verified to be over {{ minimum_registered_age }} years old.
-    </div>
-{% else %}
-    <div class="alert alert-danger">
-        Your age has not been verified yet, please verify your age by pressing the button below.
-    </div>
-    <button class="btn btn-primary mx-auto" data-bs-toggle="modal" data-bs-target="#verify-age-modal">Verify your age
-    </button>
+<div class="row justify-content-center">
+    <div class="col-8 col-sm-offset-2">
+        <p>
+            Some actions (such as opening the beer fridge) require you to proof that you are 18 years or older. To
+            proof that you are of a certain age, you can do two things:
+        </p>
+        <ol>
+            <li>Ask a <a href="{% url 'users:staff' %}">staff member</a> to verify your birthdate by using a passport
+                or identity card.</li>
+            <li>Use the online verification method below to proof that you have a certain age.</li>
+        </ol>
+        <p>
+            The first method does not require much explanation but the second method requires some more setup. If you
+            want more information about using the online verification, please read the explainer on the
+            <a href="{% url 'explainers' %}">Explainers page</a>.
+        </p>
+        {% if minimum_registered_age %}
+            <div class="alert alert-success">
+                You have been verified to be over {{ minimum_registered_age }} years old.
+            </div>
+        {% else %}
+            <div class="alert alert-danger">
+                Your age has not been verified yet, please verify your age by pressing the button below.
+            </div>
+            <div class="d-flex justify-content-center">
+                <button class="btn btn-primary mx-auto" data-bs-toggle="modal" data-bs-target="#verify-age-modal">Verify your age
+                </button>
+            </div>
 
-    <div class="modal" id="verify-age-modal" tabindex="-1" role="dialog" aria-labelledby="verify-age-modal-label"
-         aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3 class="modal-title">Verify your age</h3>
-                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body d-flex justify-content-center">
-                    <section class="yivi-web-form" id="yivi-web-form"></section>
+            <div class="modal" id="verify-age-modal" tabindex="-1" role="dialog" aria-labelledby="verify-age-modal-label"
+                 aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered modal" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3 class="modal-title">Verify your age</h3>
+                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="modal-body d-flex justify-content-center flex-column align-items-center">
+                            <section class="yivi-web-form w-100" style="max-width: unset" id="yivi-web-form"></section>
+                        </div>
+                    </div>
                 </div>
-                <div class="modal-footer"></div>
             </div>
-        </div>
-    </div>
-    <script src="{% static "yivi/js/yivi.js" %}" type="text/javascript"></script>
-    <script>
-        const yiviWeb = yivi.newWeb({
-            debugging: false,
-            element: '#yivi-web-form',
-            session: {
-                start: {
-                    url: () => '{% url "v1:yivi_start" %}',
-                    method: 'POST',
-                    headers: {
-                        "X-CSRFToken": get_csrf_token(),
-                        "Accept": 'application/json',
-                        "Content-Type": 'application/json',
-                    },
-                    body: '{{ disclose }}',
-                },
-                result: {
-                    url: (o, {sessionPtr, sessionToken}) => `/api/v1/yivi/session/${sessionToken}/result/`,
-                    method: 'GET',
-                    headers: {
-                        "X-CSRFToken": get_csrf_token(),
-                    },
-                }
-            }
-        });
-
-        let started = false;
+            <script src="{% static "yivi/js/yivi.js" %}" type="text/javascript"></script>
+            <script>
+                const yiviWeb = yivi.newWeb({
+                    debugging: false,
+                    element: '#yivi-web-form',
+                    session: {
+                        start: {
+                            url: () => '{% url "v1:yivi_start" %}',
+                            method: 'POST',
+                            headers: {
+                                "X-CSRFToken": get_csrf_token(),
+                                "Accept": 'application/json',
+                                "Content-Type": 'application/json',
+                            },
+                            body: '{{ disclose }}',
+                        },
+                        result: {
+                            url: (o, {sessionPtr, sessionToken}) => `/api/v1/yivi/session/${sessionToken}/result/`,
+                            method: 'GET',
+                            headers: {
+                                "X-CSRFToken": get_csrf_token(),
+                            },
+                        }
+                    }
+                });
 
-        document.getElementById("verify-age-modal").addEventListener('shown.bs.modal', () => {
-            if (started === true) {
-                return;
-            }
+                let started = false;
 
-            started = true;
-            yiviWeb.start()
-                .then(() => {
-                    tata.success("", "Your age has been verified. You will be redirected in a couple of seconds.");
-                    setTimeout(() => {
-                        window.location.reload();
-                    }, 3000)
-                })
-                .catch(error => {
-                    if (error === "Aborted") {
+                document.getElementById("verify-age-modal").addEventListener('shown.bs.modal', () => {
+                    if (started === true) {
                         return;
                     }
-                    tata.error("", `Failed to verify your age, the following error occurred: ${error}`);
+
+                    started = true;
+                    yiviWeb.start()
+                        .then(() => {
+                            tata.success("", "Your age has been verified. You will be redirected in a couple of seconds.");
+                            setTimeout(() => {
+                                window.location.reload();
+                            }, 3000)
+                        })
+                        .catch(error => {
+                            if (error === "Aborted") {
+                                return;
+                            }
+                            tata.error("", `Failed to verify your age, the following error occurred: ${error}`);
+                        });
                 });
-        });
-    </script>
-{% endif %}
+            </script>
+        {% endif %}
+    </div>
+</div>

website/age/templates/age/explainer_age_verification.html

@@ -0,0 +1,48 @@
+{% load static %}
+
+<div class="container mt-5 mb-5 text-center">
+    <h2>How to verify your age with Yivi?</h2>
+    <h6>After verification you will be able to open the beer fridge!</h6>
+</div>
+<p>
+    T.O.S.T.I. uses <a href="https://www.yivi.app/en">Yivi</a> for verifying your age online. Yivi was created on the
+    Radboud University and is a system that allows you to only share the data that is absolutely necessary for
+    a third party. In this case, T.O.S.T.I. will not get to know your birthdate but rather only whether you are
+    over 18 years old or not. More information about Yivi can be found on their website.
+</p>
+<hr>
+<h3><i class="fa-solid fa-mobile-screen-button"></i><br>1. Install the Yivi app</h3>
+<p>
+    If you want to verify your age with Yivi, you need to download the Yivi app on the App Store or Google Play
+    Store. After that, you can set up an account in the app.
+</p>
+<hr>
+<h3><i class="fa-solid fa-qrcode"></i><br>2. Scan the QR code</h3>
+<p>
+    After your account is set up, you can click the <button class="btn btn-primary">Verify your age</button> button on
+    the <a href="{% url 'users:account' %}?active=age">age verification page</a>. A popup will come up and show the
+    Yivi QR code. Open the QR code scanner in the Yivi app and scan the QR code.
+</p>
+<hr>
+<h3><i class="fa-solid fa-user-tag"></i><br>3. Load the required attributes</h3>
+<p>
+    The Yivi app will now show the information that T.O.S.T.I. needs to verify. You can load this information by
+    following the steps in the app. Currently, T.O.S.T.I. requires two pieces of information:
+</p>
+<ol>
+    <li>Whether you are older than 18 years: This attribute can be loaded using multiple methods such as via DigID or
+    your municipality.</li>
+    <li>Your student number: This attribute can be loaded using the SURF login and is used to verify that your
+        T.O.S.T.I. account corresponds to the account in Yivi.</li>
+</ol>
+<p>
+    Make sure to log in with the same student number as the one with which you are logged in to T.O.S.T.I. If you use
+    a different student number the age verification will not work.
+</p>
+<hr>
+<h3><i class="fa-solid fa-arrow-up-from-bracket"></i><br>4. Share the attributes with T.O.S.T.I.</h3>
+<p>
+    Once you loaded the required attributes, you can share them with T.O.S.T.I. by following the steps in the Yivi app.
+    T.O.S.T.I. will give you a success message and the page will reload, after the page reload your age will be
+    verified.
+</p>

website/age/views.py

@@ -34,3 +34,11 @@ def get(self, request, **kwargs):
                 "rendered_tab": rendered_tab,
             },
         )
+
+
+def explainer_page_how_to_verify_age_with_yivi(request, item):
+    """Render the explainer how to verify age with Yivi."""
+    if request.user.is_authenticated:
+        return render_to_string("age/explainer_age_verification.html", context={"request": request, "item": item})
+    else:
+        return None

website/tosti/settings/base.py

@@ -272,5 +272,4 @@
     "pbdf.nijmegen.ageLimits.over18": 18,
 }
 
-# AGE_VERIFICATION_USERNAME_ATTRIBUTE = "pbdf.pbdf.surfnet-2.id"
-AGE_VERIFICATION_USERNAME_ATTRIBUTE = None
+AGE_VERIFICATION_USERNAME_ATTRIBUTE = "pbdf.pbdf.surfnet-2.id"