Skip to content

GitLab

Commit a4e6a347 authored by Ivar Derksen's avatar Ivar Derksen
Browse files

Updated to irma-frontend javascript package

parent 9e12fcb6
Pipeline #40773 passed with stage
in 13 seconds
Expand all Hide whitespace changes
Inline Side-by-side
.gitlab-ci.yml
View file @ a4e6a347
......@@ -14,4 +14,5 @@ site:
paths:
- ./*
script:
- sleep 0
- rm .gitlab-ci.yml
- rm -rf .git
cart.html
View file @ a4e6a347
......@@ -30,7 +30,7 @@
</head>
<body onload="show()">
<body>
<!-- <div id="snackbar">Leeftijd succesvol bewezen. Spel is in winkelwagen geplaatst.
<button onclick="hide()" id="x">
X
......@@ -105,7 +105,7 @@
<!-- BREADCRUMB -->
<div id="breadcrumb" class="section" style="background: #F6FFF5;">
<div id="breadcrumb" class="section" style="background: #F6FFF5; display: none">
<!-- container -->
<div class="container">
<!-- row -->
......@@ -153,38 +153,21 @@
<div>Gratis</div>
</div>
</div>
<!-- <div class="order-col">
<div>Verzendkosten</div>
<div><strong>Gratis</strong></div>
</div> -->
<div class="order-col">
<div><strong>TOTAL</strong></div>
<div><strong class="order-total" style="color: black;">0.00€</strong></div>
</div>
</div>
<!-- <div class="payment-method">
<div class="input-radio">
<input type="radio" name="payment" id="payment-1">
<label for="payment-1">
<span></span>
iDeal
</label>
</div>
<div class="input-radio">
<input type="radio" name="payment" id="payment-2">
<label for="payment-2">
<span></span>
Invoice
</label>
</div>
<div class="input-radio">
<input type="radio" name="payment" id="payment-3">
<label for="payment-3">
<span></span>
Paypal
</label>
</div>
</div> -->
<div id="phase-agecheck" style="display: block">
<p style="padding-bottom: 22px">
Op producten uit je winkelwagen is een leeftijdsgrens van toepassing.
Bewijs eerst met IRMA dat je oud genoeg bent.
</p>
<section id="irma-web-element" style="margin: auto"></section>
<a href="index.html" class="primary-btn order-submit"
style="display: table; margin: 30px auto 0; background-color: black; color: white; padding: 14px 32px; min-width: 250px; max-width: 100%;">Terug</a>
</div>
<div id="phase-finished" style="display: none">
<div>
<p>
Dit is alleen een demo om de leeftijdscontrole inzichtelijk te maken.
......@@ -197,6 +180,7 @@
<a href="index.html" class="primary-btn order-submit"
style="background-color: black; color: white; padding: 14px 32px; min-width: 250px; max-width: 100%; float: left; ">Demo
opnieuw proberen.</a>
</div>
</div>
<!-- /Order Details -->
</div>
......@@ -237,17 +221,14 @@
<script src="js/slick.min.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/jquery.zoom.min.js"></script>
<script src="js/irma.js"></script>
<script src="js/main.js"></script>
<script>
var game_id = location.search.split("game=")[1];
var game_id = sessionStorage.getItem('productid');
var game_age = sessionStorage.getItem('minage');
var game_name = `${sessionStorage.getItem('productname')} (${game_age}+)`;
$('#game-image').attr('src', 'img/' + game_id + '.png');
let products = {
'product01': 'Fog Fighter',
'product02': 'Crazy Courier',
'product03': 'Moonlight Mission',
'product04': 'Droned'
}
$('#gamename').html(products[game_id]);
$('#gamename').html(game_name);
</script>
</body>
......
index.html
View file @ a4e6a347
......@@ -31,12 +31,6 @@
</head>
<body>
<div id="snackbar">
<p id="snackbar-content"></p> <button onclick="$('#snackbar').removeClass('show')" id="x">
X
</button>
</div>
<!-- HEADER -->
<header>
<div id="top-header" style="padding-top: 0px; background-color: #7ecadf46 ;">
......@@ -135,8 +129,9 @@
Leeftijd 18+
</div>
</div>
<button class="add-to-cart-btn" id="product01" data-minage=18> Bewijs leeftijd en
bestel</button>
<button class="add-to-cart-btn" id="product01" data-minage=18 data-productname="Fog Fighter">
Bewijs leeftijd en bestel
</button>
</div>
</div>
......@@ -161,8 +156,9 @@
Leeftijd 16+
</div>
</div>
<button class="add-to-cart-btn" id="product02" data-minage=16> Bewijs leeftijd en
bestel</button>
<button class="add-to-cart-btn" id="product02" data-minage=16 data-productname="Crazy courier">
Bewijs leeftijd en bestel
</button>
</div>
</div>
......@@ -187,8 +183,9 @@
Leeftijd 12+
</div>
</div>
<button class="add-to-cart-btn" id="product03" data-minage=12> Bewijs leeftijd en
bestel</button>
<button class="add-to-cart-btn" id="product03" data-minage=12 data-productname="Moonlight mission">
Bewijs leeftijd en bestel
</button>
</div>
</div>
......@@ -213,8 +210,9 @@
Leeftijd 18+
</div>
</div>
<button class="add-to-cart-btn" id="product04" data-minage=18> Bewijs leeftijd en
bestel</button>
<button class="add-to-cart-btn" id="product04" data-minage=18 data-productname="Droned">
Bewijs leeftijd en bestel
</button>
</div>
</div>
......@@ -267,7 +265,6 @@
<script src="js/slick.min.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/jquery.zoom.min.js"></script>
<script src="js/irma.js"></script>
<script src="js/main.js"></script>
</body>
......
js/irma.js
View file @ a4e6a347
This diff is collapsed.
js/main.js
View file @ a4e6a347
......@@ -82,46 +82,71 @@
$('#product-main-img .product-preview').zoom();
}
// Age verification with IRMA
// Go to age verification page
$('.add-to-cart-btn').on('click', function (element) {
$('#snackbar').removeClass('show');
sessionStorage.setItem('minage', element.currentTarget.getAttribute('data-minage'));
sessionStorage.setItem('productname', element.currentTarget.getAttribute('data-productname'));
sessionStorage.setItem('productid', element.currentTarget.id);
window.location.href = 'cart.html';
});
// If no product is chosen yet, return to the index page.
if (location.pathname.includes('cart.html') && !sessionStorage.getItem('productid'))
location.href = 'index.html';
// Age verification with IRMA
if ( irma ) {
console.log("Age verification started");
$.get('/start_session.php?type='+element.currentTarget.getAttribute('data-minage')+'plus', function (sessionpackagejson) {
let sessionpackage = JSON.parse(sessionpackagejson);
let options = {
server: sessionpackage.sessionPtr.u.split('/irma')[0],
token: sessionpackage.token,
language: 'nl'
};
let promise = irma.handleSession(sessionpackage.sessionPtr, options);
let success = function (data) {
console.log("Session successful!");
console.log("Result:", data);
// Continue to order page if user is 18+
if (data.disclosed[0][0].rawvalue.toLowerCase() === 'yes') {
window.location.href = 'cart.html?game=' + element.currentTarget.id;
} else {
$('#snackbar-content').html('U hebt niet de juiste leeftijd om dit artikel te mogen bestellen.');
$('#snackbar').addClass('show');
}
};
let error = function (data) {
if (data === 'CANCELLED') {
console.log("Session cancelled!");
$('#snackbar-content').html('Leeftijdsverificatie via IRMA is geannuleerd.');
$('#snackbar').addClass('show');
} else {
console.log("Session failed!");
console.log("Error data:", data);
$('#snackbar-content').html('Er is een fout opgetreden bij de leeftijdsverificatie via IRMA.');
$('#snackbar').addClass('show');
irma.new({
element: '#irma-web-element',
session: {
url: '',
start: {
url: o => `start_session.php?type=` + sessionStorage.getItem('minage') + 'plus',
body: null,
headers: [],
method: 'GET',
},
mapping: {
sessionToken: r => r,
},
result: {
url: (o, t) => `${t.sessionPtr.u.split('/irma')[0]}/session/${t.token}/result`,
}
};
},
promise.then(success, error);
translations: {
'success': 'Gegevens ontvangen.'
},
});
});
let success = function (data) {
console.log("Session successful!");
console.log("Result:", data);
// Continue to order page if user is 18+
if (data.disclosed[0][0].rawvalue.toLowerCase() === 'yes') {
setTimeout(() => {
$('#phase-agecheck').hide();
$('#phase-finished').show();
$('#breadcrumb').show();
$('html').scrollTop(0);
}, 1000);
} else {
$('#snackbar-content').html('U hebt niet de juiste leeftijd om dit artikel te mogen bestellen.');
$('#snackbar').addClass('show');
}
};
let error = function (data) {
console.log("Session failed!");
console.log("Error data:", data);
$('#snackbar-content').html('Er is een fout opgetreden bij de leeftijdsverificatie via IRMA.');
$('#snackbar').addClass('show');
};
irma.start().then(success, error);
}
})(jQuery);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment