IRMA css

IRMA css

Source: src/components/irma-button.scss, line 1

5.1 IRMA button

A button to press to launch the disclosure flow in the IRMA app (locally on a mobile device)

<button class="irma-web-button">
  Open IRMA-app
</button>
<a href="#" class="irma-web-button">
  Open IRMA-app
</a>

Source: src/components/irma-form.scss, line 1

5.2 IRMA 'login form'

A place to nicely show the different states of the IRMA disclosure flow.

Trigger helper:

<section class="irma-web-form">
  <div class="irma-web-header">
    <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
    <div class="irma-web-helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
    </div>
  </div>
  <div class="irma-web-content">
    <div class="irma-web-centered">
      <button>Some action here</button>
      <p>With some text <a href="#">and stuff</a></p>
    </div>
  </div>
</section>
<section class="irma-web-form">
  <div class="irma-web-header">
    <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
    <div class="irma-web-helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
    </div>
    <button class="irma-web-close"></button>
  </div>
  <div class="irma-web-content">
    <div class="irma-web-centered">
      <button>Some action here</button>
      <p>With some text <a href="#">and stuff</a></p>
    </div>
  </div>
</section>

Source: src/components/irma-pairing-form.scss, line 1

5.4 IRMA pairing form

A form to enter the pairing code in order to pair your IRMA app with the session.

Example

Vul de koppelcode in die in je IRMA-app verschijnt. 

<form class="irma-web-pairing-form">
  <p>Vul de koppelcode in die in je IRMA-app verschijnt.</>
  <div class="irma-web-pairing-code">
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
  </div>
  <div class="irma-web-pairing-loading-animation" style="visibility: hidden">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
  <input type="submit" style="display: none" />
  <script type="application/javascript">
    let form = document.querySelector('.irma-web-pairing-form');
    let inputFields = form.querySelectorAll('.irma-web-pairing-code input');
    inputFields.forEach(field => {
      field.onkeydown = (e) => {
        e.target.prevValue = e.target.value;
        if (e.key != 'Enter') e.target.value = '';
      };
      field.onkeyup = (e) => {
        let prevField = e.target.previousElementSibling;
        if (prevField && e.key == 'Backspace' && e.target.value === e.target.prevValue) {
          prevField.value = '';
          prevField.focus();
        }
      };
      field.oninput = (e) => {
        let nextField = e.target.nextElementSibling;
        if (!nextField || !e.target.checkValidity()) {
          e.target.form.querySelector('input[type=submit]').click();
        } else {
          nextField.focus();
        }
      };
      field.onfocus = (e) => {
        if (!e.target.value) {
          e.preventDefault();
          e.target.form.querySelector('input:invalid').focus();
        }
      };
    });
    inputFields[0].parentElement.onclick = (e) => {
      if (e.target.tagName !== 'INPUT') {
        let firstInvalidField = form.querySelector('input:invalid');
        if (firstInvalidField) firstInvalidField.focus();
      }
    };
    form.onsubmit = (e) => {
      e.preventDefault();
      let code = Array.prototype.map.call(inputFields, f => {
        f.disabled = true;
        return f.value;
      }).join('');
      e.target.querySelector('.irma-web-pairing-loading-animation').style.visibility = 'visible';
      setTimeout(() => {
        e.target.reset();
        inputFields.forEach(f => f.disabled = false);
        inputFields[0].focus();
        e.target.querySelector('p').innerHTML = `De ingevoerde koppelcode ${code} komt niet overeen met de code in jouw IRMA-app. Probeer het opnieuw.`;
        e.target.querySelector('.irma-web-pairing-loading-animation').style.visibility = 'hidden';
      }, 500);
    };
  </script>
</form>

Source: src/components/qr-code.scss, line 1

5.5 QR code

Styling to apply to the QR code image

Example

<img class="irma-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>