{% extends "base.html" %}
{% block title %}Cryptomoji 🔒{% endblock %}
{% block header %}Cryptomoji 🔒{% endblock %}
{% block content %}
<p class="lead">Encrypt messages as emoji!
<br class="rwd-break">
🌯🇲🇼🛍🐚🎱🇮🇳🚲</p>
<span id="error_msg" class="error"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<div class="row">
    <div class="col-lg-6">
        <h2>Encrypt</h2>
        <form id="encrypt">
            <div class="form-group">
                <label name="message">Message</label>
                <input type="text" class="form-control" name="message" />
            </div>

            <div class="form-group">
                <label name="passphrase">Emoji Passphrase</label>
                <input type="text" class="form-control" name="passphrase" />
            </div>

            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="doEncrypt()" />Encrypt!</button>
            </div>

            <div class="form-group">
                <label>Encrypted Message</label>
                <button type="button" class="btn btn-outline-secondary btn-sm copy" data-clipboard-target="#result">
                    <img width="16px" src="https://clipboardjs.com/assets/images/clippy.svg" alt="Copy to clipboard">
                </button>
                <textarea class="form-control" name="result" id="result" rows=3 readonly /></textarea>
            </div>
        </form>
    </div>

    <div class="col-lg-6">
        <h2>Decrypt</h2>
        <form id="decrypt">
            <div class="form-group">
                <label name="message">Encrypted Emoji Message</label>
                <input type="text" class="form-control" name="message" />
            </div>

            <div class="form-group">
                <label name="passphrase">Emoji Passphrase</label>
                <input type="text" class="form-control" name="passphrase" />
            </div>

            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="doDecrypt()" />Decrypt!</button>
            </div>

            <div class="form-group">
                <label>Decrypted Message</label>
                <textarea class="form-control" name="result" rows=3 readonly /></textarea>
            </div>
        </form>
    </div>
</div>

<script src={{url_for('static', filename='cryptomoji.js')}}></script>

<script>
var clipboard = new Clipboard('.copy');

function isBlank(str) {
    return !str || /^\s*$/.test(str);
}

function getInput(form) {
    var values = {'error': false};

    var fields = form.find('input');
    for (let i = 0; i < fields.length; i++) {
        let field = fields.eq(i);
        let name = field.attr('name');
        values[name] = field.val();

        if (isBlank(field.val())) {
            form.find('label[name='+name+']').addClass('error');
            values['error'] = true;
        }
    }

    return values;
}

function doEncrypt() {
    var form = $('#encrypt')
    var values = getInput(form);

    if (values['error']) {
        return;
    }

    values['message'] = values['message']
        .toLowerCase()
        .replace(/[^a-z]+/g, '');

    var result = form.find('textarea[name=result]');

    result.val(encrypt(values['message'], values['passphrase']));

    var labels = form.find('label');
    for (let i = 0; i < 2; i++) {
        labels.eq(i).removeClass('error');
    }
}

function doDecrypt() {
    var form = $('#decrypt');
    var values = getInput(form);

    if (values['error']) {
        return;
    }

    var result = form.find('textarea[name=result]');

    result.val(decrypt(values['message'], values['passphrase']));

    var labels = form.find('label');
    for (let i = 0; i < 2; i++) {
        labels.eq(i).removeClass('error');
    }
}
</script>

<p><a href="https://github.com/mtimkovich/maxtimkovich.com/blob/master/src/static/cryptomoji.js#L1183">Created by Max Timkovich</a></p>

{% endblock %}