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() + } })