Skip to content

Commit

Permalink
BC Wallet deep link display
Browse files Browse the repository at this point in the history 
Signed-off-by: Lucas ONeil <[email protected]>
  • Loading branch information
@loneil
loneil committed Feb 16, 2024
1 parent 7d23d56 commit 72a8da6
Show file tree
Hide file tree
Showing 2 changed files with 218 additions and 71 deletions.
5 changes: 5 additions & 0 deletions oidc-controller/api/routers/oidc.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,10 @@ async def get_authorize(request: Request, db: Database = Depends(get_db)):
image_contents = base64.b64encode(buff.getvalue()).decode("utf-8")
callback_url = f"""{controller_host}{AuthorizeCallbackUri}?pid={auth_session.id}"""

# BC Wallet deep link
response_b64 = base64.b64encode(response.json().encode("utf-8")).decode("utf-8")
wallet_deep_link = f"bcwallet://aries_proof-request?oob={response_b64}"

# This is the payload to send to the template
data = {
"image_contents": image_contents,
Expand All @@ -139,6 +143,7 @@ async def get_authorize(request: Request, db: Database = Depends(get_db)):
"pid": auth_session.id,
"controller_host": controller_host,
"challenge_poll_uri": ChallengePollUri,
"wallet_deep_link": wallet_deep_link,
}

# Prepare the template
Expand Down
284 changes: 213 additions & 71 deletions oidc-controller/api/templates/verified_credentials.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
.container {
text-align: center;
border-radius: 0.5rem;
border:none;
box-shadow: 2px 2px 3px 3px #dedede;
}
.content {
Expand All @@ -41,10 +42,19 @@
width: 18rem;
margin-left: 3rem;
}
.header-share {
display: grid;
grid-template-columns: 5rem 1fr;
width: 22rem;
margin-top: 1.5rem;
margin-bottom: 1.75rem;
}
.qr-code-desc {
text-align: left;
}
.qr-code {
display: flex;
justify-content: center;
position: relative;
margin: 2rem 0 2rem -0.5rem;
}
Expand Down Expand Up @@ -79,7 +89,7 @@
background-color: white;
height: 100%;
width: 19rem;
margin-left: 2.8rem;
/* margin-left: 2.8rem; */
align-items: center;
justify-content: center;
z-index: 1;
Expand Down Expand Up @@ -188,91 +198,177 @@
.text-link label {
display: block;
}

/* BC Gov style buttons */
.BC-Gov-PrimaryButton,
.BC-Gov-SecondaryButton {
text-align: center;
text-decoration: none;
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.BC-Gov-PrimaryButton:hover,
.BC-Gov-SecondaryButton:hover {
text-decoration: underline;
opacity: 0.80;
}
.BC-Gov-PrimaryButton:focus,
.BC-Gov-SecondaryButton:focus{
outline: 4px solid #3B99FC;
outline-offset: 1px;
}
.BC-Gov-PrimaryButton {
background-color: #003366;
border: none;
border-radius: 4px;
color: white;
padding: 12px 32px;
margin-bottom: 1.5rem;
}
.BC-Gov-PrimaryButton:active {
opacity: 1;
}
.BC-Gov-SecondaryButton {
background: none;
border-radius: 4px;
border: 2px solid #003366;
padding: 10px 30px;
color: #003366;
margin-bottom: 1.5rem;
}
.BC-Gov-SecondaryButton:hover {
background-color: #003366;
color: #FFFFFF;
}
.BC-Gov-SecondaryButton:active {
opacity: 1;
}

/* Mobile device */
.mobile-device{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header-branding">{{add_asset("BCID_H_rgb_rev.svg")}}</div>
<div class="content">
<h1>Scan with a Digital Wallet</h1>
<!-- BC Wallet deep link if the user agent is a mobile device -->
<div class="mobile-device">
<h1>Scan with a Digital Wallet</h1>

<a
class="BC-Gov-PrimaryButton"
title="Open BC Wallet"
href="{{wallet_deep_link}}"
>
BC Wallet
</a>

<a
id="other-device-button"
class="BC-Gov-SecondaryButton"
title="Open BC Wallet"
>
BC Wallet on other device
</a>

<div class="header-desc intro">
<div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
<div class="qr-code-desc">
Scanning this QR code will send you a request to share your
information
<div class="header-share">
<div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
<div class="qr-code-desc">
A request to share your information will be sent to your
BC Wallet
</div>
<hr>
</div>
</div>

<div class="header-desc success">
<div class="qr-code-image">{{add_asset("circle-check.svg")}}</div>
<div class="qr-code-desc">
<b>Success!</b> You will be redirected shortly.
<!-- QR Code for desktop/other -->
<div class="desktop-device">
<h1 class="desktop-header">Scan with a Digital Wallet</h1>

<div class="header-desc intro">
<div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
<div class="qr-code-desc">
Scanning this QR code will send you a request to share your
information
</div>
</div>
</div>

<div class="header-desc failed">
<div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
<div class="qr-code-desc">
<b>Proof not accepted.</b>
</br>
<a href="javascript:window.location.reload(true)"
title="Please try again."
>Please try again.</a
>
<div class="header-desc success">
<div class="qr-code-image">{{add_asset("circle-check.svg")}}</div>
<div class="qr-code-desc">
<b>Success!</b> You will be redirected shortly.
</div>
</div>
</div>

<div class="header-desc expired">
<div class="qr-code-image">{{add_asset("expired.svg")}}</div>
<div class="qr-code-desc">
<b>Proof has expired.</b>
</br>
<a href="javascript:window.location.reload(true)"
title="Refresh QR code."
>Refresh QR code.</a
>
<div class="header-desc failed">
<div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
<div class="qr-code-desc">
<b>Proof not accepted.</b>
</br>
<a href="javascript:window.location.reload(true)"
title="Please try again."
>Please try again.</a
>
</div>
</div>
</div>

<div class="header-desc abandoned">
<div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
<div class="qr-code-desc">
<b>Proof declined</b>
</br>
<a href="javascript:window.location.reload(true)"
<div class="header-desc expired">
<div class="qr-code-image">{{add_asset("expired.svg")}}</div>
<div class="qr-code-desc">
<b>Proof has expired.</b>
</br>
<a href="javascript:window.location.reload(true)"
title="Refresh QR code."
>Try again.</a
>
</div>
</div>

<div class="header-desc pending">
<div class="qr-code-image">{{add_asset("hourglass.svg")}}</div>
<div class="qr-code-desc">
<b>Proof is pending.</b>
>Refresh QR code.</a
>
</div>
</div>

<div class="header-desc abandoned">
<div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
<div class="qr-code-desc">
<b>Proof declined</b>
</br>
<a href="javascript:window.location.reload(true)"
title="Refresh QR code."
>Try again.</a
>
</div>
</div>
</div>

<div class="qr-code">
<button id="refresh-button" class="qr-button" title="Refresh QR Code">
<div class="button-content">
<div class="fake-button">
<div class="icon">{{add_asset("refresh.svg")}}</div>
<div class="description">Refresh QR code</div>
<div class="header-desc pending">
<div class="qr-code-image">{{add_asset("hourglass.svg")}}</div>
<div class="qr-code-desc">
<b>Proof is pending.</b>
</div>
</div>

<div class="qr-code">
<button id="refresh-button" class="qr-button" title="Refresh QR Code">
<div class="button-content">
<div class="fake-button">
<div class="icon">{{add_asset("refresh.svg")}}</div>
<div class="description">Refresh QR code</div>
</div>
</div>
</button>
<div class="scanned-mask">
<div class="message">QR code scanned</div>
</div>
</button>
<div class="scanned-mask">
<div class="message">QR code scanned</div>
<div class="border">{{add_asset("dashed-border.svg")}}</div>
<img
src="data:image/jpeg;base64,{{image_contents}}"
alt="{{image_contents}}"
width="300px"
height="300px"
/>
</div>
<div class="border">{{add_asset("dashed-border.svg")}}</div>
<img
src="data:image/jpeg;base64,{{image_contents}}"
alt="{{image_contents}}"
width="300px"
height="300px"
/>
</div>

<!-- Add a input box with the url_to_message data -->
Expand All @@ -286,21 +382,55 @@ <h1>Scan with a Digital Wallet</h1>
>{{url_to_message}}</textarea>
</div>

<div>
<p>
<b>Don't have a digital wallet?</b>
</div>
<a
title="Download BC Wallet"
href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
>Download BC Wallet</a
>
</p>
<p>
<a
title="Download BC Wallet"
href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
>Download the BC Wallet app
</a>
</p>
</div>
</div>
</body>
<script>
/**
* Function to detect the user's browser
*/
function getBrowser() {
var userAgent = navigator.userAgent || navigator.vendor;

if (/android/i.test(userAgent)) {
return "Android";
}

if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "iOS";
}

return "unknown";
}
function showHideElementForBrowser(elementId, show) {
if (getBrowser() === "Android" || getBrowser() === "iOS") {
var elements = document.querySelectorAll(elementId);
elements.forEach((el) => {
el.style.display = show ? "block" : "none";
});
}
}
try {
showHideElementForBrowser(".desktop-device", false);
showHideElementForBrowser(".mobile-device", true);
} catch (e) {
console.log("Error adding event listener to header branding", e);
}

/**
* Initialize the Websocket
*/
console.log("init");
const socket = io(location.host, {
path: "/ws/socket.io",
autoConnect: false,
Expand All @@ -315,6 +445,7 @@ <h1>Scan with a Digital Wallet</h1>
socket.connect();

const toggleState = (state) => {
console.log('Toggling state', state)
switch (state) {
case "intro":
setUiElements(".intro", false, false, false);
Expand Down Expand Up @@ -348,6 +479,7 @@ <h1>Scan with a Digital Wallet</h1>
* Set the UI elements based on the current state
*/
const setUiElements = (state, showRefresh, showScanned, setSpinner) => {
console.log('Setting UI elements')
const stateElement = document.querySelector(state);
const qrcode = document.querySelector(".qr-code");
const scannedMask = document.querySelector(".scanned-mask");
Expand Down Expand Up @@ -407,6 +539,16 @@ <h1>Scan with a Digital Wallet</h1>
checkStatus();
}, 2000);

/**
* If the other device button is clicked, show the qr code area
*/
document.querySelector("#other-device-button").addEventListener("click", () => {
document.querySelector(".header-share").style.display = "none";
document.querySelector(".desktop-header").style.display = "none";
document.querySelector(".desktop-device").style.display = "block";
});


/**
* If the BC_ID is clicked on 10 times in a row, display the link textbox
*/
Expand Down

0 comments on commit 72a8da6

Please sign in to comment.