Fancier token input
parent
e4f349a301
commit
e6feded61f
|
|
@ -0,0 +1,20 @@
|
|||
.input-group-digits {
|
||||
}
|
||||
.input-group-digits .form-control {
|
||||
font-size: 2rem;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
width: 2.75rem;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
.input-group-digits input[type=number]::-webkit-inner-spin-button,
|
||||
.input-group-digits input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 19.2em;
|
||||
}
|
||||
|
||||
|
|
@ -1,19 +1,53 @@
|
|||
/* jshint esversion: 6 */
|
||||
|
||||
$(document).ready(() => {
|
||||
let $token = $("#login-token");
|
||||
let cleanup = () => {
|
||||
let val = $token.val();
|
||||
val = val.replace(/[^0-9 ]/, "");
|
||||
val = val.split("");
|
||||
if (val.length > 3 && val[3] != " ") {
|
||||
val.splice(3, 0, " ");
|
||||
}
|
||||
val.splice(7);
|
||||
val = val.join("");
|
||||
$token.val(val);
|
||||
};
|
||||
$token.on("keyup", cleanup);
|
||||
$token.on("keydown", cleanup);
|
||||
$token.on("change", cleanup);
|
||||
let $inputs = $(".input-group-digits");
|
||||
$inputs.each((i, input) => {
|
||||
let cleanup = () => {
|
||||
$(input).find("input").each((i, ele) => {
|
||||
let cleaned = $(ele).val().replace(/[^0-9]/, "");
|
||||
$(ele).val(cleaned);
|
||||
});
|
||||
};
|
||||
let update = (e) => {
|
||||
$digits = $(input).find("input");
|
||||
|
||||
// Cleanup
|
||||
cleanup();
|
||||
|
||||
// Shift characters
|
||||
let excess = "";
|
||||
$digits.each((i, ele) => {
|
||||
let now = excess + $(ele).val();
|
||||
$(ele).val(now.charAt(0));
|
||||
excess = now.substr(1);
|
||||
});
|
||||
|
||||
// Move cursor to empty
|
||||
$digits.each((i, ele) => {
|
||||
if (!$(ele).val()) {
|
||||
$(ele).focus();
|
||||
if (e.which == 8) {
|
||||
$(ele).prev().focus().val("");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Submit if last digit is filled
|
||||
if ($($digits[$digits.length - 1]).val()) {
|
||||
let token = $.map(
|
||||
$digits,
|
||||
d => $(d).val()
|
||||
).join("");
|
||||
let $value = $(input).parent().find("#login-token-value");
|
||||
$value.val(token);
|
||||
$value.closest("form").submit();
|
||||
}
|
||||
};
|
||||
|
||||
$digits = $(input).find("input");
|
||||
$digits.on("keyup", update);
|
||||
$digits.on("change", update);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "file-manager",
|
||||
"description": "A simple file manager",
|
||||
"version": "0.0.5a",
|
||||
"version": "0.0.6a",
|
||||
"bin": {
|
||||
"file-manager": "./index.js"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
<script src="/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/filesize/filesize.es6.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts.css" />
|
||||
<script src="/assets/multi.js"></script>
|
||||
<link rel="stylesheet" href="/assets/upload.css" />
|
||||
<script src="/assets/upload.js"></script>
|
||||
<link rel="stylesheet" href="/assets/login.css" />
|
||||
<script src="/assets/login.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts.css" />
|
||||
</head>
|
||||
<body>
|
||||
{{{body}}}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,32 @@
|
|||
{{> navbar isloggingin=true}}
|
||||
|
||||
<main class="container" style="margin-top: 64px; margin-bottom: 64px;">
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
{{#each errors as |error|}}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{error}}
|
||||
</div>
|
||||
{{/each}}
|
||||
{{#each successes as |success|}}
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{success}}
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="card">
|
||||
<div class="login text-nowrap m-x-auto">
|
||||
{{#each errors as |error|}}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{error}}
|
||||
</div>
|
||||
{{/each}}
|
||||
{{#each successes as |success|}}
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{success}}
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="card">
|
||||
<form class="card-block" action="/@login" method="post">
|
||||
<div class="form-group">
|
||||
<label>Token:</label>
|
||||
<div class="input-group input-group-lg">
|
||||
<input name="token" id="login-token" type="text" class="form-control" placeholder="000 000" size="6" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-success" type="submit">Sign in</button>
|
||||
</span>
|
||||
<div class="input-group input-group-lg input-group-digits">
|
||||
<input type="number" class="form-control" placeholder="•" />
|
||||
<input type="number" class="form-control" placeholder="•" />
|
||||
<input type="number" class="form-control" placeholder="•" />
|
||||
<input type="number" class="form-control" placeholder="•" />
|
||||
<input type="number" class="form-control" placeholder="•" />
|
||||
<input type="number" class="form-control" placeholder="•" />
|
||||
</div>
|
||||
<input name="token" id="login-token-value" type="hidden" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue