Add visual privacy safeguard for private data

This commit is contained in:
Ian Coleman
2018-05-29 10:56:47 +10:00
parent 6f7fa3539e
commit 0b6e351dce
3 changed files with 40 additions and 15 deletions

View File

@@ -103,3 +103,6 @@ body {
overflow-x: scroll;
font-family: monospace;
}
.visual-privacy .private-data {
display: none;
}

View File

@@ -69,7 +69,7 @@
<div class="form-group">
<label for="entropy" class="col-sm-2 control-label">Entropy</label>
<div class="col-sm-7">
<textarea id="entropy" rows="2" class="entropy form-control" placeholder="Accepts either binary, base 6, 6-sided dice, base 10, hexadecimal or cards"></textarea>
<textarea id="entropy" rows="2" class="entropy private-data form-control" placeholder="Accepts either binary, base 6, 6-sided dice, base 10, hexadecimal or cards"></textarea>
<div class="row filter-warning text-danger hidden">
<p class="col-sm-12">
<strong>
@@ -96,13 +96,13 @@
<div class="bits col-sm-3 form-control-static"></div>
</div>
<label class="col-sm-3 control-label">Filtered Entropy</label>
<div class="filtered col-sm-9 form-control-static"></div>
<div class="filtered private-data col-sm-9 form-control-static"></div>
<label class="col-sm-3 control-label">Raw Binary</label>
<div class="binary col-sm-9 form-control-static"></div>
<div class="binary private-data col-sm-9 form-control-static"></div>
<label class="col-sm-3 control-label">Binary Checksum</label>
<div class="checksum col-sm-9 form-control-static">&nbsp;</div>
<div class="checksum private-data col-sm-9 form-control-static">&nbsp;</div>
<label class="col-sm-3 control-label">Word Indexes</label>
<div class="word-indexes col-sm-9 form-control-static">&nbsp;</div>
<div class="word-indexes private-data col-sm-9 form-control-static">&nbsp;</div>
<label class="col-sm-3 control-label">Mnemonic Length</label>
<div class="col-sm-9">
<select class="mnemonic-length form-control">
@@ -142,6 +142,15 @@
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-10 checkbox">
<label>
<input type="checkbox" class="privacy-screen-toggle">
<span>Hide all private info</span>
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Mnemonic Language</label>
<div class="col-sm-10 languages">
@@ -160,19 +169,19 @@
<div class="form-group">
<label for="phrase" class="col-sm-2 control-label">BIP39 Mnemonic</label>
<div class="col-sm-10">
<textarea id="phrase" class="phrase form-control" data-show-qr></textarea>
<textarea id="phrase" class="phrase private-data form-control" data-show-qr></textarea>
</div>
</div>
<div class="form-group">
<label for="passphrase" class="col-sm-2 control-label">BIP39 Passphrase (optional)</label>
<div class="col-sm-10">
<textarea id="passphrase" class="passphrase form-control"></textarea>
<textarea id="passphrase" class="passphrase private-data form-control"></textarea>
</div>
</div>
<div class="form-group">
<label for="seed" class="col-sm-2 control-label">BIP39 Seed</label>
<div class="col-sm-10">
<textarea id="seed" class="seed form-control" readonly="readonly" data-show-qr></textarea>
<textarea id="seed" class="seed private-data form-control" readonly="readonly" data-show-qr></textarea>
</div>
</div>
<div class="form-group">
@@ -186,7 +195,7 @@
<div class="form-group">
<label for="root-key" class="col-sm-2 control-label">BIP32 Root Key</label>
<div class="col-sm-10">
<textarea id="root-key" class="root-key form-control" data-show-qr></textarea>
<textarea id="root-key" class="root-key private-data form-control" data-show-qr></textarea>
</div>
</div>
<div class="form-group litecoin-ltub-container hidden">
@@ -279,7 +288,7 @@
<span>Account Extended Private Key</span>
</label>
<div class="col-sm-10">
<textarea id="account-xprv" type="text" class="account-xprv form-control" readonly data-show-qr></textarea>
<textarea id="account-xprv" type="text" class="account-xprv private-data form-control" readonly data-show-qr></textarea>
</div>
</div>
<div class="form-group">
@@ -439,7 +448,7 @@
<span>Account Extended Private Key</span>
</label>
<div class="col-sm-10">
<textarea id="account-xprv" type="text" class="account-xprv form-control" readonly data-show-qr></textarea>
<textarea id="account-xprv" type="text" class="account-xprv private-data form-control" readonly data-show-qr></textarea>
</div>
</div>
<div class="form-group">
@@ -566,7 +575,7 @@
<span>Account Extended Private Key</span>
</label>
<div class="col-sm-10">
<textarea id="account-xprv" type="text" class="account-xprv form-control" readonly data-show-qr></textarea>
<textarea id="account-xprv" type="text" class="account-xprv private-data form-control" readonly data-show-qr></textarea>
</div>
</div>
<div class="form-group">
@@ -598,7 +607,7 @@
<div class="form-group">
<label for="extended-priv-key" class="col-sm-2 control-label">BIP32 Extended Private Key</label>
<div class="col-sm-10">
<textarea id="extended-priv-key" class="extended-priv-key form-control" readonly="readonly" data-show-qr></textarea>
<textarea id="extended-priv-key" class="extended-priv-key private-data form-control" readonly="readonly" data-show-qr></textarea>
</div>
</div>
<div class="form-group">
@@ -644,7 +653,7 @@
<input type="checkbox" class="use-bip38">
<span>Encrypt private keys using BIP38 and this password:</span>
</label>
<input class="bip38-password">
<input class="bip38-password private-data">
<span>Enabling BIP38 means each key will take several minutes to generate.</span>
</div>
</div>
@@ -909,7 +918,7 @@
<td class="index"><span></span></td>
<td class="address"><span data-show-qr></span></td>
<td class="pubkey"><span data-show-qr></span></td>
<td class="privkey"><span data-show-qr></span></td>
<td class="privkey private-data"><span data-show-qr></span></td>
</tr>
</script>
<script src="js/polyfill.es6.js"></script>

View File

@@ -23,6 +23,7 @@
var generationProcesses = [];
var DOM = {};
DOM.privacyScreenToggle = $(".privacy-screen-toggle");
DOM.network = $(".network");
DOM.bip32Client = $("#bip32-client");
DOM.phraseNetwork = $("#network-phrase");
@@ -118,6 +119,7 @@
function init() {
// Events
DOM.privacyScreenToggle.on("change", privacyScreenToggled);
DOM.generatedStrength.on("change", generatedStrengthChanged);
DOM.network.on("change", networkChanged);
DOM.bip32Client.on("change", bip32ClientChanged);
@@ -447,6 +449,17 @@
$("td.privkey span").toggleClass("invisible");
}
function privacyScreenToggled() {
// private-data contains elements added to DOM at runtime
// so catch all by adding visual privacy class to the root of the DOM
if (DOM.privacyScreenToggle.prop("checked")) {
$("body").addClass("visual-privacy");
}
else {
$("body").removeClass("visual-privacy");
}
}
// Private methods
function generateRandomPhrase() {