From 7cc76c3e99c1686ceab521fe4939f68a390eb7a1 Mon Sep 17 00:00:00 2001
From: Dusan Jakub <dusan.jakub@ysoft.com>
Date: Tue, 26 Sep 2023 16:02:33 +0200
Subject: [PATCH] Passwordless login redesign

---
 .../OAuthResource/loginPasswordless.html      | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/templates/OAuthResource/loginPasswordless.html b/src/main/resources/templates/OAuthResource/loginPasswordless.html
index 3684f4e..26d2fa1 100644
--- a/src/main/resources/templates/OAuthResource/loginPasswordless.html
+++ b/src/main/resources/templates/OAuthResource/loginPasswordless.html
@@ -23,7 +23,6 @@
             <div class="card-stacked">
                 <div class="card-content">
                     <h6>Create a new credential or use an existing one</h6>
-                    <p>In Webauthn, a single user will have multiple credentials, tied to the devices they are using.</p>
                     <p>First the user enters their username:</p>
                     <input id="userName" placeholder="User name"/><br/>
 
@@ -101,10 +100,20 @@
         </div>
     </div>
 </div>
-</div>
 
-<div id="result"></div>
-<div id="trace"></div>
+<div class="section step" id="errors">
+    <div class="col s12 m7">
+        <div class="card horizontal">
+            <div class="card-stacked">
+                <div class="card-content">
+                    <div id="result"></div>
+                    <div id="trace"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
 
 <form action="#" method="POST">
     <input name="sessionId" type="hidden" value="somesessionid">
@@ -259,7 +268,8 @@
                 });
             })
             .catch(err => {
-                result.append("Login failed: " + err);
+                $("#errors").show()
+                $("#result").html("Login failed: " + err);
                 console.error(err);
             });
         return false;
@@ -285,7 +295,8 @@
                 });
             })
             .catch(err => {
-                result.append("Registration failed: " + err);
+                $("#errors").show()
+                $("#result").html("Registration failed: " + err);
                 console.error(err);
             });
         return false;