[#660] Implement WebAssembly warning

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>

src/js/Helper/compatibility.js

@@ -1,48 +1,65 @@
-function isCompatibleBrowser() {
+function checkBrowserSupport() {
     try {
         if(!window.hasOwnProperty('crypto') || typeof window.crypto.subtle !== "object") {
-            console.error('Web Crypto API not supported');
-            return false;
+            return 'crypto';
         }
 
         if(!window.hasOwnProperty('TextEncoder')) {
-            console.error('TextEncoder not supported');
-            return false;
+            return 'TextEncoder';
         }
 
         if(!window.hasOwnProperty('WebAssembly') || typeof window.WebAssembly.instantiate !== "function") {
-            console.error('WebAssembly not supported');
-            return false;
+            return 'WebAssembly';
         }
     } catch(e) {
         console.error(e);
 
-        return false;
+        return 'ECMAScript 2017 / ES2017';
     }
 
     return true;
 }
 
-function showBrowserCompatibilityWarning() {
+function showBrowserCompatibilityWarning(reason) {
     var imgpath   = OC.filePath('passwords', 'img', 'browser/'),
-        container = document.getElementById('main');
+        container = document.getElementById('main'),
+        title     = 'Your browser is outdated',
+        message   = 'Your browser is outdated and does not have the necessary functionality to run this app.' +
+                    '<br>Please check if an update is available for your browser or choose a modern and compatible browser from the list below.';
+
+    if(reason === 'WebAssembly') {
+        var handbookLink = null,
+            settings     = OCP.InitialState.loadState('passwords', 'settings');
+
+        if(settings && settings['server.handbook.url']) {
+            handbookLink = settings['server.handbook.url.web'] + 'Enable-WebAssembly';
+        }
+
+        title = 'Your browser does not support WebAssembly';
+        message = 'Your browser does not support WebAssembly (WASM), which is required to run this app. ' +
+                  '<br>In some browsers, WebAssembly must be enabled in the browser configuration.<br>' +
+                  (handbookLink ? '<a target="_blank" rel="noreferrer noopener" href="' + handbookLink + '">':'') +
+                  'A guide to enable WebAssembly can be found in the Passwords App handbook.' +
+                  (handbookLink ? '</a>':'') +
+                  '<br><br>If your browser does not have WebAssembly support, check if an update is available for your browser or choose a modern and compatible browser from the list below.';
+    }
+
     container.innerHTML =
-        '<div class="passwords-browser-compatibility">' +
-        '<h1 class="title">Your Browser is outdated</h1>' +
-        '<div class="message">Your browser is outdated and does not provide the necessary functionality to display this page.' +
-        '<br>Please check if an update is available for your browser or choose a modern and compatible browser from the list below.' +
-        '</div><div class="browser">' +
+        '<div class="passwords-browser-compatibility"><h1 class="title">' + title + '</h1><div class="message">' + message + '</div><div class="browser">' +
         '<a target="_blank" rel="noreferrer noopener" href="https://www.mozilla.org/firefox/new/" style="background-image: url(' + imgpath + 'firefox.png)">Firefox</a>' +
         '<a target="_blank" rel="noreferrer noopener" href="https://vivaldi.com/download/" style="background-image: url(' + imgpath + 'vivaldi.png)">Vivaldi</a>' +
+        '<a target="_blank" rel="noreferrer noopener" href="https://brave.com/" style="background-image: url(' + imgpath + 'brave.png)">Brave</a>' +
         '<a target="_blank" rel="noreferrer noopener" href="https://www.torproject.org/download/" style="background-image: url(' + imgpath + 'tor.png)">Tor Browser</a>' +
         '</div></div>';
     container.setAttribute('class', '');
 
-    throw new Error('Browser does not suport ECMAScript 2017 / ES2017');
+    console.error('Browser does not support ' + reason);
+    throw new Error('Browser does not support ' + reason);
 }
 
 function checkSystem() {
-    if(!isCompatibleBrowser()) showBrowserCompatibilityWarning();
+    var reason = checkBrowserSupport();
+    if(reason !== true) showBrowserCompatibilityWarning(reason);
 }
 
 window.addEventListener('DOMContentLoaded', checkSystem, false);

src/js/app.js

@@ -11,7 +11,7 @@ __webpack_public_path__ = `${OC.appswebroots.passwords}/`;
 (function() {
     if(location.protocol !== 'https:') {
         location.href = `${location.origin}${location.pathname}?https=false`;
-    } else if(isCompatibleBrowser()) {
+    } else if(checkBrowserSupport() === true) {
         Application.init();
     }
 }());

src/lib/Helper/Settings/ServerSettingsHelper.php

@@ -20,6 +20,8 @@ class ServerSettingsHelper {
 
     const SERVER_MANUAL_URL = 'https://raw.githubusercontent.com/wiki/marius-wieschollek/passwords/Users/';
 
+    const SERVER_MANUAL_URL_WEB = 'https://git.mdns.eu/nextcloud/passwords/-/wikis/Users/';
+
     /**
      * @var ConfigurationService
      */
@@ -49,10 +51,10 @@ class ServerSettingsHelper {
      * @param ThemeSettingsHelper  $themeSettings
      */
     public function __construct(
-        IURLGenerator $urlGenerator,
+        IURLGenerator        $urlGenerator,
         ConfigurationService $config,
-        ShareSettingsHelper $shareSettings,
-        ThemeSettingsHelper $themeSettings
+        ShareSettingsHelper  $shareSettings,
+        ThemeSettingsHelper  $themeSettings
     ) {
         $this->urlGenerator  = $urlGenerator;
         $this->shareSettings = $shareSettings;
@@ -91,8 +93,13 @@ public function get(string $key) {
             case 'sharing':
                 return $this->shareSettings->get($subKey);
             case 'handbook':
-                if($subKey !== 'url') return null;
-                $handbookUrl = $this->config->getAppValue('handbook/url', self::SERVER_MANUAL_URL);
+                if($subKey === 'url') {
+                    $handbookUrl = $this->config->getAppValue('handbook/url', self::SERVER_MANUAL_URL);
+                } else if($subKey === 'url.web') {
+                    $handbookUrl = $this->config->getAppValue('handbook/url/web', self::SERVER_MANUAL_URL_WEB);
+                } else {
+                    return null;
+                }
 
                 return empty($handbookUrl) ? self::SERVER_MANUAL_URL:$handbookUrl;
         }
@@ -106,12 +113,13 @@ public function get(string $key) {
     public function list(): array {
         return array_merge(
             [
-                'server.baseUrl'        => $this->get('baseUrl'),
-                'server.baseUrl.webdav' => $this->get('baseUrl.webdav'),
-                'server.version'        => $this->get('version'),
-                'server.app.version'    => $this->get('app.version'),
-                'server.handbook.url'   => $this->get('handbook.url'),
-                'server.performance'    => $this->get('performance')
+                'server.baseUrl'          => $this->get('baseUrl'),
+                'server.baseUrl.webdav'   => $this->get('baseUrl.webdav'),
+                'server.version'          => $this->get('version'),
+                'server.app.version'      => $this->get('app.version'),
+                'server.handbook.url'     => $this->get('handbook.url'),
+                'server.handbook.url.web' => $this->get('handbook.url.web'),
+                'server.performance'      => $this->get('performance')
             ],
             $this->themeSettings->list(),
             $this->shareSettings->list()

src/scss/Partials/_compatibility.scss

@@ -76,7 +76,7 @@
             margin    : 0 auto;
             padding   : 25px 0;
             font-size : 1.25rem;
-            width     : 600px;
+            width     : 800px;
 
             a {
                 display         : block;