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

css/noscript.css

@@ -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;
+}

css/privatebin.css

@@ -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%);

js/privatebin.js

@@ -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();
 

tpl/bootstrap-compact.php

@@ -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]-->

tpl/bootstrap-dark-page.php

@@ -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]-->

tpl/bootstrap-dark.php

@@ -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]-->

tpl/bootstrap-page.php

@@ -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]-->

tpl/bootstrap.php

@@ -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>,

tpl/page.php

@@ -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]-->