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.

client/src/index.ts

@@ -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)

package.json

@@ -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",

server/src/views/layout/layout.pug

@@ -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")

server/src/views/secondfactor.pug

@@ -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")