diff --git a/Gruntfile.js b/Gruntfile.js index 350132a..dd62099 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -29,7 +29,8 @@ module.exports = function (grunt) { node_modules: { cwd: "node_modules", src: [ - "@privacybydesign/irma-frontend/dist/irma.js", + "@privacybydesign/yivi-frontend/dist/yivi.js", + "@privacybydesign/yivi-css/dist/yivi.min.css", "bootstrap/dist/**", "jquery/dist/jquery.min.js", "js-cookie/src/js.cookie.js", diff --git a/package.json b/package.json index e801c3c..3b4ee5f 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "author": "Fabian van den Broek, Sietse Ringers, Radboud University, Privacy by Design Foundation", "license": "BSD-3-Clause", "devDependencies": { - "@privacybydesign/irma-frontend": "^0.4.3", - "bootstrap": "~3.4.1", + "@privacybydesign/yivi-frontend": "^0.1.3", + "@privacybydesign/yivi-css": "^0.1.3", "grunt": "^0.4.5", "grunt-cli": "1.3.2", "grunt-contrib-copy": "^0.8.2", @@ -17,4 +17,4 @@ "js-cookie": "2.1.3", "jwt-decode": "~1.4.0" } -} +} \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..c466821 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,68 @@ +html, +body { + margin: 0; + padding: 0; + height: 100%; + font-size: 16px; + line-height: 24px; + background-color: #f7f5f3; + font-family: 'Open Sans', Verdana, Arial, sans-serif; +} + +.logo-img { + height: 5rem; +} + +.content { + max-width: 578px; + padding: 0 16px; + display: flex; + align-items: center; + gap: 2rem; + margin: auto; +} + +header { + background: #ffffff; + color: #484747; + border-bottom: 1px solid #cfe4ef; + padding: 16px; + margin-bottom: 4rem; +} + +header h1 { + margin: 0; + font-size: 18px; + line-height: 22px; + font-weight: bold; + font-family: 'Alexandria', Verdana, Arial, sans-serif; +} + +form :is(select, input, button) { + margin: 1rem 0; + width: 100%; +} + +select { + display: block; + border: none; + border-bottom-width: medium; + border-bottom-style: none; + border-bottom-color: currentcolor; + border-bottom: 2px solid #484747; + background-color: transparent; + padding: 0.5rem 0; +} + +label { + margin-top: 2rem; + margin-bottom: 0.5rem; + display: block; + font-family: 'Alexandria', Verdana, Arial, sans-serif; + color: #484747; +} + +button { + font-weight: 700 !important; + cursor: pointer; +} diff --git a/src/done.html b/src/done.html index 04f2352..b060ad3 100644 --- a/src/done.html +++ b/src/done.html @@ -1,41 +1,62 @@ - + - - - - - + + + + + + + <%= done_title %> - - - -
-
-
-

<%= done_header %>

- -
- -

<%= done_text1 %>

-

<%= done_text2 %>

-

<%= done_text3 %>

- - - -

-

-

- - <%= done_return %> -
-
-
- + + + +
+
+ +

<%= done_header %>

+
+
+
+
+
+ +

<%= done_text1 %>

+

<%= done_text2 %>

+

<%= done_text3 %>

+ + + +

+

+

+ + <%= done_return %> +
+
+ diff --git a/src/enroll.html b/src/enroll.html index 1623be6..30f6701 100644 --- a/src/enroll.html +++ b/src/enroll.html @@ -1,53 +1,72 @@ - - - + + + - + + + - - - + + + - + <%= enroll_title %> - - + + +
+
+ +

<%= enroll_header %>

+
+
+
+
+
-
-
- - -
-
- +

<%= enroll_clicktoload %>

+ +
+
+
+ diff --git a/src/error.html b/src/error.html index fa32fc3..ce2c0e5 100644 --- a/src/error.html +++ b/src/error.html @@ -1,35 +1,45 @@ - - - + + + <%= error_title %> - + + + - - + + - - - -
-
- -
-

<%= error_header %>

-
-

<%= error_text1 %><%= error_text2 %>

-
-
-
-
- + + +
+
+ +

<%= error_header %>

+
+
+
+
+
+

<%= error_text1 %><%= error_text2 %>

+
+
+
+ diff --git a/src/images/idin-logo.svg b/src/images/idin-logo.svg new file mode 100644 index 0000000..35c5241 --- /dev/null +++ b/src/images/idin-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index fc30d23..55ec029 100644 --- a/src/index.html +++ b/src/index.html @@ -1,45 +1,59 @@ - - - - + + + + - + + + - + <%= index_title %> - + - + +
+
+ +

+ <%= index_header %> + iDIN +

+
+
+
+
+
-
-
- -
-

<%= index_header %> iDIN

+

<%= index_explanation %>

-
- -

<%= index_explanation %>

-

<%= index_selectbank %>

- - - - -
-
-
-
- + + + + +
+ diff --git a/src/languages/en.json b/src/languages/en.json index e574580..ffd8f8e 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -1,7 +1,7 @@ { - "index_title": "IRMA attributen vanuit iDIN", - "index_header": "Uw IRMA attributen vanuit uw bank, via", - "index_explanation": "U kunt hier inloggen via uw bank, op de gebruikelijke wijze. Uw bank stuurt dan, na uw toestemming, enkele attributen (uw naam, adres, etc.) terug naar deze website. Vervolgens kunt u deze attributen in uw IRMA app laden.", + "index_title": "Yivi attributen vanuit iDIN", + "index_header": "Uw Yivi attributen vanuit uw bank, via", + "index_explanation": "U kunt hier inloggen via uw bank, op de gebruikelijke wijze. Uw bank stuurt dan, na uw toestemming, enkele attributen (uw naam, adres, etc.) terug naar deze website. Vervolgens kunt u deze attributen in uw Yivi app laden.", "index_selectbank": "Selecteer uw bank om door te gaan: ", "index_defaultoption": "Kies uw bank", "error_title": "Fout bij het laden van iDIN attributen", @@ -12,12 +12,12 @@ "enroll_header": "Beschikbare attributen", "enroll_received_attributes": "De volgende attributen zijn beschikbaar gesteld door uw bank:", "enroll_derived_attributes": "De volgende attributen zijn daaruit afgeleid:", - "enroll_two_credentials_warning": "In november 2019 is een verandering in de structuur van de iDIN attributen in de IRMA-app doorgevoerd, waarbij leeftijdsgrenzen niet meer apart staan. Om deze verandering soepel te laten verlopen, worden deze leeftijdsgrenzen tijdelijk dubbel uitgegeven: eenmaal als onderdeel van het geheel van iDIN attributen en eenmaal los. In de loop van 2020 zal de uitgifte van de losse leeftijdsgrensattributen definitief worden uitgefaseerd.", - "enroll_clicktoload": "Klik de Laad attributen knop om deze attributen in uw IRMA app te laden.", - "enroll_load_button": "Laad attributen in uw IRMA app", + "enroll_two_credentials_warning": "In november 2019 is een verandering in de structuur van de iDIN attributen in de Yivi-app doorgevoerd, waarbij leeftijdsgrenzen niet meer apart staan. Om deze verandering soepel te laten verlopen, worden deze leeftijdsgrenzen tijdelijk dubbel uitgegeven: eenmaal als onderdeel van het geheel van iDIN attributen en eenmaal los. In de loop van 2020 zal de uitgifte van de losse leeftijdsgrensattributen definitief worden uitgefaseerd.", + "enroll_clicktoload": "Klik de Laad attributen knop om deze attributen in uw Yivi app te laden.", + "enroll_load_button": "Laad attributen in uw Yivi app", "done_title": "iDIN Attributen uitgegeven", "done_header": "iDIN attributen zijn geladen", - "done_text1": "Gefeliciteerd! Uw attributen zijn nu in uw IRMA app geladen. Daar zijn ze nu zichtbaar.", + "done_text1": "Gefeliciteerd! Uw attributen zijn nu in uw Yivi app geladen. Daar zijn ze nu zichtbaar.", "done_text2": "U kunt ze nu gebruiken op iedere website die deze attributen accepteert.", "done_text3": "Door op de knop hieronder te klikken kunt u dit testen; u toont dan uw geboortedatum-attribuut.", "done_show_button": "Toon geboortedatum-attribuut", diff --git a/src/languages/nl.json b/src/languages/nl.json index e574580..ffd8f8e 100644 --- a/src/languages/nl.json +++ b/src/languages/nl.json @@ -1,7 +1,7 @@ { - "index_title": "IRMA attributen vanuit iDIN", - "index_header": "Uw IRMA attributen vanuit uw bank, via", - "index_explanation": "U kunt hier inloggen via uw bank, op de gebruikelijke wijze. Uw bank stuurt dan, na uw toestemming, enkele attributen (uw naam, adres, etc.) terug naar deze website. Vervolgens kunt u deze attributen in uw IRMA app laden.", + "index_title": "Yivi attributen vanuit iDIN", + "index_header": "Uw Yivi attributen vanuit uw bank, via", + "index_explanation": "U kunt hier inloggen via uw bank, op de gebruikelijke wijze. Uw bank stuurt dan, na uw toestemming, enkele attributen (uw naam, adres, etc.) terug naar deze website. Vervolgens kunt u deze attributen in uw Yivi app laden.", "index_selectbank": "Selecteer uw bank om door te gaan: ", "index_defaultoption": "Kies uw bank", "error_title": "Fout bij het laden van iDIN attributen", @@ -12,12 +12,12 @@ "enroll_header": "Beschikbare attributen", "enroll_received_attributes": "De volgende attributen zijn beschikbaar gesteld door uw bank:", "enroll_derived_attributes": "De volgende attributen zijn daaruit afgeleid:", - "enroll_two_credentials_warning": "In november 2019 is een verandering in de structuur van de iDIN attributen in de IRMA-app doorgevoerd, waarbij leeftijdsgrenzen niet meer apart staan. Om deze verandering soepel te laten verlopen, worden deze leeftijdsgrenzen tijdelijk dubbel uitgegeven: eenmaal als onderdeel van het geheel van iDIN attributen en eenmaal los. In de loop van 2020 zal de uitgifte van de losse leeftijdsgrensattributen definitief worden uitgefaseerd.", - "enroll_clicktoload": "Klik de Laad attributen knop om deze attributen in uw IRMA app te laden.", - "enroll_load_button": "Laad attributen in uw IRMA app", + "enroll_two_credentials_warning": "In november 2019 is een verandering in de structuur van de iDIN attributen in de Yivi-app doorgevoerd, waarbij leeftijdsgrenzen niet meer apart staan. Om deze verandering soepel te laten verlopen, worden deze leeftijdsgrenzen tijdelijk dubbel uitgegeven: eenmaal als onderdeel van het geheel van iDIN attributen en eenmaal los. In de loop van 2020 zal de uitgifte van de losse leeftijdsgrensattributen definitief worden uitgefaseerd.", + "enroll_clicktoload": "Klik de Laad attributen knop om deze attributen in uw Yivi app te laden.", + "enroll_load_button": "Laad attributen in uw Yivi app", "done_title": "iDIN Attributen uitgegeven", "done_header": "iDIN attributen zijn geladen", - "done_text1": "Gefeliciteerd! Uw attributen zijn nu in uw IRMA app geladen. Daar zijn ze nu zichtbaar.", + "done_text1": "Gefeliciteerd! Uw attributen zijn nu in uw Yivi app geladen. Daar zijn ze nu zichtbaar.", "done_text2": "U kunt ze nu gebruiken op iedere website die deze attributen accepteert.", "done_text3": "Door op de knop hieronder te klikken kunt u dit testen; u toont dan uw geboortedatum-attribuut.", "done_show_button": "Toon geboortedatum-attribuut", diff --git a/yarn.lock b/yarn.lock index 435c2aa..5cffe38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,10 +2,15 @@ # yarn lockfile v1 -"@privacybydesign/irma-frontend@^0.4.3": - version "0.4.3" - resolved "https://registry.yarnpkg.com/@privacybydesign/irma-frontend/-/irma-frontend-0.4.3.tgz#5d1389ecc9d3e08bef175756830f934f460de484" - integrity sha512-1UFNUI4cqAYXFndgcywckgEZKYqtz/eTXmH83gFNYkeBQzv8PKygowrrSOFlb5HUWaXCNnMeTTxVnZH4eLy9EQ== +"@privacybydesign/yivi-css@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@privacybydesign/yivi-css/-/yivi-css-0.1.3.tgz#45e1561ce2a966c10205ed51d6440a018a8fb75d" + integrity sha512-u40ZowE4SM6xotYTh7NDKZxZrZ1vLMhrv0kTOl/cv+9exCkzZ2bAqEVg+5euCpXtSB+Zkttwx2UtPnM3tIVP2w== + +"@privacybydesign/yivi-frontend@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@privacybydesign/yivi-frontend/-/yivi-frontend-0.1.3.tgz#aa54aea3178d570f8a989069f2d2e7cc5cdbc675" + integrity sha512-cT6JRbli8HaTVB2z0Tmvrd0ln2ByHbcpTNHnOCbvl0SeLXfBGGIOUMpV+HwIg5xMuznMaonjA0572v7tL8Wc9w== Base64@~0.1.3: version "0.1.4"