Dekker1/FIT1047-crypt
Archived
1
0
Fork 0
Code

Add initial version of the cypher tool

Browse Source
This commit is contained in:
Jip J. Dekker 2018-04-11 21:33:40 +10:00
commit 22b472e79b
2 changed files with 349 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
crypt.html Normal file
View File

@ -0,0 +1,253 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>Monoalphabetic substitution</title>
</head>
<body>
<!-- Page content -->
<main role="main" class="container">
<h1 class="mt-5 text-center" style="margin-bottom: 30px;">Monoalphabetic substitution</h1>
<!-- Text areas with action buttons -->
<div class="row" style="margin-bottom: 30px;">
<div class="col">
<h4 class="text-center">Plain Text</h4>
<div class="input-group">
<textarea id="plain-text" class="form-control" aria-label="Plain Text" rows="10"></textarea>
<div class="input-group-append">
<button id="encrypt" class="btn btn-success" type="button">Encrypt &#8594;</button>
</div>
</div>
</div>
<div class="col">
<h4 class="text-center">Encrypted Text</h4>
<div class="input-group">
<div class="input-group-prepend">
<button id="decrypt" class="btn btn-danger" type="button">&#8592; Decrypt</button>
</div>
<textarea id="encrypted-text" class="form-control" aria-label="Encrypted Text" rows="10"></textarea>
</div>
</div>
</div>
<!-- Key input -->
<div class="row" style="margin-bottom: 30px;">
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">A</span>
</div>
<input type="text" class="form-control" id="A" aria-label="A" aria-describedby="A">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">B</span>
</div>
<input type="text" class="form-control" id="B" aria-label="B" aria-describedby="B">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">C</span>
</div>
<input type="text" class="form-control" id="C" aria-label="C" aria-describedby="C">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">D</span>
</div>
<input type="text" class="form-control" id="D" aria-label="D" aria-describedby="D">
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">E</span>
</div>
<input type="text" class="form-control" id="E" aria-label="E" aria-describedby="E">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">F</span>
</div>
<input type="text" class="form-control" id="F" aria-label="F" aria-describedby="F">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">G</span>
</div>
<input type="text" class="form-control" id="G" aria-label="G" aria-describedby="G">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">H</span>
</div>
<input type="text" class="form-control" id="H" aria-label="H" aria-describedby="H">
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">I</span>
</div>
<input type="text" class="form-control" id="I" aria-label="I" aria-describedby="I">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">J</span>
</div>
<input type="text" class="form-control" id="J" aria-label="J" aria-describedby="J">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">K</span>
</div>
<input type="text" class="form-control" id="K" aria-label="K" aria-describedby="K">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">L</span>
</div>
<input type="text" class="form-control" id="L" aria-label="L" aria-describedby="L">
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">M</span>
</div>
<input type="text" class="form-control" id="M" aria-label="M" aria-describedby="M">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">N</span>
</div>
<input type="text" class="form-control" id="N" aria-label="N" aria-describedby="N">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">O</span>
</div>
<input type="text" class="form-control" id="O" aria-label="O" aria-describedby="O">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">P</span>
</div>
<input type="text" class="form-control" id="P" aria-label="P" aria-describedby="P">
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Q</span>
</div>
<input type="text" class="form-control" id="Q" aria-label="Q" aria-describedby="Q">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">R</span>
</div>
<input type="text" class="form-control" id="R" aria-label="R" aria-describedby="R">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">S</span>
</div>
<input type="text" class="form-control" id="S" aria-label="S" aria-describedby="S">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">T</span>
</div>
<input type="text" class="form-control" id="T" aria-label="T" aria-describedby="T">
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">U</span>
</div>
<input type="text" class="form-control" id="U" aria-label="U" aria-describedby="U">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">V</span>
</div>
<input type="text" class="form-control" id="V" aria-label="V" aria-describedby="V">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">W</span>
</div>
<input type="text" class="form-control" id="W" aria-label="W" aria-describedby="W">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">X</span>
</div>
<input type="text" class="form-control" id="X" aria-label="X" aria-describedby="X">
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Y</span>
</div>
<input type="text" class="form-control" id="Y" aria-label="Y" aria-describedby="Y">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Z</span>
</div>
<input type="text" class="form-control" id="Z" aria-label="Z" aria-describedby="Z">
</div>
</div>
</div>
<!-- Alphabet control -->
<div class="row">
<div class="col">
<div class="input-group">
<input id="alphabet" type="text" class="form-control" placeholder="ABCDEFGHIJKLMNOPQRSTUVWXYZ" aria-label="Alphabet" aria-describedby="alphabet">
<div class="input-group-append">
<button id="generate-alpha" class="btn btn-warning" type="button">Generate Alphabet</button>
<button id="import-alpha" class="btn btn-primary" type="button">Import Alphabet</button>
</div>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Crypt JS -->
<script src="./crypt.js"></script>
</body>
</html>

96
crypt.js Normal file
View File

@ -0,0 +1,96 @@
function get_key() {
var map = [];
for (let i = 0; i < 26; i++) {
map.push($("#" +String.fromCharCode(i + 65)).val());
}
for (let i = 0; i < map.length; i++) {
if (!(typeof map[i] === 'string' || map[i] instanceof String) || map[i].length < 1) {
map[i] = String.fromCharCode(i + 65);
} else {
const code = map[i].charCodeAt(0);
if (map[i].length > 1) {
map[i] = map[i][0];
$("#" +String.fromCharCode(i + 65)).val(map[i][0]);
} else if (code >= 65 && code <= 90) {
map[i] = String.fromCharCode(code + 32);
}
}
}
return map;
}
function encrypt(plaintext, key) {
var encrypted = "";
var text = plaintext.toUpperCase();
for (let i = 0; i < text.length; i++) {
const code = text.charCodeAt(i);
if (code >= 65 && code <= 90) {
encrypted += key[code - 65];
} else {
encrypted += text[i];
}
}
return encrypted;
}
function decrypt(encrypted, key) {
var plaintext = "";
var text = encrypted.toLowerCase()
for (let i = 0; i < text.length; i++) {
var loc = key.indexOf(text[i]);
const code = text.charCodeAt(i);
if (loc >= 0) {
plaintext += String.fromCharCode(loc + 97);
} else if (97 <= code && code <= 122) {
plaintext += String.fromCharCode(code - 32);
} else {
plaintext += text[i];
}
}
return plaintext;
}
$(document).ready(function() {
$("#encrypt").button().click(function(){
var key = get_key();
var text = $("#plain-text").val();
$("plain-text").val(text.toLowerCase());
var encrypted = encrypt(text, key);
$("#encrypted-text").val(encrypted);
});
$("#decrypt").button().click(function(){
var key = get_key();
var text = $("#encrypted-text").val();
$("#encrypted-text").val(text.toLowerCase());
var decrypted = decrypt(text, key);
$("#plain-text").val(decrypted);
});
$("#generate-alpha").button().click(function(){
var key = get_key();
var alpha = "";
for (let i = 0; i < key.length; i++) {
alpha += key[i];
}
$("#alphabet").val(alpha);
});
$("#import-alpha").button().click(function(){
var alpha = $("#alphabet").val();
if (alpha.length != 26) {
alert("Alphabet of invalid length");
return;
}
alpha = alpha.toUpperCase();
for (let i = 0; i < alpha.length; i++) {
const code = alpha.charCodeAt(i);
if (code != i + 65) {
$("#" +String.fromCharCode(i + 65)).val(alpha[i]);
}
}
});
});