feat: refactor open auth

src/locales/en/translation.json

@@ -291,7 +291,7 @@
     "update_email": "Update email",
     "update_password": "Update password",
     "current_email": "Current email:",
-    "no_associated_email": "You don't have an associated email yet"
+    "no_email_account": "You have not set an email yet"
   },
   "notifications": {
     "download_complete": "Download complete",

src/locales/pt-BR/translation.json

@@ -279,7 +279,7 @@
     "update_email": "Atualizar email",
     "update_password": "Atualizar senha",
     "current_email": "Email atual:",
-    "no_associated_email": "Você ainda não associou nenhum email a sua conta"
+    "no_email_account": "Você ainda não adicionou um email a sua conta"
   },
   "notifications": {
     "download_complete": "Download concluído",

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

@@ -1,7 +1,22 @@
+import i18next from "i18next";
 import { registerEvent } from "../register-event";
-import { WindowManager } from "@main/services";
+import { HydraApi, WindowManager } from "@main/services";
+import { AuthPage } from "@shared";
 
-const openAuthWindow = async (_event: Electron.IpcMainInvokeEvent) =>
+const openAuthWindow = async (
-  WindowManager.openAuthWindow();
+  _event: Electron.IpcMainInvokeEvent,
+  page: AuthPage
+) => {
+  const searchParams = new URLSearchParams({
+    lng: i18next.language,
+  });
+
+  if ([AuthPage.UpdateEmail, AuthPage.UpdatePassword].includes(page)) {
+    const { accessToken } = await HydraApi.refreshToken();
+    searchParams.set("token", accessToken);
+  }
+
+  return WindowManager.openAuthWindow(page, searchParams);
+};
 
 registerEvent("openAuthWindow", openAuthWindow);

src/main/events/index.ts

@@ -30,7 +30,6 @@ import "./library/remove-game-from-library";
 import "./library/select-game-wine-prefix";
 import "./library/reset-game-achievements";
 import "./misc/open-checkout";
-import "./misc/open-manage-account";
 import "./misc/open-external";
 import "./misc/show-open-dialog";
 import "./misc/get-features";

src/main/events/misc/open-manage-account.ts

@@ -1,25 +0,0 @@
-import { shell } from "electron";
-import { registerEvent } from "../register-event";
-import { HydraApi, logger } from "@main/services";
-import { ManageAccountPage } from "@types";
-
-const openManageAccount = async (
-  _event: Electron.IpcMainInvokeEvent,
-  page: ManageAccountPage
-) => {
-  try {
-    const { accessToken } = await HydraApi.refreshToken();
-
-    const params = new URLSearchParams({
-      token: accessToken,
-    });
-
-    shell.openExternal(
-      `${import.meta.env.MAIN_VITE_AUTH_URL}/${page}?${params.toString()}`
-    );
-  } catch (err) {
-    logger.error("Failed to open manage account", err);
-  }
-};
-
-registerEvent("openManageAccount", openManageAccount);

src/main/services/window-manager.ts

@@ -9,7 +9,7 @@ import {
   shell,
 } from "electron";
 import { is } from "@electron-toolkit/utils";
-import i18next, { t } from "i18next";
+import { t } from "i18next";
 import path from "node:path";
 import icon from "@resources/icon.png?asset";
 import trayIcon from "@resources/tray-icon.png?asset";
@@ -17,6 +17,7 @@ import { gameRepository, userPreferencesRepository } from "@main/repository";
 import { IsNull, Not } from "typeorm";
 import { HydraApi } from "./hydra-api";
 import UserAgent from "user-agents";
+import { AuthPage } from "@shared";
 
 export class WindowManager {
   public static mainWindow: Electron.BrowserWindow | null = null;
@@ -142,7 +143,7 @@ export class WindowManager {
     });
   }
 
-  public static openAuthWindow() {
+  public static openAuthWindow(page: AuthPage, searchParams: URLSearchParams) {
     if (this.mainWindow) {
       const authWindow = new BrowserWindow({
         width: 600,
@@ -164,12 +165,8 @@ export class WindowManager {
 
       if (!app.isPackaged) authWindow.webContents.openDevTools();
 
-      const searchParams = new URLSearchParams({
-        lng: i18next.language,
-      });
-
       authWindow.loadURL(
-        `${import.meta.env.MAIN_VITE_AUTH_URL}/?${searchParams.toString()}`
+        `${import.meta.env.MAIN_VITE_AUTH_URL}/${page}?${searchParams.toString()}`
       );
 
       authWindow.once("ready-to-show", () => {

src/preload/index.ts

@@ -14,9 +14,8 @@ import type {
   CatalogueSearchPayload,
   SeedingStatus,
   GameAchievement,
-  ManageAccountPage,
 } from "@types";
-import type { CatalogueCategory } from "@shared";
+import type { AuthPage, CatalogueCategory } from "@shared";
 import type { AxiosProgressEvent } from "axios";
 
 contextBridge.exposeInMainWorld("electron", {
@@ -227,8 +226,6 @@ contextBridge.exposeInMainWorld("electron", {
   isPortableVersion: () => ipcRenderer.invoke("isPortableVersion"),
   openExternal: (src: string) => ipcRenderer.invoke("openExternal", src),
   openCheckout: () => ipcRenderer.invoke("openCheckout"),
-  openManageAccount: (page: ManageAccountPage) =>
-    ipcRenderer.invoke("openManageAccount", page),
   showOpenDialog: (options: Electron.OpenDialogOptions) =>
     ipcRenderer.invoke("showOpenDialog", options),
   showItemInFolder: (path: string) =>
@@ -294,7 +291,8 @@ contextBridge.exposeInMainWorld("electron", {
 
   /* Auth */
   signOut: () => ipcRenderer.invoke("signOut"),
-  openAuthWindow: () => ipcRenderer.invoke("openAuthWindow"),
+  openAuthWindow: (page: AuthPage) =>
+    ipcRenderer.invoke("openAuthWindow", page),
   getSessionHash: () => ipcRenderer.invoke("getSessionHash"),
   onSignIn: (cb: () => void) => {
     const listener = (_event: Electron.IpcRendererEvent) => cb();

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

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar } from "../avatar/avatar";
+import { AuthPage } from "@shared";
 
 const LONG_POLLING_INTERVAL = 120_000;
 
@@ -26,11 +27,11 @@ export function SidebarProfile() {
 
   const handleProfileClick = () => {
     if (userDetails === null) {
-      window.electron.openAuthWindow();
+      window.electron.openAuthWindow(AuthPage.SignIn);
       return;
     }
 
-    navigate(`/profile/${userDetails!.id}`);
+    navigate(`/profile/${userDetails.id}`);
   };
 
   useEffect(() => {

src/renderer/src/declaration.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogueCategory } from "@shared";
+import type { AuthPage, CatalogueCategory } from "@shared";
 import type {
   AppUpdaterEvent,
   Game,
@@ -29,7 +29,6 @@ import type {
   UserAchievement,
   ComparedAchievements,
   CatalogueSearchPayload,
-  ManageAccountPage,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";
 import type disk from "diskusage";
@@ -188,7 +187,6 @@ declare global {
     /* Misc */
     openExternal: (src: string) => Promise<void>;
     openCheckout: () => Promise<void>;
-    openManageAccount: (page: ManageAccountPage) => Promise<void>;
     getVersion: () => Promise<string>;
     isStaging: () => Promise<boolean>;
     ping: () => string;
@@ -210,7 +208,7 @@ declare global {
 
     /* Auth */
     signOut: () => Promise<void>;
-    openAuthWindow: () => Promise<void>;
+    openAuthWindow: (page: AuthPage) => Promise<void>;
     getSessionHash: () => Promise<string | null>;
     onSignIn: (cb: () => void) => () => Electron.IpcRenderer;
     onSignOut: (cb: () => void) => () => Electron.IpcRenderer;

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -10,7 +10,7 @@ import { Sidebar } from "./sidebar/sidebar";
 import * as styles from "./game-details.css";
 import { useTranslation } from "react-i18next";
 import { cloudSyncContext, gameDetailsContext } from "@renderer/context";
-import { steamUrlBuilder } from "@shared";
+import { AuthPage, steamUrlBuilder } from "@shared";
 
 import cloudIconAnimated from "@renderer/assets/icons/cloud-animated.gif";
 import { useUserDetails } from "@renderer/hooks";
@@ -69,7 +69,7 @@ export function GameDetailsContent() {
     });
 
     const backgroundColor = output
-      ? (new Color(output).darken(0.7).toString() as string)
+      ? new Color(output).darken(0.7).toString()
       : "";
 
     setGameColor(backgroundColor);
@@ -101,7 +101,7 @@ export function GameDetailsContent() {
 
   const handleCloudSaveButtonClick = () => {
     if (!userDetails) {
-      window.electron.openAuthWindow();
+      window.electron.openAuthWindow(AuthPage.SignIn);
       return;
     }
 

src/renderer/src/pages/settings/settings-account.tsx

@@ -13,6 +13,7 @@ import {
   XCircleFillIcon,
 } from "@primer/octicons-react";
 import { settingsContext } from "@renderer/context";
+import { AuthPage } from "@shared";
 
 interface FormValues {
   profileVisibility: "PUBLIC" | "FRIENDS" | "PRIVATE";
@@ -128,7 +129,7 @@ export function SettingsAccount() {
           <p>{userDetails.email}</p>
         </div>
       ) : (
-        <p>{t("no_associated_email")}</p>
+        <p>{t("no_email_account")}</p>
       )}
 
       <div
@@ -142,7 +143,7 @@ export function SettingsAccount() {
       >
         <Button
           theme="outline"
-          onClick={() => window.electron.openManageAccount("update-email")}
+          onClick={() => window.electron.openAuthWindow(AuthPage.UpdateEmail)}
         >
           {t("update_email")}
           <MailIcon />
@@ -150,7 +151,9 @@ export function SettingsAccount() {
 
         <Button
           theme="outline"
-          onClick={() => window.electron.openManageAccount("update-password")}
+          onClick={() =>
+            window.electron.openAuthWindow(AuthPage.UpdatePassword)
+          }
         >
           {t("update_password")}
           <KeyIcon />

src/shared/constants.ts

@@ -42,3 +42,9 @@ export enum Cracker {
   rle = "RLE",
   razor1911 = "RAZOR1911",
 }
+
+export enum AuthPage {
+  SignIn = "",
+  UpdateEmail = "update-email",
+  UpdatePassword = "update-password",
+}

src/types/index.ts

@@ -416,8 +416,6 @@ export interface CatalogueSearchPayload {
   developers: string[];
 }
 
-export type ManageAccountPage = "update-email" | "update-password";
-
 export * from "./steam.types";
 export * from "./real-debrid.types";
 export * from "./ludusavi.types";