diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/index.html | 98 | ||||
-rw-r--r-- | src/js/index.js | 43 |
2 files changed, 69 insertions, 72 deletions
diff --git a/src/index.html b/src/index.html index dd49de6..cb4c23d 100644 --- a/src/index.html +++ b/src/index.html | |||
@@ -43,7 +43,7 @@ | |||
43 | .phrase { | 43 | .phrase { |
44 | word-break: keep-all; | 44 | word-break: keep-all; |
45 | } | 45 | } |
46 | .strength { | 46 | .generate-container .strength { |
47 | /* override mobile width from bootstrap */ | 47 | /* override mobile width from bootstrap */ |
48 | width: auto!important; | 48 | width: auto!important; |
49 | display: inline-block; | 49 | display: inline-block; |
@@ -54,6 +54,13 @@ | |||
54 | .monospace { | 54 | .monospace { |
55 | font-family: monospace; | 55 | font-family: monospace; |
56 | } | 56 | } |
57 | .entropy-container .filtered, | ||
58 | .entropy-container .binary { | ||
59 | word-wrap: break-word; | ||
60 | } | ||
61 | .entropy-container li { | ||
62 | padding-bottom: 5px; | ||
63 | } | ||
57 | </style> | 64 | </style> |
58 | </head> | 65 | </head> |
59 | <body> | 66 | <body> |
@@ -95,58 +102,36 @@ | |||
95 | </div> | 102 | </div> |
96 | </div> | 103 | </div> |
97 | <div class="entropy-container hidden"> | 104 | <div class="entropy-container hidden"> |
98 | <div class="form-group"> | 105 | <div class="form-group text-danger"> |
99 | <label for="entropy" class="col-sm-2 control-label">Entropy</label> | 106 | <label class="col-sm-2 control-label">Warning</label> |
100 | <div class="col-sm-6"> | 107 | <div class="col-sm-10 form-control-static"> |
101 | <textarea id="entropy" rows="6" class="entropy form-control" placeholder="Accepts binary, base 6, 6-sided dice, base 10, hexadecimal, cards"></textarea> | 108 | Entropy is an advanced feature. |
102 | <span class="help-block"> | 109 | Your mnemonic may be insecure if this feature is used incorrectly. |
103 | <div class="text-danger"> | 110 | <a href="#entropy-notes">Read more</a> |
104 | This is an advanced feature. | ||
105 | Your mnemonic may be insecure if this feature is used incorrectly. | ||
106 | <a href="#entropy-notes">Read more</a> | ||
107 | </div> | ||
108 | </span> | ||
109 | </div> | ||
110 | <div class="pull-right col-sm-4"> | ||
111 | <p>Valid entropy values include:</p> | ||
112 | <ul> | ||
113 | <li>Binary: [0-1] eg 101010011</li> | ||
114 | <li>Base 6: [0-5] eg 123434014</li> | ||
115 | <li>Dice: [1-6] eg 62535634</li> | ||
116 | <li>Base 10: [0-9] eg 90834528</li> | ||
117 | <li>Hex: [0-9A-F] eg 4187a8bfd9</li> | ||
118 | <li>Card: [A2-9TJQK][CDHS] eg AHQS9DTC</li> | ||
119 | </ul> | ||
120 | </div> | 111 | </div> |
121 | </div> | 112 | </div> |
122 | <div class="entropy-feedback"> | 113 | <div class="form-group"> |
123 | <div class="form-group"> | 114 | <label for="entropy" class="col-sm-2 control-label">Entropy</label> |
124 | <label class="col-sm-2 control-label">Filtered</label> | 115 | <div class="col-sm-7"> |
125 | <div class="filtered col-sm-10 form-control-static"></div> | 116 | <textarea id="entropy" rows="2" class="entropy form-control" placeholder="Accepts binary, base 6, 6-sided dice, base 10, hexadecimal, cards"></textarea> |
126 | </div> | 117 | <label class="col-sm-3 control-label">Strength</label> |
127 | <div class="form-group"> | 118 | <div class="strength col-sm-3 form-control-static"></div> |
128 | <label class="col-sm-2 control-label">Type</label> | 119 | <label class="col-sm-3 control-label">Event Count</label> |
129 | <div class="type col-sm-10 form-control-static"></div> | 120 | <div class="event-count col-sm-3 form-control-static"></div> |
130 | </div> | 121 | <label class="col-sm-3 control-label">Entropy Type</label> |
131 | <div class="form-group"> | 122 | <div class="type col-sm-3 form-control-static"></div> |
132 | <label class="col-sm-2 control-label">Strength</label> | 123 | <label class="col-sm-3 control-label">Bits Per Event</label> |
133 | <div class="strength col-sm-10 form-control-static"></div> | 124 | <div class="bits-per-event col-sm-3 form-control-static"></div> |
134 | </div> | 125 | <label class="col-sm-3 control-label">Word Count</label> |
135 | <div class="form-group"> | 126 | <div class="word-count col-sm-3 form-control-static"></div> |
136 | <label class="col-sm-2 control-label">Event Count</label> | 127 | <label class="col-sm-3 control-label">Total Bits</label> |
137 | <div class="event-count col-sm-10 form-control-static"></div> | 128 | <div class="bits col-sm-3 form-control-static"></div> |
138 | </div> | 129 | <label class="col-sm-3 control-label">Filtered Entropy</label> |
139 | <div class="form-group"> | 130 | <div class="filtered col-sm-9 form-control-static"></div> |
140 | <label class="col-sm-2 control-label">Bits Per Event</label> | 131 | <label class="col-sm-3 control-label">Raw Binary</label> |
141 | <div class="bits-per-event col-sm-10 form-control-static"></div> | 132 | <div class="binary col-sm-9 form-control-static"></div> |
142 | </div> | 133 | <label class="col-sm-3 control-label">Mnemonic Length</label> |
143 | <div class="form-group"> | 134 | <div class="col-sm-9"> |
144 | <label class="col-sm-2 control-label">Bits</label> | ||
145 | <div class="bits col-sm-10 form-control-static"></div> | ||
146 | </div> | ||
147 | <div class="form-group"> | ||
148 | <label class="col-sm-2 control-label">Mnemonic Length</label> | ||
149 | <div class="col-sm-10"> | ||
150 | <select class="mnemonic-length form-control"> | 135 | <select class="mnemonic-length form-control"> |
151 | <option value="raw">From entropy length (3 words per 32 bits)</option> | 136 | <option value="raw">From entropy length (3 words per 32 bits)</option> |
152 | <option value="12">12 Words</option> | 137 | <option value="12">12 Words</option> |
@@ -157,6 +142,17 @@ | |||
157 | </select> | 142 | </select> |
158 | </div> | 143 | </div> |
159 | </div> | 144 | </div> |
145 | <div class="col-sm-3"> | ||
146 | <p>Valid entropy values include:</p> | ||
147 | <ul> | ||
148 | <li><strong>Binary</strong> [0-1]<br>101010011</li> | ||
149 | <li><strong>Base 6</strong> [0-5]<br>123434014</li> | ||
150 | <li><strong>Dice</strong> [1-6]<br>62535634</li> | ||
151 | <li><strong>Base 10</strong> [0-9]<br>90834528</li> | ||
152 | <li><strong>Hex</strong> [0-9A-F]<br>4187a8bfd9</li> | ||
153 | <li><strong>Card</strong> [A2-9TJQK][CDHS]<br>ahqs9dtc</li> | ||
154 | </ul> | ||
155 | </div> | ||
160 | </div> | 156 | </div> |
161 | </div> | 157 | </div> |
162 | <div class="form-group"> | 158 | <div class="form-group"> |
diff --git a/src/js/index.js b/src/js/index.js index 3690de1..1076108 100644 --- a/src/js/index.js +++ b/src/js/index.js | |||
@@ -24,14 +24,15 @@ | |||
24 | DOM.useEntropy = $(".use-entropy"); | 24 | DOM.useEntropy = $(".use-entropy"); |
25 | DOM.entropyContainer = $(".entropy-container"); | 25 | DOM.entropyContainer = $(".entropy-container"); |
26 | DOM.entropy = $(".entropy"); | 26 | DOM.entropy = $(".entropy"); |
27 | DOM.entropyFeedback = $(".entropy-feedback"); | 27 | DOM.entropyFiltered = DOM.entropyContainer.find(".filtered"); |
28 | DOM.entropyFiltered = DOM.entropyFeedback.find(".filtered"); | 28 | DOM.entropyType = DOM.entropyContainer.find(".type"); |
29 | DOM.entropyType = DOM.entropyFeedback.find(".type"); | 29 | DOM.entropyStrength = DOM.entropyContainer.find(".strength"); |
30 | DOM.entropyStrength = DOM.entropyFeedback.find(".strength"); | 30 | DOM.entropyEventCount = DOM.entropyContainer.find(".event-count"); |
31 | DOM.entropyEventCount = DOM.entropyFeedback.find(".event-count"); | 31 | DOM.entropyBits = DOM.entropyContainer.find(".bits"); |
32 | DOM.entropyBits = DOM.entropyFeedback.find(".bits"); | 32 | DOM.entropyBitsPerEvent = DOM.entropyContainer.find(".bits-per-event"); |
33 | DOM.entropyBitsPerEvent = DOM.entropyFeedback.find(".bits-per-event"); | 33 | DOM.entropyWordCount = DOM.entropyContainer.find(".word-count"); |
34 | DOM.entropyMnemonicLength = DOM.entropyFeedback.find(".mnemonic-length"); | 34 | DOM.entropyBinary = DOM.entropyContainer.find(".binary"); |
35 | DOM.entropyMnemonicLength = DOM.entropyContainer.find(".mnemonic-length"); | ||
35 | DOM.phrase = $(".phrase"); | 36 | DOM.phrase = $(".phrase"); |
36 | DOM.passphrase = $(".passphrase"); | 37 | DOM.passphrase = $(".passphrase"); |
37 | DOM.generateContainer = $(".generate-container"); | 38 | DOM.generateContainer = $(".generate-container"); |
@@ -161,7 +162,7 @@ | |||
161 | // If blank entropy, clear mnemonic, addresses, errors | 162 | // If blank entropy, clear mnemonic, addresses, errors |
162 | if (DOM.entropy.val().trim().length == 0) { | 163 | if (DOM.entropy.val().trim().length == 0) { |
163 | clearDisplay(); | 164 | clearDisplay(); |
164 | hideEntropyFeedback(); | 165 | clearEntropyFeedback(); |
165 | DOM.phrase.val(""); | 166 | DOM.phrase.val(""); |
166 | showValidationError("Blank entropy"); | 167 | showValidationError("Blank entropy"); |
167 | return; | 168 | return; |
@@ -735,7 +736,7 @@ | |||
735 | } | 736 | } |
736 | 737 | ||
737 | function setMnemonicFromEntropy() { | 738 | function setMnemonicFromEntropy() { |
738 | hideEntropyFeedback(); | 739 | clearEntropyFeedback(); |
739 | // Get entropy value | 740 | // Get entropy value |
740 | var entropyStr = DOM.entropy.val(); | 741 | var entropyStr = DOM.entropy.val(); |
741 | // Work out minimum base for entropy | 742 | // Work out minimum base for entropy |
@@ -777,14 +778,15 @@ | |||
777 | DOM.phrase.val(phrase); | 778 | DOM.phrase.val(phrase); |
778 | } | 779 | } |
779 | 780 | ||
780 | function hideEntropyFeedback() { | 781 | function clearEntropyFeedback() { |
781 | DOM.entropyFeedback.addClass("hidden"); | 782 | DOM.entropyStrength.text("..."); |
782 | DOM.entropyFiltered.text(""); | ||
783 | DOM.entropyType.text(""); | 783 | DOM.entropyType.text(""); |
784 | DOM.entropyStrength.text(""); | 784 | DOM.entropyWordCount.text("0"); |
785 | DOM.entropyEventCount.text(""); | 785 | DOM.entropyEventCount.text("0"); |
786 | DOM.entropyBits.text(""); | 786 | DOM.entropyBitsPerEvent.text("0"); |
787 | DOM.entropyBitsPerEvent.text(""); | 787 | DOM.entropyBits.text("0"); |
788 | DOM.entropyFiltered.html(" "); | ||
789 | DOM.entropyBinary.html(" "); | ||
788 | } | 790 | } |
789 | 791 | ||
790 | function showEntropyFeedback(entropy) { | 792 | function showEntropyFeedback(entropy) { |
@@ -816,16 +818,15 @@ | |||
816 | }; | 818 | }; |
817 | } | 819 | } |
818 | var bitsStr = entropy.binaryStr.length; | 820 | var bitsStr = entropy.binaryStr.length; |
819 | if (entropy.base.asInt != 2) { | 821 | var wordCount = Math.floor(entropy.binaryStr.length / 32) * 3; |
820 | bitsStr += " (" + entropy.binaryStr + ")"; | ||
821 | } | ||
822 | DOM.entropyFiltered.text(entropy.cleanStr); | 822 | DOM.entropyFiltered.text(entropy.cleanStr); |
823 | DOM.entropyType.text(entropy.base.str); | 823 | DOM.entropyType.text(entropy.base.str); |
824 | DOM.entropyStrength.text(strength); | 824 | DOM.entropyStrength.text(strength); |
825 | DOM.entropyEventCount.text(entropy.base.ints.length); | 825 | DOM.entropyEventCount.text(entropy.base.ints.length); |
826 | DOM.entropyBits.text(bitsStr); | 826 | DOM.entropyBits.text(bitsStr); |
827 | DOM.entropyWordCount.text(wordCount); | ||
828 | DOM.entropyBinary.text(entropy.binaryStr); | ||
827 | DOM.entropyBitsPerEvent.text(Math.log2(entropy.base.asInt).toFixed(2)); | 829 | DOM.entropyBitsPerEvent.text(Math.log2(entropy.base.asInt).toFixed(2)); |
828 | DOM.entropyFeedback.removeClass("hidden"); | ||
829 | } | 830 | } |
830 | 831 | ||
831 | var networks = [ | 832 | var networks = [ |