app/static/css/login.css

@@ -92,29 +92,6 @@ main > h1 {
 .horizontalbuttonlist .button, .horizontalbuttonlist button {
     font-size: 1rem;
 }
-/***/
-.pinpad {
-    margin-top: 1.5rem;
-    margin-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    max-width: 30vw;
-}
-.pinpad table {
-    box-shadow: none !important;
-}
-.pinpad table tr, .pinpad td {
-    padding: unset;
-    background: unset;
-}
-.pinpad tr td button {
-    height: 4.0rem;
-    width: 4.1rem;
-    font-size: 1.16rem;
-    margin: .2rem !important;
-}
 @media only screen and (max-width: 700px) {
     .userlistcontainer {
         width: 95vw;

app/static/css/main.css

@@ -122,7 +122,6 @@ main {
 .dropdownbutton {
     width: fit-content;
     z-index: 190;
-    box-shadow: none;
     text-align: center;
     justify-content: center;
 }
@@ -142,7 +141,6 @@ main {
     transition: opacity 100ms;
 }
 .dropdownchoice {
-    box-shadow: none;
     border-radius: 0 !important;
     margin: 0;
     margin-top: -1px;

app/static/css/simple-keyboard.css

@@ -0,0 +1,11 @@
+/*!
+ * 
+ *   simple-keyboard v3.5.22
+ *   https://github.com/hodgef/simple-keyboard
+ *
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
+ *
+ *   This source code is licensed under the MIT license found in the
+ *   LICENSE file in the root directory of this source tree.
+ *
+ */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;max-width:272px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;background:#d0d0d0;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}

app/static/css/simple-keyboard_dark.css

@@ -0,0 +1,24 @@
+.simple-keyboard.darkTheme.numeric {
+    width: 13rem;
+}
+.simple-keyboard.darkTheme {
+    width: 50rem;
+    max-width: 100%;
+    margin-top: 2rem;
+    background: transparent;
+}
+.simple-keyboard.darkTheme .hg-button {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--glass-bg);
+    color: white;
+    border: none;
+    border-bottom: 1px solid var(--glass-border-color);
+}
+.simple-keyboard.darkTheme .hg-button:active,
+.simple-keyboard.darkTheme .hg-button:hover {
+    color: white;
+    background: var(--glass-bg-hover);
+}

app/static/js/login.js

@@ -1,7 +1,6 @@
 (() => {
 
     // Define variables
-
     let usernameInputElement;
     let passwordInputElement;
     let submitButton;
@@ -11,77 +10,43 @@
     let pinpadButtons;
     let userlistContainerElement;
 
-
     // Add event listeners after DOM Content loaded
-
     document.addEventListener("DOMContentLoaded", () => {
-        
         // elements
-
         usernameInputElement = document.getElementById("id_username");
         passwordInputElement = document.getElementById("id_password");
         submitButton = document.getElementById("submit_login");
         passwordOverlayElement = document.getElementById("passwordoverlaycontainer");
         pwOverlayCancelButton = document.getElementById("pwocancel");
         userlistContainerElement = document.getElementById("userlistcontainer");
-
         userlistButtons = document.getElementsByClassName("userlistbutton");
-        pinpadButtons = document.getElementsByClassName("pinpadbtn");
-
         // event listeners
-
         // [...<html-collection>] converts an html collection to an array
-
         [...userlistButtons].forEach(element => {
             element.addEventListener("click", () => {
                 set_username(element.dataset.username);
                 show_password_overlay();
             })
         });
-
-        [...pinpadButtons].forEach(element => {
-            element.addEventListener("click", () => {
-                pinpad_press(element.dataset.btn);
-            })
-        })
-
         pwOverlayCancelButton.addEventListener("click", () => {
             hide_password_overlay();
         });
-
     })
 
-
     function set_username(username) {
         usernameInputElement.value = username;
     }
 
     function show_password_overlay() {
-
         window.scrollTo(0, 0);
         passwordOverlayElement.classList.remove("nodisplay");
         userlistContainerElement.classList.add("nodisplay");
-
     }
 
     function hide_password_overlay() {
-
         passwordOverlayElement.classList.add("nodisplay");
         userlistContainerElement.classList.remove("nodisplay");
         passwordInputElement.value = "";
-
-    }
-
-    function pinpad_press(key) {
-        if (key == "enter") {
-            submitButton.click();
-        }
-        else if (key == "x") {
-            passwordInputElement.value = "";
-        }
-        else {
-            passwordInputElement.value += key;
-        }
     }
 
 })()

app/static/js/simple-keyboard_configure.js

@@ -0,0 +1,82 @@
+(() => {
+    // layouts derived from
+    // https://github.com/simple-keyboard/simple-keyboard-layouts/blob/master/src/lib/layouts/
+    const layout_de = {
+        default: [
+            "^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
+            "{tab} q w e r t z u i o p \u00FC +",
+            "{lock} a s d f g h j k l \u00F6 \u00E4 #",
+            "{shift} < y x c v b n m , . - {shift}",
+            ".com @ {space}",
+        ],
+        shift: [
+            '\u00B0 ! " \u00A7 $ % & / ( ) = ? ` {bksp}',
+            "{tab} Q W E R T Z U I O P \u00DC *",
+            "{lock} A S D F G H J K L \u00D6 \u00C4 '",
+            "{shift} > Y X C V B N M ; : _ {shift}",
+            ".com @ {space}",
+        ],
+    }
+    const layout_en = {
+        default: [
+            "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+            "{tab} q w e r t y u i o p [ ] \\",
+            "{lock} a s d f g h j k l ; '",
+            "{shift} z x c v b n m , . / {shift}",
+            ".com @ {space}",
+        ],
+        shift: [
+            "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
+            "{tab} Q W E R T Y U I O P { } |",
+            '{lock} A S D F G H J K L : "',
+            "{shift} Z X C V B N M < > ? {shift}",
+            ".com @ {space}",
+        ],
+    }
+    const layout_numeric = {
+        default: [
+            "1 2 3",
+            "4 5 6",
+            "7 8 9",
+            "{bksp} . ,"
+        ]
+    }
+    // Configure keyboard when all DOM content has loaded
+    document.addEventListener("DOMContentLoaded", () => {
+        // Get element to send input to
+        let keyboardInputElement = document.querySelector(".keyboard-input");
+        // Get language code
+        let layoutCode = document.getElementById("keyboard").dataset.layout;
+        // Determine keyboard layout (default: en)
+        let layout;
+        switch (layoutCode) {
+            case "de":
+                layout = layout_de;
+                break;
+            case "numeric":
+                layout = layout_numeric;
+                break;
+            default:
+                layout = layout_en;
+        }
+        // determine if the numeric class has to be added
+        if (layoutCode == "numeric") {
+            theme = "hg-theme-default darkTheme numeric"
+        }
+        else {
+            theme = "hg-theme-default darkTheme"
+        }
+        // virtual keyboard
+        const Keyboard = window.SimpleKeyboard.default;
+        const myKeyboard = new Keyboard({
+            theme: theme,
+            // choose german layout if language is de,
+            // else choose english layout
+            layout: layout,
+            onChange: (input) => {
+                keyboardInputElement.value = input;
+            }
+        });
+
+    });
+})()

app/templates/deposit.html

@@ -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>
    

app/templates/registration/login.html

@@ -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" %}'>
+                <input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" 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>
-
                 <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>