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

Restructure page/form layout in preparation for DAT generation

parent de3f5fb6
......@@ -21,7 +21,7 @@ function to_hex(input) {
}
// HTML elements.
const passphraseForm = document.getElementById('passphraseForm')
const setupForm = document.getElementById('setupForm')
const indeterminateProgressIndicator = document.getElementById('indeterminateProgressIndicator')
const publicSigningKeyTextField = document.getElementById('publicSigningKey')
const privateSigningKeyTextArea = document.getElementById('privateSigningKey')
......@@ -30,7 +30,7 @@ const privateEncryptionKeyTextField = document.getElementById('privateEncryption
function generatePassphrase () {
const passphrase = generateEFFDicewarePassphrase.entropy(100)
passphraseForm.elements.passphrase.value = passphrase.join(' ')
setupForm.elements.passphrase.value = passphrase.join(' ')
generateKeys()
}
......@@ -42,7 +42,7 @@ function hideProgressIndicator() {
indeterminateProgressIndicator.style.opacity = 0
}
function clearOutputForm() {
function clearOutputFields() {
publicSigningKeyTextField.value = ''
privateSigningKeyTextArea.value = ''
publicEncryptionKeyTextField.value = ''
......@@ -50,10 +50,10 @@ function clearOutputForm() {
}
function generateKeys() {
const passphrase = passphraseForm.elements.passphrase.value
const domain = passphraseForm.elements.domain.value
const passphrase = setupForm.elements.passphrase.value
const domain = setupForm.elements.domain.value
clearOutputForm()
clearOutputFields()
showProgressIndicator()
session25519(domain, passphrase, (error, keys) => {
......@@ -79,7 +79,7 @@ document.addEventListener('DOMContentLoaded', () => {
generatePassphrase()
// Update the passphrase (and keys) when the change button is pressed.
passphraseForm.addEventListener('submit', (event) => {
setupForm.addEventListener('submit', (event) => {
generatePassphrase()
event.preventDefault()
})
......
......@@ -10,34 +10,41 @@
<body>
<h1>Hypha Spike: DAT 1</h1>
<form id='passphraseForm'>
<div>
<label for='domain'>Domain</label>
<input type='text' id='domain' value='ar.al' readonly>
</div>
<div>
<label>Passphrase:</label>
<input type='text' id='passphrase' readonly>
<button id='change' type='submit'>Change</button>
</div>
</form>
<!-- Courtesy: http://tobiasahlin.com/spinkit/ -->
<div id='indeterminateProgressIndicator' class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<form id='setupForm'>
<form id='outputForm'>
<fieldset>
<legend>Public details</legend>
<div>
<label for='publicSigningKey'>Your hyphalink:</label>
<input type='text' id='publicSigningKey'>
<label for='domain'>Domain name:</label>
<input type='text' id='domain' value='ar.al' readonly>
</div>
<div>
<label for='publicSigningKey'>Hyphalink:</label>
<input type='text' id='publicSigningKey'>
<!-- Courtesy: http://tobiasahlin.com/spinkit/ -->
<div id='indeterminateProgressIndicator' class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<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>
<h3>Notes</h3>
<p>Your domain name and <em>hyphalink</em> are two ways for other people to find your Hypha. The difference is that your hyphalink is decentralised and resilient to censorship. If your domain registrar confiscates or blocks your domain, people will still be able to reach your Hypha as long as there is at least one replica of it on the Internet.</p>
<p>Your passphrase is randomly chosen for you using <a href='https://www.eff.org/dice'>a method called diceware</a> that would take the most sophisticated computers today hundreds of millions of years to crack<sup>1</sup>. Please save this passphrase in a password manager like <a href='https://www.passwordstore.org/'>pass</a> or <a href='https://1password.com/'>1password</a>.</p>
<p><em>1: The passphrase selection process has 100 bits of entropy.</em></p>
</fieldset>
<fieldset>
......@@ -56,13 +63,14 @@
<label for='privateEncryptionKey'>Private encryption key:</label>
<input type='text' id='privateEncryptionKey'>
</div>
<h3>Notes</h3>
<p>The generated keys are Ed25519 (signing) and Curve25519 (encryption). The <em>hyphalink</em> is the public signing key.</em></p>
</fieldset>
</form>
<footer>
<p>The passphrase generation process has 100 bits of entropy and would take ~ a few hundred million years to brute force with government-level resources.</p>
<p>The generated keys are Ed25519 (signing) and Curve25519 (encryption).</p>
</footer>
</form>
<script src='bundle.js'></script>
</body>
......
......@@ -38,12 +38,24 @@ legend {
width: 100%;
}
form div {
fieldset > div {
display: grid;
grid-template-columns: 200px 1fr 100px;
border: 0;
padding: 0;
margin: 0;
margin-bottom: 0.25em;
}
form h3 {
margin-top: 1.5em;
margin-bottom: 0;
padding-left: 200px;
}
form p {
padding-left: 200px;
padding-right: 100px;
font-size: 0.9em;
line-height: 1.5;
}
input, textarea {
......@@ -58,7 +70,7 @@ footer {
border-top: 1px solid black;
}
#outputForm {
/* #outputForm {
overflow: auto;
}
......@@ -76,7 +88,7 @@ footer {
height: 4em;
background-color: white;
color: black;
}
} */
/* Spinkit CSS indeterminate progress indicator */
/* http://tobiasahlin.com/spinkit/ */
......@@ -85,8 +97,6 @@ footer {
height: 40px;
text-align: center;
font-size: 10px;
margin-top: 2em;
margin-bottom: 2em;
}
.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