Skip to content

GitLab

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

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
    Showing with 99 additions and 96 deletions
    .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