Skip to content

Commit

Permalink
Improve docs and user_id caching
Browse files Browse the repository at this point in the history
  • Loading branch information
@willmorgan
willmorgan committed Jan 2, 2021
1 parent 3b693d7 commit 0e0db22
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 44 deletions.
89 changes: 45 additions & 44 deletions demo/src/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,51 @@
</head>

<body>
<!-- This template is cloned and appended into the iproov-me component when it's ready: -->
<template id="iproov_template">
<div slot="ready">
<h3>Ready to iProov</h3>
</div>
<div slot="grant_permission">
<h3 class="iproov-lang-heading">Camera permission required</h3>
<p>We only need your webcam for a few seconds.</p>
</div>
<div slot="grant_button">
<p><button>Grant Camera Permission</button></p>
<p>For full details, see our <a href="https://www.iproov.com/privacy-policy">Privacy Policy</a>.</p>
</div>
<div slot="button">
<p>Click below to start the iProov process:</p>
<button class="ipbutton--lozenge">Scan face</button>
</div>
<div slot="error" class="state state--error">
<h3>Error</h3>
<p>Something went wrong with iProov. If this keeps happening, <a href="mailto:[email protected]">let us know</a> so we can take a look and make things right.</p>
<pre class="detail iproov-lang-term"></pre>
<button class="ipbutton--lozenge action-restart">Try again</button>
<a class="ipbutton ipbutton--texas-rose ipbutton--lozenge" href="mailto:[email protected]">Contact support</a>
</div>
<div slot="failed" class="state state--failed">
<h3>Failed</h3>
<p>Either you're a cyber criminal, or we couldn't quite match you. Care to try again?</p>
<pre class="detail iproov-lang-term"></pre>
<button class="ipbutton--lozenge action-restart">Try again</button>
</div>
<div slot="cancelled" class="state state--cancelled">
<h3>Cancelled</h3>
<p>User exited out of iProov</p>
<button class="ipbutton--lozenge action-restart">Restart iProov</button>
</div>
<div slot="passed" class="state state--passed">
<h3>Passed</h3>
<p>You have iProoved successfully.</p>
<button class="ipbutton--lozenge action-restart">Scan again</button>
</div>
<div slot="progress" class="progress" aria-roledescription="progress">
<div class="progress__inner"></div>
<span class="progress__text">Progressing</span>
</div>
</template>
<div class="wrapper">
<header>
<h1>
Expand Down Expand Up @@ -64,50 +109,6 @@ <h4>Create Token</h4>
<div class="error-container hidden"></div>
</form>
<div id="iproov_wrapper" class="card hidden">
<template id="iproov_template">
<div slot="ready">
<h3>Ready to iProov</h3>
</div>
<div slot="grant_permission">
<h3 class="iproov-lang-heading">Camera permission required</h3>
<p>We only need your webcam for a few seconds.</p>
</div>
<div slot="grant_button">
<p><button>Grant Camera Permission</button></p>
<p>For full details, see our <a href="https://www.iproov.com/privacy-policy">Privacy Policy</a>.</p>
</div>
<div slot="button">
<p>Click below to start the iProov process:</p>
<button class="ipbutton--lozenge">Scan face</button>
</div>
<div slot="error" class="state state--error">
<h3>Error</h3>
<p>Something went wrong with iProov. If this keeps happening, <a href="mailto:[email protected]">let us know</a> so we can take a look and make things right.</p>
<pre class="detail iproov-lang-term"></pre>
<button class="ipbutton--lozenge action-restart">Try again</button>
<a class="ipbutton ipbutton--texas-rose ipbutton--lozenge" href="mailto:[email protected]">Contact support</a>
</div>
<div slot="failed" class="state state--failed">
<h3>Failed</h3>
<p>Either you're a cyber criminal, or we couldn't quite match you. Care to try again?</p>
<pre class="detail iproov-lang-term"></pre>
<button class="ipbutton--lozenge action-restart">Try again</button>
</div>
<div slot="cancelled" class="state state--cancelled">
<h3>Cancelled</h3>
<p>User exited out of iProov</p>
<button class="ipbutton--lozenge action-restart">Restart iProov</button>
</div>
<div slot="passed" class="state state--passed">
<h3>Passed</h3>
<p>You have iProoved successfully.</p>
<button class="ipbutton--lozenge action-restart">Scan again</button>
</div>
<div slot="progress" class="progress" aria-roledescription="progress">
<div class="progress__inner"></div>
<span class="progress__text">Progressing</span>
</div>
</template>
<div id="iproovme_container"></div>
</div>
<footer>
Expand Down
33 changes: 33 additions & 0 deletions demo/src/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import "./vendor/prod/iProovSupport.js"

import { createSDK } from "./iproov-integration.js"

/**
* Dispatch a request to the demo backend to create a new token.
* Initialize a new SDK instance or handle any errors.
*/
async function submitTokenRequest() {
const formData = new FormData(document.querySelector("#token_config"))
const payload = {}
Expand All @@ -21,12 +25,36 @@ async function submitTokenRequest() {
return initializeSDK(body)
}

/**
* Prepare the form for another submission.
*/
async function resetTokenCreationForm() {
document.querySelector("#token_config").classList.remove("collapsed")
document.querySelector("#iproov_wrapper").classList.add("hidden")
document.querySelector("#user_id").focus()
}

/**
* On load, restore any cached user_id. If a user_id exists, automatically set the mode to verify.
* On change, cache the user_id to localStorage.
*/
function primeForm() {
const userIDField = document.querySelector("#user_id")
const verifyRadio = document.querySelector("input[name=mode][value=verify]")
let cachedUserId = localStorage.getItem("user_id")
if (cachedUserId) {
userIDField.value = cachedUserId
verifyRadio.setAttribute("checked", true)
}
userIDField.addEventListener("change", function cacheUserId() {
localStorage.setItem("user_id", userIDField.value)
})
}

/**
* Create a standalone support checker instance and configure the page to respond to basic checks.
* @return {iProovSupport}
*/
function createSupportChecker() {
const checker = new iProovSupport.iProovSupport() // vanilla JS with no webpack/UMD
const output = document.querySelector(".support-container")
Expand Down Expand Up @@ -55,6 +83,10 @@ function createSupportChecker() {
return checker
}

/**
* Create a new SDK instance, customise it (see iproov-integration.js) and append to the page.
* @param body
*/
async function initializeSDK(body) {
const { token, base_url } = body
const iProov = createSDK(console, token, base_url)
Expand Down Expand Up @@ -101,6 +133,7 @@ const main = async () => {
support.checkWithPermission()
}
})
primeForm()
}

main()

0 comments on commit 0e0db22

Please sign in to comment.