webauthn - UI fixes, scrolling

This commit is contained in:
Dusan Jakub
2023-09-27 10:21:45 +02:00
parent e746406825
commit e3c506c753

View File

@@ -17,7 +17,7 @@
{/add-header}
<div class="container">
<div class="section">
<div class="section" id="init">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
@@ -108,6 +108,7 @@
<div class="card-content">
<div id="result"></div>
<div id="trace"></div>
<button class="resetBtn waves-effect waves-light btn full-width">Start over</button>
</div>
</div>
</div>
@@ -122,6 +123,17 @@
</div>
<script type="text/javascript">
$.fn.extend({
showInViewport: function() {
this.show();
this.each(function () {
$([document.documentElement, document.body]).animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
});
function tryDecodeBase64(str) {
try {
return atob(str);
@@ -171,53 +183,53 @@
function traceRegisterRequest(params) {
$(".step").hide();
$("#server1-request").show();
$("#server1-request").showInViewport();
$("#server1-url").html(params.url)
$("#server1-call").html(JSON.stringify(params.body, null, 2));
return continueButton("#server1-request", params);
}
function traceRegisterResponse(params) {
$("#server1-response").show();
$("#server1-response").showInViewport();
$("#server1-response-body").html(JSON.stringify(params, null, 2));
return continueButton("#server1-response", params);
}
function traceLoginRequest(params) {
$(".step").hide();
$("#server1-request").show();
$("#server1-request").showInViewport();
$("#server1-url").html(params.url)
$("#server1-call").html(JSON.stringify(params.body, null, 2));
return continueButton("#server1-request", params);
}
function traceLoginResponse(params) {
$("#server1-response").show();
$("#server1-response").showInViewport();
$("#server1-response-body").html(JSON.stringify(params, null, 2));
return continueButton("#server1-response", params);
}
function traceCredentialsCreateRequest(challenge) {
$("#navigator-request").show();
$("#navigator-request").showInViewport();
$("#navigator-call").html("navigator.credentials.create({ publicKey: ... });");
return continueButton("#navigator-request", challenge);
}
function traceCredentialsCreateResponse(response) {
$("#navigator-response").show();
$("#navigator-response").showInViewport();
$("#navigator-response-body").html(JSON.stringify(response, null, 2));
$("#navigator-clientDataJSON").html(JSON.stringify(JSON.parse(tryDecodeBase64(response.response.clientDataJSON)), null, 2));
return continueButton("#navigator-response", response);
}
function traceCredentialsGetRequest(challenge) {
$("#navigator-request").show();
$("#navigator-request").showInViewport();
$("#navigator-call").html("navigator.credentials.get({ publicKey: ... });");
return continueButton("#navigator-request", challenge);
}
function traceCredentialsGetResponse(response) {
$("#navigator-response").show();
$("#navigator-response").showInViewport();
$("#navigator-response-body").html(JSON.stringify(response, null, 2));
$("#navigator-clientDataJSON").html(JSON.stringify(JSON.parse(tryDecodeBase64(response.response.clientDataJSON)), null, 2));
return continueButton("#navigator-response", response);
@@ -239,6 +251,13 @@
$form.submit();
}
function init() {
$(".step").hide()
$("#init").showInViewport();
}
$(".resetBtn").click(init)
const webAuthn = new WebAuthn({
callbackPath: '/q/webauthn/callback',
registerPath: '/q/webauthn/register',
@@ -268,7 +287,7 @@
});
})
.catch(err => {
$("#errors").show()
$("#errors").showInViewport()
$("#result").html("Login failed: " + err);
console.error(err);
});
@@ -295,7 +314,7 @@
});
})
.catch(err => {
$("#errors").show()
$("#errors").showInViewport()
$("#result").html("Registration failed: " + err);
console.error(err);
});