tucmc-auth - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/index.d.ts

 declare module "tucmc-auth" {
-
   interface UserData {
-    studentID: string,
-    title: string,
-    firstname: string,
-    lastname: string,
-    email: string
+    studentID: string;
+    title: string;
+    firstname: string;
+    lastname: string;
+    email: string;
   }
 
   interface IAuthContext {
-    SignInWithTUCMC: () => JSX.Element,
-    signOut: () => void,
-    reFetch: () => void,
-    userData: UserData | null
+    loading: boolean;
+    signIn: () => void;
+    signOut: () => void;
+    reFetch: () => void;
+    userData: UserData | null;
   }
 
-  export function AuthProvider({children, TOKEN: string}): JSX.Element
-  export function useAuth(): IAuthContext
+  export function AuthProvider({ children, TOKEN: string }): JSX.Element;
+  export function useAuth(): IAuthContext;
 }

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React$1, { useContext, useState, useEffect } from 'react';
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
@@ -19,2 +19,13 @@
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -58,132 +69,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 
-var Loader = function () {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    style: {
-      margin: "auto",
-      shapeRendering: "auto",
-      width: "40px",
-      height: "32px"
-    },
-    viewBox: "0 0 100 100",
-    preserveAspectRatio: "xMidYMid"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "84",
-    cy: "50",
-    r: "10",
-    fill: "#ffffff"
-  }, /*#__PURE__*/React.createElement("animate", {
-    attributeName: "r",
-    repeatCount: "indefinite",
-    dur: "0.7142857142857142s",
-    calcMode: "spline",
-    keyTimes: "0;1",
-    values: "10;0",
-    keySplines: "0 0.5 0.5 1",
-    begin: "0s"
-  }), /*#__PURE__*/React.createElement("animate", {
-    attributeName: "fill",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "discrete",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "#ffffff;#ffffff;#ffffff;#ffffff;#ffffff",
-    begin: "0s"
-  })), /*#__PURE__*/React.createElement("circle", {
-    cx: "16",
-    cy: "50",
-    r: "10",
-    fill: "#ffffff"
-  }, /*#__PURE__*/React.createElement("animate", {
-    attributeName: "r",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "0;0;10;10;10",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "0s"
-  }), /*#__PURE__*/React.createElement("animate", {
-    attributeName: "cx",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "16;16;16;50;84",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "0s"
-  })), /*#__PURE__*/React.createElement("circle", {
-    cx: "50",
-    cy: "50",
-    r: "10",
-    fill: "#ffffff"
-  }, /*#__PURE__*/React.createElement("animate", {
-    attributeName: "r",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "0;0;10;10;10",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "-0.7142857142857142s"
-  }), /*#__PURE__*/React.createElement("animate", {
-    attributeName: "cx",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "16;16;16;50;84",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "-0.7142857142857142s"
-  })), /*#__PURE__*/React.createElement("circle", {
-    cx: "84",
-    cy: "50",
-    r: "10",
-    fill: "#ffffff"
-  }, /*#__PURE__*/React.createElement("animate", {
-    attributeName: "r",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "0;0;10;10;10",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "-1.4285714285714284s"
-  }), /*#__PURE__*/React.createElement("animate", {
-    attributeName: "cx",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "16;16;16;50;84",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "-1.4285714285714284s"
-  })), /*#__PURE__*/React.createElement("circle", {
-    cx: "16",
-    cy: "50",
-    r: "10",
-    fill: "#ffffff"
-  }, /*#__PURE__*/React.createElement("animate", {
-    attributeName: "r",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "0;0;10;10;10",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "-2.142857142857143s"
-  }), /*#__PURE__*/React.createElement("animate", {
-    attributeName: "cx",
-    repeatCount: "indefinite",
-    dur: "2.8571428571428568s",
-    calcMode: "spline",
-    keyTimes: "0;0.25;0.5;0.75;1",
-    values: "16;16;16;50;84",
-    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
-    begin: "-2.142857142857143s"
-  })));
-};
-
-var AuthContext = /*#__PURE__*/React.createContext(null);
+var AuthContext = /*#__PURE__*/React$1.createContext(null);
 var useAuth = function () {
@@ -196,3 +78,3 @@ return useContext(AuthContext);
   var auth = useProvideAuth(TOKEN);
-  return /*#__PURE__*/React.createElement(AuthContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(AuthContext.Provider, {
     value: auth
@@ -232,18 +114,2 @@ }, children);
 
-  var SignInWithTUCMC = function () {
-    return /*#__PURE__*/React.createElement("button", {
-      onClick: signin,
-      style: {
-        backgroundImage: "linear-gradient(to right, #a78bfa, #ec4899, #ef4444)",
-        color: "rgba(255, 255, 255, 1)",
-        padding: loading ? "0.14rem 4.71rem" : "0.5rem 2rem",
-        fontWeight: 600,
-        borderRadius: "0.375rem",
-        fontSize: "0.875rem",
-        lineHeight: "1.25rem",
-        border: "none"
-      }
-    }, loading ? /*#__PURE__*/React.createElement(Loader, null) : "Login with TUCMC");
-  };
-
   useEffect(function () {
@@ -253,7 +119,2 @@ reFetch();
 
-  var signOut = function () {
-    window.localStorage.setItem("data", "");
-    reFetch();
-  };
-
   var fetchToken = function () {
@@ -280,5 +141,5 @@ return __awaiter(_this, void 0, void 0, function () {
             , fetch("https://account.triamudom.club/api/token", {
-              method: 'POST',
+              method: "POST",
               headers: {
-                'Content-Type': 'application/json'
+                "Content-Type": "application/json"
               },
@@ -349,5 +210,5 @@ body: JSON.stringify({
             , fetch("https://account.triamudom.club/api/token", {
-              method: 'POST',
+              method: "POST",
               headers: {
-                'Content-Type': 'application/json'
+                "Content-Type": "application/json"
               },
@@ -380,3 +241,3 @@ body: JSON.stringify({
 
-  var signin = function () {
+  var signIn = function () {
     if (loading) return;
@@ -389,3 +250,3 @@
     if (!checkToken()) {
-      console.log("invalid_client_token");
+      console.error("invalid_client_token");
       return;
@@ -407,10 +268,184 @@ }
 
+  var signOut = function () {
+    window.localStorage.setItem("data", "");
+    reFetch();
+  };
+
   return {
-    SignInWithTUCMC: SignInWithTUCMC,
+    signIn: signIn,
     signOut: signOut,
     reFetch: reFetch,
-    userData: userData
+    userData: userData,
+    loading: loading
   };
 }
 
-export { AuthProvider, useAuth };
+var Loader = function () {
+  return /*#__PURE__*/React$1.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    style: {
+      margin: "auto",
+      shapeRendering: "auto",
+      width: "40px",
+      height: "32px"
+    },
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid"
+  }, /*#__PURE__*/React$1.createElement("circle", {
+    cx: "84",
+    cy: "50",
+    r: "10",
+    fill: "#ffffff"
+  }, /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "r",
+    repeatCount: "indefinite",
+    dur: "0.7142857142857142s",
+    calcMode: "spline",
+    keyTimes: "0;1",
+    values: "10;0",
+    keySplines: "0 0.5 0.5 1",
+    begin: "0s"
+  }), /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "fill",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "discrete",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "#ffffff;#ffffff;#ffffff;#ffffff;#ffffff",
+    begin: "0s"
+  })), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "16",
+    cy: "50",
+    r: "10",
+    fill: "#ffffff"
+  }, /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "r",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "0;0;10;10;10",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "0s"
+  }), /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "cx",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "16;16;16;50;84",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "0s"
+  })), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "10",
+    fill: "#ffffff"
+  }, /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "r",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "0;0;10;10;10",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "-0.7142857142857142s"
+  }), /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "cx",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "16;16;16;50;84",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "-0.7142857142857142s"
+  })), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "84",
+    cy: "50",
+    r: "10",
+    fill: "#ffffff"
+  }, /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "r",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "0;0;10;10;10",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "-1.4285714285714284s"
+  }), /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "cx",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "16;16;16;50;84",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "-1.4285714285714284s"
+  })), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "16",
+    cy: "50",
+    r: "10",
+    fill: "#ffffff"
+  }, /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "r",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "0;0;10;10;10",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "-2.142857142857143s"
+  }), /*#__PURE__*/React$1.createElement("animate", {
+    attributeName: "cx",
+    repeatCount: "indefinite",
+    dur: "2.8571428571428568s",
+    calcMode: "spline",
+    keyTimes: "0;0.25;0.5;0.75;1",
+    values: "16;16;16;50;84",
+    keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1",
+    begin: "-2.142857142857143s"
+  })));
+};
+
+var TUCMCLogin = function () {
+  var _a = useState(false),
+      hover = _a[0],
+      setHover = _a[1];
+
+  var _b = useAuth(),
+      loading = _b.loading,
+      signIn = _b.signIn;
+
+  var styles = {
+    backgroundImage: "linear-gradient(to right, #a78bfa, #ec4899, #ef4444)",
+    color: "rgba(255, 255, 255, 1)",
+    padding: "0.5rem 2rem",
+    fontWeight: 600,
+    borderRadius: "0.375rem",
+    fontSize: "16px",
+    fontFamily: "Arial, Helvetica, sans-serif",
+    lineHeight: "1.25rem",
+    border: "none",
+    cursor: "pointer",
+    transition: "filter 300ms ease",
+    width: "200px",
+    height: "200px"
+  };
+  var hoverStyle = {
+    filter: "brightness(0.8)"
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onMouseEnter: function () {
+      return setHover(true);
+    },
+    onMouseLeave: function () {
+      return setHover(false);
+    },
+    onClick: signIn,
+    style: __assign(__assign({}, styles), hover && hoverStyle)
+  }, loading ? /*#__PURE__*/React.createElement(Loader, null) : "Login with TUCMC");
+};
+
+export { AuthProvider, TUCMCLogin, useAuth };

dist/script/auth-lib.js

 function init() {
-    const fp = FingerprintJS.load()
+  const fp = FingerprintJS.load();
 
-    fp.then(fp => fp.get()).then(result => {
-        window.fingerPrint = result.visitorId
-    })
-
+  fp.then((fp) => fp.get()).then((result) => {
+    window.fingerPrint = result.visitorId;
+  });
 }
 
-class TUCMCAuth {
+// syntax sugar for updating every element by class name
+// Note: Proxies are an ES6 feature (and so are promises), so you may want to include a polyfill idk
+const $c = (name) => {
+  const selection = document.getElementsByClassName(name);
+  if (!selection) return null;
+  return new Proxy(
+    {
+      selected: selection,
+      parentprops: null,
+    },
+    {
+      get: function (obj, prop, receiver) {
+        if (!selection) return null;
+        if (prop === "selected") return obj.selected;
 
-    constructor(TOKEN) {
-        this.TOKEN = TOKEN
-        this.prevPop = null
-        window.addEventListener("load", () => {
-            document.getElementById("login_with_TUCMC").addEventListener("click", () => {
-                this.signin()
-            })
-        })
-    }
+        // returns the value for everything except 'style' (style returns an object)
+        const getValue = obj.parentprops
+          ? obj.parentprops.reduce((acc, curr) => acc[curr], obj.selected[0])[prop]
+          : obj.selected[0][prop];
+        if (!(typeof getValue === "object" && getValue !== null && !Array.isArray(getValue))) {
+          // if value isn't an object, return the value itself
+          let result = [];
+          for (let i = obj.selected.length - 1; i >= 0; i--) {
+            if (obj.parentprops) result.push(obj.parentprops.reduce((acc, curr) => acc[curr], obj.selected[i])[prop]);
+            else result.push(obj.selected[i][prop]);
+          }
+          return result;
+        }
 
-    signout() {
-        window.localStorage.setItem("data", "")
-        window.location.reload()
-    }
+        if (obj.parentprops) obj.parentprops = Array.from(obj.parentprops).push(prop);
+        else obj.parentprops = [prop];
 
-    _setLoading() {
-        document.getElementById("login_with_TUCMC").innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin: auto; shape-rendering: auto;width: 40px; height: 26px\" viewBox=\"0 0 100 80\" preserveAspectRatio=\"xMidYMid\">\n" +
-            "    <circle cx=\"84\" cy=\"50\" r=\"10\" fill=\"#ffffff\">\n" +
-            "        <animate attributeName=\"r\" repeatCount=\"indefinite\" dur=\"0.7142857142857142s\" calcMode=\"spline\" keyTimes=\"0;1\" values=\"10;0\"\n" +
-            "                 keySplines=\"0 0.5 0.5 1\" begin=\"0s\"/>\n" +
-            "        <animate attributeName=\"fill\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"discrete\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"#ffffff;#ffffff;#ffffff;#ffffff;#ffffff\" begin=\"0s\"/>\n" +
-            "    </circle>\n" +
-            "    <circle cx=\"16\" cy=\"50\" r=\"10\" fill=\"#ffffff\">\n" +
-            "        <animate attributeName=\"r\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"0;0;10;10;10\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"0s\"/>\n" +
-            "        <animate attributeName=\"cx\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"16;16;16;50;84\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"0s\"/>\n" +
-            "    </circle>\n" +
-            "    <circle cx=\"50\" cy=\"50\" r=\"10\" fill=\"#ffffff\">\n" +
-            "        <animate attributeName=\"r\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"0;0;10;10;10\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"-0.7142857142857142s\"/>\n" +
-            "        <animate attributeName=\"cx\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"16;16;16;50;84\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"-0.7142857142857142s\"/>\n" +
-            "    </circle>\n" +
-            "    <circle cx=\"84\" cy=\"50\" r=\"10\" fill=\"#ffffff\">\n" +
-            "        <animate attributeName=\"r\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"0;0;10;10;10\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"-1.4285714285714284s\"/>\n" +
-            "        <animate attributeName=\"cx\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"16;16;16;50;84\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"-1.4285714285714284s\"/>\n" +
-            "    </circle>\n" +
-            "    <circle cx=\"16\" cy=\"50\" r=\"10\" fill=\"#ffffff\">\n" +
-            "        <animate attributeName=\"r\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"0;0;10;10;10\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"-2.142857142857143s\"/>\n" +
-            "        <animate attributeName=\"cx\" repeatCount=\"indefinite\" dur=\"2.8571428571428568s\" calcMode=\"spline\" keyTimes=\"0;0.25;0.5;0.75;1\"\n" +
-            "                 values=\"16;16;16;50;84\" keySplines=\"0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1\" begin=\"-2.142857142857143s\"/>\n" +
-            "    </circle>\n" +
-            "    </svg>"
-        document.getElementById("login_with_TUCMC").style.padding = "0.15rem 4.71rem"
-        setTimeout(() => {
-            this._resetLoading()
-        }, 3 * 60 * 1000)
-    }
+        return receiver; // returns instance of proxy
+      },
+      set: function (obj, prop, newVal) {
+        if (!selection) return null;
 
-    _resetLoading() {
-        document.getElementById("login_with_TUCMC").innerHTML = "Login with TUCMC"
-        document.getElementById("login_with_TUCMC").style.padding = "0.5rem 2rem"
-    }
+        for (let i = obj.selected.length - 1; i >= 0; i--) {
+          obj.parentprops
+            ? (obj.parentprops.reduce((acc, curr) => acc[curr], obj.selected[i])[prop] = newVal) // chaining properties
+            : (obj.selected[i][prop] = newVal);
+        }
 
-    _checkToken() {
-        return this.TOKEN.length === 44
+        if (obj.parentprops) {
+          obj.parentprops = null;
+        }
+
+        return true;
+      },
     }
+  );
+};
 
-    signin() {
-        const data = window.localStorage.getItem("data")
-        if (data) return
-        if (this.prevPop) this.prevPop.close()
-        if (!this._checkToken()) {console.log("invalid_client_token"); return;}
+class TUCMCAuth {
+  constructor(TOKEN) {
+    this.TOKEN = TOKEN;
+    this.prevPop = null;
+    window.addEventListener("load", () => {
+      $c("tucmc-login").innerHTML = "Login with TUCMC";
+      Array.from($c("tucmc-login").selected).forEach((elem) => {
+        elem.addEventListener("click", () => {
+          this.login();
+        });
+      });
+    });
+  }
 
-        this._setLoading()
+  logout() {
+    window.localStorage.setItem("data", "");
+    window.location.reload();
+  }
 
-        const wid = window.open("https://account.triamudom.club/auth", "_blank", "width=492,height=740")
-        this.prevPop = wid
+  _setLoading() {
+    $c("tucmc-login").innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; shape-rendering: auto;width: 40px; height: 26px" viewBox="0 0 100 80" preserveAspectRatio="xMidYMid">\n' +
+      '    <circle cx="84" cy="50" r="10" fill="#ffffff">\n' +
+      '        <animate attributeName="r" repeatCount="indefinite" dur="0.7142857142857142s" calcMode="spline" keyTimes="0;1" values="10;0"\n' +
+      '                 keySplines="0 0.5 0.5 1" begin="0s"/>\n' +
+      '        <animate attributeName="fill" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="#ffffff;#ffffff;#ffffff;#ffffff;#ffffff" begin="0s"/>\n' +
+      "    </circle>\n" +
+      '    <circle cx="16" cy="50" r="10" fill="#ffffff">\n' +
+      '        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"/>\n' +
+      '        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"/>\n' +
+      "    </circle>\n" +
+      '    <circle cx="50" cy="50" r="10" fill="#ffffff">\n' +
+      '        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.7142857142857142s"/>\n' +
+      '        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.7142857142857142s"/>\n' +
+      "    </circle>\n" +
+      '    <circle cx="84" cy="50" r="10" fill="#ffffff">\n' +
+      '        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.4285714285714284s"/>\n' +
+      '        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.4285714285714284s"/>\n' +
+      "    </circle>\n" +
+      '    <circle cx="16" cy="50" r="10" fill="#ffffff">\n' +
+      '        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.142857142857143s"/>\n' +
+      '        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n' +
+      '                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.142857142857143s"/>\n' +
+      "    </circle>\n" +
+      "    </svg>";
+    // $c("tucmc-login").style.padding = "0.15rem 4.71rem";
+    setTimeout(() => {
+      this._resetLoading();
+    }, 3 * 60 * 1000);
+  }
 
-        async function _fetchToken(token, resetLoading) {
-            const res = await fetch(`https://account.triamudom.club/api/token`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action: "fetchAuthToken",
-                    authToken: window.sessionStorage.getItem("authToken"),
-                    reqToken: token,
-                    fp: fingerPrint
-                })
-            })
+  _resetLoading() {
+    $c("tucmc-login").innerHTML = "Login with TUCMC";
+    // $c("tucmc-login").style.padding = "0.5rem 2rem";
+  }
 
-            const jsonResult = await res.json()
+  _checkToken() {
+    return this.TOKEN.length === 44;
+  }
 
-            if (jsonResult.status) {
-                window.sessionStorage.setItem("authToken", "")
-                window.localStorage.setItem("data", JSON.stringify(jsonResult.data.data))
-                window.location.reload()
-            }
-            resetLoading()
-        }
+  login() {
+    const data = window.localStorage.getItem("data");
+    if (data) return;
+    if (this.prevPop) this.prevPop.close();
+    if (!this._checkToken()) {
+      console.error("invalid_client_token");
+      return;
+    }
 
-        const inter = setInterval(() => {
-            if (this.prevPop.closed) {
-                _fetchToken(this.TOKEN, this._resetLoading)
-                clearInterval(inter)
-            }
-        }, 500)
+    this._setLoading();
 
-        async function _genToken(token) {
-            const res = await fetch(`https://account.triamudom.club/api/token`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action: "genAuthToken",
-                    reqToken: token,
-                    fp: fingerPrint
-                })
-            })
+    const wid = window.open("https://account.triamudom.club/auth", "_blank", "width=492,height=740");
+    this.prevPop = wid;
 
-            return await res.json()
-        }
+    async function _fetchToken(token, resetLoading) {
+      const res = await fetch(`https://account.triamudom.club/api/token`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          action: "fetchAuthToken",
+          authToken: window.sessionStorage.getItem("authToken"),
+          reqToken: token,
+          fp: fingerPrint,
+        }),
+      });
 
-        _genToken(this.TOKEN).then(jsonResult => {
-            if (jsonResult.status) {
-                window.sessionStorage.setItem("authToken", jsonResult.data.authToken)
-                wid.location.replace(`https://account.triamudom.club/auth?authToken=${jsonResult.data.authToken}`)
-            }
-        })
+      const jsonResult = await res.json();
+
+      if (jsonResult.status) {
+        window.sessionStorage.setItem("authToken", "");
+        window.localStorage.setItem("data", JSON.stringify(jsonResult.data.data));
+        window.location.reload();
+      }
+      resetLoading();
     }
 
-    user() {
-        const data = window.localStorage.getItem("data")
+    const inter = setInterval(() => {
+      if (this.prevPop.closed) {
+        _fetchToken(this.TOKEN, this._resetLoading);
+        clearInterval(inter);
+      }
+    }, 500);
 
-        if (data) {
-            const parsed = JSON.parse(data)
-            return parsed.data
-        } else {
-            return null
-        }
+    async function _genToken(token) {
+      const res = await fetch(`https://account.triamudom.club/api/token`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          action: "genAuthToken",
+          reqToken: token,
+          fp: fingerPrint,
+        }),
+      });
+
+      return await res.json();
     }
+
+    _genToken(this.TOKEN).then((jsonResult) => {
+      if (jsonResult.status) {
+        window.sessionStorage.setItem("authToken", jsonResult.data.authToken);
+        wid.location.replace(`https://account.triamudom.club/auth?authToken=${jsonResult.data.authToken}`);
+      }
+    });
+  }
+
+  user() {
+    const data = window.localStorage.getItem("data");
+
+    if (data) {
+      const parsed = JSON.parse(data);
+      return parsed.data;
+    } else {
+      return null;
+    }
+  }
 }

dist/script/auth-lib.min.js

@@ -1,1 +0,1 @@
-function init(){const fp=FingerprintJS.load();fp.then(fp=>fp.get()).then(result=>{window.fingerPrint=result.visitorId})}class TUCMCAuth{constructor(TOKEN){this.TOKEN=TOKEN;this.prevPop=null;window.addEventListener("load",()=>{document.getElementById("login_with_TUCMC").addEventListener("click",()=>{this.signin()})})}signout(){window.localStorage.setItem("data","");window.location.reload()}_setLoading(){document.getElementById("login_with_TUCMC").innerHTML='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; shape-rendering: auto;width: 40px; height: 26px" viewBox="0 0 100 80" preserveAspectRatio="xMidYMid">\n'+'    <circle cx="84" cy="50" r="10" fill="#ffffff">\n'+'        <animate attributeName="r" repeatCount="indefinite" dur="0.7142857142857142s" calcMode="spline" keyTimes="0;1" values="10;0"\n'+'                 keySplines="0 0.5 0.5 1" begin="0s"/>\n'+'        <animate attributeName="fill" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="#ffffff;#ffffff;#ffffff;#ffffff;#ffffff" begin="0s"/>\n'+"    </circle>\n"+'    <circle cx="16" cy="50" r="10" fill="#ffffff">\n'+'        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"/>\n'+'        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"/>\n'+"    </circle>\n"+'    <circle cx="50" cy="50" r="10" fill="#ffffff">\n'+'        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.7142857142857142s"/>\n'+'        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.7142857142857142s"/>\n'+"    </circle>\n"+'    <circle cx="84" cy="50" r="10" fill="#ffffff">\n'+'        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.4285714285714284s"/>\n'+'        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.4285714285714284s"/>\n'+"    </circle>\n"+'    <circle cx="16" cy="50" r="10" fill="#ffffff">\n'+'        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.142857142857143s"/>\n'+'        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n'+'                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.142857142857143s"/>\n'+"    </circle>\n"+"    </svg>";document.getElementById("login_with_TUCMC").style.padding="0.15rem 4.71rem";setTimeout(()=>{this._resetLoading()},3*60*1e3)}_resetLoading(){document.getElementById("login_with_TUCMC").innerHTML="Login with TUCMC";document.getElementById("login_with_TUCMC").style.padding="0.5rem 2rem"}_checkToken(){return this.TOKEN.length===44}signin(){const data=window.localStorage.getItem("data");if(data)return;if(this.prevPop)this.prevPop.close();if(!this._checkToken()){console.log("invalid_client_token");return}this._setLoading();const wid=window.open("https://account.triamudom.club/auth","_blank","width=492,height=740");this.prevPop=wid;async function _fetchToken(token,resetLoading){const res=await fetch(`https://account.triamudom.club/api/token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({action:"fetchAuthToken",authToken:window.sessionStorage.getItem("authToken"),reqToken:token,fp:fingerPrint})});const jsonResult=await res.json();if(jsonResult.status){window.sessionStorage.setItem("authToken","");window.localStorage.setItem("data",JSON.stringify(jsonResult.data.data));window.location.reload()}resetLoading()}const inter=setInterval(()=>{if(this.prevPop.closed){_fetchToken(this.TOKEN,this._resetLoading);clearInterval(inter)}},500);async function _genToken(token){const res=await fetch(`https://account.triamudom.club/api/token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({action:"genAuthToken",reqToken:token,fp:fingerPrint})});return await res.json()}_genToken(this.TOKEN).then(jsonResult=>{if(jsonResult.status){window.sessionStorage.setItem("authToken",jsonResult.data.authToken);wid.location.replace(`https://account.triamudom.club/auth?authToken=${jsonResult.data.authToken}`)}})}user(){const data=window.localStorage.getItem("data");if(data){const parsed=JSON.parse(data);return parsed.data}else{return null}}}
+function init(){const fp=FingerprintJS.load();fp.then(fp=>fp.get()).then(result=>{window.fingerPrint=result.visitorId})}const $c=name=>{const selection=document.getElementsByClassName(name);return selection?new Proxy({selected:selection,parentprops:null},{get:function(obj,prop,receiver){return selection?(obj.parentprops?obj.parentprops=Array.from(obj.parentprops).push(prop):obj.parentprops=[prop],receiver):null},set:function(obj,prop,newVal){if(!selection)return null;for(let i=obj.selected.length-1;i>=0;i--)obj.parentprops?obj.parentprops.reduce((acc,curr)=>acc[curr],obj.selected[i])[prop]=newVal:obj.selected[i][prop]=newVal;return obj.parentprops&&(obj.parentprops=null),!0}}):null};class TUCMCAuth{constructor(TOKEN){this.TOKEN=TOKEN,this.prevPop=null,window.addEventListener("load",()=>{$c("tucmc-login").addEventListener("click",()=>{this.login()})})}logout(){window.localStorage.setItem("data",""),window.location.reload()}_setLoading(){$c("tucmc-login").innerHTML='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; shape-rendering: auto;width: 40px; height: 26px" viewBox="0 0 100 80" preserveAspectRatio="xMidYMid">\n    <circle cx="84" cy="50" r="10" fill="#ffffff">\n        <animate attributeName="r" repeatCount="indefinite" dur="0.7142857142857142s" calcMode="spline" keyTimes="0;1" values="10;0"\n                 keySplines="0 0.5 0.5 1" begin="0s"/>\n        <animate attributeName="fill" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1"\n                 values="#ffffff;#ffffff;#ffffff;#ffffff;#ffffff" begin="0s"/>\n    </circle>\n    <circle cx="16" cy="50" r="10" fill="#ffffff">\n        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"/>\n        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"/>\n    </circle>\n    <circle cx="50" cy="50" r="10" fill="#ffffff">\n        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.7142857142857142s"/>\n        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.7142857142857142s"/>\n    </circle>\n    <circle cx="84" cy="50" r="10" fill="#ffffff">\n        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.4285714285714284s"/>\n        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.4285714285714284s"/>\n    </circle>\n    <circle cx="16" cy="50" r="10" fill="#ffffff">\n        <animate attributeName="r" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.142857142857143s"/>\n        <animate attributeName="cx" repeatCount="indefinite" dur="2.8571428571428568s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1"\n                 values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.142857142857143s"/>\n    </circle>\n    </svg>',$c("tucmc-login").style.padding="0.15rem 4.71rem",setTimeout(()=>{this._resetLoading()},18e4)}_resetLoading(){$c("tucmc-login").innerHTML="Login with TUCMC",$c("tucmc-login").style.padding="0.5rem 2rem"}_checkToken(){return 44===this.TOKEN.length}login(){const data=window.localStorage.getItem("data");if(data)return;if(this.prevPop&&this.prevPop.close(),!this._checkToken())return void console.log("invalid_client_token");this._setLoading();const wid=window.open("https://account.triamudom.club/auth","_blank","width=492,height=740");async function _fetchToken(token,resetLoading){const res=await fetch("https://account.triamudom.club/api/token",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({action:"fetchAuthToken",authToken:window.sessionStorage.getItem("authToken"),reqToken:token,fp:fingerPrint})}),jsonResult=await res.json();jsonResult.status&&(window.sessionStorage.setItem("authToken",""),window.localStorage.setItem("data",JSON.stringify(jsonResult.data.data)),window.location.reload()),resetLoading()}this.prevPop=wid;const inter=setInterval(()=>{this.prevPop.closed&&(_fetchToken(this.TOKEN,this._resetLoading),clearInterval(inter))},500);async function _genToken(token){const res=await fetch("https://account.triamudom.club/api/token",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({action:"genAuthToken",reqToken:token,fp:fingerPrint})});return await res.json()}_genToken(this.TOKEN).then(jsonResult=>{jsonResult.status&&(window.sessionStorage.setItem("authToken",jsonResult.data.authToken),wid.location.replace(`https://account.triamudom.club/auth?authToken=${jsonResult.data.authToken}`))})}user(){const data=window.localStorage.getItem("data");if(data){const parsed=JSON.parse(data);return parsed.data}return null}}

package.json

 {
-  "name": "tucmc-auth",
-  "version": "0.1.2",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "description": "Easily secure your website with authentication system.",
-  "scripts": {
-    "build": "rollup -c"
-  },
-  "keywords": [],
-  "homepage": "https://github.com/triamudomcmc/tucmc-auth",
-  "author": "Peter Phongpak <[e-mail]>",
-  "repository": "triamudomcmc/tucmc-auth",
-  "license": "MIT",
-  "dependencies": {
-    "@fingerprintjs/fingerprintjs": "^3.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-syntax-jsx": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@types/node": "^16.6.2",
-    "@types/react": "^17.0.19",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.1.0",
-    "react": "17.0.2",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-dts": "^3.0.2",
-    "rollup-plugin-jsx": "^1.0.3",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "^4.3.5"
-  }
+	"name": "tucmc-auth",
+	"version": "0.2.0",
+	"module": "dist/index.es.js",
+	"types": "dist/index.d.ts",
+	"files": [ "dist" ],
+	"description": "Easily secure your website with TUCMC's authentication system.",
+	"scripts": {
+		"build": "rollup -c"
+	},
+	"keywords": ["tucmc", "tucmc-auth", "triamudom"],
+	"homepage": "https://github.com/triamudomcmc/tucmc-auth",
+	"author": "Triam Udom Clubs Management Committee <[e-mail]>",
+	"repository": "triamudomcmc/tucmc-auth",
+	"license": "MIT",
+	"dependencies": {
+		"@fingerprintjs/fingerprintjs": "^3.3.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.15.0",
+		"@babel/plugin-syntax-jsx": "^7.14.5",
+		"@babel/preset-react": "^7.14.5",
+		"@rollup/plugin-babel": "^5.3.0",
+		"@types/node": "^16.6.2",
+		"@types/react": "^17.0.19",
+		"eslint": "7.32.0",
+		"eslint-config-next": "11.1.0",
+		"react": "17.0.2",
+		"rollup-plugin-copy": "^3.4.0",
+		"rollup-plugin-dts": "^3.0.2",
+		"rollup-plugin-jsx": "^1.0.3",
+		"rollup-plugin-typescript2": "^0.30.0",
+		"typescript": "^4.3.5"
+	}
 }

README.md

@@ -1,14 +0,49 @@
-# TUCMC Auth API
+<h1 align="center">
+  TUCMC Authentication Service
+</h1>
 
-Easily secure your website with authentication system.
+<p align="center">
+Easily implement authentication in your website with TUCMC's authentication system.
+</p>
 
-## API Setup Guide using npm
+<p align="center">
+  <a href="https://www.npmjs.com/package/tucmc-auth"><img src="https://img.shields.io/npm/v/tucmc-auth?style=flat-square"></a>
+  <a href="https://www.npmjs.com/package/tucmc-auth"><img src="https://img.shields.io/npm/dm/tucmc-auth?style=flat-square"></a>
+</p>
 
-#### _app.js or _app.tsx
+## User Data
 
-```javascript
-import {AuthProvider} from "tucmc-auth"
+Below is the data you'll get from a logged in user.
 
-function MyApp({Component, pageProps}) {
+```
+studentID: รหัสนักเรียน
+title: คำนำหน้า
+firstname: ชื่อ
+lastname: นามสกุล
+email: อีเมล
+```
 
+```ts
+{
+  studentID: string,
+  title: string,
+  firstname: string,
+  lastname: string,
+  email: string
+}
+```
+
+## Implementation
+
+### React / Next.js
+
+User data can be accessed with our [React Context](https://reactjs.org/docs/context.html) by wrapping the app with it.
+
+#### `_app.js` or `_app.tsx`
+
+
+```jsx
+import { AuthProvider } from "tucmc-auth"
+
+const MyApp = ({ Component, pageProps }) => {
   return (
@@ -27,15 +62,18 @@ <div>
 
-#### pages/index.js or pages/index.tsx
+Then, use the `useAuth` hook to access all the user data from anywhere.
 
-```javascript
-import {useAuth} from 'tucmc-auth'
+#### `pages/index.js` or `pages/index.tsx`
 
-function Index() {
+```jsx
+import { useAuth, TUCMCLogin } from 'tucmc-auth'
 
-  const {userData, SignInWithTUCMC, signOut} = useAuth()
+const Index = () => {
+  const { userData, logOut, logIn } = useAuth()
 
   return (
     <div>
-      {userData && <h1>Hi, {userData.firstname}</h1>}
-      <SigninWithTUCMC/>
+      { userData && <h1>Hi, {userData.firstname}</h1> }
+      <TUCMCLogin/>
+      <button onClick={() => logIn()}>Login</button>
+      <button onClick={() => logOut()}>Logout</button>
     </div>
@@ -48,11 +86,20 @@ )
 
-## Setup Guide using javascript CDN
-### Library Resources CDN
+### Pure Javascript / CDN
+
+For non-react projects.
+
+#### Links to the CDN files
+
+CSS
 ```
-CSS: https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-style.min.css
-Script: https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-lib.min.js
+https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-style.min.css
 ```
 
-### 1. Include all required libraries
+JS
+```
+https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-lib.min.js
+```
 
+#### 1. Include all required libraries
+
 ```html
@@ -64,33 +111,38 @@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-style.min.css"/>
 
-### 2. Setup a script
+#### 2. Setup a script
 
 ```html
 <script>
-    const auth = new TUCMCAuth("-----TOKEN-----")
+  const auth = new TUCMCAuth("-----TOKEN-----");
 
-    window.onload = function () {
-        const sessionData = auth.user()
-        
-        // If session is valid, update an element with userdata.
-        if (sessionData) {
-            document.getElementById("email").innerText = sessionData.email
-        }
+  window.onload = function () {
+    const sessionData = auth.user();
+
+    // If session is valid, update an element with userdata.
+    if (sessionData) {
+      document.getElementById("email").innerText = `Logged in as: {sessionData.email}`;
+    } else {
+      document.getElementById("email").innerText = "";
     }
+  }
 </script>
 ```
 
-### 3. Add sign-in button
+#### 3. Add the buttons
 ```html
-<!---Button id must be `login_with_TUCMC`--->
-<button id="login_with_TUCMC" class="login_with_TUCMC">
-    Login with TUCMC
-</button>
+<!-- Display data here -->
+<p id="email"></p>
 
-<!---Logout button--->
-<button onclick="auth.signout()">logout</button>
+<!-- Login button - must have the class "tucmc-login" -->
+<button class="tucmc-login">Login with TUCMC</button>
 
-<!---Display data here--->
-<p id="email"></p>
+<!-- Custom Login Button-->
+<button onclick="auth.login()">Login</button>
+
+<!-- Logout button -->
+<button onclick="auth.logout()">logout</button>
 ```
 
+<p align="center">
 made with ♥ by Triam Udom Clubs Management Committee
+</p>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34616

increased by12.62%

Lines of code

623

increased by17.77%

Number of lines in readme file

145

increased by54.26%

Worsened metrics

Number of medium supply chain risk alerts

7

increased by16.67%

No dependency changes