{% extends "base.html" %}

{% block main %}

  <h1>Signup</h1>

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

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

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

    <label class="form-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 class="btn btn-primary" type="submit" value="Create account">
    <a class="btn btn-secondary" href="/">Cancel</a>
  </form>

  <script src="/static/js/touchkey.js" ></script>
  <script>
    initTouchkey(true, 'touchkey-svg', null, 'signup-touchkey');
  </script>
  {{ super() }}

{% endblock %}

{% block eanwebsocket %}
  document.location = "/?ean=" + e.data;
{% endblock %}