☔ Add noscript tag

If the user's browser has JS disabled, we should tell them instead of displaying a non functional UI. As suggested in https://community.octoprint.org/t/i-forgot-my-octoprint-password-how-can-i-reset-it/215/8?u=foosel
foosel · Nov 15, 2019 · 148505023451a4ed067ca8746c5f1c30c64f6c1a · 1485050 · GitIssueBot · Nov 15, 2019
1 parent 6d7721f
commit 148505023451a4ed067ca8746c5f1c30c64f6c1a
Unified Split

Showing with 59 additions and 2 deletions.

+1 −1 src/octoprint/static/css/octoprint.css

+35 −0 src/octoprint/static/less/octoprint.less

+23 −1 src/octoprint/templates/index.jinja2
diff --git a/src/octoprint/static/css/octoprint.css b/src/octoprint/static/css/octoprint.css
diff --git a/src/octoprint/static/less/octoprint.less b/src/octoprint/static/less/octoprint.less
@@ -1604,3 +1604,38 @@ input[type="number"].input-nospin {
   }
 
 }
+
+// noscript
+#page-container-noscript {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  z-index: 12310;
+
+  .wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .outer {
+      display: table;
+      width: 100%;
+      height: 100%;
+
+      .inner {
+        display: table-cell;
+        vertical-align: middle;
+
+        .content {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+}
diff --git a/src/octoprint/templates/index.jinja2 b/src/octoprint/templates/index.jinja2
@@ -17,6 +17,28 @@
         {% include 'initscript.jinja2' %}
     </head>
     <body>
+        <noscript>
+            <style type="text/css">
+                #page-container-main,
+                #page-container-loading,
+                #page-container-needlogin {
+                    display:none;
+                }
+            </style>
+            <div id="page-container-noscript">
+                <div class="wrapper">
+                    <div class="outer">
+                        <div class="inner">
+                            <div class="content">
+                                <h1 class="text-error">{{ _('You don\'t seem to have JavaScript enabled') }}</h1>
+                                {{ _('OctoPrint\'s UI requires JavaScript to work. Please enable JavaScript and reload.') }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </noscript>
+
         <div class="page-container" id="page-container-main" {% if enableLoadAnimation -%}style="display: none"{%- endif %} data-bind="visible: visible">
             <!-- ko allowBindings: false -->
             <div id="navbar" class="navbar navbar-static-top">
@@ -160,7 +182,7 @@
                 <div class="outer">
                     <div class="inner">
                         <div class="content">
-                            <h1 id="page-container-loading-header">Loading OctoPrint's UI, please wait...</h1>
+                            <h1 id="page-container-loading-header">{{ _('Loading OctoPrint\'s UI, please wait...') }}</h1>
                             <i id="page-container-loading-spinner" class="fa fa-spinner fa-spin fa-4x"></i>
                             <p id="page-container-loading-error" style="display: none"></p>
                         </div>