Merge pull request #19 from privacybydesign/enhance/IRMAtoYivi

Enhance/irma-to-yivi
privacybydesign · Dec 4, 2024 · 6e3349a · 6e3349a
2 parents abac850 + 04be347
commit 6e3349a
Show file tree

Hide file tree

Showing 50 changed files with 375 additions and 292 deletions.
diff --git a/build_artifacts.sh b/build_artifacts.sh
@@ -17,14 +17,14 @@ for lang in 'nl' 'en'; do
   # Copy demos in the right language directory
   mkdir -p "$DIR/build/$lang"
 
-  for f in "$DIR"/*/; do
+  for f in "$DIR"/demos/*/; do
     if echo "$f" | grep -q '/build/\|/vendor/\|/assets/\|node_modules/\|/data'; then
       continue
     fi
 
-    demoname=$(echo "$f" | cut -d'/' -f 2)
+    demoname=$(echo "$f" | cut -d'/' -f 3)
     # Retrieve demo name in the particular language
-    source ./"$demoname"/name.sh
+    source ./demos/"$demoname"/name.sh
     eval translateddemoname=\$$lang
     demodir="$DIR/build/$lang/$translateddemoname"
     cp -r "$f" "$demodir"

diff --git a/18plus/18plusdemo.js → demos/18plus/18plusdemo.js b/18plus/18plusdemo.js → demos/18plus/18plusdemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     let success_fun = function(data) {
         let attr = data.disclosed[0][0].rawvalue.toLowerCase();
         if(attr === 'yes' || attr === 'ja') {

diff --git a/18plus/GTA.gif → demos/18plus/GTA.gif b/18plus/GTA.gif → demos/18plus/GTA.gif
diff --git a/18plus/index.en.html → demos/18plus/index.en.html b/18plus/index.en.html → demos/18plus/index.en.html
@@ -3,42 +3,46 @@
     <head>
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <meta charset="utf-8"/>
-        <title>18+ IRMA demo</title>
+        <title>18+ Yivi demo</title>
 
-        <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+        <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
         <script src="messages.en.js" defer></script>
         <script src="18plusdemo.js" defer></script>
     </head>
     <body>
+        <header>
+            <h1>Age verification with Yivi</h1>
+        </header>
 
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-<h1>Age verification with IRMA</h1>
+<div class="container mt-5" id="main">
+            
 
 <div id="result_status"></div>
 
 <p>
-This page contains an example of a simple age check with IRMA,
+This page contains an example of a simple age check with Yivi,
 together with an explanation of how this works and can be used, for
 instance by webshops or video sites. With the button below it can be
 checked whether a visitor of such a site is indeed older than
-18. What's special about IRMA is its privacy-friendliness: the visitor
+18. What's special about Yivi is its privacy-friendliness: the visitor
 reveals no other information than the fact that (s)he is 18+.
 </p>
 
 <p>
 In order to be able to try out yourself the button below you need to
-have the IRMA
-app <a href="https://privacybydesign.foundation/download-en/">installed</a>
+have the Yivi
+app <a href="https://yivi.app/#download">installed</a>
 with at least your <b>personal data</b> card loaded.  This can be done via
-the Dutch <a href="https://services.nijmegen.nl/irma/gemeente/start">BRP
+the Dutch <a href="https://yivi.nijmegen.nl/login">BRP
 issuance webpage</a>.
 </p>
 
 <div style="text-align: center">
-    <button class="btn btn-primary" id="try_irma_18btn">Older than 18 check</button>
+    <button class="custom-button" id="try_irma_18btn">Older than 18 check</button>
 </div>
 
 <p>
@@ -49,31 +53,30 @@ <h1>Age verification with IRMA</h1>
 data can be collected by anyone in the Netherlands.  The software for
 checking these attributes, as used here, is open source, freely
 available, and can be used without costs, see also
-the <a href="https://privacybydesign.foundation/irma-verifier/">webpage</a>
-of the foundation with more information on this.
+the Yivi documentation <a href="https://docs.staging.yivi.app/">webpage</a> with more information on this.
 
 <li> Buttons like the above one are especially relevant for webshops
 that have a legal obligation to perform age verification when offering
 violent or possibly offensive games or films, or by gambling
 sites. The button could also be used to regulate online access to
 catch up TV programs. Currently, many of these sites do not have
 proper age checks because there is no user-friendly (and cheap)
-technology available. With IRMA this excuse can no longer be used.
+technology available. With Yivi this excuse can no longer be used.
 
-<li> With IRMA it is possible to perform not only "older than" but
+<li> With Yivi it is possible to perform not only "older than" but
 also "younger than" checks, such as "younger than 16" or "younger than
 12". Such checks can be used to restrict access to certain webpages or
 chat sites to minors --- and to exclude others, in principle. So far,
-these "younger than" data are not issued in IRMA, on the one side
+these "younger than" data are not issued in Yivi, on the one side
 because no specific application has emerged, and on the other side
 because it is unclear from which age onwards one can reasonably expect
-children to use the IRMA app.
+children to use the Yivi app.
 </ul>
 </p>
 
 <p>
-<a href="https://privacybydesign.foundation/demo-en/">Back</a> to
-the IRMA demo overview.
+<a href="../../">Back</a> to
+the Yivi demo overview.
 </p>
 
 </div>

diff --git a/18plus/index.nl.html → demos/18plus/index.nl.html b/18plus/index.nl.html → demos/18plus/index.nl.html
@@ -3,43 +3,47 @@
 <head>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta charset="utf-8"/>
-    <title>18+ check met IRMA</title>
+    <title>18+ check met Yivi</title>
 
-    <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+    <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+    <link href="../../resources/style.css" rel="stylesheet"/>
 
-    <script src="../assets/jquery.min.js" defer></script>
-    <script src="../assets/yivi.js" defer></script>
+    <script src="../../assets/jquery.min.js" defer></script>
+    <script src="../../assets/yivi.js" defer></script>
     <script src="messages.nl.js" defer></script>
     <script src="18plusdemo.js" defer></script>
 </head>
 <body>
+    <header>
+        <h1>Leeftijdscontrole met Yivi</h1>
+    </header>
 
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-<h1>Leeftijdscontrole met IRMA</h1>
+<div class="container mt-5" id="main">
+<h1>Leeftijdscontrole met Yivi</h1>
 
 <div id="result_status"></div>
 
 <p>
 Deze pagina bevat een voorbeeld van een eenvoudige leeftijdscheck met
-IRMA, samen met enige uitleg over hoe dit werkt en hoe dit gebruikt
+Yivi, samen met enige uitleg over hoe dit werkt en hoe dit gebruikt
 kan worden door bijvoorbeeld webwinkels of video sites. Met de
 onderstaande knop kan gecontroleerd worden of een bezoeker van zo'n
-webpagina daadwerkelijk ouder is dan 18. Het bijzondere aan IRMA is de
+webpagina daadwerkelijk ouder is dan 18. Het bijzondere aan Yivi is de
 privacy-vriendelijkheid: de bezoeker onthult geen enkele andere
 informatie dan het feit dat hij/zij 18+ is. 
 </p>
 
 <p>
-Om de onderstaande knop te kunnen uitproberen moet de bezoeker de IRMA
-app <a href="https://privacybydesign.foundation/download/">ge&iuml;nstalleerd</a>
+Om de onderstaande knop te kunnen uitproberen moet de bezoeker de Yivi
+app <a href="https://yivi.app/#download">ge&iuml;nstalleerd</a>
 hebben en daarin het kaartje met <b>persoonsgegevens</b> geladen
 hebben. Dat kan via
-de <a href="https://services.nijmegen.nl/irma/gemeente/start">BRP
+de <a href="https://yivi.nijmegen.nl/login">BRP
 uitgifte webpagina</a>.
 </p>
 
 <div style="text-align: center">
-    <button class="btn btn-primary" id="try_irma_18btn">Ouder dan 18 check</button>
+    <button class="custom-button" id="try_irma_18btn">Ouder dan 18 check</button>
 </div>
 
 <p>
@@ -48,41 +52,40 @@ <h1>Leeftijdscontrole met IRMA</h1>
 <li> Eenzelfde knop kan gebruikt worden voor andere leeftijdschecks,
 zoals "boven de 12", "boven de 16", of zelfs "boven de 65". Deze
 persoonlijke gegevens kunnen door iedereen in Nederland verzameld
-worden in de eigen IRMA app, via
+worden in de eigen Yivi app, via
 de <a href="https://privacybydesign.foundation/uitgifte/">attribuut
 uitgifte</a> pagina.  De software voor het controleren van deze
 attributen, zoals ook hier gebruikt, is open source en gratis
 beschikbaar en kan ook kosteloos gebruikt worden, zie ook
-de <a href="https://privacybydesign.foundation/irma-controleur/">webpagina</a>
-van de stichting met meer informatie hierover.
+de yivi documentatie <a href="https://docs.staging.yivi.app/">webpagina</a> met meer informatie hierover.
 
 <li> Deze knop zou gebruikt kunnen worden door webwinkels die aan
 <a href="http://maxius.nl/wetboek-van-strafrecht/artikel240a">wettelijke
 eisen</a> moeten voldoen bij het aanbieden van bijvoorbeeld
 gewelddadige en/of aanstootgevende games of films. Dit is uitgewerkt
-in een speciale <a href="https://www.angrygames.nl">angry games</a>
+in een speciale <a href="https://angrygames.staging.yivi.app">angry games</a>
 demo. Ook zou met zo'n knop de toegang gereguleerd kunnen worden tot
 bepaalde TV programma's op uitzending-gemist sites. Tot nu toe wordt
 door de overheid veelal door de vingers gezien dat webwinkels geen
 echte leeftijdscontrole uitvoeren omdat er geen gebruiksvriendelijke
-(en goedkope) technologie beschikbaar zou zijn. Met IRMA gaat dat
+(en goedkope) technologie beschikbaar zou zijn. Met Yivi gaat dat
 argument niet langer op.
 
-<li> Het is met IRMA in principe ook mogelijk om niet alleen "ouder
+<li> Het is met Yivi in principe ook mogelijk om niet alleen "ouder
 dan" maar ook "jonger dan" controles te gebruiken, zoals "jonger dan
 16" of "jonger dan 12". Daarmee kan toegang tot bepaalde webpagina's
 of chat sites tot jongeren beperkt worden - en daarmee kunnen anderen
 in principe uitgesloten worden. Deze "jonger dan" gegevens worden
-vooralsnog echter niet uitgegeven in IRMA, enerzijds omdat zich nog
+vooralsnog echter niet uitgegeven in Yivi, enerzijds omdat zich nog
 geen concrete toepassing aangediend heeft, en anderzijds omdat het
 onduidelijk is vanaf welke leeftijd het redelijk is dat kinderen de
-IRMA app gaan gebruiken.
+Yivi app gaan gebruiken.
 </ul>
 </p>
 
 <p>
-<a href="https://privacybydesign.foundation/demo/">Terug</a> naar
-het IRMA demo overzicht.
+<a href="../../">Terug</a> naar
+het Yivi demo overzicht.
 </p>
 
 </div>

diff --git a/18plus/messages.en.js → demos/18plus/messages.en.js b/18plus/messages.en.js → demos/18plus/messages.en.js
diff --git a/18plus/messages.nl.js → demos/18plus/messages.nl.js b/18plus/messages.nl.js → demos/18plus/messages.nl.js
diff --git a/18plus/name.sh → demos/18plus/name.sh b/18plus/name.sh → demos/18plus/name.sh
diff --git a/address/adresdemo.js → demos/address/adresdemo.js b/address/adresdemo.js → demos/address/adresdemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     let success_fun = function(data) {
         let i = 0;
         let adres = data.disclosed[0][i++].rawvalue;

diff --git a/address/index.en.html → demos/address/index.en.html b/address/index.en.html → demos/address/index.en.html
@@ -5,10 +5,12 @@
         <meta charset="utf-8"/>
         <title>Address verification demo</title>
 
-        <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+        <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
         <script src="messages.en.js" defer></script>
         <script src="adresdemo.js" defer></script>
 
@@ -23,25 +25,25 @@
 </style>
 
     </head>
-    <body>
+<body>
+  <header> <h1>Address form-filling with Yivi</h1> </header>
 
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-<h1>Address form-filling with IRMA</h1>
+<div class="container mt-5" id="main">
 
 <div id="result_status"></div>
 
 <p>
 This page describes how a visitor can easily disclose his/her address
-with IRMA. In particular, an address form is filled-in automatically
+with Yivi. In particular, an address form is filled-in automatically
 with reliable address data.
 </p>
 
 <p>
 In order to be able to try out the button below you need to have the
-IRMA
-app <a href="https://privacybydesign.foundation/download-en/">installed</a>
+Yivi
+app <a href="https://yivi.app/#download">installed</a>
 with at least your <b>address</b> card loaded.  This can be done via
-the Dutch <a href="https://services.nijmegen.nl/irma/gemeente/start">BRP
+the Dutch <a href="https://yivi.nijmegen.nl/login">BRP
 issuance webpage</a>.
 </p>
 
@@ -54,7 +56,7 @@ <h1>Address form-filling with IRMA</h1>
   <tr>
     <td> <b>Zip code</b> </td>
     <td> <input id = "postcode_regel" disabled> </td>
-    <td><button class="btn btn-primary" id="try_irma_adresbtn">Fill in with IRMA</button></td>
+    <td><button class="custom-button" id="try_irma_adresbtn">Fill in with Yivi</button></td>
   </tr>
   <tr>
     <td> <b>City</b> </td>
@@ -70,7 +72,7 @@ <h1>Address form-filling with IRMA</h1>
 does <em>not</em> store or collect any data. As soon as the demo is
 closed, all information disappears.
 
-<li> This automatic form-filling with IRMA also works for other
+<li> This automatic form-filling with Yivi also works for other
 fields, like name, email address, phone number etc. This is much
 easier than typing the information by hand and prevents
 mistakes. Moreover, the website knows the data is reliable: it can
@@ -82,8 +84,8 @@ <h1>Address form-filling with IRMA</h1>
 
 
 <p>
-<a href="https://privacybydesign.foundation/demo-en/">Back</a> to
-the IRMA demo overview.
+<a href="../../">Back</a> to
+the Yivi demo overview.
 </p>
 
 </div>

diff --git a/address/index.nl.html → demos/address/index.nl.html b/address/index.nl.html → demos/address/index.nl.html
@@ -5,10 +5,12 @@
         <meta charset="utf-8"/>
         <title>Adres verificatie demo</title>
 
-        <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+        <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
         <script src="messages.nl.js" defer></script>
         <script src="adresdemo.js" defer></script>
 
@@ -24,9 +26,11 @@
 
     </head>
     <body>
+      <header>
+        <h1>Adres formulier invullen met IRMA</h1>
+      </header>
 
-      <div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-	<h1>Adres formulier invullen met IRMA</h1>
+      <div class="container mt-5" id="main">
 
 	<div id="result_status"></div>
 
@@ -40,10 +44,10 @@ <h1>Adres formulier invullen met IRMA</h1>
 	<p>
 	  Om de onderstaande knoppen te kunnen uitproberen moet de
 	  bezoeker de IRMA
-	  app <a href="https://privacybydesign.foundation/download/">ge&iuml;nstalleerd</a>
+	  app <a href="https://yivi.app/#download">ge&iuml;nstalleerd</a>
 	  hebben en daarin het <b>adres</b> kaartje geladen
 	  hebben. Dat kan via
-	  de <a href="https://services.nijmegen.nl/irma/gemeente/start">BRP
+	  de <a href="https://yivi.nijmegen.nl/login">BRP
 	  uitgifte webpagina</a>.
 </p>
 
@@ -56,7 +60,7 @@ <h1>Adres formulier invullen met IRMA</h1>
   <tr>
     <td> <b>Postcode</b> </td>
     <td> <input id = "postcode_regel" disabled> </td>
-    <td><button class="btn btn-primary" id="try_irma_adresbtn">Vul in met IRMA</button></td>
+    <td><button class="custom-button" id="try_irma_adresbtn">Vul in met IRMA</button></td>
   </tr>
   <tr>
     <td> <b>Plaats</b> </td>
@@ -95,7 +99,7 @@ <h1>Adres formulier invullen met IRMA</h1>
 
 
 <p>
-<a href="https://privacybydesign.foundation/demo/">Terug</a> naar
+<a href="../../">Terug</a> naar
 het IRMA demo overzicht.
 </p>
 

diff --git a/address/messages.en.js → demos/address/messages.en.js b/address/messages.en.js → demos/address/messages.en.js
diff --git a/address/messages.nl.js → demos/address/messages.nl.js b/address/messages.nl.js → demos/address/messages.nl.js
diff --git a/address/name.sh → demos/address/name.sh b/address/name.sh → demos/address/name.sh
diff --git a/beingalive/beingalivedemo.js → demos/beingalive/beingalivedemo.js b/beingalive/beingalivedemo.js → demos/beingalive/beingalivedemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     function doVerificationSession() {
         const e = document.getElementById('result');
         e.classList.forEach((label) => {