v8.1.8: improved auth code

index.html

@@ -35,6 +35,7 @@
           // url: "https://cdn.dos.zone/original/2X/b/b4b5275904d86a4ab8a20917b2b7e34f0df47bf7.jsdos", // dhry2
           // url: "https://cdn.dos.zone/original/2X/7/744842062905f72648a4d492ccc2526d039b3702.jsdos", // sim-city
           // dosboxConf: diabloConf,
+          // loginUrl: "http://localhost:8080/subscription.html",
           pathPrefix: "/emulators/",
           server: params.get("server"),
           room: params.get("room"),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-dos",
-  "version": "8.1.7",
+  "version": "8.1.8",
   "description": "Full-featured DOS player with multiple emulator backends",
   "type": "module",
   "keywords": [

src/frame/account-frame.tsx

@@ -50,8 +50,8 @@ function PremiumPlan(props: {}) {
             return;
         }
 
-        if (location.host !== "v8.js-dos.com") {
-            window.open("https://v8.js-dos.com/subscription", "_blank");
+        if (location.host !== "js-dos.com") {
+            window.open("https://js-dos.com/subscription.html", "_blank");
             return;
         }
 

src/login/login.tsx

@@ -1,16 +1,18 @@
-import { useEffect, useRef } from "preact/hooks";
+import { Dispatch, useEffect, useRef } from "preact/hooks";
 import { useDispatch, useSelector } from "react-redux";
 import { State } from "../store";
 import { uiSlice } from "../store/ui";
 import { CloseButton } from "../components/close-button";
 import { authentificator } from "../v8/config";
-import { Account, authSlice, postAuthMessage } from "../store/auth";
+import { Account, authSlice, getRefreshToken } from "../store/auth";
 import { havePremium } from "../v8/subscriptions";
+import { AnyAction } from "@reduxjs/toolkit";
 
 export function Login() {
     const iframeRef = useRef<HTMLIFrameElement>(null);
     const activeAccount = useSelector((state: State) => state.auth.account);
     const visible = useSelector((state: State) => state.ui.modal) === "login";
+    const loginUrl = useSelector((state: State) => state.auth.loginUrl);
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -28,7 +30,7 @@ export function Login() {
 
         async function onAuthMessage(e: any) {
             if (e.data.action === "auth/ready") {
-                postAuthMessage("auth/authenicate");
+                postAuthMessage("auth/authenicate", iframe as HTMLIFrameElement, dispatch);
             } else if (e.data.action === "auth/authenicate") {
                 const account = e.data.account as Account | null;
                 if (account !== null) {
@@ -55,13 +57,15 @@ export function Login() {
     }, []);
 
     useEffect(() => {
-        const iframe = iframeRef.current;
-        if (iframe === null) {
-            return;
-        }
+        if (visible) {
+            const iframe = iframeRef.current;
+            if (iframe === null) {
+                return;
+            }
 
-        postAuthMessage("auth/login");
-    }, [visible]);
+            postAuthMessage("auth/login", iframe, dispatch, loginUrl);
+        }
+    }, [visible, loginUrl]);
 
     return <div
         id={"login"}
@@ -75,3 +79,21 @@ export function Login() {
         />
     </div>;
 }
+
+function postAuthMessage(action: "auth/login" | "auth/authenicate",
+                         iframe: HTMLIFrameElement,
+                         dispatch: Dispatch<AnyAction>,
+                         loginUrl?: string) {
+    const message = {
+        action,
+        refresh_token: action === "auth/authenicate" ? getRefreshToken() : undefined,
+        url: action === "auth/login" ? loginUrl : undefined,
+    };
+    if (!iframe || !iframe.contentWindow) {
+        console.error("Can't find authentificator iframe");
+        dispatch(authSlice.actions.logout({}));
+        dispatch(authSlice.actions.ready());
+    } else {
+        iframe.contentWindow.postMessage(message, "*");
+    }
+}

src/main.tsx

@@ -14,6 +14,7 @@ import { loadBundleFromConfg, loadBundleFromUrl } from "./load";
 import { DosOptions, DosProps, DosFn } from "./public/types";
 import { browserSetFullScreen } from "./host/fullscreen";
 import { NonSerializableStore, Store, makeNonSerializableStore, makeStore, postJsDosEvent } from "./store";
+import { authSlice } from "./store/auth";
 
 export const Dos: DosFn = (element: HTMLDivElement,
     options: Partial<DosOptions> = {}): DosProps => {
@@ -154,6 +155,10 @@ export const Dos: DosFn = (element: HTMLDivElement,
         setFullScreen(options.fullScreen);
     }
 
+    if (options.loginUrl !== undefined) {
+        store.dispatch(authSlice.actions.setLoginUrl(options.loginUrl));
+    }
+
     render(
         <Provider store={store}>
             {<Ui /> as any}

src/public/types.ts

@@ -23,7 +23,8 @@ export interface DosOptions {
     sockdriveBackend: {
         name: string,
         host: string,
-    }
+    },
+    loginUrl: string,
 }
 
 export interface DosProps {

src/store/auth.ts

@@ -38,9 +38,11 @@ const initAccount = (() => {
 })();
 
 const initialState: {
+    loginUrl: string,
     account: Account | null,
     ready: boolean,
 } = {
+    loginUrl: location.href,
     account: initAccount,
     ready: initAccount !== null,
 };
@@ -84,20 +86,13 @@ export const authSlice = createSlice({
         ready: (state) => {
             state.ready = true;
         },
+        setLoginUrl: (state, action: { payload: string }) => {
+            state.loginUrl = action.payload;
+        },
     },
 });
 
-export function postAuthMessage(action: "auth/login" | "auth/authenicate") {
-    const message = {
-        action,
-        refresh_token: action === "auth/authenicate" ? getRefreshToken() : undefined,
-        url: action === "auth/login" ? location.href : undefined,
-    };
-    document.querySelector<HTMLIFrameElement>("#authentificator")!
-        .contentWindow?.postMessage(message, "*");
-}
-
-function getRefreshToken(): string | null {
+export function getRefreshToken(): string | null {
     return lStorage.getItem("cached.rt");
 }
 

src/ws/ws-transport-layer.ts

@@ -48,7 +48,7 @@ export class WsTransportLayer implements TransportLayer {
     socket: WebSocket;
     sessionId: string = Date.now() + "";
     hardware: Hardware;
-    onInit: (version: number) => void = {/**/};
+    onInit: (version: number) => void = () => {/**/};
 
     private cycles = 0;
     private sockdrive = createSockdrive(this.onSockdriveOpen.bind(this),