Source: src/examples/index.scss, line 1
Source: src/examples/index.scss, line 1
Source: src/examples/happy-path.scss, line 1
This is what the entire flow should look like if everything works as intended.
Desktop flow
Weight: 0
Desktop pairing flow
Weight: 1
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Eén moment alsjeblieft
Volg de instructies in de Yivi app
Gelukt!
Mobile flow
Weight: 2
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Eén moment alsjeblieft
Gelukt!
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Eén moment alsjeblieft
Volg de instructies in de Yivi app
Gelukt!
<section class="yivi-web-center-child" style="** Parent styles ** width: 100%; height: 700px; border: 2px solid red;">
<section class="yivi-web-form">
<header class="yivi-web-header">
<p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
<section class="yivi-web-helper">
<p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
</section>
</header>
<section class="yivi-web-content" data-animate>
<section class="yivi-web-centered" data-duration="2000">
<div class="yivi-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="yivi-web-centered" data-duration="5000">
<img class="yivi-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="yivi-web-centered" data-duration="5000">
<div class="yivi-web-waiting-for-user-animation"></div>
<p>Volg de instructies in de Yivi app</p>
</section>
<section class="yivi-web-centered" data-duration="2000">
<div class="yivi-web-checkmark-animation"></div>
<p>Gelukt!</p>
</section>
</section>
</section>
</section>
Source: src/examples/helpers.scss, line 1
The Yivi 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:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
<section class="yivi-web-form">
<header class="yivi-web-header yivi-web-show-helper">
<p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
<section class="yivi-web-helper">
<p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
</section>
</header>
<section class="yivi-web-content">
</section>
</section>
Source: src/examples/states.scss, line 1
These examples show the different states that the disclosure flow can move through.
State 1: Uninitialised
Weight: 0
State 2: Loading
Weight: 1
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Eén moment alsjeblieft
State 3a: Showing QR code (desktop)
Weight: 2
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
State 3b: Showing Yivi button (mobile)
Weight: 3
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
State 4: Pairing
Weight: 4
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
State 5: Code scanned, continue on phone
Weight: 5
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Volg de instructies in de Yivi app
State 6: Disclosure cancelled
Weight: 6
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen
State 7: Disclosure timed out
Weight: 7
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Sorry! We hebben te lang
niks van je gehoord
State 8: Disclosure errored
Weight: 8
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Sorry! Er is een fout opgetreden
State 9: Browser is not supported
Weight: 9
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Het spijt ons, maar je browser voldoet niet aan de minimale eisen
State 10: Success
Weight: 10
Markup:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Gelukt!
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
Eén moment alsjeblieft
<section class="yivi-web-center-child" style="** Parent styles ** width: 100%; height: 700px; border: 2px solid red;">
<section class="yivi-web-form">
<header class="yivi-web-header">
<p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
<section class="yivi-web-helper">
<p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
</section>
</header>
<section class="yivi-web-content">
<section class="yivi-web-centered">
<div class="yivi-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>