From e6feded61fe9a1c3d60904eec817648a0746263e Mon Sep 17 00:00:00 2001 From: Ambrose Chua Date: Sun, 9 Oct 2016 20:19:16 +0800 Subject: [PATCH] Fancier token input --- assets/login.css | 20 +++++++++++ assets/login.js | 64 +++++++++++++++++++++++++++-------- package.json | 2 +- views/layouts/main.handlebars | 4 +-- views/login.handlebars | 39 ++++++++++----------- 5 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 assets/login.css diff --git a/assets/login.css b/assets/login.css new file mode 100644 index 0000000..3b044bf --- /dev/null +++ b/assets/login.css @@ -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; +} + diff --git a/assets/login.js b/assets/login.js index 9adb610..e107936 100644 --- a/assets/login.js +++ b/assets/login.js @@ -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); + }); }); diff --git a/package.json b/package.json index b2c23f1..fd460c1 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index 96742e5..bccc464 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -10,12 +10,12 @@ + + - - {{{body}}} diff --git a/views/login.handlebars b/views/login.handlebars index 31fde75..9530dcb 100644 --- a/views/login.handlebars +++ b/views/login.handlebars @@ -1,31 +1,32 @@ {{> navbar isloggingin=true}}
-
-
- {{#each errors as |error|}} - - {{/each}} - {{#each successes as |success|}} - - {{/each}} -
+