Add warning for ancient browsers

src/app.scss

@@ -6,6 +6,7 @@
 @import "~bootstrap/scss/type";
 @import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/images";
+@import "~bootstrap/scss/alert";
 @import "~bootstrap/scss/buttons";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/custom-forms";

src/index.html

@@ -30,6 +30,10 @@
 
 <div class="container" id="generator">
   <div class="jumbotron py-4">
+    <div class="alert alert-danger" id="too-old">
+      ${require('octicons').alert.toSVG({ height: 24 })}
+      Your browser is too old: it does not support the necessary APIs for this web application.
+    </div>
     <p class="lead">This is a truly secure password generator that generates easy-to-remember passwords.</p>
     <hr class="my-4">
     <div class="input-group mb-3">
@@ -44,9 +48,7 @@
     </div>
 
     <div class="progress my-3" id="password-bits">
-      <div class="progress-bar" role="progressbar" style="width: 44%"
-           aria-valuenow="44" aria-valuemin="0" aria-valuemax="100">44 bits
-      </div>
+      <div class="progress-bar" role="progressbar" aria-valuemin="0"></div>
     </div>
 
     <form id="options-form">

src/ui.js

@@ -7,13 +7,6 @@ $(() => {
   const $options = $('#options-form')
   const $output = $('#generated-password')
   const $bits = $('#password-bits').find('div')
-
-  $('#run-generator').click(() => {
-    const options = $options.serializeObject()
-    $output.val(generate(options))
-    return false
-  })
-
   const classes = 'bg-danger bg-warning bg-info bg-success'
 
   function bitClass (bits) {
@@ -42,9 +35,21 @@ $(() => {
       .addClass(bitClass(bits))
       .text(`${bitRound(bits)} bits`)
       .css('width', `${bits / maxBits * 100}%`)
+      .attr('aria-valuenow', bits)
+      .attr('aria-valuemax', maxBits)
   }
 
+  if (window.crypto && window.crypto.getRandomValues) {
+    $('#too-old').hide()
+
+    $('#run-generator').click(() => {
+      const options = $options.serializeObject()
+      $output.val(generate(options))
+      return false
+    })
+
     $options.find('select, input').change(updateBitMeter)
     $options.find('input[type=nubmer]').on('input', updateBitMeter)
     updateBitMeter()
+  }
 })