felixfoertsch/syncthing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

gui: Add warning when JavaScript is disabled in Web browser (fixes #7099) (#7102)

Browse Source 
When using a Web browser with JavaScript either disabled or unavailable,
show a warning to let the user know that the Web GUI requires JS in
order to operate.

To achieve this, add a <div> that wraps both the navbar and the main
content, and then move the CSS class ng-cloak from the <html> element to
that <div>. This way, only the JavaScript-dependent part is hidden when
JS is unavailable, and not the whole website, as it is the case right
now. Then, add a <noscript> element right at the start of the <body>
element, so that the warning is also shown right away in text-based Web
browsers. The <noscript> element includes a stripped down version of the
navbar showing only the Syncthing logo, and then a container with the
warning itself. Lastly, leave the footer untouched and always visible,
because it does not rely on JavaScript at all.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
Co-authored-by: Jakob Borg <jakob@kastelo.net>
This commit is contained in:
Tomasz Wilczyński
2020-11-09 09:15:22 +01:00
committed by GitHub
co-authored by Jakob Borg
parent 1f1729ba43
commit 0fb7cc186c
2 changed files with 727 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/default/assets/css/overrides.css
+1 -1
View File
@@ -21,7 +21,7 @@ ul+h5 {
margin-top: 1.5em; margin-top: 1.5em;
} }
#content { .content {
margin-bottom: 50px; margin-bottom: 50px;
} }
gui/default/index.html
+37 -2
View File
@@ -7,7 +7,7 @@
// You can obtain one at https://mozilla.org/MPL/2.0/. // You can obtain one at https://mozilla.org/MPL/2.0/.
--> -->
<html lang="en" ng-app="syncthing" ng-controller="SyncthingController" class="ng-cloak"> <html lang="en" ng-app="syncthing" ng-controller="SyncthingController">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@@ -29,6 +29,40 @@
</head> </head>
<body> <body>
<noscript>
<nav class="navbar navbar-top navbar-default" role="navigation">
<div class="container">
<span class="navbar-brand" aria-hidden="true">
<img class="logo hidden-xs" src="assets/img/logo-horizontal.svg" height="32" width="117" alt=""/>
<img class="logo hidden visible-xs" src="assets/img/favicon-default.png" height="32" alt=""/>
</span>
</div>
</nav>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fas fa-exclamation-circle"></span>
</div>
<span translate>Warning!</span>
</h3>
</div>
<div class="panel-body">
<p>
The Syncthing admin interface requires JavaScript. Please enable JavaScript in your web browser and try again.
</p>
</div>
</div>
</div>
</div>
</div>
</noscript>
<div class="ng-cloak">
<script type="text/javascript" src="syncthing/development/logbar.js"></script> <script type="text/javascript" src="syncthing/development/logbar.js"></script>
<div ng-if="version.isBeta" ng-include="'syncthing/development/logbar.html'"></div> <div ng-if="version.isBeta" ng-include="'syncthing/development/logbar.html'"></div>
<!-- Top bar --> <!-- Top bar -->
@@ -90,7 +124,7 @@
</div> </div>
</nav> </nav>
<div class="container" id="content"> <div class="container content">
<!-- Panel: Open, no auth --> <!-- Panel: Open, no auth -->
@@ -809,6 +843,7 @@
</div> <!-- /row --> </div> <!-- /row -->
</div> <!-- /container --> </div> <!-- /container -->
</div> <!-- /ng-cloak -->
<!-- Bottom bar --> <!-- Bottom bar -->