Move generate pad button to the encrypt section
This commit is contained in:
parent
2642f2a251
commit
720e64af40
54
index.html
54
index.html
|
@ -20,35 +20,6 @@
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-one-third">
|
|
||||||
<h2 class="title">
|
|
||||||
Generate a One-Time Pad
|
|
||||||
</h2>
|
|
||||||
<div class="field has-addons">
|
|
||||||
<div class="control">
|
|
||||||
<input class="input" type="number" id="padLength" placeholder="Length">
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<a class="button" id="generatePad">
|
|
||||||
<span>
|
|
||||||
Generate Pad
|
|
||||||
</span>
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-lock"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
<label class="label">One-Time Pad</label>
|
|
||||||
<div class="box">
|
|
||||||
<pre id="generatedPad"></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column is-one-third">
|
<div class="column is-one-third">
|
||||||
<h2 class="title">
|
<h2 class="title">
|
||||||
|
@ -62,15 +33,30 @@
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="control">
|
||||||
<label class="label">
|
<label class="label">
|
||||||
One-Time Pad
|
One-Time Pad
|
||||||
<div class="control">
|
|
||||||
<textarea id="inputPad" class="textarea"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="help is-error" id="inputError"></div>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="field has-addons is-small">
|
||||||
|
<div class="control">
|
||||||
|
<input class="input is-small" type="number" id="padLength" placeholder="Length">
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<a class="button is-small" id="generatePad">
|
||||||
|
<span>
|
||||||
|
Generate Pad
|
||||||
|
</span>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-lock"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<textarea id="inputPad" class="textarea"></textarea>
|
||||||
|
<div class="help is-error" id="inputError"></div>
|
||||||
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<a class="button" id="encryptInput">
|
<a class="button" id="encryptInput">
|
||||||
|
|
12
index.js
12
index.js
|
@ -20,7 +20,7 @@ const stripString = (string) => {
|
||||||
|
|
||||||
export const encrypt = (string, pad = null) => {
|
export const encrypt = (string, pad = null) => {
|
||||||
const strippedString = stripString(string).toUpperCase();
|
const strippedString = stripString(string).toUpperCase();
|
||||||
pad = pad ? pad : generatePad(strippedString.length * 2);
|
pad = pad ? pad : generatePad(strippedString.length);
|
||||||
return {
|
return {
|
||||||
oneTimePad: pad,
|
oneTimePad: pad,
|
||||||
encryptedMessage: pad.map((letter, index) => {
|
encryptedMessage: pad.map((letter, index) => {
|
||||||
|
@ -73,8 +73,12 @@ window.onload = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('generatePad').onclick = () => {
|
document.getElementById('generatePad').onclick = () => {
|
||||||
const input = parseInt(document.getElementById('padLength').value, 10);
|
const field = document.getElementById('padLength');
|
||||||
const output = generatePad(input);
|
if (field.value === '') {
|
||||||
document.getElementById('generatedPad').innerHTML = output.join('');
|
field.value = '10';
|
||||||
|
}
|
||||||
|
const length = parseInt(field.value, 10);
|
||||||
|
const output = generatePad(length);
|
||||||
|
document.getElementById('inputPad').value = output.join('');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue