IRMA web front-end

IRMA web front-end

Source: examples/helpers.scss, line 1

1.1 Helpers

The IRMA form has a notification area for non-state errors that occur outside the disclosure flow. We call these "helpers", and they're supposed to give the user hints about known issues or point to specific resources to help the user along.

You can trigger these helpers to show in each and every example on this page.

Trigger helper:

<section class="irma-web-form">
  <header class="header show-helper">
    <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
    <section class="helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
    </section>
  </header>
  <section class="content">
  </section>
</section>

Source: examples/happy-path.scss, line 1

1.2 Happy path

This is what the entire flow should look like if everything works as intended.

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

Volg de instructies in de IRMA app

Gelukt!

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content" data-animate>
      <section class="centered" data-duration="2000">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
      <section class="centered" data-duration="5000">
        <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="/>
      </section>
      <section class="centered" data-duration="5000">
        <div class="irma-web-waiting-for-user-animation"></div>
        <p>Volg de instructies in de IRMA app</p>
      </section>
      <section class="centered" data-duration="2000">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red; margin: 0 auto;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content" data-animate>
      <section class="centered" data-duration="2000">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
      <section class="centered" data-duration="3000">
        <button class="irma-web-button">Open IRMA app</button>
        <p><a href="#">Toon QR code</a></p>
      </section>
      <section class="centered" data-duration="2000">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>

Source: examples/states.scss, line 1

1.3 States

These examples show the different states that the disclosure flow can move through.

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
    </section>
  </section>
</section>

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <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="/>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <button class="irma-web-button">Open IRMA app</button>
        <p><a href="#">Toon QR code</a></p>
      </section>
    </section>
  </section>
</section>

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Volg de instructies in de IRMA app

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-waiting-for-user-animation"></div>
        <p>Volg de instructies in de IRMA app</p>
      </section>
    </section>
  </section>
</section>

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen

Opnieuw proberen

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-forbidden-animation"></div>
        <p>We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen</p>
        <p><a href="#">Opnieuw proberen</a></p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-clock-animation"></div>
        <p>Sorry! We hebben te lang<br/>niks van je gehoord</p>
        <p><a href="#">Opnieuw proberen</a></p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-forbidden-animation"></div>
        <p>Sorry! Er is een fout opgetreden</p>
        <p><a href="#">Opnieuw proberen</a></p>
      </section>
    </section>
  </section>
</section>

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Het spijt ons, maar je browser voldoet niet aan de minimale eisen

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-forbidden-animation"></div>
        <p>Het spijt ons, maar je browser voldoet niet aan de minimale eisen</p>
      </section>
    </section>
  </section>
</section>

Example

Inloggen met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Gelukt!

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="header">
      <p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
      <section class="helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="content">
      <section class="centered">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>