From 161f9ae02171cde74c84a760b2269a2f7c87232c Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Mon, 26 Nov 2018 22:31:48 -0500
Subject: [PATCH] Add warning for ancient browsers

---
 src/app.scss   |  1 +
 src/index.html |  8 +++++---
 src/ui.js      | 25 +++++++++++++++----------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 0a05c9c..cd9adac 100644
--- a/src/app.scss
+++ b/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";
diff --git a/src/index.html b/src/index.html
index 0570926..61e364c 100644
--- a/src/index.html
+++ b/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">
diff --git a/src/ui.js b/src/ui.js
index 0a1022d..58cd350 100644
--- a/src/ui.js
+++ b/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)
   }
 
-  $options.find('select, input').change(updateBitMeter)
-  $options.find('input[type=nubmer]').on('input', updateBitMeter)
-  updateBitMeter()
+  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()
+  }
 })