Clean up WebAuthn javascript code and remove JQuery code (#22697)

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 #22651

Signed-off-by: Andrew Thornton <[email protected]>

---------

Signed-off-by: Andrew Thornton <[email protected]>
Co-authored-by: delvh <[email protected]>
Co-authored-by: silverwind <[email protected]>

Author: 3 people

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">
 					{{svg "octicon-key" 56}}
 					<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,13 @@
-<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">
-			{{.locale.Tr "webauthn_error"}}
-			</div>
-			<div class="gt-hidden" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div>
-			<div class="gt-hidden" data-webauthn-error-msg="general"></div>
-		</div>
-	</div>
-	<div class="actions">
-		<button onclick="window.location.reload()" class="success ui button gt-hidden webauthn_error_timeout">{{.locale.Tr "webauthn_reload"}}</button>
-		<button class="ui cancel button">{{.locale.Tr "cancel"}}</button>
+<div id="webauthn-error" class="ui small gt-hidden">
+	<div class="content ui negative message gt-df gt-fc gt-gap-3">
+		<div class="header">{{.locale.Tr "webauthn_error"}}</div>
+		<div id="webauthn-error-msg"></div>
+		<div class="gt-hidden" data-webauthn-error-msg="browser">{{.locale.Tr "webauthn_unsupported_browser"}}</div>
+		<div class="gt-hidden" data-webauthn-error-msg="unknown">{{.locale.Tr "webauthn_error_unknown"}}</div>
+		<div class="gt-hidden" data-webauthn-error-msg="insecure">{{.locale.Tr "webauthn_error_insecure"}}</div>
+		<div class="gt-hidden" data-webauthn-error-msg="unable-to-process">{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
+		<div class="gt-hidden" data-webauthn-error-msg="duplicated">{{.locale.Tr "webauthn_error_duplicated"}}</div>
+		<div class="gt-hidden" data-webauthn-error-msg="empty">{{.locale.Tr "webauthn_error_empty"}}</div>
+		<div class="gt-hidden" data-webauthn-error-msg="timeout">{{.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 g-modal-confirm delete modal" id="delete-registration">
 	<div class="header">

web_src/css/base.css

@@ -699,6 +699,11 @@ a.label,
   border: 1px solid var(--color-secondary);
 }
 
+.ui.info.message .header,
+.ui.blue.message .header {
+  color: var(--color-blue);
+}
+
 .ui.info.message,
 .ui.attached.info.message,
 .ui.blue.message,
@@ -708,6 +713,12 @@ a.label,
   border-color: var(--color-info-border);
 }
 
+.ui.success.message .header,
+.ui.positive.message .header,
+.ui.green.message .header {
+  color: var(--color-green);
+}
+
 .ui.success.message,
 .ui.attached.success.message,
 .ui.positive.message,
@@ -717,6 +728,12 @@ a.label,
   border-color: var(--color-success-border);
 }
 
+.ui.error.message .header,
+.ui.negative.message .header,
+.ui.red.message .header {
+  color: var(--color-red);
+}
+
 .ui.error.message,
 .ui.attached.error.message,
 .ui.red.message,
@@ -728,6 +745,11 @@ a.label,
   border-color: var(--color-error-border);
 }
 
+.ui.warning.message .header,
+.ui.yellow.message .header {
+  color: var(--color-yellow);
+}
+
 .ui.warning.message,
 .ui.attached.warning.message,
 .ui.yellow.message,

web_src/css/repo.css

@@ -2405,11 +2405,6 @@
   padding-bottom: 0 !important;
 }
 
-.settings .content > .header,
-.settings .content .segment {
-  box-shadow: 0 1px 2px 0 var(--color-box-header);
-}
-
 .settings.webhooks .list > .item:not(:first-child),
 .settings.githooks .list > .item:not(:first-child),
 .settings.actions .list > .item:not(:first-child) {