quantum/correcthorsebatterystaple
1
0
Fork 0
mirror of https://github.com/quantum5/correcthorsebatterystaple.git synced 2025-04-24 10:11:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add warning for ancient browsers

Browse source
This commit is contained in:
Quantum 2018-11-26 22:31:48 -05:00
parent 7c2bcc3f9b
commit 161f9ae021
3 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.scss
View file

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

8
src/index.html
View file

@ -30,6 +30,10 @@
<div class="container" id="generator"> <div class="container" id="generator">
<div class="jumbotron py-4"> <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> <p class="lead">This is a truly secure password generator that generates easy-to-remember passwords.</p>
<hr class="my-4"> <hr class="my-4">
<div class="input-group mb-3"> <div class="input-group mb-3">
@ -44,9 +48,7 @@
</div> </div>
<div class="progress my-3" id="password-bits"> <div class="progress my-3" id="password-bits">
<div class="progress-bar" role="progressbar" style="width: 44%" <div class="progress-bar" role="progressbar" aria-valuemin="0"></div>
aria-valuenow="44" aria-valuemin="0" aria-valuemax="100">44 bits
</div>
</div> </div>
<form id="options-form"> <form id="options-form">

25
src/ui.js
View file

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