Merge pull request #616 from hydralauncher/feature/sign-out-modal

feature: clear games on sign out

src/locales/en/translation.json

@@ -248,6 +248,7 @@
     "cancel": "Cancel",
     "successfully_signed_out": "Successfully signed out",
     "sign_out": "Sign out",
-    "playing_for": "Playing for {{amount}}"
+    "playing_for": "Playing for {{amount}}",
+    "sign_out_modal_text": "Your library is linked with your current account. When signing out, your library will not be visible anymore, and any progress will not be saved. Continue with sign out?"
   }
 }

src/locales/pt/translation.json

@@ -248,6 +248,7 @@
     "successfully_signed_out": "Deslogado com sucesso",
     "sign_out": "Sair da conta",
     "sign_out_modal_title": "Tem certeza?",
-    "playing_for": "Jogando por {{amount}}"
+    "playing_for": "Jogando por {{amount}}",
+    "sign_out_modal_text": "Sua biblioteca de jogos está associada com a sua conta atual. Ao sair, sua biblioteca não aparecerá mais no Hydra e qualquer progresso não será salvo. Deseja continuar?"
   }
 }

src/main/events/auth/sign-out.ts

@@ -1,10 +1,11 @@
-import { userAuthRepository } from "@main/repository";
+import { gameRepository, userAuthRepository } from "@main/repository";
 import { registerEvent } from "../register-event";
 import { HydraApi } from "@main/services/hydra-api";
 
 const signOut = async (_event: Electron.IpcMainInvokeEvent): Promise<void> => {
   await Promise.all([
     userAuthRepository.delete({ id: 1 }),
+    gameRepository.delete({}),
     HydraApi.post("/auth/logout").catch(),
   ]);
 };

src/main/events/index.ts

@@ -40,7 +40,7 @@ import "./download-sources/validate-download-source";
 import "./download-sources/add-download-source";
 import "./download-sources/remove-download-source";
 import "./download-sources/sync-download-sources";
-import "./auth/signout";
+import "./auth/sign-out";
 import "./auth/open-auth-window";
 import "./user/get-user";
 import "./profile/get-me";

src/renderer/src/pages/user/user-signout-modal.tsx

@@ -22,14 +22,17 @@ export const UserSignOutModal = ({
         title={t("sign_out_modal_title")}
         onClose={onClose}
       >
-        <div className={styles.signOutModalButtonsContainer}>
-          <Button onClick={onConfirm} theme="outline">
-            {t("signout")}
-          </Button>
+        <div className={styles.signOutModalContent}>
+          <p style={{ fontFamily: "Fira Sans" }}>{t("sign_out_modal_text")}</p>
+          <div className={styles.signOutModalButtonsContainer}>
+            <Button onClick={onConfirm} theme="danger">
+              {t("sign_out")}
+            </Button>
 
-          <Button onClick={onClose} theme="primary">
-            {t("cancel")}
-          </Button>
+            <Button onClick={onClose} theme="primary">
+              {t("cancel")}
+            </Button>
+          </div>
         </div>
       </Modal>
     </>

src/renderer/src/pages/user/user.css.ts

@@ -190,10 +190,18 @@ export const noDownloads = style({
   gap: `${SPACING_UNIT}px`,
 });
 
+export const signOutModalContent = style({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
+});
+
 export const signOutModalButtonsContainer = style({
   display: "flex",
   width: "100%",
   justifyContent: "end",
   alignItems: "center",
   gap: `${SPACING_UNIT}px`,
+  paddingTop: `${SPACING_UNIT}px`,
 });