Implement error when reading file

wiki/src/install/inc/js/download.js

@@ -132,14 +132,19 @@ document.addEventListener("DOMContentLoaded", function() {
     hide(document.getElementById("verification-successful"));
     hide(document.getElementById("verification-failed"));
     hide(document.getElementById("verification-failed-again"));
+    hide(document.getElementById("verification-error"));
     show(document.getElementById("verification"));
     toggleContinueLink("skip-verification");
   }
 
   function showVerifyingDownload(filename) {
-    hide(document.getElementById("verify-download-wrapper"));
+    resetVerificationResult();
+    hide(document.getElementById("verify-button"));
     if (filename) {
-      document.getElementById("filename").textContent = filename;
+      var filenames = document.getElementsByClassName("verify-filename");
+      for (let i = 0; i < filenames.length; i++) {
+        filenames[i].textContent = filename;
+      }
     }
     show(document.getElementById("verifying-download"));
     toggleContinueLink("skip-verification");
@@ -152,7 +157,7 @@ document.addEventListener("DOMContentLoaded", function() {
   }
 
   function showVerificationResult(result) {
-    hide(document.getElementById("verify-download-wrapper"));
+    hide(document.getElementById("verify-button"));
     resetVerificationResult();
     hitCounter(result);
     if (result === "successful") {
@@ -169,6 +174,11 @@ document.addEventListener("DOMContentLoaded", function() {
     else if (result === "failed-again") {
       show(document.getElementById("verification-failed-again"));
     }
+    else if (result === "error") {
+      hide(document.getElementById("verifying-download"));
+      show(document.getElementById("verify-button"));
+      show(document.getElementById("verification-error"));
+    }
   }
 
   // Reset the page to its initial state:
@@ -219,16 +229,16 @@ document.addEventListener("DOMContentLoaded", function() {
   }
 
   // Trigger verification when file is chosen
-  document.getElementById("verify-download").onchange = function(e) { verifyFile(e, this); }
+  document.getElementById("verify-file").onchange = function(e) { verifyFile(e, this); }
 
   function verifyFile(e, elm) {
     file = elm.files[0]
-    // XXX: Cannot open file
     showVerifyingDownload(file.name);
     showVerificationProgress(50);
-    setTimeout(function(){ showVerificationResult("failed"); }, 2500);
-    setTimeout(function(){ showVerificationResult("failed-again"); }, 5000);
-    setTimeout(function(){ showVerificationResult("successful"); }, 7500);
+    setTimeout(function(){ showVerificationResult("error"); }, 2500);
+    setTimeout(function(){ showVerificationResult("failed"); }, 5000);
+    setTimeout(function(){ showVerificationResult("failed-again"); }, 7500);
+    setTimeout(function(){ showVerificationResult("successful"); }, 10000);
   }
 
   // To debug the display of the different states:
@@ -236,5 +246,6 @@ document.addEventListener("DOMContentLoaded", function() {
   // showVerificationResult("failed");
   // showVerificationResult("failed-again");
   // showVerificationProgress('50');
+  // showVerificationResult("error");
 
 });

wiki/src/install/inc/steps/download.inline.html

@@ -72,12 +72,14 @@ were solved, and known issues that have already been identified.</p>
            please allow all this page:</p>
         [[!img screenshots/allow_js.png link="no"]]
       </div>
-      <label id="verify-download-wrapper" class="button block">
-        Verify Tails <span class="remove-extra-space">&nbsp;[[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]]</span>&hellip;
-        <input id="verify-download" type="file"/>
-      </label>
+      <div id="verify-button" class="block">
+        <label class="button">
+          Verify Tails <span class="remove-extra-space">&nbsp;[[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]]</span>&hellip;
+          <input id="verify-file" type="file"/>
+        </label>
+      </div>
       <div id="verifying-download" class="block">
-        <p>Verifying <span id="filename">$FILENAME</span>&hellip;</p>
+        <p>Verifying <em><span class="verify-filename">$FILENAME</span></em>&hellip;</p>
         <div class="progress">
           <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
@@ -127,6 +129,10 @@ were solved, and known issues that have already been identified.</p>
         </div>
         <p>Please try to download again from a different place or a different computer&hellip;</p>
       </div>
+      <div id="verification-error" class="block">
+        <p>[[!img lib/cross.png class="icon" link="no" alt=""]]<b>Error reading file <em><span class="verify-filename">$FILENAME</span></em>.</b></p>
+        <p>Make sure that <em><span class="verify-filename">$FILENAME</span></em> is readable by your browser. In Tails, copy it to the <em>Tor Browser</em> folder.</p>
+      </div>
     </div>
   </div>
 

wiki/src/install/inc/stylesheets/download.css

@@ -20,6 +20,7 @@ h1 {
 #verification-successful,
 #verification-failed,
 #verification-failed-again,
+#verification-error,
 #skip-download,
 #extension-version,
 #tails-version,
@@ -27,10 +28,14 @@ h1 {
   display: none;
 }
 
-#verify-download-wrapper input {
+#verify-button input {
   display: none;
 }
 
+#verification-error {
+  margin-top: 1.5em;
+}
+
 /* Layout */
 
 #content {