@trinsic/trinsic - npm Package Compare versions

Comparing version 1.11.3-pre.7 to 1.11.3-pre.8

lib/src/ConnectClient.d.ts

@@ -1,6 +0,18 @@
-export declare class ConnectClient {
-    requestVerifiableCredential(request: IVerifiableCredentialRequest): Promise<any>;
-    requestVerifiableCredentialCallback(): Promise<void>;
-    identityVerification(): Promise<any>;
+export interface MobileDetect {
+    isMobile: boolean;
+    isDesktop: boolean;
+    isAndroid: boolean;
+    isIos: boolean;
+    isSSR: boolean;
 }
+export declare class ConnecClient {
+    baseUrl: string;
+    constructor(connectUrl?: string);
+    detectMobile: () => MobileDetect;
+    removeModal: () => void;
+    showModal: (clientToken: string) => void;
+    hideModal: () => void;
+    identityVerification(clientToken: string): Promise<any>;
+    static requestVerifableCredential(request: IVerifiableCredentialRequest): Promise<any>;
+}
 export interface IVerifiableCredentialRequest {
@@ -7,0 +19,0 @@ ecosystem: string;

lib/src/ConnectClient.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectClient = void 0;
+exports.ConnecClient = void 0;
 const oidc_client_ts_1 = require("oidc-client-ts");
-class ConnectClient {
-    async requestVerifiableCredential(request) {
-        var _a;
+const getMobileDetect = (userAgent) => {
+    const isAndroid = () => Boolean(userAgent.match(/Android/i));
+    const isIos = () => Boolean(userAgent.match(/iPhone|iPad|iPod/i));
+    const isOpera = () => Boolean(userAgent.match(/Opera Mini/i));
+    const isWindows = () => Boolean(userAgent.match(/IEMobile/i));
+    const isSSR = () => Boolean(userAgent.match(/SSR/i));
+    const isMobile = () => Boolean(isAndroid() || isIos() || isOpera() || isWindows());
+    const isDesktop = () => Boolean(!isMobile() && !isSSR());
+    return {
+        isMobile,
+        isDesktop,
+        isAndroid,
+        isIos,
+        isSSR,
+    };
+};
+const CSSString = `
+.modal__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center
+  }
+
+  .modal__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center
+  }
+
+  .modal__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 1.25;
+    color: #00449e;
+    box-sizing: border-box
+  }
+
+  .modal__close {
+    background: transparent;
+    border: 0
+  }
+
+  .modal__header .modal__close:before {
+    content: "✕"
+  }
+
+  .modal__content {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    line-height: 1.5;
+    color: #000c
+  }
+
+  .modal__btn {
+    font-size: .875rem;
+    padding: .5rem 1rem;
+    background-color: #e6e6e6;
+    color: #000c;
+    border-radius: .25rem;
+    border-style: none;
+    border-width: 0;
+    cursor: pointer;
+    -webkit-appearance: button;
+    text-transform: none;
+    overflow: visible;
+    line-height: 1.15;
+    margin: 0;
+    will-change: transform;
+    -moz-osx-font-smoothing: grayscale;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    transition: transform .25s ease-out
+  }
+
+  .modal__btn:focus,
+  .modal__btn:hover {
+    transform: scale(1.05)
+  }
+
+  .modal__btn-primary {
+    background-color: #00449e;
+    color: #fff
+  }
+
+  @keyframes mmfadeIn {
+    0% {
+      opacity: 0
+    }
+
+    to {
+      opacity: 1
+    }
+  }
+
+  @keyframes mmfadeOut {
+    0% {
+      opacity: 1
+    }
+
+    to {
+      opacity: 0
+    }
+  }
+
+  @keyframes mmslideIn {
+    0% {
+      transform: translateY(15%)
+    }
+
+    to {
+      transform: translateY(0)
+    }
+  }
+
+  @keyframes mmslideOut {
+    0% {
+      transform: translateY(0)
+    }
+
+    to {
+      transform: translateY(-10%)
+    }
+  }
+
+  .micromodal-slide {
+    display: none
+  }
+
+  .micromodal-slide.is-open {
+    display: block
+  }
+
+  .micromodal-slide[aria-hidden=false] .modal__overlay {
+    animation: mmfadeIn .3s cubic-bezier(0, 0, .2, 1)
+  }
+
+  .micromodal-slide[aria-hidden=false] .modal__container {
+    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1)
+  }
+
+  .micromodal-slide[aria-hidden=true] .modal__overlay {
+    animation: mmfadeOut .3s cubic-bezier(0, 0, .2, 1)
+  }
+
+  .micromodal-slide[aria-hidden=true] .modal__container {
+    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1)
+  }
+
+  .micromodal-slide .modal__container,
+  .micromodal-slide .modal__overlay {
+    will-change: transform
+  }
+
+
+  .fixed {
+    position: fixed
+  }
+
+  .inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+  }
+
+
+  .flex {
+    display: flex
+  }
+
+
+  .h-\[600px\] {
+    height: 600px
+  }
+
+  .h-full {
+    height: 100%
+  }
+
+
+  .min-h-\[600px\] {
+    min-height: 600px
+  }
+
+  .place-content-center {
+    place-content: center
+  }
+
+  .items-center {
+    align-items: center
+  }
+
+  .justify-center {
+    justify-content: center
+  }
+
+  .bg-transparent {
+    background-color: transparent
+  }
+
+
+  .w-full {
+    width: 100%
+  }
+
+  .lock-bg {
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+
+
+  `;
+const micromodal_1 = __importDefault(require("micromodal"));
+class ConnecClient {
+    constructor(connectUrl = "https://connect.trinsic.cloud") {
+        this.detectMobile = () => {
+            const mobileDetect = getMobileDetect(navigator.userAgent);
+            return {
+                isMobile: mobileDetect.isMobile(),
+                isDesktop: mobileDetect.isDesktop(),
+                isAndroid: mobileDetect.isAndroid(),
+                isIos: mobileDetect.isIos(),
+                isSSR: mobileDetect.isSSR(),
+            };
+        };
+        this.removeModal = () => {
+            const trinsicConnect = document.getElementById("trinsic-connect");
+            trinsicConnect === null || trinsicConnect === void 0 ? void 0 : trinsicConnect.remove();
+        };
+        this.showModal = (clientToken) => {
+            this.removeModal();
+            const mobileDetect = this.detectMobile();
+            const modal = document.createElement("div");
+            modal.id = "trinsic-connect";
+            modal.ariaHidden = "true";
+            modal.className = "micromodal-slide";
+            const bgOverlay = document.createElement("div");
+            bgOverlay.tabIndex = -1;
+            // bgOverlay.setAttribute("data-micromodal-close", "true");
+            bgOverlay.className = "fixed inset-0 flex items-center justify-center";
+            const modalContainer = document.createElement("div");
+            // modalContainer.role = "dialog";
+            modalContainer.ariaModal = "true";
+            modalContainer.className = mobileDetect.isDesktop
+                ? "modal__container h-[600px] w-[400px]"
+                : "modal__container h-full min-h-[600px] w-full";
+            const iframe = document.createElement("iframe");
+            iframe.className = "h-full w-full bg-transparent";
+            iframe.allow = "camera *; microphone *; display-capture *";
+            iframe.src = `${this.baseUrl}/connect/verify?clientToken=${clientToken}`;
+            modalContainer.append(iframe);
+            bgOverlay.append(modalContainer);
+            modal.append(bgOverlay);
+            document.body.classList.add("lock-bg");
+            document.body.append(modal);
+            micromodal_1.default.show("trinsic-connect");
+        };
+        this.hideModal = () => {
+            micromodal_1.default.close("trinsic-connect");
+            document.body.classList.remove("lock-bg");
+            this.removeModal();
+        };
+        this.baseUrl = connectUrl;
+        micromodal_1.default.init();
+        const style = document.createElement("style");
+        style.id = "trinsic-connect-style";
+        style.textContent = CSSString;
+        document.head.appendChild(style);
+    }
+    async identityVerification(clientToken) {
+        this.showModal(clientToken);
+        window.addEventListener("message", (event) => {
+            var _a, _b;
+            console.log("event data", event.data);
+            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.success) === true) {
+                return Promise.resolve(event.data);
+            }
+            if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.success) === false) {
+                return Promise.reject(event.data);
+            }
+        }, false);
+        window.addEventListener("message", (event) => {
+            if (event.data === "connect-verification-success") {
+                return Promise.resolve({ success: true });
+            }
+            if (event.data === "connect-verification-failed") {
+                return Promise.reject({ success: false });
+            }
+        }, false);
+    }
+    static async requestVerifableCredential(request) {
         if (!request || !request.ecosystem || !request.schema) {
@@ -30,28 +329,14 @@ throw new Error("ecosystem and schema are required");
                 "trinsic:schema": request.schema,
-                "trinsic:mode": "popup"
+                "trinsic:mode": "popup",
             },
-            userStore: new oidc_client_ts_1.WebStorageStateStore({ store: window.localStorage })
+            userStore: new oidc_client_ts_1.WebStorageStateStore({ store: window.localStorage }),
         };
         var manager = new oidc_client_ts_1.UserManager(config);
-        (_a = window.open("", "trinsic-oidc", "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes")) === null || _a === void 0 ? void 0 : _a.addEventListener("message", (e) => {
+        window.addEventListener("message", (e) => {
             manager.signinPopupCallback();
         });
-        return await manager.signinPopup({
-            popupWindowTarget: "trinsic-oidc"
-        });
+        return await manager.signinPopup();
     }
-    async requestVerifiableCredentialCallback() {
-        await new oidc_client_ts_1.UserManager({
-            authority: "https://connect.trinsic.cloud/",
-            client_id: "http://localhost:8080/",
-            redirect_uri: "http://localhost:8081/redirect.html",
-            response_mode: "query"
-        }).signinPopupCallback();
-    }
-    async identityVerification() {
-        console.log("not implemented");
-        return Promise.resolve({});
-    }
 }
-exports.ConnectClient = ConnectClient;
+exports.ConnecClient = ConnecClient;
 //# sourceMappingURL=ConnectClient.js.map

lib/vite.config.js

@@ -23,3 +23,3 @@ "use strict";
         lib: {
-            entry: path_1.default.resolve(__dirname, "index.browser.ts"),
+            entry: path_1.default.resolve(__dirname, "index.ts"),
             name: "Trinsic",
@@ -26,0 +26,0 @@ formats: ["es", "umd"],

package.json

 {
     "name": "@trinsic/trinsic",
-    "version": "1.11.3-pre.7",
+    "version": "1.11.3-pre.8",
     "description": "Node and Browser wrapper for the Trinsic services",
@@ -44,2 +44,4 @@ "main": "lib/index.js",
         "js-base64": "3.7.5",
+        "long": "5.2.3",
+        "micromodal": "0.4.10",
         "nice-grpc-web": "3.2.4",
@@ -57,2 +59,3 @@ "oidc-client-ts": "2.2.5",
         "@types/karma-webpack": "2.0.11",
+        "@types/micromodal": "0.3.3",
         "@types/node": "18.7.8",
@@ -59,0 +62,0 @@ "@types/uuid": "8.3.4",

README.md

@@ -39,3 +39,3 @@ # Trinsic SDK for Browsers and Node
 
-After this, you can run `npm ci` and `npm build`.
+After this, you can run `npm ci` and `npm run build`.
 
@@ -42,0 +42,0 @@ The build script will generate the proto files by running the `Generate-Proto.ps1` script. You can also run this script manually.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

3867454

decreased by-21.41%

Dependency count

9

increased by28.57%

Dev dependency count

39

increased by2.63%

Number of package files

146

decreased by-7.01%

Lines of code

29865

decreased by-46.97%

Number of medium supply chain risk alerts

5

increased by400%

Dependency changes

• + Addedlong@5.2.3

• + Addedmicromodal@0.4.10

• + Addedmicromodal@0.4.10(transitive)