-
Notifications
You must be signed in to change notification settings - Fork 8
/
wallet-ui-store.html
140 lines (113 loc) · 4.84 KB
/
wallet-ui-store.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<title>Minimal Dev Wallet - Wallet Store UI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified Materialize JS/CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://unpkg.com/[email protected]/dist/credential-handler-polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/web-credential-handler.min.js"></script>
<script src="config.js"></script>
<script src="js-helpers.js"></script>
<script src="mock-user-management.js"></script>
</head>
<body>
<div class="container">
<h5>Wallet store() event</h5>
<div class="card-panel hide" id="logged-in">
<div id="confirm">
<p>Do you wish to store this credential?</p>
<p><strong>type:</strong> <span id="credentialType"></span></p>
<p><strong>issuer:</strong> <span id="credentialIssuer"></span></p>
<a class="waves-effect waves-light btn" id="confirmButton">Confirm</a>
<a class="waves-effect waves-light btn" id="cancelButton">Cancel</a>
</div>
<div id="userArea" class="hide">
<p><strong>Logged in:</strong> <span id="username"></span></p>
<a class="waves-effect waves-light btn-small" id="logoutButton">Reset and Logout</a>
<p><strong>Credential stored!</strong></p>
<h6>Wallet Contents:</h6>
<ol id="walletContents"></ol>
<a class="waves-effect waves-light btn center" id="doneButton">Done</a>
</div>
</div>
<div class="card-panel hide" id="logged-out">
<p>
In order to store a credential:
</p>
<ol>
<li>Register a wallet with your browser (for example,
the <a href="https://wallet.example.chapi.io/">Demo Wallet</a>).</li>
<li>Click the <strong>Login</strong> button.</li>
</ol>
<a class="waves-effect waves-light btn" id="loginButton">Login</a>
</div>
</div>
<script>
/**
* Globals:
* * credentialHandlerPolyfill - from credential-handler-polyfill.min.js.
* This provides the get() and store() Credential Handler API calls.
*
* * WebCredentialHandler - from web-credential-handler.min.js.
* Utility/convenience library for the CHAPI polyfill, useful for wallet
* implementors.
*
* * Persistence and user management - ./mock-user-management.js
*/
async function handleStoreEvent() {
const event = await WebCredentialHandler.receiveCredentialEvent();
console.log('Store Credential Event:', event.type, event);
const credential = event.credential;
// document.getElementById('requestOrigin').innerHTML = event.credentialRequestOrigin;
// document.getElementById('hintKey').innerHTML = credential.hintKey || '';
// document.getElementById('credentialContents').innerHTML = JSON.stringify(credential.data, null, 2);
// Display the credential details, for confirmation
const vp = credential.data;
const vc = Array.isArray(vp.verifiableCredential)
? vp.verifiableCredential[0]
: vp.verifiableCredential;
document.getElementById('credentialType').innerHTML = getCredentialType(vc);
document.getElementById('credentialIssuer').innerHTML = vc.issuer.id ?? vc.issuer;
// Set up the event handlers for the buttons
document.getElementById('cancelButton').addEventListener('click', () => {
returnToUser(event, null); // Do nothing, close the CHAPI window
});
document.getElementById('confirmButton').addEventListener('click', () => {
document.getElementById('userArea').classList.remove('hide');
document.getElementById('confirm').classList.add('hide');
storeInWallet(credential.data); // in mock-user-management.js
refreshUserArea();
});
document.getElementById('doneButton').addEventListener('click', () => {
returnToUser(event, vp);
});
}
/**
* @param storeEvent
* @param {VerifiablePresentation|null} data - Return (to client application)
* exactly what was stored, or a `null` if canceled by the user.
*/
function returnToUser(storeEvent, data) {
storeEvent.respondWith(new Promise(resolve => {
return data
? resolve({dataType: 'VerifiablePresentation', data})
: resolve(null);
}))
}
// from js-helpers.js
onDocumentReady(() => {
document.getElementById('loginButton').addEventListener('click', login);
document.getElementById('logoutButton').addEventListener('click', logout);
refreshUserArea();
})
credentialHandlerPolyfill
.loadOnce(MEDIATOR)
.then(handleStoreEvent);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>