Merge branch 'enhancement/mobile-app' into 'dev'

Enhancement/mobile app

See merge request crafty-controller/crafty-4!576

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 ## --- [4.1.0] - 2023/TBD
 ### New features
-TBD
+- Mobile PWA App (beta) | Ability to add a Crafty icon to your mobile's home screen ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/576))
 ### Refactor
 - Frontend Ajax Refactor | Start using API to send Remote Comms to Server ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/565))
 ### Bug fixes

app/classes/web/public_handler.py

@@ -50,12 +50,15 @@ class PublicHandler(BaseHandler):
         if page == "login":
             template = "public/login.html"
 
-        elif page == 404:
+        elif page == "404":
             template = "public/404.html"
 
         elif page == "error":
             template = "public/error.html"
 
+        elif page == "offline":
+            template = "public/offline.html"
+
         elif page == "logout":
             self.clear_cookie("token")
             # self.clear_cookie("user")

app/classes/web/static_handler.py

@@ -11,6 +11,9 @@ except ModuleNotFoundError as e:
 
 class CustomStaticHandler(tornado.web.StaticFileHandler):
     def validate_absolute_path(self, root: str, absolute_path: str) -> Optional[str]:
+        # This is for the mobile app service worker
+        if self.request.path.find("service-worker.js") != -1:
+            self.set_header("Service-Worker-Allowed", "/")
         try:
             return super().validate_absolute_path(root, absolute_path)
         except tornado.web.HTTPError as error:

app/frontend/static/assets/crafty.webmanifest

@@ -0,0 +1,40 @@
+{
+  "background_color": "#222436",
+  "description": "Crafty Controller is a free and open-source Minecraft launcher and manager that allows users to start and administer Minecraft servers from a user-friendly interface.",
+  "dir": "ltr",
+  "display": "standalone",
+  "name": "Crafty Controller",
+  "orientation": "any",
+  "scope": "/",
+  "short_name": "Crafty",
+  "start_url": "/",
+  "theme_color": "#222436",
+  "categories": ["utilities"],
+  "icons": [
+    {
+      "src": "/static/assets/images/Crafty_4-0_Logo_square.ico",
+      "type": "image/x-icon",
+      "sizes":"128x128"
+    },
+    {
+      "src": "/static/assets/images/Crafty_4-0.png",
+      "type": "image/png",
+      "sizes": "144x144",
+      "purpose": "any"
+    },
+    {
+      "src": "/static/assets/images/crafty-logo-square-1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024",
+      "purpose": "any"
+    },
+    {
+      "src": "/static/assets/images/crafty-logo-square-96.png",
+      "type": "image/png",
+      "sizes": "96x96",
+      "purpose": "any"
+    }
+  ],
+  "lang": "en",
+  "prefer_related_applications": false
+}

app/frontend/static/assets/js/shared/service-worker.js

@@ -0,0 +1,46 @@
+// This is the "Offline page" service worker
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+const CACHE = "crafty-controller";
+
+// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
+const offlineFallbackPage = "/offline";
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('install', async (event) => {
+  event.waitUntil(
+    caches.open(CACHE)
+      .then((cache) => cache.add(offlineFallbackPage))
+  );
+});
+
+if (workbox.navigationPreload.isSupported()) {
+  workbox.navigationPreload.enable();
+}
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        const preloadResp = await event.preloadResponse;
+
+        if (preloadResp) {
+          return preloadResp;
+        }
+        const networkResp = await fetch(event.request);
+        return networkResp;
+      } catch (error) {
+
+        const cache = await caches.open(CACHE);
+        const cachedResp = await cache.match(offlineFallbackPage);
+        return cachedResp;
+      }
+    })());
+  }
+});

app/frontend/templates/base.html

@@ -19,6 +19,16 @@
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/css/crafty.css">
   
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
+  <link rel="shortcut icon" sizes="192x192" href="../static/assets/images/Crafty_4-0.png">
+
+
   <!-- endinject -->
 
   <!-- Plugin css for this page-->
@@ -526,6 +536,14 @@
 
       });
     });
+    $(document).ready(() => {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'})
+          .then(function (registration) {
+            console.log('Service Worker Registered');
+          });
+      }
+    });
   </script>
 
   {% block js %}

app/frontend/templates/blank_base.html

@@ -14,6 +14,13 @@
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/vendors/fontawesome6/css/all.css">
   <link rel="stylesheet" href="/static/assest/css/crafty.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->

app/frontend/templates/panel/denied.html

@@ -12,6 +12,15 @@
   <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
+
+  
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
+
+
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->
@@ -24,7 +33,7 @@
 <style>
   .auth.auth-bg-1 {
     background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
-    url("../../static/assets/images/auth/login-1.jpg");
+    url("/static/assets/images/auth/login_1.jpg");
     background-size: cover;
   }
 </style>
@@ -77,6 +86,21 @@
   <script src="/static/assets/js/shared/settings.js"></script>
   <script src="/static/assets/js/shared/todolist.js"></script>
   <!-- endinject -->
+  <script>
+    $(document).ready(function () {
+      let login_opacity_div = document.getElementById('login_opacity');
+      let opacity = login_opacity_div.getAttribute('data-value');
+      document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')';
+      //Register Service worker for mobile app
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'})
+          .then(function (registration) {
+            console.error('Service Worker Registered');
+          });
+      }
+    });
+
+  </script>
 </body>
 
 </html>

app/frontend/templates/public/404.html

@@ -12,6 +12,14 @@
   <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
+
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->
@@ -24,7 +32,7 @@
 <style>
   .auth.auth-bg-1 {
     background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
-    url("../../static/assets/images/auth/login-1.jpg");
+    url("/static/assets/images/auth/login_1.jpg");
     background-size: cover;
   }
 </style>

app/frontend/templates/public/error.html

@@ -12,6 +12,14 @@
   <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
+
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->
@@ -24,7 +32,7 @@
 <style>
   .auth.auth-bg-1 {
     background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
-    url("../../static/assets/images/auth/login-1.jpg");
+    url("/static/assets/images/auth/login_1.jpg");
     background-size: cover;
   }
 </style>

app/frontend/templates/public/login.html

@@ -12,6 +12,13 @@
   <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <!-- <meta name="apple-mobile-web-app-title" content="Crafty Controller 4"> -->
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->
@@ -24,7 +31,7 @@
 <style>
   .auth.auth-bg-1 {
     background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
-    url("../../static/assets/images/auth/login-1.jpg");
+    url("/static/assets/images/auth/login_1.jpg");
     background-size: cover;
     background-position: center;
   }
@@ -140,7 +147,15 @@
       let login_opacity_div = document.getElementById('login_opacity');
       let opacity = login_opacity_div.getAttribute('data-value');
       document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')';
+      //Register Service worker for mobile app
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'})
+          .then(function (registration) {
+            console.error('Service Worker Registered');
           });
+      }
+    });
+
   </script>
 </body>
 

app/frontend/templates/public/offline.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Crafty Controller</title>
+  <!-- plugins:css -->
+  <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
+  <link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">
+  <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
+  <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
+  <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
+
+  <!-- endinject -->
+  <!-- Plugin css for this page -->
+  <!-- End Plugin css for this page -->
+  <!-- Layout styles -->
+  <link rel="stylesheet" href="/static/assets/css/dark/style.css">
+  <!-- End Layout styles -->
+  <link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg">
+  <link rel="alternate icon" href="/static/assets/images/favicon.png" />
+</head>
+<style>
+  .auth.auth-bg-1 {
+    background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
+    url("/static/assets/images/auth/login_1.jpg");
+    background-size: cover;
+  }
+</style>
+
+<body class="dark-theme">
+  <div class="container-scroller">
+    <div class="container-fluid page-body-wrapper full-page-wrapper">
+      <div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one">
+        <div class="row w-100">
+          <div class="col-lg-4 mx-auto">
+
+            <div class="auto-form-wrapper">
+              <div class="text-center">
+                <img src="/static/assets/images/logo_long.svg"><br /><br />
+                <div class="col-sm-12 grid-margin stretch-card">
+                  <div class="card card-statistics social-card facebook-card card-colored">
+                    <div class="card-body">
+                      <h4 class="platform-name mb-3 mt-4 font-weight-semibold user-name">{{ translate('offline', 'offline', data['lang']) }}</h4>
+                      <h5 class="headline font-weight-medium"></h5>
+                      <p class="mb-2 comment font-weight-light">
+                        {{ translate('offline', 'pleaseConnect', data['lang']) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <!-- content-wrapper ends -->
+    </div>
+    <!-- page-body-wrapper ends -->
+  </div>
+  <!-- container-scroller -->
+  <!-- plugins:js -->
+  <script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
+  <!-- endinject -->
+  <!-- inject:js -->
+  <script src="/static/assets/js/shared/off-canvas.js"></script>
+  <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
+  <script src="/static/assets/js/shared/misc.js"></script>
+  <script src="/static/assets/js/shared/settings.js"></script>
+  <script src="/static/assets/js/shared/todolist.js"></script>
+  <!-- endinject -->
+</body>
+
+</html>

app/frontend/templates/public/status.html

@@ -10,7 +10,7 @@
 <style>
   .auth.auth-bg-1 {
     background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
-    url("../../static/assets/images/auth/login-1.jpg");
+    url("/static/assets/images/auth/login_1.jpg");
     background-size: cover;
   }
 </style>
@@ -89,7 +89,7 @@
 </div>
 <!-- View for Small screen -->
 <div class="row justify-content-center align-items-sm-center">
-  <div class="content-wrapper login-modal d-sm-none d-block">
+  <div class="content-wrapper login-modal d-sm-none d-block"  style="background-color: var(--dropdown-bg);">
     <img src="/static/assets/images/logo_long.png" style='width: 100%;'>
     <hr />
     {% if data['running'] != 0 %}

app/frontend/templates/public_base.html

@@ -14,6 +14,13 @@
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/vendors/fontawesome6/css/all.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Crafty">
+  <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->
@@ -98,7 +105,7 @@
       usingWebSockets = false;
     }
     // {% else %}
-    let usingWebSockets = false;
+    usingWebSockets = false;
     warn('WebSockets are not supported in Crafty if not using the https protocol')
     var webSocket;
 // {% end%}
@@ -106,6 +113,21 @@
   </script>
   {% block js %}
   <!-- Custom js for this page -->
+  <script>
+    $(document).ready(function () {
+      let login_opacity_div = document.getElementById('login_opacity');
+      let opacity = login_opacity_div.getAttribute('data-value');
+      document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')';
+      //Register Service worker for mobile app
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'})
+          .then(function (registration) {
+            console.error('Service Worker Registered');
+          });
+      }
+    });
+
+  </script>
   <!-- End custom js for this page -->
   {% end %}
 

app/translations/en_EN.json

@@ -210,6 +210,10 @@
         "preparingLogs": " Please wait while we prepare your logs... We`ll send a notification when they`re ready. This may take a while for large deployments.",
         "supportLogs": "Support Logs"
     },
+    "offline": {
+        "offline": "Offline",
+        "pleaseConnect": "Please connect to the internet to use Crafty."
+    },
     "panelConfig": {
         "adminControls": "Admin Controls",
         "allowedServers": "Allowed Servers",