Ind.ie is now Small Technology Foundation.
Commit e9312e55 authored by Aral Balkan's avatar Aral Balkan

Add progress indicator to the Change button

parent ca6ca5aa
......@@ -22,6 +22,7 @@ function to_hex(input) {
// HTML elements.
const setupForm = document.getElementById('setupForm')
const changeButton = document.getElementById('change')
const indeterminateProgressIndicator = document.getElementById('indeterminateProgressIndicator')
const publicSigningKeyTextField = document.getElementById('publicSigningKey')
const privateSigningKeyTextArea = document.getElementById('privateSigningKey')
......@@ -35,11 +36,13 @@ function generatePassphrase () {
}
function showProgressIndicator() {
indeterminateProgressIndicator.style.opacity = 100
changeButton.style.display = 'none';
indeterminateProgressIndicator.style.display = 'block';
}
function hideProgressIndicator() {
indeterminateProgressIndicator.style.opacity = 0
changeButton.style.display = 'block';
indeterminateProgressIndicator.style.display = 'none';
}
function clearOutputFields() {
......@@ -73,7 +76,7 @@ function generateKeys() {
document.addEventListener('DOMContentLoaded', () => {
// Hide the progress indicator
indeterminateProgressIndicator.style.opacity = 0
hideProgressIndicator()
// Generate a passphrase at start
generatePassphrase()
......
......@@ -21,8 +21,13 @@
<div>
<label for='publicSigningKey'>Hyphalink:</label>
<input type='text' id='publicSigningKey'>
</div>
<div>
<label>Passphrase:</label>
<input type='text' id='passphrase' readonly>
<div style='position: relative;'>
<!-- Courtesy: http://tobiasahlin.com/spinkit/ -->
<button id='change' type='submit'>Change</button>
<div id='indeterminateProgressIndicator' class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
......@@ -30,11 +35,7 @@
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div>
<label>Passphrase:</label>
<input type='text' id='passphrase' readonly>
<button id='change' type='submit'>Change</button>
</div>
</div>
<h3>Notes</h3>
......
......@@ -70,33 +70,27 @@ footer {
border-top: 1px solid black;
}
/* #outputForm {
overflow: auto;
#change {
position: absolute;
top: 0;
left: 0.5em;
height: 26px;
width: 64px;
}
#outputForm label {
display: block;
margin-bottom: 0.75em;
}
#outputForm input, textarea {
width: 100%;
margin-bottom: 1.5em;
}
#outputForm textArea {
height: 4em;
background-color: white;
color: black;
} */
/* Spinkit CSS indeterminate progress indicator */
/* http://tobiasahlin.com/spinkit/ */
.spinner {
height: 40px;
--height: 26px;
--width: 64px;
height: var(--height);
width: var(--width);
text-align: center;
font-size: 10px;
position: absolute;
top: calc((100% - var(--height))/2);
left: calc((100% - var(--width))/2);
}
.spinner > div {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment