Merge branch 'master' into feature/add-changelog-modal/178

2026-07-03 14:08:25 +02:00 · 2023-12-28 15:07:48 +01:00
parent b91d74f3a3 07a353393b
commit b951be9511
24 changed files with 450 additions and 204 deletions
@@ -7,8 +7,6 @@ import { useState } from "react";
 import tailwindConfig from "../../../../../../tailwind.config";
 import Color from "color";
 import { useNavigate } from "react-router-dom";
-import Tippy from "@tippyjs/react";
-import { followCursor } from "tippy.js";

 export const ChooseStore: ModalComponent<BsStore> = ({ resolver }) => {

@@ -49,12 +47,10 @@ export const ChooseStore: ModalComponent<BsStore> = ({ resolver }) => {
            <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.choose-store.title")}</h1>
            <p className="w-auto text-gray-800 dark:text-gray-200 text-center">{t("modals.choose-store.body")}</p>
            <div className="flex flex-row w-full flex-grow gap-3">
-                <Tippy className="!bg-neutral-900" content={t("modals.choose-store.unavailable")} allowHTML hideOnClick={false} followCursor plugins={[followCursor]} duration={200} arrow={false} maxWidth={300}>
-                    <div className="flex-grow basis-0 flex flex-col gap-2 text-center px-5 pt-3 pb-1 rounded-md border-main-color-3 border-2 cursor-not-allowed" style={{backgroundColor: oculusHover ? bg.dim : bg.bright}}>
-                        <OculusIcon className="flex-grow aspect-square text-black bg-white rounded-full p-5"/>
-                        <h2 className="font-bold">Oculus Store (PC)</h2>
-                    </div>
-                </Tippy>
+                <div className="flex flex-col flex-grow basis-0 gap-2 text-center px-5 pt-3 pb-1 rounded-md border-main-color-3 border-2 cursor-pointer" onMouseEnter={() => setOculusHover(true)} onMouseLeave={() => setOculusHover(false)} onClick={() => chooseStore(BsStore.OCULUS)} style={{backgroundColor: oculusHover ? bg.dim : bg.bright}}>
+                    <OculusIcon className="flex-grow aspect-square text-black bg-white rounded-full p-5"/>
+                    <h2 className="font-bold">Oculus Store (PC)</h2>
+                </div>
                <div className="flex flex-col flex-grow basis-0 gap-2 text-center px-5 pt-3 pb-1 rounded-md border-main-color-3 border-2 cursor-pointer" onMouseEnter={() => setSteamHover(true)} onMouseLeave={() => setSteamHover(false)} onClick={() => chooseStore(BsStore.STEAM)} style={{backgroundColor: steamHover ? bg.dim : bg.bright}}>
                    <SteamIcon className="flex-grow"/>
                    <h2 className="font-bold">Steam</h2>
@@ -5,55 +5,207 @@ import BeatWaiting from "../../../../../../assets/images/apngs/beat-impatient.pn
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { useState } from "react";
 import { isOculusTokenValid } from "shared/helpers/oculus.helpers";
+import crypto from "crypto-js";
+import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component";
+import Tippy from "@tippyjs/react";
+import { tryit } from "shared/helpers/error.helpers";
 import { logRenderError } from "renderer";
+import { useService } from "renderer/hooks/use-service.hook";
+import { ConfigurationService } from "renderer/services/configuration.service";
+
+const OCULUS_TOKEN_STORAGE_KEY = "meta-token";

 export const EnterMetaTokenModal: ModalComponent<string> = ({resolver}) => {

    const t = useTranslation();

-    const [token, setToken] = useState("");
-    const [showToken, setShowToken] = useState(false);
+    const config = useService(ConfigurationService);

-    const submit = () => {
+    const [passwordView, setPasswordView] = useState(() => !!config.get(OCULUS_TOKEN_STORAGE_KEY));
+
+    const submit = (token: string) => {
        resolver({exitCode: ModalExitCode.COMPLETED, data: token});
    }

    const cancel = () => {
        resolver({exitCode: ModalExitCode.CANCELED});
    }
-
-    const isTokenValid = (() => {
-        return isOculusTokenValid(token, logRenderError);
-    })();
    
    return (
        <form className="flex flex-col w-80 gap-4">
            <h1 className="text-3xl uppercase tracking-wide w-full text-center">{t("modals.enter-meta-token.title")}</h1>
-
            <BsmImage className="h-20 w-20 mx-auto" image={BeatWaiting}/>
+            {passwordView ? (
+                <EnterPasswordView onValid={submit} onCancel={cancel} dontHaveToken={() => setPasswordView(() => false)}/>
+            ) : (
+                <EnterOculusTokenView onValid={submit} onCancel={cancel} alreadyHaveToken={() => setPasswordView(() => true)}/>
+            )}
+        </form>
+    );
+}

-            <p>{t("modals.enter-meta-token.body.need-token")}</p>
+const EnterPasswordView = ({onValid, onCancel, dontHaveToken}: {onValid: (token: string) => void, onCancel: () => void, dontHaveToken: () => void}) => {

-            <a href="https://github.com/Zagrios/bs-manager/wiki/How-to-obtain-your-Oculus-Token" target="_blank" className="underline">{t("modals.enter-meta-token.body.how-obtain-token")}</a>
-            
-            <div>
-                <div className="flex flex-row items-center justify-between">
-                    <label className="font-bold cursor-pointer tracking-wide inline-block" htmlFor="meta_token">{t("modals.enter-meta-token.body.input-label")}</label>
-                    {!isTokenValid && token.length > 0 && (
-                        <span className="text-orange-700 dark:text-orange-400 text-xs whitespace-normal min-w-0">{t("modals.enter-meta-token.body.token-is-invalid")}</span>
-                    )}
+    const t = useTranslation();
+
+    const config = useService(ConfigurationService);
+
+    const [password, setPassword] = useState("");
+
+    const getTokenFromStorage = () => {
+        const cryptedToken = config.get<string>(OCULUS_TOKEN_STORAGE_KEY);
+        if(!cryptedToken) return null;
+        const { result: token, error } = tryit(() => crypto.AES.decrypt(cryptedToken, password).toString(crypto.enc.Utf8));
+
+        if(error){
+            logRenderError(error, "Often indicate that the password is not the same as the one used to save the token. This error can occur when the use is writing the password.");
+        }
+
+        return token;
+    }
+
+    const isTokenValid = () => {
+        const token = getTokenFromStorage();
+        return isOculusTokenValid(token);
+    }
+
+    const valid = () => {
+        const token = getTokenFromStorage();
+        onValid(token);
+    }
+
+    return (
+        <>
+            <p>{t("modals.enter-meta-token.body.info-enter-password")}</p>
+
+            <div className="flex flex-col gap-2">
+                <div>
+                    <PasswordInput onChange={v => setPassword(v.password)} value={password}/>
                </div>
-                <div className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md flex box-border h-9">
-                    <input className="grow px-1 py-[2px] outline-none bg-transparent" onChange={e => setToken(e.target.value)} value={token} type={showToken ? "text" : "password"} name="meta_token" id="meta_token" placeholder="OCAStr43sdx2..." />
-                    <BsmButton className="shrink-0 m-1 rounded-md p-0.5 !bg-light-main-color-3 dark:!bg-main-color-3" icon={showToken ? "eye-cross" : "eye"} withBar={false} onClick={() => setShowToken(prev => !prev)} />
+
+                <div>
+                    <span className="underline italic text-sm float-right cursor-pointer" onClick={dontHaveToken}>{t("modals.enter-meta-token.body.enter-oculus-token")}</span>
                </div>
            </div>

            <div className="flex flex-row gap-2">
-                <BsmButton className="rounded-md flex justify-center items-center transition-all h-9 w-full" typeColor="cancel" text="misc.cancel" withBar={false} onClick={cancel}/>
-                <BsmButton className="rounded-md flex justify-center items-center transition-all h-9 w-full" typeColor="primary" text="modals.enter-meta-token.valid-btn" withBar={false} onClick={submit} disabled={!isTokenValid}/>
+                <BsmButton className="rounded-md flex justify-center items-center transition-all h-9 w-full" typeColor="cancel" text="misc.cancel" withBar={false} onClick={onCancel}/>
+                <Tippy className="!bg-neutral-900" disabled={!password || isTokenValid()} arrow={false} content={t("modals.enter-meta-token.body.info-disabled-btn-password")} hideOnClick={false}>
+                    <div className="w-full">
+                        <BsmButton className="rounded-md flex justify-center items-center transition-all h-9 w-full" typeColor="primary" text="modals.enter-meta-token.valid-btn" withBar={false} onClick={valid} disabled={!isTokenValid()}/>
+                    </div>
+                </Tippy>
            </div>
-        
-        </form>
+        </>
+
    );
+
+}
+
+const EnterOculusTokenView = ({onValid, onCancel, alreadyHaveToken}: {onValid: (token: string) => void, onCancel: () => void, alreadyHaveToken: () => void}) => {
+
+    const t = useTranslation();
+
+    const config = useService(ConfigurationService);
+
+    const [token, setToken] = useState("");
+    const [showToken, setShowToken] = useState(false);
+    const [stay, setStay] = useState(false);
+    const [password, setPassword] = useState("");
+    const [passwordValid, setPasswordValid] = useState(false);
+
+    const storeToken = (token: string, password: string) => {
+        const cryptedToken = crypto.AES.encrypt(token, password).toString();
+        config.set(OCULUS_TOKEN_STORAGE_KEY, cryptedToken);
+    }
+
+    const valid = () => {
+
+        if(stay){
+            storeToken(token, password);
+        } else {
+            config.delete(OCULUS_TOKEN_STORAGE_KEY);
+        }
+
+        onValid(token);
+    }
+
+    const isCryptedTokenPresent = () => {
+        return !!config.get(OCULUS_TOKEN_STORAGE_KEY);
+    }
+
+    return (
+        <>
+            <p>{t("modals.enter-meta-token.body.info-enter-token")}</p>
+            <a href="https://github.com/Zagrios/bs-manager/wiki/How-to-obtain-your-Oculus-Token" target="_blank" className="underline">{t("modals.enter-meta-token.body.how-obtain-token")}</a>
+
+            <div className="flex flex-col gap-2">
+                <div>
+                    <div className="flex flex-row items-center justify-between">
+                        <label className="font-bold cursor-pointer tracking-wide inline-block" htmlFor="meta_token">{t("modals.enter-meta-token.body.oculus-token")}</label>
+                        {!isOculusTokenValid(token) && token.length > 0 && (
+                            <span className="text-orange-700 dark:text-orange-400 text-xs whitespace-normal min-w-0">{t("modals.enter-meta-token.body.token-is-invalid")}</span>
+                        )}
+                    </div>
+                    <div className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md flex box-border h-9">
+                        <input className="grow px-1 py-[2px] outline-none bg-transparent" onChange={e => setToken(e.target.value)} value={token} type={showToken ? "text" : "password"} name="meta_token" id="meta_token" placeholder="FRLAStr43sdx2..." />
+                        <BsmButton className="shrink-0 m-1 rounded-md p-0.5 !bg-light-main-color-3 dark:!bg-main-color-3" icon={showToken ? "eye-cross" : "eye"} withBar={false} onClick={() => setShowToken(prev => !prev)} />
+                    </div>
+                </div>
+
+                <Tippy className="!bg-neutral-900" arrow={false} content={t("modals.enter-meta-token.body.save-token-info")}>
+                    <div className="flex flex-row items-center gap-1 w-fit">
+                        <BsmCheckbox className="h-6 w-6 relative z-[1]" onChange={setStay} checked={stay}/>
+                        <span className="font-bold cursor-help">{t("modals.enter-meta-token.body.save-my-token")}</span>
+                    </div>
+                </Tippy>
+
+                <div className="grid grid-rows-[0fr] transition-[grid-template-rows]" style={{gridTemplateRows: stay && "1fr"}}>
+                    <div className="overflow-hidden">
+                        <PasswordInput onChange={v => {setPassword(v.password); setPasswordValid(v.valid)}} value={password}/>
+                    </div>
+                </div>
+
+                {isCryptedTokenPresent() && (
+                    <div>
+                        <span className="underline italic text-sm float-right cursor-pointer" onClick={alreadyHaveToken}>{t("modals.enter-meta-token.body.have-token-saved")}</span>
+                    </div>
+                )}
+            </div>
+
+            <div className="flex flex-row gap-2">
+                <BsmButton className="rounded-md flex justify-center items-center transition-all h-9 w-full" typeColor="cancel" text="misc.cancel" withBar={false} onClick={onCancel}/>
+                <BsmButton className="rounded-md flex justify-center items-center transition-all h-9 w-full" typeColor="primary" text="modals.enter-meta-token.valid-btn" withBar={false} onClick={valid} disabled={!isOculusTokenValid(token) || (stay && !passwordValid)}/>
+            </div>
+        </>
+
+    );
+
+}
+
+const PasswordInput = ({onChange, value}: {onChange: (value : {password: string, valid: boolean}) => void, value: string}) => {
+
+    const t = useTranslation();
+
+    const [showPassword, setShowPassword] = useState(false);
+
+    const isPasswordValid = (password: string) => {
+        return password.length >= 8;
+    }
+
+    return (
+        <>
+            <div className="flex flex-row items-center justify-between">
+                <label className="font-bold cursor-pointer tracking-wide inline-block" htmlFor="password">{t("modals.enter-meta-token.body.password")}</label>
+                {!isPasswordValid(value) && value.length > 0 && (
+                    <span className="text-orange-700 dark:text-orange-400 text-xs whitespace-normal min-w-0">{t("modals.enter-meta-token.body.password-too-short")}</span>
+                )}
+            </div>
+            <div className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md flex box-border h-9">
+                <input className="grow px-1 py-[2px] outline-none bg-transparent" onChange={e => onChange({password: e.target.value, valid: isPasswordValid(e.target.value)})} value={value} type={showPassword ? "text" : "password"} name="password" id="password" placeholder={t("modals.enter-meta-token.body.password")} />
+                <BsmButton className="shrink-0 m-1 rounded-md p-0.5 !bg-light-main-color-3 dark:!bg-main-color-3" icon={showPassword ? "eye-cross" : "eye"} withBar={false} onClick={() => setShowPassword(prev => !prev)} />
+            </div>
+        </> 
+    )
+
 }
@@ -18,15 +18,10 @@ export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemVa
        return item.id === selectedItemId || item.value === selectedItemValue;
    }

-    const selectItem = (item: RadioItem<T>) => {
-        if(item.disabled){ return; }
-        onItemSelected?.(item);
-    }
-
    return (
        <div id={id} className="w-full flex gap-1.5" style={{flexDirection: direction}}>
            {items.map(i => (
-                <div onClick={() => selectItem(i)} key={i.id} className={`py-3 w-full flex ${i.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${i.disabled && "brightness-75"} justify-between items-center rounded-md px-2 transition-colors duration-200 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
+                <div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-200 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
                    <div className="flex items-center">
                        <div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
                            <motion.span initial={{ scale: 0 }} animate={{ scale: isSelected(i) ? 1 : 0 }} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full" />
@@ -52,5 +47,4 @@ export interface RadioItem<T> {
    textIcon?: string;
    className?: string;
    value?: T;
-    disabled?: boolean;
 }
@@ -84,6 +84,7 @@ export function SettingsPage() {
    const themeSelected = useObservable(themeService.theme$, "os");
    const languageSelected = useObservable(i18nService.currentLanguage$, i18nService.getFallbackLanguage());
    const downloadStore = useObservable(bsDownloader.defaultStore$);
+
    const [installationFolder, setInstallationFolder] = useState(null);
    const [showSupporters, setShowSupporters] = useState(false);
    const [mapDeepLinksEnabled, setMapDeepLinksEnabled] = useState(false);
@@ -263,8 +264,8 @@ export function SettingsPage() {
                    <SettingContainer id="choose-default-store" minorTitle="pages.settings.steam-and-oculus.download-platform.title" description="pages.settings.steam-and-oculus.download-platform.desc" className="mt-3">
                        <SettingRadioArray items={[
                            { id: 1, text: "Steam", value: BsStore.STEAM, icon: <SteamIcon className="h-6 w-6 float-left"/> },
-                            { id: 2, text: "Oculus Store (PC)", value: BsStore.OCULUS, icon: <OculusIcon className="h-6 w-6 float-left bg-white text-black rounded-full p-0.5"/>, disabled: true},
-                            { id: 0, text: t("pages.settings.steam-and-oculus.download-platform.always-ask"), value: undefined, },
+                            { id: 2, text: "Oculus Store (PC)", value: BsStore.OCULUS, icon: <OculusIcon className="h-6 w-6 float-left bg-white text-black rounded-full p-0.5"/>},
+                            { id: 0, text: t("pages.settings.steam-and-oculus.download-platform.always-ask"), value: null, },
                        ]} selectedItemValue={downloadStore} onItemSelected={handleChangeBsStore}/>
                    </SettingContainer>

@@ -28,7 +28,7 @@ export class BsDownloaderService extends AbstractBsDownloaderService {
    private readonly oculusDownloader: OculusDownloaderService;
    private readonly versionManager: BSVersionManagerService;

-    private readonly SELECTED_STORE_TO_DOWNLOAD_KET = "selectedStoreToDownload";
+    private readonly SELECTED_STORE_TO_DOWNLOAD_KEY = "selectedStoreToDownload";

    private constructor(){
        super();
@@ -55,11 +55,11 @@ export class BsDownloaderService extends AbstractBsDownloaderService {
        this._isVerifying$.next(false);
    }

-    public get defaultStore(): BsStore | undefined { return this.config.get<BsStore>(this.SELECTED_STORE_TO_DOWNLOAD_KET); }
-    public get defaultStore$(): Observable<BsStore | undefined> { return this.config.watch(this.SELECTED_STORE_TO_DOWNLOAD_KET); } 
+    public get defaultStore(): BsStore | undefined { return this.config.get<BsStore>(this.SELECTED_STORE_TO_DOWNLOAD_KEY); }
+    public get defaultStore$(): Observable<BsStore | undefined> { return this.config.watch(this.SELECTED_STORE_TO_DOWNLOAD_KEY); } 

    public setDefaultStore(store: BsStore|undefined): void {
-        this.config.set(this.SELECTED_STORE_TO_DOWNLOAD_KET, store);
+        this.config.set(this.SELECTED_STORE_TO_DOWNLOAD_KEY, store);
    }

    public async chooseStoreToDownloadFrom(): Promise<BsStore | undefined> {
@@ -75,7 +75,7 @@ export class BsDownloaderService extends AbstractBsDownloaderService {
    public async downloadVersion(version: BSVersion, from?: BsStore): Promise<BSVersion> {

        if(!from){
-            from = this.defaultStore === BsStore.STEAM ? BsStore.STEAM : await this.chooseStoreToDownloadFrom();
+            from = this.defaultStore ?? await this.chooseStoreToDownloadFrom();
        }

        return this.getStoreDownloader(from).downloadBsVersion(version).then(() => {
@@ -6,7 +6,6 @@ import { ProgressBarService } from "../progress-bar.service";
 import { CustomError } from "shared/models/exceptions/custom-error.class";
 import { NotificationService } from "../notification.service";
 import { ModalExitCode, ModalService } from "../modale.service";
-import { LoginToMetaModal, MetaAuthMethod } from "renderer/components/modal/modal-types/bs-downgrade/login-to-meta-modal.component";
 import { DownloaderServiceInterface } from "./bs-store-downloader.interface";
 import { AbstractBsDownloaderService } from "./abstract-bs-downloader.service";
 import { DownloadInfo } from "main/services/bs-version-download/bs-steam-downloader.service";
@@ -69,14 +68,6 @@ export class OculusDownloaderService extends AbstractBsDownloaderService impleme
        );
    }

-    private tryAutoDownload(downloadInfo: DownloadInfo): Observable<Progression<BSVersion>>{
-        const ignoreCode = [MetaAuthErrorCodes.NO_META_AUTH_TOKEN, OculusDownloaderErrorCodes.DOWNLOAD_CANCELLED];
-        return this.handleDownload(
-            this.ipc.sendV2<Progression<BSVersion>>("bs-oculus-auto-download", { args: downloadInfo }),
-            ignoreCode
-        );
-    }
-
    private startDownloadBsVersion(downloadInfo: DownloadInfo): Observable<Progression<BSVersion>>{
        const ignoreCode = [MetaAuthErrorCodes.META_LOGIN_WINDOW_CLOSED_BY_USER, OculusDownloaderErrorCodes.DOWNLOAD_CANCELLED];
        return this.handleDownload(
@@ -87,38 +78,10 @@ export class OculusDownloaderService extends AbstractBsDownloaderService impleme

    private async doDownloadBsVersion(bsVersion: BSVersion, isVerification: boolean): Promise<BSVersion> {

-        let autoDownloadFailed = false;
+        const autoDownloadFailed = false;

        return (async () => {

-            const autoDownload = await lastValueFrom(this.tryAutoDownload({ bsVersion, isVerification })).then(() => true).catch((err: CustomError) => {
-                const doNotRestartCodes: string[] = [
-                    OculusDownloaderErrorCodes.ALREADY_DOWNLOADING,
-                    OculusDownloaderErrorCodes.SOME_FILES_FAILED_TO_DOWNLOAD,
-                    OculusDownloaderErrorCodes.VERIFY_INTEGRITY_FAILED,
-                    OculusDownloaderErrorCodes.DOWNLOAD_CANCELLED
-                ];
-                autoDownloadFailed = true;
-
-                if(doNotRestartCodes.includes(err?.code)){
-                    return true;
-                }
-
-                return false;
-            });
-            
-            if(autoDownload){ return autoDownload; }
-
-            const {exitCode, data} = await this.modals.openModal(LoginToMetaModal)
-
-            if(exitCode !== ModalExitCode.COMPLETED){
-                return false
-            }
-
-            if(data.method === MetaAuthMethod.META){
-                return lastValueFrom(this.startDownloadBsVersion({ bsVersion, isVerification, stay: data.stay })).then(() => true);
-            }
-
            const tokenRes = await this.modals.openModal(EnterMetaTokenModal);

            if(tokenRes.exitCode !== ModalExitCode.COMPLETED){
@@ -129,8 +92,6 @@ export class OculusDownloaderService extends AbstractBsDownloaderService impleme

        })().then(res => {

-            console.log("aaa", res);
-
            if(autoDownloadFailed || !res){
                return bsVersion;
            }
@@ -30,10 +30,14 @@ export class ConfigurationService {
    public get<Type>(key: string | DefaultConfigKey): Type {
        const rawValue = (window.sessionStorage.getItem(key) ?? window.localStorage.getItem(key));
        const tryParse = tryit<Type>(() => JSON.parse(rawValue));
-        if (!tryParse.result) {
-            return defaultConfiguration[key as DefaultConfigKey];
+        
+        const res = (tryParse.error ? rawValue : tryParse.result) as Type;
+
+        if(!res && Object.keys(defaultConfiguration).includes(key)){
+            return defaultConfiguration[key as DefaultConfigKey] as Type;
        }
-        return (tryParse.result ?? rawValue) as Type;
+
+        return res;
    }

    public set(key: string, value: unknown, persistant = true) {