octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2025-01-03 07:12:27 +00:00
Code Issues Packages Projects Releases 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 17:15:22 +09:00 committed by GitHub
parent 1f1729ba43
commit 0fb7cc186c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 727 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gui/default/assets/css/overrides.css
View File

@ -21,7 +21,7 @@ ul+h5 {
margin-top: 1.5em;
}
#content {
.content {
margin-bottom: 50px;
}

39
gui/default/index.html
View File

@ -7,7 +7,7 @@
// 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>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@ -29,6 +29,40 @@
</head>
<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>
<div ng-if="version.isBeta" ng-include="'syncthing/development/logbar.html'"></div>
<!-- Top bar -->
@ -90,7 +124,7 @@
</div>
</nav>
<div class="container" id="content">
<div class="container content">
<!-- Panel: Open, no auth -->
@ -809,6 +843,7 @@
</div> <!-- /row -->
</div> <!-- /container -->
</div> <!-- /ng-cloak -->
<!-- Bottom bar -->