mirror of
https://github.com/ysoftdevs/oauth-playground-server.git
synced 2026-03-10 09:56:39 +01:00
webauthn - UI fixes, scrolling
This commit is contained in:
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user