{% extends "base.html" %}

{% block header %}
    <h1>Signup</h1>
    {{ super() }}
{% endblock %}

{% block main %}

    {# Show a username/password signup form #}
    <form method="post" action="/signup" id="signupform" enctype="multipart/form-data" accept-charset="UTF-8">
        <label for="signup-username"><b>Username</b>: </label>
        <input id="signup-username" type="text" name="username" required="required" class="osk-target"/><br/>

        <label for="signup-password"><b>Choose a password</b>: </label>
        <input id="signup-password" type="password" name="password" required="required" class="osk-target"/><br/>

        <label for="signup-password2"><b>Repeat password</b>: </label>
        <input id="signup-password2" type="password" name="password2" required="required" class="osk-target"/><br/>

        <label for="signup-touchkey">Draw a touchkey (touchscreen login pattern)</label>
        <br/>
        <svg id="touchkey-svg" width="400" height="400"></svg>
        <br/>
        <input id="signup-touchkey" type="hidden" name="touchkey" value="" />

        <input type="submit" value="Create account">
    </form>

    <div id="osk-kbd" class="osk osk-kbd">
        {% set lower = [['1','2','3','4','5','6','7','8','9','0','-','⌫'],
                        ['q','w','e','r','t','y','u','i','o','p','[','⇥'],
                        ['a','s','d','f','g','h','j','k','l',';','\'','⇤'],
                        ['z','x','c','v','b','n','m',',','.','/','{','⇧'],
                        ['SPACE']] %}
        {% set upper = [['!','@','#','$','%','^','&','*','(',')','_','⌫'],
                        ['Q','W','E','R','T','Y','U','I','O','P',']','⇥'],
                        ['A','S','D','F','G','H','J','K','L',':','"','⇤'],
                        ['Z','X','C','V','B','N','M','<','>','?','}','⇧'],
                        ['SPACE']] %}
        {% for lrow, urow in zip(lower, upper) %}
        <div class="osk osk-kbd-row">
            {% for lc, uc in zip(lrow, urow) %}
            <div tabindex="1000" class="osk osk-button{% if lc == 'SPACE' %} osk-button-space{% endif %}" data-lowercase="{{ lc }}" data-uppercase="{{ uc }}">{{ lc }}</div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>

    <script src="/static/js/touchkey.js" ></script>
    <script>
        initTouchkey(true, 'touchkey-svg', null, 'signup-touchkey');
    </script>
    <script>
        let lastfocus = null;
        let shift = 0;
        let osk = document.getElementById('osk-kbd');
        let inputs = [].slice.call(document.getElementsByClassName('osk-target'));
        let oskButtons = document.getElementsByClassName('osk-button');
        for (let i = 0; i < inputs.length; ++i) {
            inputs[i].onfocus = () => {
                osk.classList.add('visible');
            }
            inputs[i].onblur = (blur) => {
                if (blur.relatedTarget !== undefined && blur.relatedTarget !== null && blur.relatedTarget.classList.contains('osk')) {
                    lastfocus = blur.target;
                } else {
                    lastfocus = null;
                    if (blur.relatedTarget === undefined || blur.relatedTarget === null || !blur.relatedTarget.classList.contains('osk-target')) {
                        osk.classList.remove('visible');
                    }
                }
            }
        }
        for (let i = 0; i < oskButtons.length; ++i) {
            oskButtons[i].onclick = (click) => {
                if (lastfocus === null || lastfocus === undefined) {
                    return;
                }
                let btn = click.target.innerText;
                let idx = inputs.indexOf(lastfocus);
                switch (btn) {
                    case '⇥':
                        lastfocus = inputs[(idx + 1) % inputs.length];
                        break;
                    case '⇤':
                        lastfocus = inputs[(((idx - 1) % inputs.length) + inputs.length) % inputs.length];
                        break;
                    case '⌫':
                        if (lastfocus.value.length > 0) {
                            lastfocus.value = lastfocus.value.substring(0, lastfocus.value.length-1);
                        }
                        break;
                    case 'SPACE':
                        lastfocus.value += ' ';
                        break;
                    case '⇧':
                        shift = !shift;
                        click.target.classList.toggle('osk-locked');
                        for (let j = 0; j < oskButtons.length; ++j) {
                            oskButtons[j].innerText = oskButtons[j].getAttribute(shift ? 'data-uppercase' : 'data-lowercase');
                        }
                        break;
                    default: {
                        lastfocus.value += btn;
                        break;
                    }
                }
                lastfocus.focus();
            }
        }

    </script>

    {{ super() }}

{% endblock %}