Add links and tooltips at second factor stage to better guide the user

A link to U2F explains what is a U2F security key and how they are used.

A tooltip on U2F device registration link is telling the user he needs a
security key to register.
This commit is contained in:
Clement Michaud 2017-11-18 23:41:05 +01:00
parent 8f88f45cb2
commit 515a82eb8d
5 changed files with 501 additions and 261 deletions

View File

@ -15,6 +15,10 @@ jslogger.useDefaults();
jslogger.setLevel(jslogger.INFO);
(function () {
(<any>window).jQuery = jQuery;
require("bootstrap");
jQuery('[data-toggle="tooltip"]').tooltip();
if (window.location.pathname == Endpoints.FIRST_FACTOR_GET)
FirstFactor(window, jQuery, FirstFactorValidator, jslogger);
else if (window.location.pathname == Endpoints.SECOND_FACTOR_GET)

748
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -48,6 +48,7 @@
"devDependencies": {
"@types/bluebird": "^3.5.4",
"@types/body-parser": "^1.16.3",
"@types/bootstrap": "^3.3.36",
"@types/connect-redis": "0.0.6",
"@types/cors": "^2.8.1",
"@types/cucumber": "^2.0.1",
@ -75,6 +76,7 @@
"@types/winston": "^2.3.2",
"@types/yamljs": "^0.2.30",
"apidoc": "^0.17.6",
"bootstrap": "^3.3.7",
"browserify": "^14.3.0",
"chromedriver": "^2.31.0",
"cucumber": "^2.3.1",

View File

@ -25,4 +25,4 @@ html
div(class="poweredby col-xs-6 col-xs-offset-4 col-sm-6 col-sm-offset-4 col-md-6 col-md-offset-4")
| Powered by <a class="authelia-brand" href="https://github.com/clems4ever/authelia">Authelia</a>
block entrypoint
script(src="/js/authelia.js", type="text/javascript" )
script(src="/js/authelia.js", type="text/javascript")

View File

@ -13,9 +13,9 @@ block content
div(class="u2f-token")
img(src="/img/pendrive.png", alt="security key")
p
| touch your U2F device<br/>
| Please, touch your <a href="https://www.yubico.com/products/yubikey-hardware/fido-u2f-security-key/">security key</a><br/>
b Or<br/>
| get a one-time password
| Get a one-time password
div(class="notification notification-totp")
form(class="form-signin totp")
div(class="form-inputs")
@ -24,7 +24,7 @@ block content
div(class="pull-right bottom-right-links")
div Need to register?
div
a(href=u2f_identity_start_endpoint, class="link register-u2f") U2F
a(href=u2f_identity_start_endpoint, class="link register-u2f", data-toggle="tooltip", title="A security key is required to register.") Security key
| |
a(href=totp_identity_start_endpoint, class="link register-totp") Google Authenticator
span(class="clearfix")