Implicit flow login popup dialog may be positioned on the wrong monitor on multi-display systems

[Andreas-Hjortland]

Describe the bug
When I try to log in using initImplicitFlowInPopup on the OAuthService, the popup dialog will always appear on the center of my primary monitor or if the browser disallows poups crossing monitor boundaries on the edge towards the primary monitor even if the browser window with the angular application is on another monitor.

Stackblitz example
https://angular-tipncx.stackblitz.io/

To Reproduce
Steps to reproduce the behavior:

1. Move the browser window to a secondary monitor
2. Open the code to reproduce (https://angular-tipncx.stackblitz.io/)
3. Click on "Log in here"
4. The popup dialog with the implicit flow is positioned strange
   4.1 (Chrome / Edge) The popup window will be positioned on the edge of the display closest to the primary display.
   4.2 (Firefox / IE) The popup window will be positioned on the center of the primary display

Expected behavior
The popup window should be centered on the parent browser window or at least centered on the same screen as the parent browser window.

Desktop (please complete the following information):

• OS: Windows with 2 or more monitors
• Browser Chrome 77, Firefox 71, IE11, Edge 18

Additional context
I managed to solve it by extending OAuthService and overriding the calculatePopupFeatures function. I changed the calculation of the left and top position of the window to be relative to the browser window. You can try it by clicking on the button labeled "Log in with patched OAuth service" and check out the code in patchedOAuth.service.ts on stackblitz.

const left = window.screenLeft + ((window.outerWidth - width) / 2);
const top = window.screenTop + ((window.outerHeight - height) / 2);

If you want, I can create a pull request with this fix :)

[manfredsteyer]

Thanks for pointint this out. A PR is very welcome!

[Andreas-Hjortland]

No problem. I created a pull request in #664