Add "JS not working" error message

It is:
* hidden by JS code executed as early as possible
* not hidden by noscript tags, so that it is *not* shown when JavaScript is just no activated

Fix https://github.com/PrivateBin/PrivateBin/issues/103
This commit is contained in:
rugk 2016-10-25 21:13:43 +02:00
parent 5d822af5b1
commit 7bbb273c1c
No known key found for this signature in database
GPG key ID: 05D40A636AFAB34D
9 changed files with 36 additions and 14 deletions

15
css/noscript.css Normal file
View file

@ -0,0 +1,15 @@
/**
* PrivateBin
*
* CSS file only loaded when no JavaScript available.
*
* @link https://github.com/PrivateBin/PrivateBin
* @copyright 2012 Sébastien SAUVAGE (sebsauvage.net)
* @license https://www.opensource.org/licenses/zlib-license.php The zlib/libpng License
* @version 1.0
*/
/* When there is no script at all other */
.noscript-hide {
display: none;
}

View file

@ -1,7 +1,7 @@
/**
* PrivateBin
*
* a zero-knowledge paste bin
* Main CSS file.
*
* @link https://github.com/PrivateBin/PrivateBin
* @copyright 2012 Sébastien SAUVAGE (sebsauvage.net)
@ -161,7 +161,7 @@ button, .button {
background-clip: padding-box;
}
button:hover {
button:hover {
background-image: linear-gradient(bottom, #424b57 0%, #61707e 100%);
background-image: -o-linear-gradient(bottom, #424b57 0%, #61707e 100%);
background-image: -moz-linear-gradient(bottom, #424b57 0%, #61707e 100%);
@ -193,8 +193,8 @@ button img {
top: 2px;
}
.button {
background-color: #414d5a;
.button {
background-color: #414d5a;
padding: 6px 8px;
margin: 0 5px 0 0;
position: relative;
@ -218,7 +218,7 @@ button img {
}
#remainingtime, #password {
color: #94a3b4;
color: #94a3b4;
display: inline;
font-size: 0.85em;
}
@ -298,7 +298,7 @@ h4.title {
font-size: 1.2em;
color: #94a3b4;
font-style: italic;
font-weight: bold;
font-weight: bold;
position: relative;
margin-left: 30px;
}
@ -356,7 +356,7 @@ h4.title {
background-clip: padding-box;
}
.comment button:hover {
.comment button:hover {
background-image: linear-gradient(bottom, #ccd 0, #fff 100%);
background-image: -o-linear-gradient(bottom, #ccd 0, #fff 100%);
background-image: -moz-linear-gradient(bottom, #ccd 0, #fff 100%);

View file

@ -20,6 +20,11 @@
/** global: showdown */
/** global: sjcl */
$(document).ready(function() {
// hide "no javascript" message as early as possible
$('#noscript').hide();
})
// Immediately start random number generator collector.
sjcl.random.startCollectors();

View file

@ -52,7 +52,7 @@ if ($MARKDOWN):
<?php
endif;
?>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tnG2Ai1USFqZM26ChISDXXq5YCpc4ae760JPSoN1wFLcu8wgu1VuOeZztWme9naCTgWRpOHSlg2PnvQbgoCjIg==" crossorigin="anonymous"></script>
<!--[if lt IE 10]>
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
<![endif]-->

View file

@ -52,7 +52,7 @@ if ($MARKDOWN):
<?php
endif;
?>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tnG2Ai1USFqZM26ChISDXXq5YCpc4ae760JPSoN1wFLcu8wgu1VuOeZztWme9naCTgWRpOHSlg2PnvQbgoCjIg==" crossorigin="anonymous"></script>
<!--[if lt IE 10]>
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
<![endif]-->

View file

@ -52,7 +52,7 @@ if ($MARKDOWN):
<?php
endif;
?>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tnG2Ai1USFqZM26ChISDXXq5YCpc4ae760JPSoN1wFLcu8wgu1VuOeZztWme9naCTgWRpOHSlg2PnvQbgoCjIg==" crossorigin="anonymous"></script>
<!--[if lt IE 10]>
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
<![endif]-->

View file

@ -52,7 +52,7 @@ if ($MARKDOWN):
<?php
endif;
?>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tnG2Ai1USFqZM26ChISDXXq5YCpc4ae760JPSoN1wFLcu8wgu1VuOeZztWme9naCTgWRpOHSlg2PnvQbgoCjIg==" crossorigin="anonymous"></script>
<!--[if lt IE 10]>
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
<![endif]-->

View file

@ -52,7 +52,7 @@ if ($MARKDOWN):
<?php
endif;
?>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tnG2Ai1USFqZM26ChISDXXq5YCpc4ae760JPSoN1wFLcu8wgu1VuOeZztWme9naCTgWRpOHSlg2PnvQbgoCjIg==" crossorigin="anonymous"></script>
<!--[if lt IE 10]>
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
<![endif]-->
@ -279,7 +279,9 @@ if (!strlen($ERROR)):
?>hidden <?php
endif;
?>alert alert-danger"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> <?php echo htmlspecialchars($ERROR); ?></div>
<noscript><div id="noscript" role="alert" class="nonworking alert alert-warning"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <?php echo I18n::_('Javascript is required for PrivateBin to work.<br />Sorry for the inconvenience.'); ?></div></noscript>
<noscript><div id="noscript" role="alert" class="nonworking alert alert-warning"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <?php echo I18n::_('JavaScript is required for PrivateBin to work.<br />Sorry for the inconvenience.'); ?></div></noscript>
<div id="noscript" role="alert" class="nonworking alert alert-warning noscript-hide"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <?php echo I18n::_('The required JavaScripts for PrivateBin could not be loaded. This might <br />Please see <a href="">this FAQ for more information</a>.'); ?></div>
<noscript><link type="text/css" rel="stylesheet" href="css/noscript.css" /></noscript>
<div id="oldienotice" role="alert" class="hidden nonworking alert alert-danger"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> <?php echo I18n::_('PrivateBin requires a modern browser to work.'); ?></div>
<div id="ienotice" role="alert" class="hidden alert alert-warning"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> <?php echo I18n::_('Still using Internet Explorer? Do yourself a favor, switch to a modern browser:'), PHP_EOL; ?>
<a href="https://www.mozilla.org/firefox/">Firefox</a>,

View file

@ -47,7 +47,7 @@ if ($MARKDOWN):
<?php
endif;
?>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tnG2Ai1USFqZM26ChISDXXq5YCpc4ae760JPSoN1wFLcu8wgu1VuOeZztWme9naCTgWRpOHSlg2PnvQbgoCjIg==" crossorigin="anonymous"></script>
<!--[if lt IE 10]>
<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
<![endif]-->