d5/micro-api-demo1.html

## micro-api-demo1.html
<html>
    <head>
        <title>Micro-API Demo #1</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery.support.cors = true;

            function cancel_event_default(e) {
                if(e.preventDefault) e.preventDefault();
                else e.returnValue = false;
            }

            function run_async(url, params, on_success, on_error) {
                jQuery.ajax({
                    url: url,
                    type: 'POST',
                    dataType: 'json',
                    data: params,
                    crossDomain: true,
                    success: on_success,
                    error: on_error
                });
            }

            $(document).ready(function() {
                run_async('https://micro-api.appspot.com/randbytes', {'length': 48 },
                function(data){
                    $('#aes-iv').val(data.value.slice(0, 32));
                    $('#aes-key').val(data.value.slice(32, 96));

                    $('#aes-enc-button').removeAttr('disabled');
                    $('#aes-input').removeAttr('disabled');
                });

                $('#aes-enc-button').click(function(evt) {
                    cancel_event_default(evt);
                    $('#aes-enc-button').attr('disabled', 'disabled');
                    $('#aes-input').attr('disabled', 'disabled');

                    run_async('https://micro-api.appspot.com/utf8enc', {'value': $('#aes-input').val() }, function(data){
                        run_async(
                            'https://micro-api.appspot.com/aes256enc',
                            {
                                "iv": $('#aes-iv').val(),
                                "key": $('#aes-key').val(),
                                "value": data.value
                            },
                            function(data){
                                $('#aes-iv').val(data.iv);
                                $('#aes-input-length').val(data.input_length);
                                $('#aes-input').val(data.value);
                                $('#aes-dec-button').removeAttr('disabled');
                            });
                    });
                });

                $('#aes-dec-button').click(function(evt) {
                    cancel_event_default(evt);
                    $('#aes-dec-button').attr('disabled', 'disabled');

                    run_async(
                        "https://micro-api.appspot.com/aes256dec",
                        {
                            "iv": $('#aes-iv').val(),
                            "key": $('#aes-key').val(),
                            "value": $('#aes-input').val(),
                            "length": $('#aes-input-length').val()
                        },
                        function(data) {
                            var decoded = '';
                            run_async('https://micro-api.appspot.com/utf8dec', {'value': data.value }, function(data) {
                                $('#aes-input').val(data.value);
                                $('#aes-enc-button').removeAttr('disabled');
                                $('#aes-input').removeAttr('disabled');
                            });
                        });
                });
            });
        </script>
    </head>
    <body>
        <h1>AES-256 Encryption (AJAX)</h1>
        <form>
            <i>IV</i><br/>
            <input id="aes-iv" type="text" style="width: 500px;"></input><br/>
            <i>Key</i><br/>
            <input id="aes-key" type="text" style="width: 500px;"></input><br/>
            <i>Value</i><br/>
            <textarea id="aes-input" type="text" style="width: 500px;" rows="5" disabled="disabled">Daniel Kang</textarea><br/>
            <i>Length</i><br/>
            <input id="aes-input-length" type="text" value="0" style="width: 500px;" readonly="readonly"/><br/>
            <input id="aes-enc-button" type="button" value="Encrypt" disabled="disabled"/>
            <input id="aes-dec-button" type="button" value="Decrypt" disabled="disabled"/>
        </form>
    </body>
</html>
	<html>
	<head>
	<title>Micro-API Demo #1</title>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript">
	jQuery.support.cors = true;

	function cancel_event_default(e) {
	if(e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	}

	function run_async(url, params, on_success, on_error) {
	jQuery.ajax({
	url: url,
	type: 'POST',
	dataType: 'json',
	data: params,
	crossDomain: true,
	success: on_success,
	error: on_error
	});
	}

	$(document).ready(function() {
	run_async('https://micro-api.appspot.com/randbytes', {'length': 48 },
	function(data){
	$('#aes-iv').val(data.value.slice(0, 32));
	$('#aes-key').val(data.value.slice(32, 96));

	$('#aes-enc-button').removeAttr('disabled');
	$('#aes-input').removeAttr('disabled');
	});

	$('#aes-enc-button').click(function(evt) {
	cancel_event_default(evt);
	$('#aes-enc-button').attr('disabled', 'disabled');
	$('#aes-input').attr('disabled', 'disabled');

	run_async('https://micro-api.appspot.com/utf8enc', {'value': $('#aes-input').val() }, function(data){
	run_async(
	'https://micro-api.appspot.com/aes256enc',
	{
	"iv": $('#aes-iv').val(),
	"key": $('#aes-key').val(),
	"value": data.value
	},
	function(data){
	$('#aes-iv').val(data.iv);
	$('#aes-input-length').val(data.input_length);
	$('#aes-input').val(data.value);
	$('#aes-dec-button').removeAttr('disabled');
	});
	});
	});

	$('#aes-dec-button').click(function(evt) {
	cancel_event_default(evt);
	$('#aes-dec-button').attr('disabled', 'disabled');

	run_async(
	"https://micro-api.appspot.com/aes256dec",
	{
	"iv": $('#aes-iv').val(),
	"key": $('#aes-key').val(),
	"value": $('#aes-input').val(),
	"length": $('#aes-input-length').val()
	},
	function(data) {
	var decoded = '';
	run_async('https://micro-api.appspot.com/utf8dec', {'value': data.value }, function(data) {
	$('#aes-input').val(data.value);
	$('#aes-enc-button').removeAttr('disabled');
	$('#aes-input').removeAttr('disabled');
	});
	});
	});
	});
	</script>
	</head>
	<body>
	<h1>AES-256 Encryption (AJAX)</h1>
	<form>
	<i>IV</i><br/>
	<input id="aes-iv" type="text" style="width: 500px;"></input><br/>
	<i>Key</i><br/>
	<input id="aes-key" type="text" style="width: 500px;"></input><br/>
	<i>Value</i><br/>
	<textarea id="aes-input" type="text" style="width: 500px;" rows="5" disabled="disabled">Daniel Kang</textarea><br/>
	<i>Length</i><br/>
	<input id="aes-input-length" type="text" value="0" style="width: 500px;" readonly="readonly"/><br/>
	<input id="aes-enc-button" type="button" value="Encrypt" disabled="disabled"/>
	<input id="aes-dec-button" type="button" value="Decrypt" disabled="disabled"/>
	</form>
	</body>
	</html>