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); jslogger.setLevel(jslogger.INFO);
(function () { (function () {
(<any>window).jQuery = jQuery;
require("bootstrap");
jQuery('[data-toggle="tooltip"]').tooltip();
if (window.location.pathname == Endpoints.FIRST_FACTOR_GET) if (window.location.pathname == Endpoints.FIRST_FACTOR_GET)
FirstFactor(window, jQuery, FirstFactorValidator, jslogger); FirstFactor(window, jQuery, FirstFactorValidator, jslogger);
else if (window.location.pathname == Endpoints.SECOND_FACTOR_GET) 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": { "devDependencies": {
"@types/bluebird": "^3.5.4", "@types/bluebird": "^3.5.4",
"@types/body-parser": "^1.16.3", "@types/body-parser": "^1.16.3",
"@types/bootstrap": "^3.3.36",
"@types/connect-redis": "0.0.6", "@types/connect-redis": "0.0.6",
"@types/cors": "^2.8.1", "@types/cors": "^2.8.1",
"@types/cucumber": "^2.0.1", "@types/cucumber": "^2.0.1",
@ -75,6 +76,7 @@
"@types/winston": "^2.3.2", "@types/winston": "^2.3.2",
"@types/yamljs": "^0.2.30", "@types/yamljs": "^0.2.30",
"apidoc": "^0.17.6", "apidoc": "^0.17.6",
"bootstrap": "^3.3.7",
"browserify": "^14.3.0", "browserify": "^14.3.0",
"chromedriver": "^2.31.0", "chromedriver": "^2.31.0",
"cucumber": "^2.3.1", "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") 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> | Powered by <a class="authelia-brand" href="https://github.com/clems4ever/authelia">Authelia</a>
block entrypoint 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") div(class="u2f-token")
img(src="/img/pendrive.png", alt="security key") img(src="/img/pendrive.png", alt="security key")
p 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/> b Or<br/>
| get a one-time password | Get a one-time password
div(class="notification notification-totp") div(class="notification notification-totp")
form(class="form-signin totp") form(class="form-signin totp")
div(class="form-inputs") div(class="form-inputs")
@ -24,7 +24,7 @@ block content
div(class="pull-right bottom-right-links") div(class="pull-right bottom-right-links")
div Need to register? div Need to register?
div 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 a(href=totp_identity_start_endpoint, class="link register-totp") Google Authenticator
span(class="clearfix") span(class="clearfix")