From 419e991562ccb5e79e704f39c3622398cba89719 Mon Sep 17 00:00:00 2001
From: Paul Mathieu <paul@ponteilla.net>
Date: Wed, 7 Sep 2022 19:32:48 +0200
Subject: [PATCH] Add auth form

---
 client/wrap.js | 48 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/client/wrap.js b/client/wrap.js
index 5f9436e..fc6b93d 100644
--- a/client/wrap.js
+++ b/client/wrap.js
@@ -4,7 +4,7 @@ const backend_api = {
     'dev': 'http://scrawny.local:3000',
 }[config];
 
-const token = localStorage.getItem('token');
+let token = localStorage.getItem('token');
 
 async function getBandz() {
     const uri = `${backend_api}/bandz`;
@@ -23,6 +23,16 @@ async function wrapAChikin(req) {
     return res.chikinId;
 }
 
+async function authenticate(password) {
+    const uri = `${backend_api}/toktok`;
+    const res = await $.ajax(uri, {
+        type: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify({password}),
+    });
+    return res;
+}
+
 function printLabel(chikinId) {
     const uri = `${backend_api}/print`;
     $.ajax(uri, {
@@ -56,10 +66,10 @@ $(document).ready(() => {
 
     const action = $('<div class="section">')
         .append(
-            $('<a class="btn">wrap-a-chikin<i class="material-icons right">send</i></a>')
+            $('<a class="btn" id="send">wrap-a-chikin<i class="material-icons right">send</i></a>')
             .click(async () => {
                 loader.show();
-                $('.btn').addClass("disabled");
+                $('#send').addClass("disabled");
 
                 const req = {
                     bandId: $('select').val(),
@@ -73,7 +83,7 @@ $(document).ready(() => {
                 } finally {
                     loader.hide();
                     $('#weight').val('');
-                    $('.btn').removeClass('disabled');
+                    $('#send').removeClass('disabled');
                 }
             })
         );
@@ -97,6 +107,36 @@ $(document).ready(() => {
         $('select').formSelect();
     });
 
+    const authBlock = $('<div id="authBlock">').hide()
+        .append(
+            $('<div class="input-field col s12">')
+            .append('<input type="password" id="password">')
+            .append('<label>password</label>')
+        )
+        .append(
+            $('<div class="input-field col s12">').append(
+                $('<a class="btn">authenticate</a>')
+                .click(async () => {
+                    const {token:tok} = await authenticate($('#password').val());
+                    localStorage.setItem('token', tok);
+                    token = tok;
+                    $('#authBlock').hide();
+                })
+            )
+        );
+
+    appbody.append(authBlock);
+
+    let tapped = 0;
+    $('.page-footer').click(() => {
+        tapped += 1;
+
+        if (tapped >= 7) {
+            tapped = 0;
+            $('#authBlock').show();
+        }
+    });
+
     $('select').formSelect();
     $('.datepicker').datepicker({setDefaultDate: true, defaultDate: new Date()});
 });