Fix webauthn regression and improve code (#25113)

Follow:

* #22697

There are some bugs in #22697:

* https://github.com/go-gitea/gitea/pull/22697#issuecomment-1577957966
* the webauthn failure message is never shown and causes console error
* The `document.getElementById('register-button')` and
`document.getElementById('login-button')` is wrong
    * there is no such element in code
    * it causes JS error when a browser doesn't provide webauthn
    * the end user can't see the real error message

These bugs are fixed in this PR.

Other changes:

* Use simple HTML/CSS layouts, no need to use too many `gt-` patches
* Make the webauthn page have correct "page-content" layout
* The "data-webauthn-error-msg" elements are only used to provide locale
texts, so move them into a single "gt-hidden", then no need to repeat a
lot of "gt-hidden" in code
* The `{{.CsrfTokenHtml}}`  is a no-op because there is no form
* Many `hideElem('#webauthn-error')` in code is no-op because the
`webauthn-error` already has "gt-hidden" by default
* Make the tests for "URLEncodedBase64" really test with concrete cases.


Screenshots:

* Error message when webauthn fails (before, there is no error message):

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/93cf9559-d93b-4f06-9d98-0f7032d9c65b)

</details>

* Error message when webauthn is unavailable 

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/ffc0fcd9-b93b-4418-979c-c89bb627aaf2)

</details>

3 files changed, 29 insertions, 32 deletions

diff --git a/templates/user/auth/webauthn.tmpl b/templates/user/auth/webauthn.tmpl
index f1c4f29fd9..ef04886405 100644
--- a/templates/user/auth/webauthn.tmpl
+++ b/templates/user/auth/webauthn.tmpl
@@ -1,21 +1,22 @@
 {{template "base/head" .}}
-<div class="user signin webauthn-prompt">
-	<div class="ui middle centered very relaxed page grid">
+<div role="main" aria-label="{{.Title}}" class="page-content user signin webauthn-prompt">
+	<div class="ui page grid">
 		<div class="column center aligned">
-				<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>
-					{{template "base/alert" .}}
-					<p>{{.locale.Tr "webauthn_sign_in"}}</p>
-				</div>
-				<div class="ui attached segment"><div class="ui active indeterminate inline loader"></div> {{.locale.Tr "webauthn_press_button"}} </div>
-				<div class="ui attached segment">
-					<a href="{{AppSubUrl}}/user/two_factor">{{.locale.Tr "webauthn_use_twofa"}}</a>
-				</div>
+			{{template "user/auth/webauthn_error" .}}
+			<h3 class="ui top attached header">{{.locale.Tr "twofa"}}</h3>
+			<div class="ui attached segment">
+				{{svg "octicon-key" 56}}
+				<h3>{{.locale.Tr "webauthn_insert_key"}}</h3>
+				{{template "base/alert" .}}
+				<p>{{.locale.Tr "webauthn_sign_in"}}</p>
+			</div>
+			<div class="ui attached segment">
+				<div class="ui active indeterminate inline loader"></div>
+				{{.locale.Tr "webauthn_press_button"}}
+			</div>
+			<div class="ui attached segment">
+				<a href="{{AppSubUrl}}/user/two_factor">{{.locale.Tr "webauthn_use_twofa"}}</a>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/templates/user/auth/webauthn_error.tmpl b/templates/user/auth/webauthn_error.tmpl
index f90882ef12..59029bbf91 100644
--- a/templates/user/auth/webauthn_error.tmpl
+++ b/templates/user/auth/webauthn_error.tmpl
@@ -1,13 +1,13 @@
-<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 id="webauthn-error" class="ui negative message gt-hidden">
+	<div class="header">{{.locale.Tr "webauthn_error"}}</div>
+	<div id="webauthn-error-msg" class="gt-pt-3"></div>
+	<div class="gt-hidden">
+		<div data-webauthn-error-msg="browser">{{.locale.Tr "webauthn_unsupported_browser"}}</div>
+		<div data-webauthn-error-msg="unknown">{{.locale.Tr "webauthn_error_unknown"}}</div>
+		<div data-webauthn-error-msg="insecure">{{.locale.Tr "webauthn_error_insecure"}}</div>
+		<div data-webauthn-error-msg="unable-to-process">{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
+		<div data-webauthn-error-msg="duplicated">{{.locale.Tr "webauthn_error_duplicated"}}</div>
+		<div data-webauthn-error-msg="empty">{{.locale.Tr "webauthn_error_empty"}}</div>
+		<div data-webauthn-error-msg="timeout">{{.locale.Tr "webauthn_error_timeout"}}</div>
 	</div>
 </div>
diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl
index e541f764bc..ec1df7cdcd 100644
--- a/templates/user/settings/security/webauthn.tmpl
+++ b/templates/user/settings/security/webauthn.tmpl
@@ -1,6 +1,4 @@
-<h4 class="ui top attached header">
-{{.locale.Tr "settings.webauthn"}}
-</h4>
+<h4 class="ui top attached header">{{.locale.Tr "settings.webauthn"}}</h4>
 <div class="ui attached segment">
 	<p>{{.locale.Tr "settings.webauthn_desc" | Str2html}}</p>
 	{{template "user/auth/webauthn_error" .}}
@@ -20,7 +18,6 @@
 		{{end}}
 	</div>
 	<div class="ui form">
-		{{.CsrfTokenHtml}}
 		<div class="required field">
 			<label for="nickname">{{.locale.Tr "settings.webauthn_nickname"}}</label>
 			<input id="nickname" name="nickname" type="text" required>
@@ -29,7 +26,6 @@
 	</div>
 </div>
 
-
 <div class="ui g-modal-confirm delete modal" id="delete-registration">
 	<div class="header">
 		{{svg "octicon-trash"}}