Improve styling of WAYG token selection screen

[phavekes]

This issue is imported from pivotal - Originaly created at Nov 16, 2017 by Michiel Kodde

Story: #144697285 introduced a token selection screen for identities with multiple suitable second factor tokens. This screen is a basic design now, an might benefit for some UI review.

Screenshot of the WAYG (where are you going) screen can be found in the comment section below.

[phavekes]

(Michiel Kodde - Nov 16, 2017)

[phavekes]

I\'ve created a screen for the WAYG screen, see attached. (Peter Clijsters - Mar 6, 2018)

[phavekes]

The changes for this feature can be found in this PR (Michiel Kodde - Mar 19, 2018)

[phavekes]

XS viewport screenshot

Input is welcome. (Michiel Kodde - Mar 20, 2018)

[phavekes]

Edited xs viewport (buttons are now aligned according to the design)

(Michiel Kodde - Mar 20, 2018)

[phavekes]

Michiel told me that this is the smallest possible screen, so this layout is fine. BTW: the OpenConext logo looks a bit small here, smaller then I think the SURFsecureID logo will be. Is this a potential problem? (Peter Clijsters - Mar 20, 2018)

[phavekes]

Smallest and normal size WAYG screens. Looks good. OK @peterclijsters1 ? (Pieter van der Meulen - Apr 18, 2018)

[phavekes]

It seems to me that the smallest screen does not fit on a "regular" mobile phone. How wide is the smallest screen? (Peter Clijsters - Apr 19, 2018)

[phavekes]

Tried it myself and my screen is smaller then the one @pmeulen showed. (Peter Clijsters - Apr 19, 2018)

[phavekes]

@peterclijsters1 WAYG in iPhone 7 simulator. It\'s not great, but usable IMO (Pieter van der Meulen - Apr 19, 2018)

[phavekes]

Agree, this is OK (Peter Clijsters - Apr 19, 2018)

[phavekes]

@peterclijsters1 OK, then push the green button :) (Pieter van der Meulen - Apr 19, 2018)

[phavekes]

Not yet.. If I select language NL in SA and press "Test een token", then the WAYG screen is English.. The tiqr and SMS screen after the WAYG are in NL again.

@michielkodde The WAYG screen should show the same language as selected in SA. (Peter Clijsters - Apr 19, 2018)

[phavekes]

I\'d have to look into this in more detail. Should be an easy fix. Can we fix this in a bugfix ticket instead of adding it to this feature? #156947307 (Michiel Kodde - Apr 20, 2018)

[phavekes]

Rejected. Please have a look at:

• WAYG screen is much wider then the SMS or YubiKey login screens. Please make the WAYG screen the same width.
• When scaling the width of my browser screen from large to small, I notice a "jump" in width at around 1985pixels. Could be smoother.
• There is no Cancel button on the WAYG screen. There are Cancel buttons on the SMS and YubiKey login screens. I would expect a Cancel button on the WAYG screen that does the same as the Cancel button on the SMS and YubiKey login screens. (Peter Clijsters - May 1, 2018)

[phavekes]

@peterclijsters1 Point 1 and 3 have been fixed in this [PR](https://github.com/OpenConext/Stepup-Gateway/pull/159) (Michiel Kodde - May 3, 2018)

[phavekes]

Tested OK. BTW; I\'m not seeing the jump (point 2 in comment above) any more. (Peter Clijsters - May 24, 2018)