SpringUserFrameworkDemoApp/src/main/resources/templates/user/mfa/webauthn-challenge.html at c3017fdb9bafc69dc7693165a799e107ef301bc3 · devondragon/SpringUserFrameworkDemoApp · GitHub

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
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{layout}">

<head>
	<title>Verify Your Identity</title>
</head>

<body>
	<div layout:fragment="content">
		<section id="main_content" class="my-5">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-8 col-lg-6">
						<div class="card shadow-sm">
							<div class="card-header text-center">
								<h5><i class="bi bi-shield-lock me-2"></i>Additional Verification Required</h5>
							</div>
							<div class="card-body text-center">
								<p class="text-muted mb-4">
									Your account requires an additional verification step.
									Please verify your identity using your passkey.
								</p>

								<!-- Error message (shown by JS) -->
								<div id="challengeError" class="alert alert-danger text-center d-none" role="alert"></div>

								<button id="verifyPasskeyBtn" type="button" class="btn btn-primary btn-lg w-100">
									<i class="bi bi-key me-2"></i> Verify with Passkey
								</button>

								<div class="mt-3">
									<form th:action="@{/user/logout}" method="POST" class="d-inline">
										<button type="submit" class="btn btn-link text-muted small p-0 border-0">
											Cancel and sign out
										</button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<noscript>
			<div class="container my-5">
				<div class="alert alert-warning text-center">
					JavaScript is required for passkey verification. Please enable JavaScript in your browser.
				</div>
			</div>
		</noscript>

		<script type="module" th:src="@{/js/user/mfa-webauthn-challenge.js}"></script>
	</div>
</body>

</html>