Add support for FIDO U2F (#3971)

* Add support for U2F

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add vendor library
Add missing translations

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Minor improvements

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add U2F support for Firefox, Chrome (Android) by introducing a custom JS library
Add U2F error handling

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add U2F login page to OAuth

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Move U2F user settings to a separate file

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add unit tests for u2f model
Renamed u2f table name

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix problems caused by refactoring

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add U2F documentation

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Remove not needed console.log-s

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add default values to app.ini.sample
Add FIDO U2F to comparison

Signed-off-by: Jonas Franz <info@jonasfranz.software>

6 files changed, 115 insertions, 1 deletions

diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index c0f5a83d7b..3ad5358d41 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -64,6 +64,9 @@
 {{if .RequireDropzone}}
 	<script src="{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.js"></script>
 {{end}}
+{{if .RequireU2F}}
+	<script src="{{AppSubUrl}}/vendor/plugins/u2f/index.js"></script>
+{{end}}
 {{if .RequireTribute}}
 	<script src="{{AppSubUrl}}/vendor/plugins/tribute/tribute.min.js"></script>
 
diff --git a/templates/user/auth/u2f.tmpl b/templates/user/auth/u2f.tmpl
new file mode 100644
index 0000000000..fa5904fc38
--- /dev/null
+++ b/templates/user/auth/u2f.tmpl
@@ -0,0 +1,22 @@
+{{template "base/head" .}}
+<div class="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>
+			<div class="ui attached segment">
+				<a href="/user/two_factor">{{.i18n.Tr "u2f_use_twofa"}}</a>
+			</div>
+		</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
new file mode 100644
index 0000000000..e30b064720
--- /dev/null
+++ b/templates/user/auth/u2f_error.tmpl
@@ -0,0 +1,32 @@
+<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/settings/security.tmpl b/templates/user/settings/security.tmpl
index 8e7044f7df..c2c99c7979 100644
--- a/templates/user/settings/security.tmpl
+++ b/templates/user/settings/security.tmpl
@@ -4,6 +4,7 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 		{{template "user/settings/security_twofa" .}}
+		{{template "user/settings/security_u2f" .}}
 		{{template "user/settings/security_accountlinks" .}}
 		{{if .EnableOpenIDSignIn}}
 		{{template "user/settings/security_openid" .}}
diff --git a/templates/user/settings/security_openid.tmpl b/templates/user/settings/security_openid.tmpl
index 82a05f3885..a16501acfa 100644
--- a/templates/user/settings/security_openid.tmpl
+++ b/templates/user/settings/security_openid.tmpl
@@ -43,7 +43,7 @@
 		{{.CsrfTokenHtml}}
 		<div class="required field {{if .Err_OpenID}}error{{end}}">
 			<label for="openid">{{.i18n.Tr "settings.add_new_openid"}}</label>
-			<input id="openid" name="openid" type="text" autofocus required>
+			<input id="openid" name="openid" type="text" required>
 		</div>
 		<button class="ui green button">
 			{{.i18n.Tr "settings.add_openid"}}
diff --git a/templates/user/settings/security_u2f.tmpl b/templates/user/settings/security_u2f.tmpl
new file mode 100644
index 0000000000..4703f9deb9
--- /dev/null
+++ b/templates/user/settings/security_u2f.tmpl
@@ -0,0 +1,56 @@
+<h4 class="ui top attached header">
+{{.i18n.Tr "settings.u2f"}}
+</h4>
+<div class="ui attached segment">
+	<p>{{.i18n.Tr "settings.u2f_desc" | Str2html}}</p>
+	{{if .TwofaEnrolled}}
+		<div class="ui key list">
+			{{range .U2FRegistrations}}
+			    <div class="item">
+			    	<div class="right floated content">
+			    		<button class="ui red tiny button delete-button" id="delete-registration" data-url="{{$.Link}}/u2f/delete" data-id="{{.ID}}">
+			    		{{$.i18n.Tr "settings.delete_key"}}
+			    		</button>
+			    	</div>
+			    	<div class="content">
+			    		<strong>{{.Name}}</strong>
+			    	</div>
+			    </div>
+			{{end}}
+		</div>
+		<div class="ui form">
+			{{.CsrfTokenHtml}}
+			<div class="required field">
+				<label for="nickname">{{.i18n.Tr "settings.u2f_nickname"}}</label>
+				<input id="nickname" name="nickname" type="text" required>
+			</div>
+			<button id="register-security-key" class="positive ui labeled icon button"><i class="usb icon"></i>{{.i18n.Tr "settings.u2f_register_key"}}</button>
+		</div>
+	{{else}}
+		<b>{{.i18n.Tr "settings.u2f_require_twofa"}}</b>
+	{{end}}
+</div>
+
+<div class="ui small modal" id="register-device">
+	<div class="header">{{.i18n.Tr "settings.u2f_register_key"}}</div>
+	<div class="content">
+		<i class="notched spinner loading icon"></i> {{.i18n.Tr "settings.u2f_press_button"}}
+	</div>
+	<div class="actions">
+		<div class="ui cancel button">{{.i18n.Tr "cancel"}}</div>
+	</div>
+</div>
+
+{{template "user/auth/u2f_error" .}}
+
+<div class="ui small basic delete modal" id="delete-registration">
+	<div class="ui icon header">
+		<i class="trash icon"></i>
+	{{.i18n.Tr "settings.u2f_delete_key"}}
+	</div>
+	<div class="content">
+		<p>{{.i18n.Tr "settings.u2f_delete_key_desc"}}</p>
+	</div>
+	{{template "base/delete_modal_actions" .}}
+</div>
+