-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhome.html
More file actions
126 lines (111 loc) · 3.97 KB
/
Copy pathhome.html
File metadata and controls
126 lines (111 loc) · 3.97 KB
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
<!--
Copyright 2023 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<meta name="description" content="{{title}}">
<link id="favicon" rel="icon"
href="favicon.svg"
type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/bundle.css">
<link rel="stylesheet" href="/bundle-css.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="components-bundle.js"></script>
</head>
<body>
<mdui-top-app-bar style="position: relative;">
<mdui-top-app-bar-title>{{title}}</mdui-top-app-bar-title>
<a href="https://github.com/GoogleChromeLabs/passkeys-codelab"><mdui-button-icon icon="code"></mdui-button-icon></a>
</mdui-top-app-bar>
<mdui-linear-progress id="progress" class="hidden"></mdui-linear-progress>
<main class="content center">
<h2>
Welcome, {{displayName}}!
</h2>
<section>
<h3>
Your name:
</h3>
<div id="display-name"></div>
</section>
<!-- TODO: Add an ability to create a passkey: Add placeholder HTML. -->
<a href="/auth/signout"><mdui-button type="button">Sign out</mdui-button></a>
</main>
<script type="module">
// TODO: Add an ability to create a passkey: Create and register a passkey.
import {
$,
_fetch,
loading,
updateCredential,
unregisterCredential
} from '/client.js';
import { html, render } from 'https://unpkg.com/lit-html@2.6.1/lit-html.js?module';
async function changeDisplayName(e) {
const newName = prompt('Enter a new display name', e.target.dataset.displayName);
if (newName) {
loading.start();
await _fetch('/auth/updateDisplayName', { newName });
loading.stop();
renderDisplayName();
}
}
async function renderDisplayName() {
const res = await _fetch('/auth/userinfo');
render(html`
<mdui-list>
<mdui-list-item>
${res.displayName || res.username}
<mdui-button-icon data-name="${res.displayName || res.username}" title="Edit your display name" @click="${changeDisplayName}" icon="edit" slot="end-icon"></mdui-button-icon>
</mdui-list-item>
<mdui-list>`, $('#display-name'));
};
renderDisplayName();
async function rename(e) {
const { credId, name } = e.target.dataset;
const newName = prompt('Enter a new credential name.', name);
if (newName.length === 0) return;
try {
loading.start();
await updateCredential(credId, newName);
loading.stop();
renderCredentials();
} catch (e) {
loading.stop();
console.error(e);
alert(e.message);
}
};
async function remove(e) {
if (!confirm('Do you really want to remove this credential?')) return;
try {
loading.start();
await unregisterCredential(e.target.dataset.credId);
loading.stop();
renderCredentials();
} catch (e) {
loading.stop();
console.error(e);
alert(e.message);
}
};
// TODO: Add an ability to create a passkey: Check for passkey support.
// TODO: Add an ability to create a passkey: Render registered passkeys in a list.
// TODO: Add an ability to create a passkey: Create and register a passkey.
</script>
</body>
</html>