Integrated simple-keyboard from hodged as a on-screen keyboard #14

This commit is contained in:
ChaoticByte 2023-02-13 19:31:21 +01:00
parent 6c72b5059f
commit 0ab45c6e68
9 changed files with 145 additions and 92 deletions

View file

@ -10,6 +10,8 @@
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/login.css">
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
{% endblock %}
{% block content %}
@ -19,48 +21,23 @@
{% endif %}
<div class="passwordoverlaycontainer nodisplay" id="passwordoverlaycontainer">
<div class="passwordoverlay">
<form method="post" action="{% url 'login' %}" class="loginform">
{% csrf_token %}
<h1>{% translate "Log in" %}</h1>
<input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
<input type="password" name="password" autocomplete="current-password" required="" id="id_password" placeholder='{% translate "Password/PIN" %}'>
<div class="pinpad">
<table>
<tr>
<td><button type="button" class="pinpadbtn" data-btn="1">1</button></td>
<td><button type="button" class="pinpadbtn" data-btn="2">2</button></td>
<td><button type="button" class="pinpadbtn" data-btn="3">3</button></td>
</tr>
<tr>
<td><button type="button" class="pinpadbtn" data-btn="4">4</button></td>
<td><button type="button" class="pinpadbtn" data-btn="5">5</button></td>
<td><button type="button" class="pinpadbtn" data-btn="6">6</button></td>
</tr>
<tr>
<td><button type="button" class="pinpadbtn" data-btn="7">7</button></td>
<td><button type="button" class="pinpadbtn" data-btn="8">8</button></td>
<td><button type="button" class="pinpadbtn" data-btn="9">9</button></td>
</tr>
<tr>
<td><button type="button" class="pinpadbtn" data-btn="x">x</button></td>
<td><button type="button" class="pinpadbtn" data-btn="0">0</button></td>
<td><button type="button" class="pinpadbtn" data-btn="enter">&#9166;</button></td>
</tr>
</table>
</div>
<input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" placeholder='{% translate "Password/PIN" %}'>
<div class="horizontalbuttonlist">
<button type="button" id="pwocancel">{% translate "cancel" %}</button>
<input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
</div>
</form>
</div>
<!-- Virtual Keyboard -->
{% get_current_language as LANGUAGE_CODE %}
<div id="keyboard" class="simple-keyboard" data-layout="{{LANGUAGE_CODE}}"></div>
<script src="/static/js/simple-keyboard.js"></script>
<script src="/static/js/simple-keyboard_configure.js"></script>
</div>
<h1>{% translate "Choose your account" %}</h1>