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 */
|
/* jshint esversion: 6 */
|
||||||
|
|
||||||
$(document).ready(() => {
|
$(document).ready(() => {
|
||||||
let $token = $("#login-token");
|
let $inputs = $(".input-group-digits");
|
||||||
let cleanup = () => {
|
$inputs.each((i, input) => {
|
||||||
let val = $token.val();
|
let cleanup = () => {
|
||||||
val = val.replace(/[^0-9 ]/, "");
|
$(input).find("input").each((i, ele) => {
|
||||||
val = val.split("");
|
let cleaned = $(ele).val().replace(/[^0-9]/, "");
|
||||||
if (val.length > 3 && val[3] != " ") {
|
$(ele).val(cleaned);
|
||||||
val.splice(3, 0, " ");
|
});
|
||||||
}
|
};
|
||||||
val.splice(7);
|
let update = (e) => {
|
||||||
val = val.join("");
|
$digits = $(input).find("input");
|
||||||
$token.val(val);
|
|
||||||
};
|
// Cleanup
|
||||||
$token.on("keyup", cleanup);
|
cleanup();
|
||||||
$token.on("keydown", cleanup);
|
|
||||||
$token.on("change", 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",
|
"name": "file-manager",
|
||||||
"description": "A simple file manager",
|
"description": "A simple file manager",
|
||||||
"version": "0.0.5a",
|
"version": "0.0.6a",
|
||||||
"bin": {
|
"bin": {
|
||||||
"file-manager": "./index.js"
|
"file-manager": "./index.js"
|
||||||
},
|
},
|
||||||
|
|
|
@ -10,12 +10,12 @@
|
||||||
<script src="/bootstrap/js/bootstrap.min.js"></script>
|
<script src="/bootstrap/js/bootstrap.min.js"></script>
|
||||||
<script src="/filesize/filesize.es6.js"></script>
|
<script src="/filesize/filesize.es6.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/assets/fonts.css" />
|
||||||
<script src="/assets/multi.js"></script>
|
<script src="/assets/multi.js"></script>
|
||||||
<link rel="stylesheet" href="/assets/upload.css" />
|
<link rel="stylesheet" href="/assets/upload.css" />
|
||||||
<script src="/assets/upload.js"></script>
|
<script src="/assets/upload.js"></script>
|
||||||
|
<link rel="stylesheet" href="/assets/login.css" />
|
||||||
<script src="/assets/login.js"></script>
|
<script src="/assets/login.js"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="/assets/fonts.css" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{{body}}}
|
{{{body}}}
|
||||||
|
|
|
@ -1,31 +1,32 @@
|
||||||
{{> navbar isloggingin=true}}
|
{{> navbar isloggingin=true}}
|
||||||
|
|
||||||
<main class="container" style="margin-top: 64px; margin-bottom: 64px;">
|
<main class="container" style="margin-top: 64px; margin-bottom: 64px;">
|
||||||
<div class="row">
|
<div class="login text-nowrap m-x-auto">
|
||||||
<div class="col-md-6 offset-md-3">
|
{{#each errors as |error|}}
|
||||||
{{#each errors as |error|}}
|
<div class="alert alert-danger" role="alert">
|
||||||
<div class="alert alert-danger" role="alert">
|
{{error}}
|
||||||
{{error}}
|
</div>
|
||||||
</div>
|
{{/each}}
|
||||||
{{/each}}
|
{{#each successes as |success|}}
|
||||||
{{#each successes as |success|}}
|
<div class="alert alert-success" role="alert">
|
||||||
<div class="alert alert-success" role="alert">
|
{{success}}
|
||||||
{{success}}
|
</div>
|
||||||
</div>
|
{{/each}}
|
||||||
{{/each}}
|
<div class="card">
|
||||||
<div class="card">
|
|
||||||
<form class="card-block" action="/@login" method="post">
|
<form class="card-block" action="/@login" method="post">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Token:</label>
|
<label>Token:</label>
|
||||||
<div class="input-group input-group-lg">
|
<div class="input-group input-group-lg input-group-digits">
|
||||||
<input name="token" id="login-token" type="text" class="form-control" placeholder="000 000" size="6" />
|
<input type="number" class="form-control" placeholder="•" />
|
||||||
<span class="input-group-btn">
|
<input type="number" class="form-control" placeholder="•" />
|
||||||
<button class="btn btn-success" type="submit">Sign in</button>
|
<input type="number" class="form-control" placeholder="•" />
|
||||||
</span>
|
<input type="number" class="form-control" placeholder="•" />
|
||||||
|
<input type="number" class="form-control" placeholder="•" />
|
||||||
|
<input type="number" class="form-control" placeholder="•" />
|
||||||
</div>
|
</div>
|
||||||
|
<input name="token" id="login-token-value" type="hidden" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
Loading…
Reference in New Issue