117 lines
4.9 KiB
HTML
117 lines
4.9 KiB
HTML
{% 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 %}
|