refactor and user creating input redirect

3 files changed, 98 insertions, 84 deletions

diff --git a/abrechenbarkeit.lua b/abrechenbarkeit.lua
index 8eedccd..ae1b38a 100755
--- a/abrechenbarkeit.lua
+++ b/abrechenbarkeit.lua
@@ -60,7 +60,7 @@ local function get_user_theme(username)
     if username == "_jeb" then
         c = "html { animation: 2s jeb infinite; }"
         c = c .. "@keyframes jeb {\n"
-        for i=0,100 do
+        for i = 0, 100 do
             c = c .. string.format("%.02f%% { --hue: %.02f; } \n", i, i / 100 * 360)
         end
         c = c .. "\n}"
@@ -71,7 +71,7 @@ local function get_user_theme(username)
 end
 
 local function respond(status, title, body)
-	local themecss, themejs = get_user_theme(path and path:sub(2))
+    local themecss, themejs = get_user_theme(path and path:sub(2))
 
     print(string.format("Status: %d", status))
     print("Content-Type: text/html")
@@ -101,14 +101,14 @@ local function respond(status, title, body)
     ]],
         escape(title),
         stylesheet, -- style.css
-        themecss, -- theme for user
-        script, -- script.js
+        themecss,   -- theme for user
+        script,     -- script.js
         config.head_extra or ""
     ))
     body()
     print(string.format(
-    	"<script>%s</script></body></html>", 
-    	themejs
+        "<script>%s</script></body></html>",
+        themejs
     ))
 end
 
@@ -227,20 +227,20 @@ local function r_user_post(username)
     if data.pcode then
         for p_barcode, p_amount, p_name, p_owner in read_products() do
             if p_barcode == data.pcode then
-            	powner = p_owner
+                powner = p_owner
                 pcount = (tonumber(data.pcount) or 1) * (data.negate_pcount ~= nil and -1 or 1)
                 pcode = p_barcode
                 if amount == nil then amount = pcount * p_amount end
                 if comment == nil then
-                	comment = string.format("%s %d %s", pcount < 0 and "Buy" or "Restock",
+                    comment = string.format("%s %d %s", pcount < 0 and "Buy" or "Restock",
                         math.abs(pcount), p_name)
-                        
-					powner_comment = string.format("%s %d %s %s %s",
-						pcount < 0 and "Sell" or "Restock",
-						math.abs(pcount), p_name,
-						pcount < 0 and "to" or "by",
-						username)
-                    end
+
+                    powner_comment = string.format("%s %d %s %s %s",
+                        pcount < 0 and "Sell" or "Restock",
+                        math.abs(pcount), p_name,
+                        pcount < 0 and "to" or "by",
+                        username)
+                end
             end
         end
         if amount == nil then
@@ -258,12 +258,12 @@ local function r_user_post(username)
         return error_box("failed to open log")
     end
     local time = os.time()
-	-- subtract from buyer
+    -- subtract from buyer
     log:write(string.format("%d,%s,%d,%s,%s,%s\n", time, username, amount, pcode or "", pcount or "", comment))
     -- add to owner
     if powner then
-		-- count is always zero as doesn't affect stock
-	    log:write(string.format("%d,%s,%d,%s,%s,%s\n", time, powner, -amount, pcode or "", "", powner_comment))
+        -- count is always zero as doesn't affect stock
+        log:write(string.format("%d,%s,%d,%s,%s,%s\n", time, powner, -amount, pcode or "", "", powner_comment))
     end
     log:flush()
     log:close()
@@ -294,14 +294,14 @@ local function r_user(username)
                 <div class="notif"><p><i>This user account does not exist yet. It will only be created after the first transaction.</i></p></div>
             ]])
         else
-			print([[<div class="backgroundbox userinfo">]])
+            print([[<div class="backgroundbox userinfo">]])
             print(string.format([[
                 Current balance:<br><span class="amount-%s balance-value">%.02f€</span><br>
             ]], balance >= 0 and "pos" or "neg", balance / 100))
             print(string.format([[
                 Last transaction added %s ago. <a href="/%s?log">View user log</a>
             ]], format_duration(os.time() - last_txn), username))
-			print([[</div>]])
+            print([[</div>]])
         end
         print([[<div class="transactions container firstchildlarge">]])
         print([[<div class="amount-presets backgroundbox">]])
@@ -403,7 +403,7 @@ end
 local function r_index()
     return respond(200, "Abrechenbarkeit", function()
         print([[
-            <form action="/" method="GET" class="creation">
+            <form action="/" method="GET" id="user_creation">
                 <h3>User Creation</h3>
                 <label for="username">Username: </label>
                 <input type="text" name="create_user" id="username" />
@@ -426,9 +426,9 @@ local function r_index()
 end
 
 local function validate_username(username)
-	-- disallow leading or traling whitespace
-	return username ~= nil
-	    and username:match("^([%w_ -]+)$") ~= nil
+    -- disallow leading or traling whitespace
+    return username ~= nil
+        and username:match("^([%w_ -]+)$") ~= nil
         and username:match("^%s") == nil
         and username:match("%s$") == nil
 end
@@ -517,7 +517,13 @@ local function r_products()
             </form>
             </div>
         ]])
-        print([[<table class="productlist"><tr><th>Name</th><th>Price</th><th>Barcode</th><th>Count</th><th>Owner</th></tr>]])
+        print([[<table class="productlist"><tr>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Barcode</th>
+            <th>Count</th>
+            <th>Owner</th>
+        </tr>]])
         local pbals = product_balances()
         for barcode, price, name, owner in read_products() do
             print(string.format([[
diff --git a/script.js b/script.js
index 1a494b8..27de46e 100644
--- a/script.js
+++ b/script.js
@@ -1,10 +1,21 @@
 /// <reference lib="dom" />
 
-document.addEventListener("keypress", ev => {
+document.addEventListener("keydown", ev => {
     if (!(document.activeElement instanceof HTMLInputElement)) {
-        if (ev.code.startsWith("Digit"))
-            document.forms.buy_product.pcode.value += ev.code.substring(5)
-        if (ev.code == "Enter")
-            document.forms.buy_product.submit()
+        if (ev.code.startsWith("Digit")) {
+            if (document.forms.buy_product.pcode)
+                return document.forms.buy_product.pcode.value += ev.code.substring(5)
+        } else if (ev.code == "Enter") {
+            if (document.forms.buy_product)
+                return document.forms.buy_product.submit()
+            if (document.forms.user_creation)
+                return document.forms.user_creation.submit()
+        } else if (ev.code.startsWith("Key") || ev.code == "Space") {
+            if (document.forms.user_creation)
+                return document.forms.user_creation.create_user.value += ev.key
+        } else if (ev.code == "Backspace") {
+            if (document.forms.user_creation)
+                return document.forms.user_creation.create_user.value = ""
+        }
     }
 })
diff --git a/style.css b/style.css
index 769a808..0ec65cd 100644
--- a/style.css
+++ b/style.css
@@ -8,17 +8,15 @@
 }
 
 .trans {
-	background: linear-gradient(
-	  #60d0fa50 0%,
-	  #60d0fa50 19%,
-	  #f5acba50 20%,
-	  #f5acba50 39%,
-	  #FFFFFF50 40%,
-	  #FFFFFF50 59%,
-	  #f5acba50 60%,
-	  #f5acba50 79%,
-	  #60d0fa50 80%
-	);
+    background: linear-gradient(#60d0fa50 0%,
+            #60d0fa50 19%,
+            #f5acba50 20%,
+            #f5acba50 39%,
+            #FFFFFF50 40%,
+            #FFFFFF50 59%,
+            #f5acba50 60%,
+            #f5acba50 79%,
+            #60d0fa50 80%);
 }
 
 body {
@@ -86,10 +84,6 @@ nav> :last-child {
     border-radius: 4px;
 }
 
-.notif > * {
-	color: black;
-}
-
 .notif.error {
     background-color: rgb(118, 13, 13);
 }
@@ -99,14 +93,14 @@ nav> :last-child {
 }
 
 /* landing page */
-form.creation {
+form#user_creation {
     background-color: var(--b2);
     padding: 1em;
     margin-top: 2em;
     border-radius: 4px;
 }
 
-form.creation>h3 {
+form#user_creation>h3 {
     margin: 5px;
     margin-right: 2em;
 }
@@ -120,7 +114,7 @@ input[type="text"] {
     min-width: 10em;
 }
 
-form.creation>* {
+form#user_creation>* {
     display: inline-block;
     margin-right: 1.5em;
 }
@@ -170,12 +164,12 @@ li {
 }
 
 h1 {
-	padding-left: 1rem;
+    padding-left: 1rem;
 }
 
 .userinfo {
-	margin-left: 1rem;
-	padding: 1rem;
+    margin-left: 1rem;
+    padding: 1rem;
 }
 
 /* Amount selector user page */
@@ -284,12 +278,12 @@ tr:nth-child(2n) {
     background-color: var(--b0);
 }
 
-table.log > tbody {
-	transform: rotate(180deg);
+table.log>tbody {
+    transform: rotate(180deg);
 }
 
-table.log > tbody > tr {
-	transform: rotate(180deg);
+table.log>tbody>tr {
+    transform: rotate(180deg);
 }
 
 input {
@@ -303,39 +297,42 @@ input:not([type=submit]) {
 }
 
 @media print {
-	nav, .container {
-		display: none;
-	}
 
-	h1 {
-		font-size: 2em;
-		text-decoration: underline;
-	}
+    nav,
+    .container {
+        display: none;
+    }
+
+    h1 {
+        font-size: 2em;
+        text-decoration: underline;
+    }
 
-	table.log:before {
-		content: "Abrechnung";
-		font-size: 2em;
-		text-decoration: underline;
-	}
+    table.log:before {
+        content: "Abrechnung";
+        font-size: 2em;
+        text-decoration: underline;
+    }
 
-	div.userlist:before {
-		content: "User List, is still work in progress :/";
-		clear: right;
-		width: 100vw;
-		font-size: 2em;
-		text-decoration: underline;
-		display: block;
-	}
+    div.userlist:before {
+        content: "User List, is still work in progress :/";
+        clear: right;
+        width: 100vw;
+        font-size: 2em;
+        text-decoration: underline;
+        display: block;
+    }
 
-	.userlist a, ul {
-		display: block;
-		width: 100%;
-	}
+    .userlist a,
+    ul {
+        display: block;
+        width: 100%;
+    }
 
-	.userlist > li > a {
-		width: 100%;
-		display: flex;
-	}
+    .userlist>li>a {
+        width: 100%;
+        display: flex;
+    }
 
     tr :last-child {
         display: none;
@@ -354,4 +351,4 @@ input:not([type=submit]) {
     form {
         display: none;
     }
-}
+}
\ No newline at end of file