Skip to content

GUI Demo

Jump to bottom
MustafaHi edited this page Nov 3, 2021 · 7 revisions

Create an HTML file and write the following to it, then run it in u/sciter (Tiscript & JavaScript).
Make sure the binaries and files are at the same path.

<html>
<title>Sciter-Botan</title>
<script type="text/tiscript">
    include "botan.tis";

    var method = $(#method).value;
    var mode   = $(#mode).value;
    var hash   = $(#hash).value;

    event click $(#bEncrypt) {
        const key  = Botan.hash(hash, $(#key).value);
        const iv   = $(#nonce).value;
        const data = $(#data).value;

        const Method = String.printf("%s/%s", method, mode);
        var cipher   = await Botan.cipher(Method, data, key, iv);

        debug cipher: cipher;
        $(#nonce).value = cipher.iv;
        $(#data).value  = cipher.data;
    }
    event click $(#bDecrypt) {
        const key  = Botan.hash(hash, $(#key).value);
        const iv   = $(#nonce).value;
        const data = $(#data).value;
        
        const Method = String.printf("%s/%s", method, mode);
        var decipher = await Botan.decipher(Method, data, key, iv);
        
        debug decipher: decipher;
        $(#data).value = decipher.data;
    }

    event change $(#method) { method = this.value; }
    event change $(#mode)   { mode   = this.value; }
    event change $(#hash)   { hash   = this.value; }
</script>
<script type=module>
	import * as Botan from "botan.mjs";
	import { $ } from "@sciter";
	
	document.on("click", "#bEncrypt", async () => {
		const key  = Botan.hash( $("#hash").value, $("#key").value );
        const iv   = $("#nonce").value;
        const data = $("#data").value;
		
		const Method = `${$("#method").value}/${$("#mode").value}`;
		
		const cipher = await Botan.cipher(Method, data, key, iv);
		console.log(cipher);
		
		$("#nonce").value = cipher.iv;
		$("#data").value  = cipher.data;
		
	});

	document.on("click", "#bDecrypt", async () => {
		const key  = Botan.hash( $("#hash").value, $("#key").value );
        const iv   = $("#nonce").value;
        const data = $("#data").value;
		
		const Method = `${$("#method").value}/${$("#mode").value}`;
		
		const decipher = await Botan.decipher(Method, data, key, iv);
		console.log(decipher);
		
		$("#data").value = decipher.data;
	});
</script>
<body>
    <button #bEncrypt>Encrypt</button>
    <button #bDecrypt>Decrypt</button>
    <select id="method">
        <option value="AES-256">AES-256</option>
        <option value="AES-128">AES-128</option>
        <option value="Serpent">Serpent</option>
    </select>
    <select id="mode">
        <option value="CBC">CBC</option>
        <option value="GCM">GCM</option>
        <option value="OCB">OCB</option>
    </select>
    <select id="hash">
        <option value="SHA-256">SHA-256</option>
        <option value="SHA-128">SHA-128</option>
    </select>
    <input type="text" id="key" novalue="key">
    <input type="text" id="nonce" novalue="nonce | IV">
    <plaintext linenumbers #data></plaintext>
</body>
</html>
Clone this wiki locally