From 49adf0e340cefa6822b6078047e24a95caa00ed3 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 6 Dec 2023 11:07:15 +0000 Subject: [PATCH 01/47] Add selfi instruction screen --- packages/components/package.json | 3 +- .../selfie-instruction/SelfieInstruction.js | 190 ++++++++++++++++++ .../components/selfie-instruction/index.js | 3 + 3 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 packages/components/selfie-instruction/SelfieInstruction.js create mode 100644 packages/components/selfie-instruction/index.js diff --git a/packages/components/package.json b/packages/components/package.json index 0f47a230..2dd1364b 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -6,7 +6,8 @@ ".": "./index.js", "./combobox": "./combobox/src/index.js", "./end-user-consent": "./end-user-consent/src/index.js", - "./totp-consent": "./totp-consent/src/index.js" + "./totp-consent": "./totp-consent/src/index.js", + "./selfie-instruction": "./selfie-instruction/src/index.js" }, "description": "A collection of Web Components used by SmileID", "keywords": [ diff --git a/packages/components/selfie-instruction/SelfieInstruction.js b/packages/components/selfie-instruction/SelfieInstruction.js new file mode 100644 index 00000000..c88a6bc1 --- /dev/null +++ b/packages/components/selfie-instruction/SelfieInstruction.js @@ -0,0 +1,190 @@ +"use strict"; + +function templateString() { + return ` + + `; +} + +class SelfieInstruction extends HTMLElement { + constructor() { + super(); + this.templateString = templateString.bind(this); + this.render = () => { + return this.templateString(); + }; + + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.pages = []; + const template = document.createElement("template"); + template.innerHTML = this.render(); + + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.backButton = this.shadowRoot.querySelector("#back-button"); + const CloseIframeButtons = + this.shadowRoot.querySelectorAll(".close-iframe"); + + this.backButton.addEventListener("click", (e) => { + this.handleBackEvents(e); + }); + + CloseIframeButtons.forEach((button) => { + button.addEventListener( + "click", + () => { + this.closeWindow(); + }, + false, + ); + }); + } + + get hideBack() { + return this.hasAttribute("hide-back-to-host"); + } + + get themeColor() { + return this.getAttribute("theme-color") || "#043C93"; + } + + get hideAttribution() { + return this.hasAttribute('hide-attribution'); + } + + get supportBothCaptureModes() { + const value = this.documentCaptureModes; + return value.includes('camera') && value.includes('upload'); + } + + get documentCaptureModes() { + /* + NOTE: options are `camera`, `upload`, and a comma-separated combination + of both. + + defaults to `camera`; + */ + return this.getAttribute('document-capture-modes') || 'camera'; + } + handleBackEvents() { + this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); + } + + closeWindow() { + const referenceWindow = window.parent; + referenceWindow.postMessage("SmileIdentity::Close", "*"); + } +} + +if ("customElements" in window) { + window.customElements.define('selfie-instruction', SelfieInstruction); +} + +export { + SelfieInstruction +}; diff --git a/packages/components/selfie-instruction/index.js b/packages/components/selfie-instruction/index.js new file mode 100644 index 00000000..f22f524f --- /dev/null +++ b/packages/components/selfie-instruction/index.js @@ -0,0 +1,3 @@ +export { + SelfieInstruction +} from './SelfieInstruction'; From 03df0a5c7a4497e0acf600e2af64eefba1005c52 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 6 Dec 2023 11:18:20 +0000 Subject: [PATCH 02/47] reformat --- .../selfie-instruction/SelfieInstruction.js | 206 +++++++++--------- 1 file changed, 103 insertions(+), 103 deletions(-) diff --git a/packages/components/selfie-instruction/SelfieInstruction.js b/packages/components/selfie-instruction/SelfieInstruction.js index c88a6bc1..f6776c30 100644 --- a/packages/components/selfie-instruction/SelfieInstruction.js +++ b/packages/components/selfie-instruction/SelfieInstruction.js @@ -2,109 +2,109 @@ function templateString() { return ` - + `; } From dfdf6e49bd34998e08cb730c4127e9a987d1a677 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 6 Dec 2023 12:48:53 +0000 Subject: [PATCH 03/47] Remove unused methods --- .../selfie-instruction/SelfieInstruction.js | 68 ++++++------------- 1 file changed, 20 insertions(+), 48 deletions(-) diff --git a/packages/components/selfie-instruction/SelfieInstruction.js b/packages/components/selfie-instruction/SelfieInstruction.js index f6776c30..e760f347 100644 --- a/packages/components/selfie-instruction/SelfieInstruction.js +++ b/packages/components/selfie-instruction/SelfieInstruction.js @@ -25,32 +25,26 @@ function templateString() { ` : ''}
- - - - - - - - - - - - - + + + + + + + + + + + + +

- Submit${this.captureBackOfID ? ' the Front of' : ''} Your ID + Next, we'll take a quick selfie

-

- We'll use it to verify your identity. -

-

- Follow the tips below for the best results. -

-
+
@@ -65,11 +59,11 @@ function templateString() {

Check the lighting

- Take your ID document image in a well-lit environment where it is easy to read, and free from glare on the card. + Take your ID selfie image in a well-lit environment where it is easy to read, and free from glare on the card.

-
+
@@ -83,24 +77,11 @@ function templateString() {

Make sure it's in focus

- Ensure the photo of the ID document you submit is not blurry: you should be able to read the text on the document. + Ensure the photo of the ID selfie you submit is not blurry: you should be able to read the text on the selfie.

-
- ${this.supportBothCaptureModes || this.documentCaptureModes === 'camera' ? ` - - ` : ''} - ${this.supportBothCaptureModes || this.documentCaptureModes === 'upload' ? ` - - ` : ''} -
${this.hideAttribution ? '' : ` `} @@ -121,7 +102,7 @@ class SelfieInstruction extends HTMLElement { connectedCallback() { this.pages = []; - const template = document.createElement("template"); + const template = selfie.createElement("template"); template.innerHTML = this.render(); this.shadowRoot.appendChild(template.content.cloneNode(true)); @@ -158,19 +139,10 @@ class SelfieInstruction extends HTMLElement { } get supportBothCaptureModes() { - const value = this.documentCaptureModes; + const value = this.selfieCaptureModes; return value.includes('camera') && value.includes('upload'); } - get documentCaptureModes() { - /* - NOTE: options are `camera`, `upload`, and a comma-separated combination - of both. - - defaults to `camera`; - */ - return this.getAttribute('document-capture-modes') || 'camera'; - } handleBackEvents() { this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); } From 82f517687bfb5633715c3f308a8b758d2d18fd53 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 6 Dec 2023 15:57:38 +0000 Subject: [PATCH 04/47] Add Document instruction template --- .../instructions/SelfieInstruction.js | 687 ++++++++++++++++++ packages/components/instructions/index.js | 6 + .../instructions/selfie-instruction.html | 625 ++++++++++++++++ packages/components/package.json | 3 +- .../selfie-instruction/SelfieInstruction.js | 162 ----- .../components/selfie-instruction/index.js | 3 - packages/embed/src/js/doc-verification.js | 1 + packages/smart-camera-web/smart-camera-web.js | 2 +- 8 files changed, 1322 insertions(+), 167 deletions(-) create mode 100644 packages/components/instructions/SelfieInstruction.js create mode 100644 packages/components/instructions/index.js create mode 100644 packages/components/instructions/selfie-instruction.html delete mode 100644 packages/components/selfie-instruction/SelfieInstruction.js delete mode 100644 packages/components/selfie-instruction/index.js diff --git a/packages/components/instructions/SelfieInstruction.js b/packages/components/instructions/SelfieInstruction.js new file mode 100644 index 00000000..97d8e601 --- /dev/null +++ b/packages/components/instructions/SelfieInstruction.js @@ -0,0 +1,687 @@ +"use strict"; + +function templateString() { + return ` + + + +
+ ${this.showNavigation ? ` +
+
+ +
Back
+
+ +
+ ` : ''} +
+ + + + + + + + + + + + + + + +

Next, we'll take a quick selfie

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+

Good Light

+

+ Make sure you are in a well-lit environment where your face is + clear and visible +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+

Clear Image

+

+ Hold your phone steady so the selfie is clear and sharp. Don't + take blurry images. +

+
+
+
+ + + + + + +
+

Remove Obstructions

+

+ Remove anything that covers your face, such glasses, masks, hats + and scarves +

+
+
+
+ ${this.hideAttribution ? '' : ` + + `} +
+ `; +} + +class SelfieInstruction extends HTMLElement { + constructor() { + super(); + this.templateString = templateString.bind(this); + this.render = () => { + return this.templateString(); + }; + + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.pages = []; + const template = selfie.createElement("template"); + template.innerHTML = this.render(); + + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.backButton = this.shadowRoot.querySelector("#back-button"); + const CloseIframeButtons = + this.shadowRoot.querySelectorAll(".close-iframe"); + + this.backButton.addEventListener("click", (e) => { + this.handleBackEvents(e); + }); + + CloseIframeButtons.forEach((button) => { + button.addEventListener( + "click", + () => { + this.closeWindow(); + }, + false, + ); + }); + } + + get hideBack() { + return this.hasAttribute("hide-back-to-host"); + } + + get themeColor() { + return this.getAttribute("theme-color") || "#043C93"; + } + + get hideAttribution() { + return this.hasAttribute('hide-attribution'); + } + + handleBackEvents() { + this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); + } + + closeWindow() { + const referenceWindow = window.parent; + referenceWindow.postMessage("SmileIdentity::Close", "*"); + } +} + +if ("customElements" in window) { + window.customElements.define('selfie-instruction', SelfieInstruction); +} + +export { + SelfieInstruction +}; diff --git a/packages/components/instructions/index.js b/packages/components/instructions/index.js new file mode 100644 index 00000000..e79b5a78 --- /dev/null +++ b/packages/components/instructions/index.js @@ -0,0 +1,6 @@ +export { + SelfieInstruction +} from './SelfieInstruction'; +export { + DocumentInstruction +} from './DocumentInstruction'; diff --git a/packages/components/instructions/selfie-instruction.html b/packages/components/instructions/selfie-instruction.html new file mode 100644 index 00000000..130bbb24 --- /dev/null +++ b/packages/components/instructions/selfie-instruction.html @@ -0,0 +1,625 @@ + + + + + + selfie + + + + + + +
+ ${this.showNavigation ? ` +
+
+ +
Back
+
+ +
+ ` : ''} +
+ + + + + + + + + + + + + + + +

Next, we'll take a quick selfie

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+

Good Light

+

+ Make sure you are in a well-lit environment where your face is + clear and visible +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+

Clear Image

+

+ Hold your phone steady so the selfie is clear and sharp. Don't + take blurry images. +

+
+
+
+ + + + + + +
+

Remove Obstructions

+

+ Remove anything that covers your face, such glasses, masks, hats + and scarves +

+
+
+
+ ${this.hideAttribution ? '' : ` + + `} +
+ + diff --git a/packages/components/package.json b/packages/components/package.json index 2dd1364b..09148424 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -7,7 +7,8 @@ "./combobox": "./combobox/src/index.js", "./end-user-consent": "./end-user-consent/src/index.js", "./totp-consent": "./totp-consent/src/index.js", - "./selfie-instruction": "./selfie-instruction/src/index.js" + "./selfie-instruction": "./instruction/src/SelfieInstruction.js", + "./document-instruction": "./instruction/src/DocumentInstruction.js" }, "description": "A collection of Web Components used by SmileID", "keywords": [ diff --git a/packages/components/selfie-instruction/SelfieInstruction.js b/packages/components/selfie-instruction/SelfieInstruction.js deleted file mode 100644 index e760f347..00000000 --- a/packages/components/selfie-instruction/SelfieInstruction.js +++ /dev/null @@ -1,162 +0,0 @@ -"use strict"; - -function templateString() { - return ` - - `; -} - -class SelfieInstruction extends HTMLElement { - constructor() { - super(); - this.templateString = templateString.bind(this); - this.render = () => { - return this.templateString(); - }; - - this.attachShadow({ mode: "open" }); - } - - connectedCallback() { - this.pages = []; - const template = selfie.createElement("template"); - template.innerHTML = this.render(); - - this.shadowRoot.appendChild(template.content.cloneNode(true)); - - this.backButton = this.shadowRoot.querySelector("#back-button"); - const CloseIframeButtons = - this.shadowRoot.querySelectorAll(".close-iframe"); - - this.backButton.addEventListener("click", (e) => { - this.handleBackEvents(e); - }); - - CloseIframeButtons.forEach((button) => { - button.addEventListener( - "click", - () => { - this.closeWindow(); - }, - false, - ); - }); - } - - get hideBack() { - return this.hasAttribute("hide-back-to-host"); - } - - get themeColor() { - return this.getAttribute("theme-color") || "#043C93"; - } - - get hideAttribution() { - return this.hasAttribute('hide-attribution'); - } - - get supportBothCaptureModes() { - const value = this.selfieCaptureModes; - return value.includes('camera') && value.includes('upload'); - } - - handleBackEvents() { - this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); - } - - closeWindow() { - const referenceWindow = window.parent; - referenceWindow.postMessage("SmileIdentity::Close", "*"); - } -} - -if ("customElements" in window) { - window.customElements.define('selfie-instruction', SelfieInstruction); -} - -export { - SelfieInstruction -}; diff --git a/packages/components/selfie-instruction/index.js b/packages/components/selfie-instruction/index.js deleted file mode 100644 index f22f524f..00000000 --- a/packages/components/selfie-instruction/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { - SelfieInstruction -} from './SelfieInstruction'; diff --git a/packages/embed/src/js/doc-verification.js b/packages/embed/src/js/doc-verification.js index 7aa804f4..a2e22f48 100644 --- a/packages/embed/src/js/doc-verification.js +++ b/packages/embed/src/js/doc-verification.js @@ -1,5 +1,6 @@ import "@smile_identity/smart-camera-web"; import "@smileid/components/combobox"; +import "@smileid/components/instructions/DocumentInstruction"; import JSZip from "jszip"; import { version as sdkVersion } from "../../package.json"; diff --git a/packages/smart-camera-web/smart-camera-web.js b/packages/smart-camera-web/smart-camera-web.js index 89b1957d..d2380035 100644 --- a/packages/smart-camera-web/smart-camera-web.js +++ b/packages/smart-camera-web/smart-camera-web.js @@ -762,7 +762,7 @@ function scwTemplateString() { `}
- +