Support webauthn (#17957)

Migrate from U2F to Webauthn

Co-authored-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

7 files changed, 57 insertions, 71 deletions

diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index 122b3b46b4..1aabfa2f5c 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -14,9 +14,6 @@
 	{{template "base/footer_content" .}}
 
 <!-- Third-party libraries -->
-{{if .RequireU2F}}
-	<script src="{{AssetUrlPrefix}}/vendor/plugins/u2f/index.js"></script>
-{{end}}
 {{if .EnableCaptcha}}
 	{{if eq .CaptchaType "recaptcha"}}
 		<script src='{{ URLJoin .RecaptchaURL "api.js"}}' async></script>
diff --git a/templates/user/auth/u2f.tmpl b/templates/user/auth/u2f.tmpl
deleted file mode 100644
index 8b04866bbc..0000000000
--- a/templates/user/auth/u2f.tmpl
+++ /dev/null
@@ -1,24 +0,0 @@
-{{template "base/head" .}}
-<div class="page-content user signin">
-	<div class="ui middle centered very relaxed page grid">
-		<div class="column">
-			<h3 class="ui top attached header">
-			{{.i18n.Tr "twofa"}}
-			</h3>
-			<div class="ui attached segment">
-				<i class="huge key icon"></i>
-				<h3>{{.i18n.Tr "u2f_insert_key"}}</h3>
-				{{template "base/alert" .}}
-				<p>{{.i18n.Tr "u2f_sign_in"}}</p>
-			</div>
-			<div id="wait-for-key" class="ui attached segment"><div class="ui active indeterminate inline loader"></div> {{.i18n.Tr "u2f_press_button"}} </div>
-			{{if .TOTPEnrolled}}
-				<div class="ui attached segment">
-					<a href="{{AppSubUrl}}/user/two_factor">{{.i18n.Tr "u2f_use_twofa"}}</a>
-				</div>
-			{{end}}
-		</div>
-	</div>
-</div>
-{{template "user/auth/u2f_error" .}}
-{{template "base/footer" .}}
diff --git a/templates/user/auth/u2f_error.tmpl b/templates/user/auth/u2f_error.tmpl
deleted file mode 100644
index 5bda372fe8..0000000000
--- a/templates/user/auth/u2f_error.tmpl
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="ui small modal" id="u2f-error">
-	<div class="header">{{.i18n.Tr "u2f_error"}}</div>
-	<div class="content">
-		<div class="ui negative message">
-			<div class="header">
-			{{.i18n.Tr "u2f_error"}}
-			</div>
-			<div class="hide" id="unsupported-browser">
-			{{.i18n.Tr "u2f_unsupported_browser"}}
-			</div>
-			<div class="hide" id="u2f-error-1">
-			{{.i18n.Tr "u2f_error_1"}}
-			</div>
-			<div class="hide" id="u2f-error-2">
-			{{.i18n.Tr "u2f_error_2"}}
-			</div>
-			<div class="hide" id="u2f-error-3">
-			{{.i18n.Tr "u2f_error_3"}}
-			</div>
-			<div class="hide" id="u2f-error-4">
-			{{.i18n.Tr "u2f_error_4"}}
-			</div>
-			<div class="hide u2f_error_5">
-			{{.i18n.Tr "u2f_error_5"}}
-			</div>
-		</div>
-	</div>
-	<div class="actions">
-		<button onclick="window.location.reload()" class="success ui button hide u2f_error_5">{{.i18n.Tr "u2f_reload"}}</button>
-		<div class="ui cancel button">{{.i18n.Tr "cancel"}}</div>
-	</div>
-</div>
diff --git a/templates/user/auth/webauthn.tmpl b/templates/user/auth/webauthn.tmpl
new file mode 100644
index 0000000000..17c9a5f580
--- /dev/null
+++ b/templates/user/auth/webauthn.tmpl
@@ -0,0 +1,22 @@
+{{template "base/head" .}}
+<div class="user signin webauthn-prompt">
+	<div class="ui middle centered very relaxed page grid">
+		<div class="column">
+				<h3 class="ui top attached header">
+				{{.i18n.Tr "twofa"}}
+				</h3>
+				<div class="ui attached segment">
+					<i class="huge key icon"></i>
+					<h3>{{.i18n.Tr "webauthn_insert_key"}}</h3>
+					{{template "base/alert" .}}
+					<p>{{.i18n.Tr "webauthn_sign_in"}}</p>
+				</div>
+				<div class="ui attached segment"><div class="ui active indeterminate inline loader"></div> {{.i18n.Tr "webauthn_press_button"}} </div>
+				<div class="ui attached segment">
+					<a href="{{AppSubUrl}}/user/two_factor">{{.i18n.Tr "webauthn_use_twofa"}}</a>
+				</div>
+		</div>
+	</div>
+</div>
+{{template "user/auth/webauthn_error" .}}
+{{template "base/footer" .}}
diff --git a/templates/user/auth/webauthn_error.tmpl b/templates/user/auth/webauthn_error.tmpl
new file mode 100644
index 0000000000..be46ee42a0
--- /dev/null
+++ b/templates/user/auth/webauthn_error.tmpl
@@ -0,0 +1,22 @@
+<div class="ui small modal" id="webauthn-error">
+	<div class="header">{{.i18n.Tr "webauthn_error"}}</div>
+	<div class="content">
+		<div class="ui negative message">
+			<div class="header">
+			{{.i18n.Tr "webauthn_error"}}
+			</div>
+			<div class="hide" data-webauthn-error-msg="browser"><p>{{.i18n.Tr "webauthn_unsupported_browser"}}</div>
+			<div class="hide" data-webauthn-error-msg="unknown"><p>{{.i18n.Tr "webauthn_error_unknown"}}</div>
+			<div class="hide" data-webauthn-error-msg="insecure"><p>{{.i18n.Tr "webauthn_error_insecure"}}</div>
+			<div class="hide" data-webauthn-error-msg="unable-to-process"><p>{{.i18n.Tr "webauthn_error_unable_to_process"}}</div>
+			<div class="hide" data-webauthn-error-msg="duplicated"><p>{{.i18n.Tr "webauthn_error_duplicated"}}</div>
+			<div class="hide" data-webauthn-error-msg="empty"><p>{{.i18n.Tr "webauthn_error_empty"}}</div>
+			<div class="hide" data-webauthn-error-msg="timeout"><p>{{.i18n.Tr "webauthn_error_timeout"}}</div>
+			<div class="hide" data-webauthn-error-msg="0"></div>
+		</div>
+	</div>
+	<div class="actions">
+		<button onclick="window.location.reload()" class="success ui button hide webauthn_error_timeout">{{.i18n.Tr "webauthn_reload"}}</button>
+		<div class="ui cancel button">{{.i18n.Tr "cancel"}}</div>
+	</div>
+</div>
diff --git a/templates/user/settings/security/security.tmpl b/templates/user/settings/security/security.tmpl
index 6d5f38ab70..d93be9f640 100644
--- a/templates/user/settings/security/security.tmpl
+++ b/templates/user/settings/security/security.tmpl
@@ -4,7 +4,7 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 		{{template "user/settings/security/twofa" .}}
-		{{template "user/settings/security/u2f" .}}
+		{{template "user/settings/security/webauthn" .}}
 		{{template "user/settings/security/accountlinks" .}}
 		{{if .EnableOpenIDSignIn}}
 		{{template "user/settings/security/openid" .}}
diff --git a/templates/user/settings/security/u2f.tmpl b/templates/user/settings/security/webauthn.tmpl
index 97e76b6da2..be8f8cccda 100644
--- a/templates/user/settings/security/u2f.tmpl
+++ b/templates/user/settings/security/webauthn.tmpl
@@ -1,51 +1,52 @@
 <h4 class="ui top attached header">
-{{.i18n.Tr "settings.u2f"}}
+{{.i18n.Tr "settings.webauthn"}}
 </h4>
 <div class="ui attached segment">
-	<p>{{.i18n.Tr "settings.u2f_desc" | Str2html}}</p>
+	<p>{{.i18n.Tr "settings.webauthn_desc" | Str2html}}</p>
 	<div class="ui key list">
-		{{range .U2FRegistrations}}
+		{{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}}/u2f/delete" data-id="{{.ID}}">
+					<button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">
 					{{$.i18n.Tr "settings.delete_key"}}
 					</button>
 				</div>
 				<div class="content">
 					<strong>{{.Name}}</strong>
 				</div>
+				<span class="time">{{TimeSinceUnix .CreatedUnix $.Lang}}</span>
 			</div>
 		{{end}}
 	</div>
 	<div class="ui form">
 		{{.CsrfTokenHtml}}
 		<div class="required field">
-			<label for="nickname">{{.i18n.Tr "settings.u2f_nickname"}}</label>
+			<label for="nickname">{{.i18n.Tr "settings.webauthn_nickname"}}</label>
 			<input id="nickname" name="nickname" type="text" required>
 		</div>
-		<button id="register-security-key" class="ui green button">{{svg "octicon-key"}} {{.i18n.Tr "settings.u2f_register_key"}}</button>
+		<button id="register-webauthn" class="ui green button">{{svg "octicon-key"}} {{.i18n.Tr "settings.webauthn_register_key"}}</button>
 	</div>
 </div>
 
 <div class="ui small modal" id="register-device">
-	<div class="header">{{.i18n.Tr "settings.u2f_register_key"}}</div>
+	<div class="header">{{.i18n.Tr "settings.webauthn_register_key"}}</div>
 	<div class="content">
-		<i class="notched spinner loading icon"></i> {{.i18n.Tr "settings.u2f_press_button"}}
+		<i class="notched spinner loading icon"></i> {{.i18n.Tr "settings.webauthn_press_button"}}
 	</div>
 	<div class="actions">
 		<div class="ui cancel button">{{.i18n.Tr "cancel"}}</div>
 	</div>
 </div>
 
-{{template "user/auth/u2f_error" .}}
+{{template "user/auth/webauthn_error" .}}
 
 <div class="ui small basic delete modal" id="delete-registration">
 	<div class="ui icon header">
 		{{svg "octicon-trash"}}
-	{{.i18n.Tr "settings.u2f_delete_key"}}
+	{{.i18n.Tr "settings.webauthn_delete_key"}}
 	</div>
 	<div class="content">
-		<p>{{.i18n.Tr "settings.u2f_delete_key_desc"}}</p>
+		<p>{{.i18n.Tr "settings.webauthn_delete_key_desc"}}</p>
 	</div>
 	{{template "base/delete_modal_actions" .}}
 </div>