Merge branch '2-create-authorisation-client' into 'main'

Create AuthWorker

Closes #2

See merge request hive/hb-auth!3

.eslintignore

@@ -5,4 +5,5 @@ dist/
 jest.config.*
 rollup.*
 tsconfig.*
-example/
+example/
+index.d.ts

.eslintrc.js

@@ -19,5 +19,10 @@ module.exports = {
     project: "tsconfig.eslint.json",
     tsconfigRootDir: __dirname,
   },
-  rules: {},
+  rules: {
+    "n/handle-callback-err": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "new-cap": "off",
+    "@typescript-eslint/naming-convention": "off"
+  },
 };

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 lib/
 .DS_Store
 coverage/
-dist/
+dist/
+.parcel-cache

babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-    presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
-};
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

example/app.js

@@ -0,0 +1,101 @@
+import { OnlineClient, isSupportWebWorker } from "../dist/hb-auth.mjs";
+
+const CHAIN_ID =
+  "beeab0de00000000000000000000000000000000000000000000000000000000";
+const MY_USER = "ngc1559";
+
+const client = new OnlineClient();
+
+client.initialize().then(async (authClient) => {
+  // display auth status
+  const statusEl = document.getElementById("auth-status");
+  const errorEl = document.getElementById("error");
+  errorEl.style.color = "red";
+
+  const updateStatus = async () => {
+    errorEl.innerText = "";
+    await authClient.getAuthByUser(MY_USER).then((auth) => {
+      if (!auth) {
+        statusEl.innerText = "There is no registered user";
+        statusEl.style.color = "grey";
+      } else {
+        if (auth.authorized) {
+          statusEl.innerHTML = `Authorized with username: <b>${auth.username}</b>`;
+          statusEl.style.color = "green";
+        } else {
+          statusEl.innerHTML = `User: <b>${auth.username}</b> requires authorization`;
+          statusEl.style.color = "red";
+        }
+      }
+    });
+  };
+
+  // get initial status
+  await updateStatus();
+
+  // fired when session ends or user logs out
+  await authClient.setSessionEndCallback(async () => {
+    await updateStatus();
+  });
+
+  // handle login form submit
+  const loginForm = document.getElementById("login-form");
+
+  loginForm.onsubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const data = {};
+    for (const [key, val] of formData.entries()) {
+      data[key] = val;
+    }
+    console.log("form data ", data);
+    authClient
+      .authenticate(data.username, data.password, data.type)
+      .then((status) => {
+        if (status.ok) {
+          updateStatus();
+        } else {
+          updateStatus();
+          errorEl.innerText = "Not authorized: Invalid credentials";
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        errorEl.innerText = err.message;
+      });
+  };
+
+  // handle registration form submit
+  const registrationForm = document.getElementById("reg-form");
+
+  registrationForm.onsubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const data = {};
+    for (const [key, val] of formData.entries()) {
+      data[key] = val;
+    }
+
+    authClient
+      .register(data.username, data.password, data.key, data.type)
+      .then((status) => {
+        if (status.ok) {
+          updateStatus();
+        } else {
+          updateStatus();
+          errorEl.innerText = "Not authorized: Invalid credentials";
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        errorEl.innerText = err.message;
+      });
+  };
+
+  // handle logout
+  document.getElementById("logout").onclick = async (event) => {
+    await authClient.logout().then(() => {
+      updateStatus();
+    });
+  };
+});

example/controller.js

@@ -0,0 +1,17 @@
+// handle tab change
+function onTabSelect(event, id) {
+    const allTabs = document.querySelectorAll(".tabs ul li");
+    allTabs.forEach((tab) => tab.classList.remove('is-active'));
+
+    event.parentElement.classList.add('is-active');
+
+    const tabs = document.querySelectorAll('.tab');
+    tabs.forEach((tab) => {
+      if (tab.id === id) {
+        tab.classList.remove('hidden')
+      } else {
+        tab.classList.add('hidden')
+      }
+    });
+  }
+

example/index.html

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Library Example Usage</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div id="status" class="box">
+      Authorization status: <span id="auth-status">loading...</span>
+    </div>
+
+    <div class="tabs">
+      <ul>
+        <li class="is-active"><a onclick="onTabSelect(this, 'login')">Login</a></li>
+        <li><a onclick="onTabSelect(this, 'register')">Authorize new user</a></li>
+        <li><a onclick="onTabSelect(this, 'logout')">Logout</a></li>
+      </ul>
+    </div>
+
+    <div>
+      <span id="error"></span>
+    </div>
+
+    <div id="login" class="tab column is-half">
+      <form id="login-form">
+        <div class="field">
+          <label class="label">Username</label>
+          <div class="control">
+            <input
+              name="username"
+              class="input"
+              type="text"
+              placeholder="Hive username"
+            />
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Password</label>
+          <div class="control">
+            <input
+              name="password"
+              class="input"
+              type="text"
+              placeholder="Your password"
+            />
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Key Type</label>
+          <div class="select">
+            <select name="type">
+              <option value="" selected disabled>Key Type</option>
+              <option value="posting">Posting</option>
+              <option value="active">Active</option>
+            </select>
+          </div>
+        </div>
+
+        <button class="button is-primary" style="float: right;" type="submit">Login</button>
+      </form>
+    </div>
+
+    <div id="register" class="tab column is-half hidden">
+      <form id="reg-form">
+        <div class="field">
+          <label class="label">Username</label>
+          <div class="control">
+            <input
+              name="username"
+              class="input"
+              type="text"
+              placeholder="Hive username"
+            />
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Password</label>
+          <div class="control">
+            <input
+              name="password"
+              class="input"
+              type="text"
+              placeholder="Your auth password"
+            />
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Key Type</label>
+          <div class="select">
+            <select name="type">
+              <option value="" selected disabled>Key Type</option>
+              <option value="posting">Posting</option>
+              <option value="active">Active</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Private Key</label>
+          <div class="control">
+            <input
+              name="key"
+              class="input"
+              type="text"
+              placeholder="Your private key"
+            />
+          </div>
+        </div>
+
+        <button class="button is-primary" style="float: right;" type="submit">Authorize</button>
+      </form>
+    </div>
+
+    <div id="logout" class="tab column is-half hidden">
+      <div class="block">
+        Process logout; clicking this button you will be logged out, your keys will be cleared,
+        so you will need to go through auth registration process again.
+      </div>
+      <button id="logout" class="button is-danger">Logout</button>
+    </div>
+
+    <script type="module" src="./app.js"></script>
+    <script src="./controller.js"></script>
+  </body>
+</html>

example/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "hb-auth-example",
+  "description": "hb-auth example app",
+  "version": "0.0.0",
+  "dependencies": {
+
+  }
+}

example/styles.css

@@ -0,0 +1,9 @@
+@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma-rtl.min.css";
+
+body {
+    padding: 1em;
+}
+
+.hidden {
+    display: none;
+}

index.d.ts

@@ -0,0 +1 @@
+declare module 'worker';

jest.config.js

@@ -15,7 +15,7 @@ const config = {
   // cacheDirectory: "/tmp/jest_rs",
 
   // Automatically clear mock calls, instances, contexts and results before every test
-  clearMocks: true,
+  // clearMocks: true,
 
   // Indicates whether the coverage information should be collected while executing the test
   collectCoverage: true,
@@ -32,7 +32,9 @@ const config = {
   coveragePathIgnorePatterns: [
     "/node_modules/",
     "/lib/",
-    "/tsconfig/"
+    "/tsconfig/",
+    "/src/index.ts",
+    "/src/worker.ts"
   ],
 
   // Indicates which provider should be used to instrument code for coverage
@@ -93,7 +95,9 @@ const config = {
   // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+    "worker": __dirname + "/src/worker.ts"
+  },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],