Merge pull request #613 from hydralauncher/feature/auth-window

Feature/auth window

src/locales/en/translation.json

@@ -1,4 +1,7 @@
 {
+  "app": {
+    "successfully_signed_in": "Successfully signed in"
+  },
   "home": {
     "featured": "Featured",
     "trending": "Trending",
@@ -243,6 +246,7 @@
     "try_again": "Please, try again",
     "signout_modal_title": "Are you sure?",
     "cancel": "Cancel",
-    "signout": "Sign Out"
+    "signout": "Sign Out",
+    "successfully_signed_out": "Successfully signed out"
   }
 }

src/locales/pt/translation.json

@@ -1,4 +1,7 @@
 {
+  "app": {
+    "successfully_signed_in": "Logado com sucesso"
+  },
   "home": {
     "featured": "Destaque",
     "trending": "Populares",
@@ -243,6 +246,7 @@
     "try_again": "Por favor, tente novamente",
     "cancel": "Cancelar",
     "signout": "Sair da conta",
-    "signout_modal_title": "Tem certeza?"
+    "signout_modal_title": "Tem certeza?",
+    "successfully_signed_out": "Deslogado com sucesso"
   }
 }

src/main/events/auth/open-auth-window.ts

@@ -0,0 +1,7 @@
+import { registerEvent } from "../register-event";
+import { WindowManager } from "@main/services";
+
+const openAuthWindow = async (_event: Electron.IpcMainInvokeEvent) =>
+  WindowManager.openAuthWindow();
+
+registerEvent("openAuthWindow", openAuthWindow);

src/main/events/index.ts

@@ -41,6 +41,7 @@ import "./download-sources/add-download-source";
 import "./download-sources/remove-download-source";
 import "./download-sources/sync-download-sources";
 import "./auth/signout";
+import "./auth/open-auth-window";
 import "./user/get-user";
 import "./profile/get-me";
 import "./profile/update-profile";

src/main/index.ts

@@ -8,7 +8,6 @@ import { DownloadManager, logger, WindowManager } from "@main/services";
 import { dataSource } from "@main/data-source";
 import * as resources from "@locales";
 import { userPreferencesRepository } from "@main/repository";
-import { HydraApi } from "./services/hydra-api";
 
 const { autoUpdater } = updater;
 
@@ -74,7 +73,7 @@ app.on("browser-window-created", (_, window) => {
   optimizer.watchWindowShortcuts(window);
 });
 
-app.on("second-instance", (_event, commandLine) => {
+app.on("second-instance", (_event) => {
   // Someone tried to run a second instance, we should focus our window.
   if (WindowManager.mainWindow) {
     if (WindowManager.mainWindow.isMinimized())
@@ -85,20 +84,16 @@ app.on("second-instance", (_event, commandLine) => {
     WindowManager.createMainWindow();
   }
 
-  const [, path] = commandLine.pop()?.split("://") ?? [];
-  if (path) {
-    if (path.startsWith("auth")) {
-      HydraApi.handleExternalAuth(path);
-    } else {
-      WindowManager.redirect(path);
-    }
-  }
+  // const [, path] = commandLine.pop()?.split("://") ?? [];
+  // if (path) {
+  //   WindowManager.redirect(path);
+  // }
 });
 
-app.on("open-url", (_event, url) => {
-  const [, path] = url.split("://");
-  WindowManager.redirect(path);
-});
+// app.on("open-url", (_event, url) => {
+//   const [, path] = url.split("://");
+//   WindowManager.redirect(path);
+// });
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits

src/main/services/hydra-api.ts

@@ -23,8 +23,8 @@ export class HydraApi {
     return this.userAuth.authToken !== "";
   }
 
-  static async handleExternalAuth(auth: string) {
-    const { payload } = url.parse(auth, true).query;
+  static async handleExternalAuth(uri: string) {
+    const { payload } = url.parse(uri, true).query;
 
     const decodedBase64 = atob(payload as string);
     const jsonData = JSON.parse(decodedBase64);

src/main/services/window-manager.ts

@@ -15,6 +15,7 @@ import icon from "@resources/icon.png?asset";
 import trayIcon from "@resources/tray-icon.png?asset";
 import { gameRepository, userPreferencesRepository } from "@main/repository";
 import { IsNull, Not } from "typeorm";
+import { HydraApi } from "./hydra-api";
 
 export class WindowManager {
   public static mainWindow: Electron.BrowserWindow | null = null;
@@ -80,6 +81,41 @@ export class WindowManager {
     });
   }
 
+  public static openAuthWindow() {
+    if (this.mainWindow) {
+      const authWindow = new BrowserWindow({
+        width: 600,
+        height: 640,
+        backgroundColor: "#1c1c1c",
+        parent: this.mainWindow,
+        modal: true,
+        show: false,
+        maximizable: false,
+        resizable: false,
+        minimizable: false,
+        webPreferences: {
+          sandbox: false,
+        },
+      });
+
+      authWindow.removeMenu();
+
+      authWindow.loadURL("https://auth.hydra.losbroxas.org/");
+
+      authWindow.once("ready-to-show", () => {
+        authWindow.show();
+      });
+
+      authWindow.webContents.on("will-navigate", (_event, url) => {
+        if (url.startsWith("hydralauncher://auth")) {
+          authWindow.close();
+
+          HydraApi.handleExternalAuth(url);
+        }
+      });
+    }
+  }
+
   public static redirect(hash: string) {
     if (!this.mainWindow) this.createMainWindow();
     this.loadURL(hash);

src/preload/index.ts

@@ -143,6 +143,7 @@ contextBridge.exposeInMainWorld("electron", {
 
   /* Auth */
   signOut: () => ipcRenderer.invoke("signOut"),
+  openAuthWindow: () => ipcRenderer.invoke("openAuthWindow"),
   onSignIn: (cb: () => void) => {
     const listener = (_event: Electron.IpcRendererEvent) => cb();
     ipcRenderer.on("on-signin", listener);

src/renderer/src/app.css.ts

@@ -111,6 +111,6 @@ export const titleBar = style({
   alignItems: "center",
   padding: `0 ${SPACING_UNIT * 2}px`,
   WebkitAppRegion: "drag",
-  zIndex: "2",
+  zIndex: "4",
   borderBottom: `1px solid ${vars.color.border}`,
 } as ComplexStyleRule);

src/renderer/src/app.tsx

@@ -7,6 +7,7 @@ import {
   useAppSelector,
   useDownload,
   useLibrary,
+  useToast,
   useUserDetails,
 } from "@renderer/hooks";
 
@@ -22,6 +23,7 @@ import {
   setUserDetails,
   setProfileBackground,
 } from "@renderer/features";
+import { useTranslation } from "react-i18next";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -31,6 +33,8 @@ export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary } = useLibrary();
 
+  const { t } = useTranslation("app");
+
   const { clearDownload, setLastPacket } = useDownload();
 
   const { fetchUserDetails, updateUserDetails, clearUserDetails } =
@@ -49,6 +53,8 @@ export function App() {
 
   const toast = useAppSelector((state) => state.toast);
 
+  const { showSuccessToast } = useToast();
+
   useEffect(() => {
     Promise.all([window.electron.getUserPreferences(), updateLibrary()]).then(
       ([preferences]) => {
@@ -95,25 +101,28 @@ export function App() {
     });
   }, [dispatch, fetchUserDetails]);
 
+  const onSignIn = useCallback(() => {
+    fetchUserDetails().then((response) => {
+      if (response) {
+        updateUserDetails(response);
+        showSuccessToast(t("successfully_signed_in"));
+      }
+    });
+  }, [fetchUserDetails, t, showSuccessToast, updateUserDetails]);
+
   useEffect(() => {
     const listeners = [
-      window.electron.onSignIn(() => {
-        fetchUserDetails().then((response) => {
-          if (response) updateUserDetails(response);
-        });
-      }),
+      window.electron.onSignIn(onSignIn),
       window.electron.onLibraryBatchComplete(() => {
         updateLibrary();
       }),
-      window.electron.onSignOut(() => {
-        clearUserDetails();
-      }),
+      window.electron.onSignOut(() => clearUserDetails()),
     ];
 
     return () => {
       listeners.forEach((unsubscribe) => unsubscribe());
     };
-  }, [fetchUserDetails, updateUserDetails, clearUserDetails]);
+  }, [onSignIn, updateLibrary, clearUserDetails]);
 
   const handleSearch = useCallback(
     (query: string) => {
@@ -167,6 +176,13 @@ export function App() {
         </div>
       )}
 
+      <Toast
+        visible={toast.visible}
+        message={toast.message}
+        type={toast.type}
+        onClose={handleToastClose}
+      />
+
       <main>
         <Sidebar />
 
@@ -184,13 +200,6 @@ export function App() {
       </main>
 
       <BottomPanel />
-
-      <Toast
-        visible={toast.visible}
-        message={toast.message}
-        type={toast.type}
-        onClose={handleToastClose}
-      />
     </>
   );
 }

src/renderer/src/components/backdrop/backdrop.css.ts

@@ -1,7 +1,7 @@
 import { keyframes } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { SPACING_UNIT } from "../../theme.css";
+import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const backdropFadeIn = keyframes({
   "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" },
@@ -30,8 +30,8 @@ export const backdrop = recipe({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    zIndex: 1,
-    top: 0,
+    zIndex: vars.zIndex.backdrop,
+    top: "0",
     padding: `${SPACING_UNIT * 3}px`,
     backdropFilter: "blur(2px)",
     transition: "all ease 0.2s",

src/renderer/src/components/bottom-panel/bottom-panel.css.ts

@@ -12,7 +12,7 @@ export const bottomPanel = style({
   transition: "all ease 0.2s",
   justifyContent: "space-between",
   position: "relative",
-  zIndex: "1",
+  zIndex: vars.zIndex.bottomPanel,
 });
 
 export const downloadsButton = style({

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -12,7 +12,7 @@ export function SidebarProfile() {
 
   const handleButtonClick = () => {
     if (userDetails === null) {
-      window.electron.openExternal("https://auth.hydra.losbroxas.org");
+      window.electron.openAuthWindow();
       return;
     }
 

src/renderer/src/components/toast/toast.css.ts

@@ -31,7 +31,7 @@ export const toast = recipe({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
-    zIndex: "0",
+    zIndex: vars.zIndex.toast,
     maxWidth: "500px",
   },
   variants: {

src/renderer/src/declaration.d.ts

@@ -115,6 +115,7 @@ declare global {
 
     /* Auth */
     signOut: () => Promise<void>;
+    openAuthWindow: () => Promise<void>;
     onSignIn: (cb: () => void) => () => Electron.IpcRenderer;
     onSignOut: (cb: () => void) => () => Electron.IpcRenderer;
 

src/renderer/src/pages/user/user-content.tsx

@@ -6,7 +6,7 @@ import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
-import { useDate, useUserDetails } from "@renderer/hooks";
+import { useDate, useToast, useUserDetails } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon, TelescopeIcon } from "@primer/octicons-react";
@@ -28,6 +28,7 @@ export function UserContent({
   const { t, i18n } = useTranslation("user_profile");
 
   const { userDetails, profileBackground, signOut } = useUserDetails();
+  const { showSuccessToast } = useToast();
 
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
@@ -68,7 +69,10 @@ export function UserContent({
   };
 
   const handleConfirmSignout = async () => {
-    signOut();
+    await signOut();
+
+    showSuccessToast(t("successfully_signed_out"));
+
     navigate("/");
   };
 

src/renderer/src/theme.css.ts

@@ -21,4 +21,10 @@ export const vars = createGlobalTheme(":root", {
     body: "14px",
     small: "12px",
   },
+  zIndex: {
+    toast: "2",
+    bottomPanel: "3",
+    titleBar: "4",
+    backdrop: "4",
+  },
 });