Research how to create a custom login popup

[ghost]

Multiple stories have popped up, that require a popup - #146 , #18 , #40 . A research how to achieve that is a requirement:

• [x] Check how to use custom login form with angular-oauth2-oidc
• [x] If needed - check keycloak docs how to use the custom login form(especially for external providers, navigating to creation page, forgotten password etc.)
• [x] A working POC would be great

[ghost]

After some digging - angular-oauth2-oidc provides a way to open keycloak's login page into a popup - docs.

The steps should be:

1. Create a silent-refresh.html static page(an example one can be found here);
2. Add the page as a static resource into the angular project(the easiest way is to add the html file into the assets folder).
3. Add a URL to the silent-refresh.html page to the configuration of angular-oauth2-oidc - silentRefreshRedirectUri property(if added to assets should be something like http://localhost:4200/assets/silent-refresh.html)
4. Add the URL as a valid redirect url for the client in keycloak - select the realm -> Clients -> the client used by the app -> Valid redirect URIs)
5. Execute initLoginFlowInPopup method from angular-oauth2-oidc

Additional notes:

• The initLoginFlowInPopup method opens a popup, that is not part of angular framework.
• initLoginFlowInPopup can receive a settings object, with which a heigh, width and window ref can be set.
• initLoginFlowInPopup returns a promise. Finally on the promise can be used to catch closing of the window via the X button.
• Clicking on the page behind the popup won't close the popup itself - there might be a way with the windowRef parameter for the settings of the popup to catch that case and close the popup programatically.

[ghost]

Small example POC

login-popup-poc.zip