extract browser compatibility error handling out of app.js

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/vector/app.js

@@ -126,7 +126,7 @@ function onTokenLoginCompleted() {
     window.location.href = formatted;
 }
 
-export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
+export async function loadApp(fragParams: {}) {
     // XXX: the way we pass the path to the worker script from webpack via html in body's dataset is a hack
     // but alternatives seem to require changing the interface to passing Workers to js-sdk
     const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript;
@@ -148,45 +148,35 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
 
     const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
     console.log("Vector starting at " + urlWithoutQuery);
-    if (acceptBrowser) {
-        platform.startUpdater();
 
-        try {
+    platform.startUpdater();
-            // Don't bother loading the app until the config is verified
-            const config = await verifyServerConfig();
-            const MatrixChat = sdk.getComponent('structures.MatrixChat');
-            return <MatrixChat
-                onNewScreen={onNewScreen}
-                makeRegistrationUrl={makeRegistrationUrl}
-                ConferenceHandler={VectorConferenceHandler}
-                config={config}
-                realQueryParams={params}
-                startingFragmentQueryParams={fragParams}
-                enableGuest={!config.disable_guests}
-                onTokenLoginCompleted={onTokenLoginCompleted}
-                initialScreenAfterLogin={getScreenFromLocation(window.location)}
-                defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
-            />;
-        } catch (err) {
-            console.error(err);
 
-            let errorMessage = err.translatedMessage
+    try {
-                || _t("Unexpected error preparing the app. See console for details.");
+        // Don't bother loading the app until the config is verified
-            errorMessage = <span>{errorMessage}</span>;
+        const config = await verifyServerConfig();
+        const MatrixChat = sdk.getComponent('structures.MatrixChat');
+        return <MatrixChat
+            onNewScreen={onNewScreen}
+            makeRegistrationUrl={makeRegistrationUrl}
+            ConferenceHandler={VectorConferenceHandler}
+            config={config}
+            realQueryParams={params}
+            startingFragmentQueryParams={fragParams}
+            enableGuest={!config.disable_guests}
+            onTokenLoginCompleted={onTokenLoginCompleted}
+            initialScreenAfterLogin={getScreenFromLocation(window.location)}
+            defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
+        />;
+    } catch (err) {
+        console.error(err);
 
-            // Like the compatibility page, AWOOOOOGA at the user
+        let errorMessage = err.translatedMessage
-            const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
+            || _t("Unexpected error preparing the app. See console for details.");
-            return <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />;
+        errorMessage = <span>{errorMessage}</span>;
-        }
+
-    } else {
+        // Like the compatibility page, AWOOOOOGA at the user
-        console.error("Browser is missing required features.");
+        const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
-        // take to a different landing page to AWOOOOOGA at the user
+        return <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />;
-        const CompatibilityPage = sdk.getComponent("structures.CompatibilityPage");
-        return <CompatibilityPage onAccept={function() {
-            if (window.localStorage) window.localStorage.setItem('mx_accepts_unsupported_browser', true);
-            console.log("User accepts the compatibility risks.");
-            loadApp();
-        }} />;
     }
 }
 

src/vector/index.ts

@@ -100,6 +100,7 @@ async function start() {
         loadTheme,
         loadApp,
         showError,
+        showIncompatibleBrowser,
         _t,
     } = await import(
         /* webpackChunkName: "init" */
@@ -148,9 +149,18 @@ async function start() {
         // ##########################
         // error handling begins here
         // ##########################
+        console.log("DEBUG", acceptBrowser);
         if (!acceptBrowser) {
             await new Promise(resolve => {
-                // todo
+                console.error("Browser is missing required features.");
+                // take to a different landing page to AWOOOOOGA at the user
+                showIncompatibleBrowser(() => {
+                    if (window.localStorage) {
+                        window.localStorage.setItem('mx_accepts_unsupported_browser', String(true));
+                    }
+                    console.log("User accepts the compatibility risks.");
+                    resolve();
+                });
             });
         }
 
@@ -170,7 +180,7 @@ async function start() {
 
         // ##################################
         // app load critical path starts here
-        // await things starting successfully
+        // assert things started successfully
         // ##################################
         await loadOlmPromise;
         await loadSkinPromise;
@@ -179,7 +189,7 @@ async function start() {
 
         // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
         // run on the components.
-        await loadApp(fragparts.params, acceptBrowser);
+        await loadApp(fragparts.params);
     } catch (err) {
         console.trace(err);
         const { showError } = await import(

src/vector/init.tsx

@@ -135,13 +135,13 @@ export async function loadTheme() {
     setTheme();
 }
 
-export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
+export async function loadApp(fragParams: {}) {
     // load app.js async so that its code is not executed immediately and we can catch any exceptions
     const module = await import(
         /* webpackChunkName: "riot-web-app" */
         /* webpackPreload: true */
         "./app");
-    window.matrixChat = ReactDOM.render(await module.loadApp(fragParams, acceptBrowser),
+    window.matrixChat = ReactDOM.render(await module.loadApp(fragParams),
         document.getElementById('matrixchat'));
 }
 
@@ -154,4 +154,13 @@ export async function showError(title: string, messages?: string[]) {
         document.getElementById('matrixchat'));
 }
 
+export async function showIncompatibleBrowser(onAccept) {
+    const CompatibilityPage = (await import(
+        /* webpackChunkName: "compatibility-page" */
+        /* webpackPreload: true */
+        "matrix-react-sdk/src/components/structures/CompatibilityPage")).default;
+    window.matrixChat = ReactDOM.render(<CompatibilityPage onAccept={onAccept} />,
+        document.getElementById('matrixchat'));
+}
+
 export const _t = languageHandler._t;