0
0
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2024-11-09 03:21:45 +01:00
gitea/templates/user/settings/security/webauthn.tmpl
wxiaoguang 027014d7de
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>
2023-06-07 19:20:18 +08:00

38 lines
1.4 KiB
Handlebars

<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" .}}
<div class="ui key list">
{{range .WebAuthnCredentials}}
<div class="item">
<div class="right floated content">
<button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">
{{$.locale.Tr "settings.delete_key"}}
</button>
</div>
<div class="content">
<strong>{{.Name}}</strong>
</div>
<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>
</div>
{{end}}
</div>
<div class="ui form">
<div class="required field">
<label for="nickname">{{.locale.Tr "settings.webauthn_nickname"}}</label>
<input id="nickname" name="nickname" type="text" required>
</div>
<button id="register-webauthn" class="ui green button">{{svg "octicon-key"}} {{.locale.Tr "settings.webauthn_register_key"}}</button>
</div>
</div>
<div class="ui g-modal-confirm delete modal" id="delete-registration">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.webauthn_delete_key"}}
</div>
<div class="content">
<p>{{.locale.Tr "settings.webauthn_delete_key_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>