From e3c506c7538150cd2a2bf86b64d5d05dc26dfacf Mon Sep 17 00:00:00 2001
From: Dusan Jakub <dusan.jakub@ysoft.com>
Date: Wed, 27 Sep 2023 10:21:45 +0200
Subject: [PATCH] webauthn - UI fixes, scrolling

---
 .../OAuthResource/loginPasswordless.html      | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/templates/OAuthResource/loginPasswordless.html b/src/main/resources/templates/OAuthResource/loginPasswordless.html
index ee5c6b3..feb657d 100644
--- a/src/main/resources/templates/OAuthResource/loginPasswordless.html
+++ b/src/main/resources/templates/OAuthResource/loginPasswordless.html
@@ -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);
             });