Passwordless login redesign

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 class="section step" id="errors">
-<div id="trace"></div>
+    <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;