<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebCrypto API Demo: AES-GCM</title>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript">
    var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
    var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");

    function AES_GCM_encrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-gcm", false, ["encrypt"]).then(function(key) {
            var plainText = document.getElementById("plainTextGCM").value;
            return crypto.subtle.encrypt({name: "aes-gcm", iv: iv}, key, asciiToUint8Array(plainText));
        }, failAndLog).then(function(cipherText) {
            document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
        }, failAndLog);
    }
    function AES_GCM_decrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-gcm", false, ["decrypt"]).then(function(key) {
            var cipherText = document.getElementById("cipherTextGCM").value;
            return crypto.subtle.decrypt({name: "aes-gcm", iv: iv}, key, hexStringToUint8Array(cipherText));
        }, failAndLog).then(function(plainText) {
            document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
        }, function(result) {
            document.getElementById("resultGCM").innerHTML = "Result: " + result;
        });
    }
    function AES_CBC_encrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
            var plainText = document.getElementById("plainTextGCM").value;
            return crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, asciiToUint8Array(plainText));
        }, failAndLog).then(function(cipherText) {
            document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
        }, failAndLog);
    }
    function AES_CBC_decrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["decrypt"]).then(function(key) {
            var cipherText = document.getElementById("cipherTextGCM").value;
            return crypto.subtle.decrypt({name: "aes-cbc", iv: iv}, key, hexStringToUint8Array(cipherText));
        }, failAndLog).then(function(plainText) {
            document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
        }, failAndLog);
    }
    </script>
</head>
<body>
    <h1>AES-GCM</h1>
    <p>Click the corresponding buttons to do AES-CBC/GCM encryption/decryption. In the middle, try to modify the cipher text to see how AES-CBC/GCM responds.</p>
    <div>
        Plain Text: <input type="text" id="plainTextGCM" value="Hello, World!">
        <button type="button" onclick="AES_GCM_encrypt()">encryptGCM</button>
        <button type="button" onclick="AES_CBC_encrypt()">encryptCBC</button>
    </div>
    <div>
        Cipher Text: <input type="text" id="cipherTextGCM" size="50">
        <button type="button" onclick="AES_GCM_decrypt()">decryptGCM</button>
        <button type="button" onclick="AES_CBC_decrypt()">decryptCBC</button>
    </div>
    <div id="resultGCM">
        Result:
    </div>
</body>
</html>