fix: revive auth dialog

Author: sentialx

src/main/application.ts

@@ -10,6 +10,7 @@ import { StorageService } from './services/storage';
 import { getMainMenu } from './menus/main';
 import { runAutoUpdaterService } from './services';
 import { DialogsService } from './services/dialogs-service';
+import { requestAuth } from './dialogs/auth';
 
 export class Application {
   public static instance = new Application();
@@ -63,7 +64,8 @@ export class Application {
       e.preventDefault();
 
       const window = this.windows.findByBrowserView(webContents.id);
-      const credentials = await window.dialogs.authDialog.requestAuth(
+      const credentials = await requestAuth(
+        window.win,
         request.url,
         webContents.id,
       );

src/main/dialogs/auth.ts

@@ -1,51 +1,49 @@
-import { ipcMain } from 'electron';
-import { AppWindow } from '../windows';
-import {
-  TOOLBAR_HEIGHT,
-  VIEW_Y_OFFSET,
-  DIALOG_MARGIN_TOP,
-} from '~/constants/design';
-import { Dialog } from '.';
+import { VIEW_Y_OFFSET } from '~/constants/design';
+import { BrowserWindow } from 'electron';
+import { Application } from '../application';
 
-const WIDTH = 400;
-const HEIGHT = 500;
+export const requestAuth = (
+  browserWindow: BrowserWindow,
+  url: string,
+  tabId: number,
+): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    const appWindow = Application.instance.windows.fromBrowserWindow(
+      browserWindow,
+    );
 
-export class AuthDialog extends Dialog {
-  public constructor(appWindow: AppWindow) {
-    super(appWindow, {
+    const tab = appWindow.viewManager.views.get(tabId);
+    tab.requestedAuth = { url };
+
+    const dialog = Application.instance.dialogs.show({
       name: 'auth',
-      bounds: {
-        width: WIDTH,
-        height: HEIGHT,
-        y: VIEW_Y_OFFSET - DIALOG_MARGIN_TOP - 8,
+      browserWindow,
+      getBounds: () => {
+        const { width } = browserWindow.getContentBounds();
+        return {
+          width: 400,
+          height: 500,
+          x: width / 2 - 400 / 2,
+          y: VIEW_Y_OFFSET,
+        };
+      },
+      tabAssociation: {
+        tabId,
+        getTabInfo: (tabId) => {
+          const tab = appWindow.viewManager.views.get(tabId);
+          return tab.requestedAuth;
+        },
+      },
+      onWindowBoundsUpdate: (disposition) => {
+        if (disposition === 'resize') dialog.rearrange();
       },
     });
-  }
-
-  public requestAuth(
-    url: string,
-    tabId: number,
-  ): Promise<{ username: string; password: string }> {
-    return new Promise((resolve) => {
-      this.show();
-      this.tabIds.push(tabId);
-
-      this.send('request-auth', url);
-
-      ipcMain.once(`request-auth-result-${this.appWindow.id}`, (e, result) => {
-        this.tabIds = this.tabIds.filter((x) => x !== tabId);
-        this.hide();
-        resolve(result);
-      });
-    });
-  }
 
-  public rearrange() {
-    const { width } = this.appWindow.win.getContentBounds();
+    if (!dialog) return;
 
-    super.rearrange({
-      x: Math.round(width / 2 - WIDTH / 2),
-      y: TOOLBAR_HEIGHT,
+    dialog.on('result', (e, result) => {
+      resolve(result);
+      dialog.hide();
     });
-  }
-}
+  });
+};

src/main/view.ts

@@ -14,6 +14,10 @@ import { TabEvent } from '~/interfaces/tabs';
 import { Queue } from '~/utils/queue';
 import { Application } from './application';
 
+interface IAuthInfo {
+  url: string;
+}
+
 export class View {
   public browserView: BrowserView;
 
@@ -37,6 +41,7 @@ export class View {
     text: '',
   };
 
+  public requestedAuth: IAuthInfo;
   public requestedPermission: any;
 
   private historyQueue = new Queue();

src/renderer/views/auth/components/App/index.tsx

@@ -1,4 +1,3 @@
-import { ipcRenderer } from 'electron';
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { ThemeProvider } from 'styled-components';
@@ -15,7 +14,7 @@ const ref1 = React.createRef<Textfield>();
 const ref2 = React.createRef<PasswordInput>();
 
 const sendResponse = (credentials: any) => {
-  ipcRenderer.send(`request-auth-result-${store.windowId}`, credentials);
+  store.send('result', credentials);
 };
 
 const onClick = () => {

src/renderer/views/auth/store/index.ts

@@ -1,5 +1,4 @@
 import { observable } from 'mobx';
-import { ipcRenderer } from 'electron';
 import { DialogStore } from '~/models/dialog-store';
 
 export class Store extends DialogStore {
@@ -9,9 +8,9 @@ export class Store extends DialogStore {
   public constructor() {
     super({ hideOnBlur: false, visibilityWrapper: false });
 
-    ipcRenderer.on('request-auth', (e, url) => {
-      this.url = url;
-    });
+    this.onUpdateTabInfo = (tabId, auth) => {
+      this.url = auth.url;
+    };
   }
 }