Commit d243b387 authored by Floréal Cabanettes's avatar Floréal Cabanettes

Add numeric pad on login screen

parent 93c9f948
......@@ -261,3 +261,76 @@ div.loading {
height: 26px;
}
}
#password {
position: relative;
width: 190px !important;
margin: -5px 0 20px 0 !important;
}
#container {
margin: 20px auto;
width: 195px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
#keyboard li {
float: left;
margin: 0 5px 5px 0;
width: 60px;
height: 60px;
font-size: 24px;
line-height: 60px;
text-align: center;
background: #fff;
border: 1px solid #f9f9f9;
border-radius: 5px;
}
.capslock, .tab, .left-shift, .clearl, .switch {
clear: left;
}
#keyboard .tab, #keyboard .delete {
width: 70px;
}
#keyboard .capslock {
width: 80px;
}
#keyboard .return {
width: 125px;
}
#keyboard .left-shift{
width: 70px;
}
#keyboard .switch {
width: 90px;
}
#keyboard .rightright-shift {
width: 109px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
#keyboard .space {
float: left;
width: 556px;
}
#keyboard .switch, #keyboard .space, #keyboard .return{
font-size: 16px;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
\ No newline at end of file
......@@ -37,8 +37,23 @@
<div id="login">
<form action="#" id="login-form">
<label for="password">Pin</label>
<input id="password" type="password" pattern="[0-9]{4}" maxlength="4" inputmode="numeric"/>
<button type="button" id="dologin">Se connecter</button>
<div id="container">
<input id="password" type="password" pattern="[0-9]{4}" maxlength="4" inputmode="numeric"/>
<ul id="keyboard">
<li class="letter">7</li>
<li class="letter">8</li>
<li class="letter">9</li>
<li class="letter clearl">4</li>
<li class="letter">5</li>
<li class="letter">6</li>
<li class="letter clearl">1</li>
<li class="letter ">2</li>
<li class="letter">3</li>
<li class="letter clearl">0</li>
<li id="dologin" class="return">Login</li>
</ul>
</div>
</form>
</div>
......
......@@ -11,6 +11,7 @@ function getSum(total, num) {
trackmybank.init = function() {
$("#dologin").on("click touch", trackmybank.login);
$(".letter").on("click touch", trackmybank.entercode);
$("form#login-form").on("submit", function(e) {
e.preventDefault();
trackmybank.login();
......@@ -56,6 +57,14 @@ trackmybank.init_special_fields = function () {
trackmybank.set_datemask();
};
trackmybank.entercode = function() {
let passwords = $("#password");
passwords.val(passwords.val() + $(this).html());
if (passwords.val().length > 4) {
passwords.val("");
}
};
trackmybank.set_datemask = function (element) {
// Datetime picker:
$(element ? element : '.datepicker').datepicker({
......@@ -115,7 +124,7 @@ trackmybank.force_additions = function() {
trackmybank.goback = function() {
$("#addition").hide();
$("#logged").show();
}
};
trackmybank.show_addition = function() {
trackmybank.force_additions();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment