Skip to content

Commit 844afc6

Browse files
alexbalakirevalexbalakirev
committed
Migrated to UI components
1 parent 03a7dd4 commit 844afc6

File tree

2 files changed

+75
-42
lines changed

2 files changed

+75
-42
lines changed

‎complete/src/main/resources/templates/index.html‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,32 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Corbado Login</title>
5-
</head>
6-
<body>
7-
<script th:src="'https://' + ${PROJECT_ID} + '.frontendapi.corbado.io/auth.js'"></script>
8-
<corbado-auth th:project-id="${PROJECT_ID}" conditional="yes">
9-
<input name="username" id="corbado-username"
10-
required autocomplete="webauthn"/>
11-
</corbado-auth>
12-
</body>
2+
<html xmlns:th="http://www.thymeleaf.org">
3+
<head>
4+
<link
5+
rel="stylesheet"
6+
href="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.css"
7+
/>
8+
<script src="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.js" defer></script>
9+
</head>
10+
11+
<body>
12+
<script th:inline="javascript">
13+
document.addEventListener('DOMContentLoaded', async () => {
14+
await Corbado.load({
15+
projectId: /*[[${PROJECT_ID}]]*/,
16+
darkMode: "off",
17+
setShortSessionCookie: "true",
18+
});
19+
const authElement = document.getElementById('corbado-auth');
20+
Corbado.mountAuthUI(authElement, {
21+
onLoggedIn: () => {
22+
window.location.href = '/profile';
23+
},
24+
});
25+
26+
27+
});
28+
</script>
29+
30+
<div id="corbado-auth"></div>
31+
</body>
1332
</html>

‎complete/src/main/resources/templates/profile.html‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,51 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Profile Page</title>
5-
</head>
6-
<body>
2+
<html xmlns:th="http://www.thymeleaf.org">
3+
<head>
4+
<link
5+
rel="stylesheet"
6+
href="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.css"
7+
/>
8+
<script src="https://unpkg.com/@corbado/web-js@2.8.0/dist/bundle/index.js" defer></script>
9+
</head>
10+
<body>
11+
12+
<!-- Define passkey-list div and logout button -->
13+
<h2>:/protected</h2>
14+
<p>User ID: [[${USER_ID}]]</p>
15+
<p>Name: [[${USER_NAME}]]</p>
16+
<p>Email: [[${USER_EMAIL}]]</p>
17+
<div id="passkey-list"></div>
18+
<button id="logoutButton">Logout</button>
719

8-
<h2>:/protected 🔒</h2>
9-
<p>User ID: <span th:text="${USER_ID}"></span></p>
10-
<p>Name: <span th:text="${USER_NAME}"></span></p>
11-
<p>Email: <span th:text="${USER_EMAIL}"></span></p>
12-
<!-- Import Corbado SDK -->
13-
<script th:src="'https://' + ${PROJECT_ID} + '.frontendapi.corbado.io/auth.js'"></script>
14-
<script th:src="'https://' + ${PROJECT_ID} + '.frontendapi.corbado.io/utility.js'"></script>
15-
<!-- Logout button -->
16-
<button id="logoutButton">Logout</button>
1720

18-
<script th:inline="javascript">
19-
/*<![CDATA[*/
20-
const projectID = /*[[@{${PROJECT_ID}}]]*/ '';
21-
const session = new Corbado.Session(projectID);
22-
// Get logout button
23-
const logoutButton = document.getElementById('logoutButton');
21+
<!-- Script to load Corbado and mount PasskeyList UI -->
22+
<script th:inline="javascript">
23+
document.addEventListener('DOMContentLoaded', async () => {
24+
await Corbado.load({
25+
projectId: /*[[${PROJECT_ID}]]*/,
26+
darkMode: "off",
27+
setShortSessionCookie: "true" // set short session cookie automatically
28+
});
29+
30+
// Get and mount PasskeyList UI
31+
const passkeyListElement = document.getElementById("passkey-list"); // Element where you want to render PasskeyList UI
32+
Corbado.mountPasskeyListUI(passkeyListElement);
2433

25-
// Add event listener to logout button
26-
logoutButton.addEventListener('click', function() {
27-
session.logout()
28-
.then(() => {
29-
window.location.replace("/");
30-
})
31-
.catch(err => {
32-
console.error(err);
34+
// Get logout button
35+
const logoutButton = document.getElementById('logoutButton');
36+
// Add event listener to logout button
37+
logoutButton.addEventListener('click', function() {
38+
Corbado.logout()
39+
.then(() => {
40+
window.location.replace("/");
41+
})
42+
.catch(err => {
43+
console.error(err);
44+
});
3345
});
34-
});
35-
</script>
46+
})();
47+
</script>
48+
49+
3650
</body>
37-
</html>
51+
</html>

0 commit comments

Comments
 (0)