Clean up WebAuthn javascript code and remove JQuery code

There were several issues with the WebAuthn registration and testing code and the style
was very old javascript with jquery callbacks.

This PR uses async and fetch to replace the JQuery code.

Ref go-gitea#22651

Signed-off-by: Andrew Thornton <art27@cantab.net>

Author: zeripath

routers/web/user/setting/security/webauthn.go

@@ -6,6 +6,8 @@ package security
 import (
 	"errors"
 	"net/http"
+	"strconv"
+	"time"
 
 	"code.gitea.io/gitea/models/auth"
 	wa "code.gitea.io/gitea/modules/auth/webauthn"
@@ -23,8 +25,8 @@ import (
 func WebAuthnRegister(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.WebauthnRegistrationForm)
 	if form.Name == "" {
-		ctx.Error(http.StatusConflict)
-		return
+		// Set name to the hexadecimal of the current time
+		form.Name = strconv.FormatInt(time.Now().UnixNano(), 16)
 	}
 
 	cred, err := auth.GetWebAuthnCredentialByName(ctx.Doer.ID, form.Name)

templates/user/auth/webauthn.tmpl

@@ -5,6 +5,7 @@
 				<h3 class="ui top attached header">
 				{{.locale.Tr "twofa"}}
 				</h3>
+				{{template "user/auth/webauthn_error" .}}
 				<div class="ui attached segment">
 					<i class="huge key icon"></i>
 					<h3>{{.locale.Tr "webauthn_insert_key"}}</h3>
@@ -18,5 +19,4 @@
 		</div>
 	</div>
 </div>
-{{template "user/auth/webauthn_error" .}}
 {{template "base/footer" .}}

templates/user/auth/webauthn_error.tmpl

@@ -1,22 +1,16 @@
-<div class="ui small modal" id="webauthn-error">
-	<div class="header">{{.locale.Tr "webauthn_error"}}</div>
-	<div class="content">
-		<div class="ui negative message">
-			<div class="header">
+<div id="webauthn-error" class="ui small hide">
+	<div class="content ui negative message">
+		<div class="header">
 			{{.locale.Tr "webauthn_error"}}
-			</div>
-			<div class="hide" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div>
-			<div class="hide" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div>
-			<div class="hide" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div>
-			<div class="hide" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
-			<div class="hide" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div>
-			<div class="hide" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div>
-			<div class="hide" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div>
-			<div class="hide" data-webauthn-error-msg="general"></div>
 		</div>
-	</div>
-	<div class="actions">
-		<button onclick="window.location.reload()" class="success ui button hide webauthn_error_timeout">{{.locale.Tr "webauthn_reload"}}</button>
-		<div class="ui cancel button">{{.locale.Tr "cancel"}}</div>
+		<div id="webauthn-error-msg" class="">
+		</div>
+		<div class="hide" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div>
+		<div class="hide" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div>
+		<div class="hide" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div>
+		<div class="hide" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
+		<div class="hide" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div>
+		<div class="hide" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div>
+		<div class="hide" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div>
 	</div>
 </div>

templates/user/settings/security/webauthn.tmpl

@@ -3,6 +3,7 @@
 </h4>
 <div class="ui attached segment">
 	<p>{{.locale.Tr "settings.webauthn_desc" | Str2html}}</p>
+	{{template "user/auth/webauthn_error" .}}
 	<div class="ui key list">
 		{{range .WebAuthnCredentials}}
 			<div class="item">
@@ -28,7 +29,6 @@
 	</div>
 </div>
 
-{{template "user/auth/webauthn_error" .}}
 
 <div class="ui small basic delete modal" id="delete-registration">
 	<div class="ui icon header">