Implemented better ux for the oauth2 workflow

Still wip

Moonlight.Client/wwwroot/index.html

@@ -27,6 +27,7 @@
         <a class="dismiss">🗙</a>
     </div>
     
+    <script src="/js/moonlight.js"></script>
     <script src="/_framework/blazor.webassembly.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>

Moonlight.Client/wwwroot/js/moonlight.js

@@ -0,0 +1,30 @@
+window.moonlight = {
+    window: {
+        open: function (url, title, w, h) {
+            // Fixes dual-screen position                             Most browsers      Firefox
+            const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
+            const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
+
+            const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
+            const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
+
+            const systemZoom = width / window.screen.availWidth;
+            const left = (width - w) / 2 / systemZoom + dualScreenLeft
+            const top = (height - h) / 2 / systemZoom + dualScreenTop
+            const newWindow = window.open(url, title,
+                `
+      scrollbars=yes,
+      width=${w / systemZoom}, 
+      height=${h / systemZoom}, 
+      top=${top}, 
+      left=${left}
+      `
+            )
+
+            if (window.focus) newWindow.focus();
+        },
+        closeCurrent() {
+            window.close();
+        }
+    }
+};