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

@ -8,6 +8,8 @@
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/appform.css">
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
{% endblock %}
@ -21,7 +23,7 @@
<div class="forminput">
<span>{% translate "Amount" %} {{ currency_suffix }}:</span>
<span>
<input type="number" name="depositamount" id="depositamount" max="9999.99" min="1.00" step="0.01" autofocus>
<input type="number" name="depositamount" id="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus>
</span>
</div>
@ -34,6 +36,11 @@
</form>
<!-- Virtual Keyboard -->
<div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
<script src="/static/js/simple-keyboard.js"></script>
<script src="/static/js/simple-keyboard_configure.js"></script>
<script src="/static/js/deposit.js"></script>
<script src="/static/js/autoreload.js"></script>

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>