@persona-js/verify - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

dist/cdn.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var n,e=function(){return(e=Object.assign||function(n){for(var e,o=1,t=arguments.length;o<t;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}).apply(this,arguments)},o=["allow-same-origin","allow-scripts","allow-forms","allow-popups","allow-modals","allow-top-navigation-by-user-activation"];!function(n){n.Start="start",n.Complete="complete",n.Fail="fail",n.Load="load",n.Exit="exit"}(n||(n={}));var t=function(t){var i={start:[],complete:[],fail:[],load:[],exit:[]},r=e({},t.prefill),a=e(e({},t),{prefill:null}),l=function(){return[Object.entries(a).filter((function(n){return null!==n[1]&&"host"!==n[0]})).reduce((function(n,e){var o=e[0],t=e[1];return n+"&"+o+"="+encodeURIComponent(t)}),"?client=something"),Object.entries(r).filter((function(n){return void 0!==n[1]})).map((function(n){var e=n[0],o=n[1];return"prefill["+(e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z])(?=[a-z])/g,"$1-$2").toLowerCase()+"]=")+encodeURIComponent(o)})).join("&")].join("&")},d={getHostedFlowUrl:function(){return"https://"+t.host+"/verify"+l()},on:function(n,e){return i[n].push(e),d},prefill:function(n){r=e(e({},r),n)},start:function(){var e=document.createElement("div");e.id="persona-js-embedded-flow";var r=document.createElement("style");r.innerText="\n  @keyframes appear-backdrop {\n    from {\n      background-color: #00000000;\n    }\n\n    to {\n      background-color: #000000AA;\n    }\n  }\n\n  div#persona-js-embedded-flow {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100vh;\n    background-color: #000000AA;\n    overflow-y: scroll;\n\n    animation-duration: .1s;\n    animation-name: appear-backdrop;\n    animation-timing-function: ease-out;\n  }\n\n  @keyframes appear-iframe {\n    from {\n      margin-top: 68px;\n    }\n\n    90% {\n      margin-top: 62px;\n    }\n\n    to {\n      margin-top: 64px;\n    }\n  }\n\n  div#persona-js-embedded-flow iframe {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    margin-bottom: 10%;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n    border: none;\n    background: white;\n\n  }\n\n  @media only screen and (min-width: 600px) and (min-height: 600px) {\n    div#persona-js-embedded-flow iframe {\n      margin-top: 64px;\n      max-width: 400px;\n      max-height: 650px;\n      box-shadow: 0 12px 40px 2px rbga(0, 0, 0, 0.4);\n\n      animation-duration: .2s;\n      animation-name: appear-iframe;\n      animation-timing-function: ease-out;\n    }\n  }\n".replace(/^\s+/g,"").replace(/\n/g,""),e.appendChild(r);var a=document.createElement("iframe");a.allow="camera",a.src="https://"+t.host+"/widget"+l()+"&iframe-origin="+encodeURIComponent(window.location.origin),a.setAttribute("sandbox",o.join(" "));var d=function(o){var r=function(){window.removeEventListener("message",d),e.remove()};if(o.origin.includes("//"+t.host))switch(o.data.name){case"start":i[n.Start].forEach((function(n,e){try{n(o.data.metadata.inquiryId)}catch(n){console.error("[@persona-js/verify]","Failed to run 'start' event listener #"+e)}}));break;case"complete":i[n.Complete].forEach((function(n,e){try{n(o.data.metadata.inquiryId)}catch(n){console.error("[@persona-js/verify]","Failed to run 'complete' event listener #"+e)}})),r();break;case"fail":i[n.Fail].forEach((function(n,e){try{n(o.data.metadata.inquiryId)}catch(n){console.error("[@persona-js/verify]","Failed to run 'fail' event listener #"+e)}}));break;case"exit":i[n.Exit].forEach((function(n,e){var t;try{n(null!==(t=o.data.metadata.inquiryId)&&void 0!==t?t:null)}catch(n){console.error("[@persona-js/verify]","Failed to run 'exit' event listener #"+e)}})),r()}};window.addEventListener("message",d),document.body.appendChild(e),e.appendChild(a)}};return d},i=Object.freeze({__proto__:null,get EventType(){return n},newInquiry:function(n,e){var o,i,r,a,l,d;return t({"template-id":n,host:null!==(o=null==e?void 0:e.host)&&void 0!==o?o:"withpersona.com",language:null!==(i=null==e?void 0:e.language)&&void 0!==i?i:null,environment:null!==(r=null==e?void 0:e.environment)&&void 0!==r?r:"sandbox","reference-id":null!==(a=null==e?void 0:e.referenceId)&&void 0!==a?a:null,"account-id":null!==(l=null==e?void 0:e.accountId)&&void 0!==l?l:null,prefill:null!==(d=null==e?void 0:e.prefill)&&void 0!==d?d:null})},resumeInquiry:function(n,e){var o,i,r,a;return t({"inquiry-id":n,host:null!==(o=null==e?void 0:e.host)&&void 0!==o?o:"withpersona.com",language:null!==(i=null==e?void 0:e.language)&&void 0!==i?i:null,"session-token":null!==(r=null==e?void 0:e.sessionToken)&&void 0!==r?r:null,prefill:null!==(a=null==e?void 0:e.prefill)&&void 0!==a?a:null})}});window&&(window.Persona=i)}();
+!function(){"use strict";var e,n=function(){return(n=Object.assign||function(e){for(var n,o=1,t=arguments.length;o<t;o++)for(var r in n=arguments[o])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},o=["allow-same-origin","allow-scripts","allow-forms","allow-popups","allow-modals","allow-top-navigation-by-user-activation"];!function(e){e.Start="start",e.Complete="complete",e.Fail="fail",e.Load="load",e.Exit="exit"}(e||(e={}));var t=function(t){var r={start:[],complete:[],fail:[],load:[],exit:[]},i=n({},t.prefill),a=n(n({},t),{prefill:null}),l=function(){return[Object.entries(a).filter((function(e){return null!==e[1]&&"host"!==e[0]})).reduce((function(e,n){var o=n[0],t=n[1];return e+"&"+o+"="+encodeURIComponent(t)}),"?client=something"),Object.entries(i).filter((function(e){return void 0!==e[1]})).map((function(e){var n=e[0],o=e[1];return"prefill["+(n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z])(?=[a-z])/g,"$1-$2").toLowerCase()+"]=")+encodeURIComponent(o)})).join("&")].join("&")},d=function(){var e=document.createElement("div");e.id="persona-js-embedded-flow";var n=document.createElement("style");return n.className="backdrop",n.innerText="\n  div#persona-js-embedded-flow {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100vh;\n    background-color: #000000AA;\n    overflow-y: scroll;\n    transition: background-color .2s ease-out;\n  }\n\n  div#persona-js-embedded-flow iframe {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    margin-bottom: 10%;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n    border: none;\n    background: white;\n\n  }\n\n  @media only screen and (min-width: 600px) and (min-height: 600px) {\n    div#persona-js-embedded-flow iframe {\n      margin-top: 64px;\n      max-width: 400px;\n      max-height: 650px;\n      box-shadow: 0 12px 40px 2px rbga(0, 0, 0, 0.4);\n      transition: margin-top .25s ease-out;\n    }\n  }\n".replace(/^\s+/g,"").replace(/\n/g,""),e.appendChild(n),e},s=function(e){var n=document.createElement("style");return n.className="veil",n.innerText="\n  div#persona-js-embedded-flow {\n    visibility: hidden;\n    background-color: #00000000;\n  }\n\n  @media only screen and (min-width: 600px) and (min-height: 600px) {\n    div#persona-js-embedded-flow iframe {\n      margin-top: 68px;\n    }\n  }\n".replace(/^\s+/g,"").replace(/\n/g,""),e.appendChild(n),n},u=function(){var e=document.createElement("iframe");return e.allow="camera",e.src="https://"+t.host+"/widget"+l()+"&iframe-origin="+encodeURIComponent(window.location.origin),e.setAttribute("sandbox",o.join(" ")),e},c={getHostedFlowUrl:function(){return"https://"+t.host+"/verify"+l()},on:function(e,n){return r[e].push(n),c},prefill:function(e){i=n(n({},i),e)},preload:function(){return new Promise((function(e){var n=d();s(n);var o=function(n){n.origin.includes("//"+t.host)&&"load"===n.data.name&&(window.removeEventListener("message",o),e())};window.addEventListener("message",o),document.body.appendChild(n),n.appendChild(u())}))},start:function(){var n,o,i,a=null!==(n=document.getElementById("persona-js-embedded-flow"))&&void 0!==n?n:d(),l=null!==(o=a.querySelector("style.veil"))&&void 0!==o?o:s(a),c=null!==(i=a.querySelector("iframe"))&&void 0!==i?i:u(),p=function(n){var o=function(){window.removeEventListener("message",p),a.remove()};if(n.origin.includes("//"+t.host))switch(n.data.name){case"load":l.remove();break;case"start":r[e.Start].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'start' event listener #"+o)}}));break;case"complete":r[e.Complete].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'complete' event listener #"+o)}})),o();break;case"fail":r[e.Fail].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'fail' event listener #"+o)}}));break;case"exit":r[e.Exit].forEach((function(e,o){var t;try{e(null!==(t=n.data.metadata.inquiryId)&&void 0!==t?t:null)}catch(e){console.error("[@persona-js/verify]","Failed to run 'exit' event listener #"+o)}})),o()}};window.addEventListener("message",p),document.getElementById("persona-js-embedded-flow")?l.remove():(document.body.appendChild(a),a.appendChild(c))}};return c},r=Object.freeze({__proto__:null,get EventType(){return e},newInquiry:function(e,n){var o,r,i,a,l,d;return t({"template-id":e,host:null!==(o=null==n?void 0:n.host)&&void 0!==o?o:"withpersona.com",language:null!==(r=null==n?void 0:n.language)&&void 0!==r?r:null,environment:null!==(i=null==n?void 0:n.environment)&&void 0!==i?i:"sandbox","reference-id":null!==(a=null==n?void 0:n.referenceId)&&void 0!==a?a:null,"account-id":null!==(l=null==n?void 0:n.accountId)&&void 0!==l?l:null,prefill:null!==(d=null==n?void 0:n.prefill)&&void 0!==d?d:null})},resumeInquiry:function(e,n){var o,r,i,a;return t({"inquiry-id":e,host:null!==(o=null==n?void 0:n.host)&&void 0!==o?o:"withpersona.com",language:null!==(r=null==n?void 0:n.language)&&void 0!==r?r:null,"session-token":null!==(i=null==n?void 0:n.sessionToken)&&void 0!==i?i:null,prefill:null!==(a=null==n?void 0:n.prefill)&&void 0!==a?a:null})}});window&&(window.Persona=r)}();

dist/index.js

@@ -39,3 +39,4 @@ 'use strict';
 ];
-var BACKDROP_STYLE = "\n  @keyframes appear-backdrop {\n    from {\n      background-color: #00000000;\n    }\n\n    to {\n      background-color: #000000AA;\n    }\n  }\n\n  div#persona-js-embedded-flow {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100vh;\n    background-color: #000000AA;\n    overflow-y: scroll;\n\n    animation-duration: .1s;\n    animation-name: appear-backdrop;\n    animation-timing-function: ease-out;\n  }\n\n  @keyframes appear-iframe {\n    from {\n      margin-top: 68px;\n    }\n\n    90% {\n      margin-top: 62px;\n    }\n\n    to {\n      margin-top: 64px;\n    }\n  }\n\n  div#persona-js-embedded-flow iframe {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    margin-bottom: 10%;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n    border: none;\n    background: white;\n\n  }\n\n  @media only screen and (min-width: 600px) and (min-height: 600px) {\n    div#persona-js-embedded-flow iframe {\n      margin-top: 64px;\n      max-width: 400px;\n      max-height: 650px;\n      box-shadow: 0 12px 40px 2px rbga(0, 0, 0, 0.4);\n\n      animation-duration: .2s;\n      animation-name: appear-iframe;\n      animation-timing-function: ease-out;\n    }\n  }\n";
+var BACKDROP_SEAL_STYLE = "\n  div#persona-js-embedded-flow {\n    visibility: hidden;\n    background-color: #00000000;\n  }\n\n  @media only screen and (min-width: 600px) and (min-height: 600px) {\n    div#persona-js-embedded-flow iframe {\n      margin-top: 68px;\n    }\n  }\n";
+var BACKDROP_STYLE = "\n  div#persona-js-embedded-flow {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100vh;\n    background-color: #000000AA;\n    overflow-y: scroll;\n    transition: background-color .2s ease-out;\n  }\n\n  div#persona-js-embedded-flow iframe {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    margin-bottom: 10%;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n    border: none;\n    background: white;\n\n  }\n\n  @media only screen and (min-width: 600px) and (min-height: 600px) {\n    div#persona-js-embedded-flow iframe {\n      margin-top: 64px;\n      max-width: 400px;\n      max-height: 650px;\n      box-shadow: 0 12px 40px 2px rbga(0, 0, 0, 0.4);\n      transition: margin-top .25s ease-out;\n    }\n  }\n";
 var camelToKebab = function (camel) {
@@ -90,8 +91,19 @@ return camel
     };
-    var start = function () {
+    var createBackDrop = function () {
         var backdrop = document.createElement('div');
         backdrop.id = 'persona-js-embedded-flow';
         var style = document.createElement('style');
+        style.className = 'backdrop';
         style.innerText = BACKDROP_STYLE.replace(/^\s+/g, '').replace(/\n/g, '');
         backdrop.appendChild(style);
+        return backdrop;
+    };
+    var sealBackdrop = function (backdrop) {
+        var seal = document.createElement('style');
+        seal.className = 'veil';
+        seal.innerText = BACKDROP_SEAL_STYLE.replace(/^\s+/g, '').replace(/\n/g, '');
+        backdrop.appendChild(seal);
+        return seal;
+    };
+    var buildIframe = function () {
         var iframe = document.createElement('iframe');
@@ -101,2 +113,26 @@ iframe.allow = 'camera';
         iframe.setAttribute('sandbox', IFRAME_SANDBOX_PERMISSIONS.join(' '));
+        return iframe;
+    };
+    var preload = function () {
+        return new Promise(function (resolve) {
+            var backdrop = createBackDrop();
+            sealBackdrop(backdrop);
+            var messageHandler = function (event) {
+                if (event.origin.includes("//" + normalizedOptions.host)) {
+                    if (event.data.name === 'load') {
+                        window.removeEventListener('message', messageHandler);
+                        resolve();
+                    }
+                }
+            };
+            window.addEventListener('message', messageHandler);
+            document.body.appendChild(backdrop);
+            backdrop.appendChild(buildIframe());
+        });
+    };
+    var start = function () {
+        var _a, _b, _c;
+        var backdrop = (_a = document.getElementById('persona-js-embedded-flow')) !== null && _a !== void 0 ? _a : createBackDrop();
+        var seal = (_b = backdrop.querySelector('style.veil')) !== null && _b !== void 0 ? _b : sealBackdrop(backdrop);
+        var iframe = (_c = backdrop.querySelector('iframe')) !== null && _c !== void 0 ? _c : buildIframe();
         var messageHandler = function (event) {
@@ -109,2 +145,6 @@ var closeEmbededFlow = function () {
                 switch (event.data.name) {
+                    case 'load': {
+                        seal.remove();
+                        break;
+                    }
                     case 'start': {
@@ -160,4 +200,9 @@ listeners[exports.EventType.Start].forEach(function (listener, i) {
         window.addEventListener('message', messageHandler);
-        document.body.appendChild(backdrop);
-        backdrop.appendChild(iframe);
+        if (document.getElementById('persona-js-embedded-flow')) {
+            seal.remove();
+        }
+        else {
+            document.body.appendChild(backdrop);
+            backdrop.appendChild(iframe);
+        }
     };
@@ -171,2 +216,3 @@ var getHostedFlowUrl = function () {
         prefill: prefill,
+        preload: preload,
         start: start,
@@ -173,0 +219,0 @@ };

dist/types/index.d.ts

@@ -36,2 +36,3 @@ interface CommonOptions {
     prefill: (prefillParams: CommonOptions['prefill']) => void;
+    preload: () => Promise<void>;
     start: () => void;
@@ -43,4 +44,5 @@ };
     prefill: (prefillParams: CommonOptions['prefill']) => void;
+    preload: () => Promise<void>;
     start: () => void;
 };
 export {};

package.json

 {
   "name": "@persona-js/verify",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "An unofficial Persona client to verify customers",
@@ -17,3 +17,3 @@ "main": "./dist/index.js",
   ],
-  "gitHead": "e74515b2525d7fc0eaa400b802a2cd4d702bb3e3"
+  "gitHead": "d33efb97c506bab2da77a9c8e25e2d953f468d7b"
 }

README.md

@@ -50,4 +50,4 @@ # @persona-js/verify
 
-- Support preload embedded flow
-  - `.preload(): Promise<void>`
+- Use shadow DOM
+- Avoid multiple UI insertions
 - Support undocumented events?
@@ -54,0 +54,0 @@ - Like `verification-change`, `country-select`...etc

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

Improved metrics

Total package byte prevSize

21171

increased by12.18%

Lines of code

302

increased by18.9%

No dependency changes