github-mirrors/oauth-playground-server
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-server.git synced 2026-03-22 09:09:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

webauthn - UI fixes, scrolling

Browse Source
This commit is contained in:
Dusan Jakub
2023-09-27 10:21:45 +02:00
parent e746406825
commit e3c506c753
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/main/resources/templates/OAuthResource/loginPasswordless.html
View File

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