mirror of
				https://github.com/Alamantus/otp-generator.git
				synced 2025-11-04 10:17:04 +01:00 
			
		
		
		
	Add a way to generate any-length pad
This commit is contained in:
		
							parent
							
								
									a39f39c805
								
							
						
					
					
						commit
						de69f9e9b6
					
				
					 2 changed files with 69 additions and 25 deletions
				
			
		
							
								
								
									
										44
									
								
								index.html
									
										
									
									
									
								
							
							
						
						
									
										44
									
								
								index.html
									
										
									
									
									
								
							| 
						 | 
				
			
			@ -20,7 +20,40 @@
 | 
			
		|||
  <div class="section">
 | 
			
		||||
    <div class="container">
 | 
			
		||||
      <div class="columns">
 | 
			
		||||
        <div class="column">
 | 
			
		||||
        <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">
 | 
			
		||||
          <h2 class="title">
 | 
			
		||||
            Encrypt a Message
 | 
			
		||||
          </h2>
 | 
			
		||||
          <div class="field">
 | 
			
		||||
            <label class="label">
 | 
			
		||||
              Your Message
 | 
			
		||||
| 
						 | 
				
			
			@ -55,13 +88,16 @@
 | 
			
		|||
            <div class="column">
 | 
			
		||||
              <label class="label">Encrypted Message</label>
 | 
			
		||||
              <div class="box">
 | 
			
		||||
                <pre id="encrypted"></pre>
 | 
			
		||||
                <pre id="encrypted" style="width:100%;line-break"></pre>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="column">
 | 
			
		||||
        <div class="column is-one-third">
 | 
			
		||||
          <h2 class="title">
 | 
			
		||||
            Encrypt a Message
 | 
			
		||||
          </h2>
 | 
			
		||||
          <div class="field">
 | 
			
		||||
            <label class="label">
 | 
			
		||||
               Their Message
 | 
			
		||||
| 
						 | 
				
			
			@ -96,7 +132,7 @@
 | 
			
		|||
            <div class="column">
 | 
			
		||||
              <label class="label">Decrypted Message</label>
 | 
			
		||||
              <div class="box">
 | 
			
		||||
                <pre id="decrypted"></pre>
 | 
			
		||||
                <pre id="decrypted" style="width:100%;line-break"></pre>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										50
									
								
								index.js
									
										
									
									
									
								
							
							
						
						
									
										50
									
								
								index.js
									
										
									
									
									
								
							| 
						 | 
				
			
			@ -5,7 +5,7 @@ const CHARS = [
 | 
			
		|||
  '&', '$',
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const generatePad = (length) => {
 | 
			
		||||
export const generatePad = (length) => {
 | 
			
		||||
  const pad = [];
 | 
			
		||||
  for (let i = 0; i < length; i++) {
 | 
			
		||||
    const letter = Math.floor(Math.random() * CHARS.length);
 | 
			
		||||
| 
						 | 
				
			
			@ -41,25 +41,33 @@ export const decrypt = (string, pad) => {
 | 
			
		|||
  }).join('').replace(/\&/g, ' ').replace(/\$/g, '-');
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
document.getElementById('encryptInput').onclick = () => {
 | 
			
		||||
  const error = document.getElementById('inputError');
 | 
			
		||||
  const input = document.getElementById('input').value;
 | 
			
		||||
  const inputPad = stripString(document.getElementById('inputPad').value).toUpperCase();
 | 
			
		||||
  const pad = inputPad !== '' ? inputPad.split('') : null;
 | 
			
		||||
  if (pad !== null && pad.length < input.length) {
 | 
			
		||||
    document.getElementById('inputPad').value = pad.join('');
 | 
			
		||||
    error.innerHTML = 'The pad must be at least as long as the input';
 | 
			
		||||
  } else {
 | 
			
		||||
    error.innerHTML = '';
 | 
			
		||||
    const encryption = encrypt(input, pad);
 | 
			
		||||
    document.getElementById('inputPad').value = encryption.oneTimePad.join('');
 | 
			
		||||
    document.getElementById('encrypted').innerHTML = encryption.encryptedMessage;
 | 
			
		||||
window.onload = () => {
 | 
			
		||||
  document.getElementById('encryptInput').onclick = () => {
 | 
			
		||||
    const error = document.getElementById('inputError');
 | 
			
		||||
    const input = document.getElementById('input').value;
 | 
			
		||||
    const inputPad = stripString(document.getElementById('inputPad').value).toUpperCase();
 | 
			
		||||
    const pad = inputPad !== '' ? inputPad.split('') : null;
 | 
			
		||||
    if (pad !== null && pad.length < input.length) {
 | 
			
		||||
      document.getElementById('inputPad').value = pad.join('');
 | 
			
		||||
      error.innerHTML = 'The pad must be at least as long as the input';
 | 
			
		||||
    } else {
 | 
			
		||||
      error.innerHTML = '';
 | 
			
		||||
      const encryption = encrypt(input, pad);
 | 
			
		||||
      document.getElementById('inputPad').value = encryption.oneTimePad.join('');
 | 
			
		||||
      document.getElementById('encrypted').innerHTML = encryption.encryptedMessage;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  document.getElementById('decryptInput').onclick = () => {
 | 
			
		||||
    const input = document.getElementById('encryptedInput').value;
 | 
			
		||||
    const pad = document.getElementById('encryptedInputPad').value.split('');
 | 
			
		||||
    const output = decrypt(input, pad);
 | 
			
		||||
    document.getElementById('decrypted').innerHTML = output;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  document.getElementById('generatePad').onclick = () => {
 | 
			
		||||
    const input = parseInt(document.getElementById('padLength').value, 10);
 | 
			
		||||
    const output = generatePad(input);
 | 
			
		||||
    document.getElementById('generatedPad').innerHTML = output.join('');
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
document.getElementById('decryptInput').onclick = () => {
 | 
			
		||||
  const input = document.getElementById('encryptedInput').value;
 | 
			
		||||
  const pad = document.getElementById('encryptedInputPad').value.split('');
 | 
			
		||||
  const output = decrypt(input, pad);
 | 
			
		||||
  document.getElementById('decrypted').innerHTML = output;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue