[feature] Add waiting for Steam app approval modal

assets/jsons/translations/de.json

@@ -509,6 +509,12 @@
                 "submit": "Anmelden"
             }
         },
+        "steam-auth-approve":{
+            "title": "Warten auf Bestätigung",
+            "protected-by-mobile-auth": "Konto durch mobile Authentifizierung geschützt.",
+            "use-steam-app-to-approve": "Verwenden Sie die Steam Mobile-App, um die Verbindung zu bestätigen...",
+            "not-access-to-steam-app": "Ich habe keinen Zugang zur Steam Mobile-App"
+        },
         "steam-credentials": {
             "title": "Steam Anmeldeinformationen",
             "p-1": "Die Anmeldeinformationen werden nur zum Herunterladen des Spiels verwendet, da Steam überprüfen muss, ob Du das Spiel bezahlt hast, um es herunterladen zu dürfen. Sie werden nicht gespeichert und direkt an DepotDownloader weitergegeben. Wenn Du deine Anmeldeinformationen nicht eingeben möchtest, kannst Du diesem Tutorial folgen:",

assets/jsons/translations/en.json

@@ -509,6 +509,12 @@
                 "submit": "Sign in"
             }
         },
+        "steam-auth-approve":{
+            "title": "Waiting for confirmation",
+            "protected-by-mobile-auth": "Account protected by mobile authenticator.",
+            "use-steam-app-to-approve": "Use the Steam mobile app to confirm the connection...",
+            "not-access-to-steam-app": "I don't have access to the Steam mobile app"
+        },
         "steam-credentials": {
             "title": "Steam Credentials",
             "p-1": "The credentials are only used to download the game because steam need to verify that you paid the game in order to be allowed to download it. They aren't saved and directly passed to DepotDownloader. If you don't want to enter your credentials you can follow this tutorial :",

assets/jsons/translations/es.json

@@ -508,6 +508,12 @@
                 "submit": "Iniciar sesión"
             }
         },
+        "steam-auth-approve":{
+            "title": "Esperando confirmación",
+            "protected-by-mobile-auth": "Cuenta protegida por el autenticador móvil.",
+            "use-steam-app-to-approve": "Use la aplicación móvil de Steam para confirmar la conexión...",
+            "not-access-to-steam-app": "No tengo acceso a la aplicación móvil de Steam"
+        },
         "steam-credentials": {
             "title": "Steam Credentials",
             "p-1": "Las credenciales sólo se utilizan para descargar el juego porque steam necesita verificar que has pagado el juego para que se te permita descargarlo. No se guardan y se pasan directamente a DepotDownloader. Si no quieres introducir tus credenciales puedes seguir este tutorial :",

assets/jsons/translations/fr.json

@@ -508,6 +508,12 @@
                 "submit": "Se connecter"
             }
         },
+        "steam-auth-approve":{
+            "title": "Attente de confirmation",
+            "protected-by-mobile-auth": "Compte protégé par l'authentificateur mobile.",
+            "use-steam-app-to-approve": "Utilisez l'application mobile Steam pour confirmer la connexion...",
+            "not-access-to-steam-app": "Je n'ai pas accès à l'application mobile Steam"
+        },
         "steam-credentials": {
             "title": "Steam Credentials",
             "p-1": "Les informations d'identification ne sont utilisées que pour télécharger le jeu, car Steam doit vérifier que vous avez payé le jeu afin d'être autorisé à le télécharger. Ils ne sont pas sauvegardés et transmis directement à DepotDownloader. Si vous ne voulez pas entrer vos informations d'identification, vous pouvez suivre ce tutoriel :",

assets/jsons/translations/ru.json

@@ -509,6 +509,12 @@
                 "submit": "Войти"
             }
         },
+        "steam-auth-approve":{
+            "title": "Ожидание подтверждения",
+            "protected-by-mobile-auth": "Учетная запись защищена мобильным аутентификатором.",
+            "use-steam-app-to-approve": "Используйте мобильное приложение Steam для подтверждения подключения...",
+            "not-access-to-steam-app": "У меня нет доступа к мобильному приложению Steam"
+        },
         "steam-credentials": {
             "title": "Данные входа Steam",
             "p-1": "Данные входа используются только при скачивании, чтобы проверить наличие у вас Beat Saber, это нужно Steam, чтобы разрешить скачивание. Они не сохраняются и напрямую передаются в DepotDownloader. Если вы не хотите вводить данные для входа, воспользуйтесь руководством(Оно на английском языке) :",

src/renderer/components/modal/modal-types/steam-mobile-approve-modal.component.tsx

@@ -0,0 +1,39 @@
+import { ModalComponent, ModalExitCode } from "../../../services/modale.service";
+import BeatWaiting from "../../../../../assets/images/apngs/beat-waiting.png";
+import LoginMobileAuthImage from "../../../../../assets/images/steam/login_mobile_auth.png";
+import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { Observable } from "rxjs";
+import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
+
+export const SteamMobileApproveModal: ModalComponent<void, { logged$: Observable<unknown> }> = ({ resolver, data }) => {
+    
+    const t = useTranslation();
+
+    useOnUpdate(() => {
+        const sub = data.logged$.subscribe({
+            next: () => resolver({ exitCode: ModalExitCode.COMPLETED }),
+            error: () => resolver({ exitCode: ModalExitCode.NO_CHOICE }),
+            complete: () => resolver({ exitCode: ModalExitCode.NO_CHOICE }),
+        });
+
+        return () => sub.unsubscribe();
+    }, []);
+
+    return (
+        <form className="max-w-md flex flex-col items-center">
+            <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200 m-0">{t("modals.steam-auth-approve.title")}</h1>
+
+            <p className="font-bold my-3">{t("modals.steam-auth-approve.protected-by-mobile-auth")}</p>
+
+            <div className="relative flex w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-md gap-5">
+                <BsmImage className="w-fit ml-7 mt-5" image={LoginMobileAuthImage}/>
+                <div className="flex flex-col justify-center gap-5 pr-2">
+                    <p className="text-lg">{t("modals.steam-auth-approve.use-steam-app-to-approve")}</p>
+                </div>
+                <BsmImage className="absolute bottom-1 right-1 w-10 h-10 spin-loading" image={BeatWaiting}/>
+            </div>
+            <a className="underline text-sm mt-2.5" href="https://help.steampowered.com/wizard/HelpWithLoginInfo?lost=8&issueid=402" target="_blank">{t("modals.steam-auth-approve.not-access-to-steam-app")}</a>
+        </form>
+    );
+};

src/renderer/services/bs-downloader.service.ts

@@ -14,6 +14,7 @@ import { GuardModal } from "renderer/components/modal/modal-types/guard-modal.co
 import { LinkOpenerService } from "./link-opener.service";
 import { DepotDownloaderErrorEvent, DepotDownloaderEvent, DepotDownloaderEventType, DepotDownloaderInfoEvent, DepotDownloaderSubTypeOfEventType, DepotDownloaderWarningEvent } from "../../shared/models/depot-downloader.model";
 import equal from "fast-deep-equal";
+import { SteamMobileApproveModal } from "renderer/components/modal/modal-types/steam-mobile-approve-modal.component";
 
 export class BsDownloaderService {
     private static instance: BsDownloaderService;
@@ -123,7 +124,10 @@ export class BsDownloaderService {
             take(1),
         ).subscribe(async () => {
             const logged$ = events$.pipe(filter(event => event.subType === DepotDownloaderInfoEvent.SteamID), take(1));
-            // Show awaiting mobile confirmation modal
+            const res = await this.modalService.openModal(SteamMobileApproveModal, { logged$ });
+            if(res.exitCode !== ModalExitCode.COMPLETED){
+                return this.stopDownload();
+            }
         }));
 
         subs.push(events$.pipe(