Merge pull request #330 from clems4ever/react-ui

Rewrite frontend in React and improve development experience.
2019-03-03 12:06:04 +01:00 · 2019-03-03 12:06:04 +01:00 · d1f6502788
parent 61742c1ec4 117d0ffeab
commit d1f6502788
636 changed files with 28877 additions and 41705 deletions
--- a/.gitignore
+++ b/.gitignore
@ -36,3 +36,5 @@ example/ldap/private.ldif
 Configuration.schema.json

 users_database.test.yml
+
+.suite
--- a/.npmignore
+++ b/.npmignore
@ -8,13 +8,11 @@ images/
 example/

 .travis.yml
-config.test.yml
 CONTRIBUTORS.md
 Dockerfile
 docker-compose.*
 Gruntfile.js
 tslint.json
 tsconfig.json
-users_database.yml

 *.tgz
--- a/.travis.yml
+++ b/.travis.yml
@ -1,6 +1,6 @@
 language: node_js
 node_js:
- '8'
+- '9'
 services:
 - docker
 - ntp
@ -23,16 +23,20 @@ addons:
  - public.example.com
  - authelia.example.com
  - admin.example.com
+
 before_install:
 - npm install -g npm@'>=2.13.5'
+- pushd client && npm install && popd
+
 before_script:
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start
 - sleep 3
 script:
- "./scripts/travis.sh"
+- "./scripts/authelia-scripts travis"
 after_success:
- "./scripts/docker-publish.sh"
+- "./scripts/authelia-scripts docker publish"
+
 deploy:
  provider: npm
  email: clement.michaud34@gmail.com
--- a/2
+++ b/2
@ -12,7 +12,7 @@ RUN apk --update add --no-cache --virtual \
 COPY dist/server /usr/src/server
 COPY dist/shared /usr/src/shared

-EXPOSE 8080
+EXPOSE 9091

 VOLUME /etc/authelia
 VOLUME /var/lib/authelia
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@ -1,20 +0,0 @@
-FROM node:8.7.0-alpine
-
-WORKDIR /usr/src
-
-COPY package.json /usr/src/package.json
-
-RUN apk --update add --no-cache --virtual \
-      .build-deps make g++ python && \
-    npm install && \
-    apk del .build-deps
-
-COPY dist/server /usr/src/server
-COPY dist/shared /usr/src/shared
-
-EXPOSE 8080
-
-VOLUME /etc/authelia
-VOLUME /var/lib/authelia
-
-CMD ["node", "server/src/index.js", "/etc/authelia/config.yml"]
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,246 +0,0 @@
-module.exports = function (grunt) {
-  const buildDir = "dist";
-  const schemaDir = "server/src/lib/configuration/Configuration.schema.json"
-  var theme = grunt.option('theme') || 'default';
-    
-  grunt.initConfig({
-    env: {
-      "env-test-server-unit": {
-        TS_NODE_PROJECT: "server/tsconfig.json"
-      },
-      "env-test-client-unit": {
-        TS_NODE_PROJECT: "client/tsconfig.json"
-      },
-      "env-test-shared-unit": {
-        TS_NODE_PROJECT: "server/tsconfig.json"
-      }
-    },
-    clean: {
-        dist: ['dist'],
-        backup: ['backup'],
-    },
-    run: {
-      "compile-server": {
-        cmd: "./node_modules/.bin/tsc",
-        args: ['-p', 'server/tsconfig.json']
-      },
-      "generate-config-schema": {
-        cmd: "./node_modules/.bin/typescript-json-schema",
-        args: ["-o", schemaDir, "--strictNullChecks",
-               "--required", "server/tsconfig.json", "Configuration"]
-      },
-      "compile-client": {
-        cmd: "./node_modules/.bin/tsc",
-        args: ['-p', 'client/tsconfig.json']
-      },
-      "lint-server": {
-        cmd: "./node_modules/.bin/tslint",
-        args: ['-c', 'server/tslint.json', '-p', 'server/tsconfig.json']
-      },
-      "lint-client": {
-        cmd: "./node_modules/.bin/tslint",
-        args: ['-c', 'client/tslint.json', '-p', 'client/tsconfig.json']
-      },
-      "test-server-unit": {
-        cmd: "./node_modules/.bin/mocha",
-        args: ['--colors', '--require', 'ts-node/register', 'server/src/**/*.spec.ts']
-      },
-      "test-shared-unit": {
-        cmd: "./node_modules/.bin/mocha",
-        args: ['--colors', '--require', 'ts-node/register', 'shared/**/*.spec.ts']
-      },
-      "test-client-unit": {
-        cmd: "./node_modules/.bin/mocha",
-        args: ['--colors', '--require', 'ts-node/register', 'client/test/**/*.test.ts']
-      },
-      "test-cucumber": {
-        cmd: "./scripts/run-cucumber.sh",
-        args: ["./test/features"]
-      },
-      "test-complete-config": {
-        cmd: "./node_modules/.bin/mocha",
-        args: ['--colors', '--require', 'ts-node/register', 'test/complete-config/**/*.ts']
-      },
-      "test-minimal-config": {
-        cmd: "./node_modules/.bin/mocha",
-        args: ['--colors', '--require', 'ts-node/register', 'test/minimal-config/**/*.ts']
-      },
-      "test-inactivity": {
-        cmd: "./node_modules/.bin/mocha",
-        args: ['--colors', '--require', 'ts-node/register', 'test/inactivity/**/*.ts']
-      },
-      "docker-build": {
-        cmd: "docker",
-        args: ['build', '-t', 'clems4ever/authelia', '.']
-      },
-      "minify": {
-        cmd: "./node_modules/.bin/uglifyjs",
-        args: [`${buildDir}/server/src/public_html/js/authelia.js`, '-o', `${buildDir}/server/src/public_html/js/authelia.min.js`]
-      },
-      "apidoc": {
-        cmd: "./node_modules/.bin/apidoc",
-        args: ["-i", "src/server", "-o", "doc"]
-      },
-      "include-minified-script": {
-        cmd: "sed",
-        args: ["-i", "s/authelia.\(js\|css\)/authelia.min.\1/", `${buildDir}/server/src/views/layout/layout.pug`]
-      }
-    },
-    copy: {
-        backup: {
-          files: [{
-            expand: true,
-            src: ['dist/**'],
-            dest: 'backup'
-            }]
-        },
-        resources: {
-            expand: true,
-            cwd: 'themes/' + theme + '/server/src/resources',
-            src: '**',
-            dest: `${buildDir}/server/src/resources/`
-        },
-        views: {
-            expand: true,
-            cwd: 'themes/' + theme + '/server/src/views',
-            src: '**',
-            dest: `${buildDir}/server/src/views/`
-        },
-        images: {
-            expand: true,
-            cwd: 'themes/' + theme + '/client/src/img',
-            src: '**',
-            dest: `${buildDir}/server/src/public_html/img/`
-        },
-        thirdparties: {
-            expand: true,
-            cwd: 'themes/' + theme + '/client/src/thirdparties',
-            src: '**',
-            dest: `${buildDir}/server/src/public_html/js/`
-        },
-        schema: {
-            src: schemaDir,
-            dest: `${buildDir}/${schemaDir}`
-        }
-    },
-    browserify: {
-      dist: {
-        src: ['dist/client/src/index.js'],
-        dest: `${buildDir}/server/src/public_html/js/authelia.js`,
-        options: {
-          browserifyOptions: {
-            standalone: 'authelia'
-          },
-        },
-      },
-    },
-    watch: {
-      views: {
-        files: ['server/src/views/**/*.pug'],
-        tasks: ['copy:views'],
-        options: {
-          interrupt: false,
-          atBegin: true
-        }
-      },
-      resources: {
-        files: ['server/src/resources/*.ejs'],
-        tasks: ['copy:resources'],
-        options: {
-          interrupt: false,
-          atBegin: true
-        }
-      },
-      images: {
-        files: ['client/src/img/**'],
-        tasks: ['copy:images'],
-        options: {
-          interrupt: false,
-          atBegin: true
-        }
-      },
-      css: {
-        files: ['client/src/**/*.css'],
-        tasks: ['concat:css', 'cssmin'],
-        options: {
-          interrupt: true,
-          atBegin: true
-        }
-      },
-      client: {
-        files: ['client/src/**/*.ts'],
-        tasks: ['build-dev'],
-        options: {
-          interrupt: true,
-          atBegin: true
-        }
-      },
-      server: {
-        files: ['server/src/**/*.ts'],
-        tasks: ['build-dev', 'run:docker-restart', 'run:make-dev-views' ],
-        options: {
-          interrupt: true,
-          atBegin: true
-        }
-      }
-    },
-    concat: {
-      css: {
-        src: ['themes/' + theme + '/client/src/css/*.css'],
-        dest: `${buildDir}/server/src/public_html/css/authelia.css`
-      },
-    },
-    cssmin: {
-      target: {
-        files: {
-          [`${buildDir}/server/src/public_html/css/authelia.min.css`]: [`${buildDir}/server/src/public_html/css/authelia.css`]
-        }
-      }
-    }
-  });
-  
-  grunt.loadNpmTasks('grunt-browserify');
-  grunt.loadNpmTasks('grunt-contrib-concat');
-  grunt.loadNpmTasks('grunt-contrib-copy');
-  grunt.loadNpmTasks('grunt-contrib-cssmin');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-run');
-  grunt.loadNpmTasks('grunt-env');
-
-  grunt.registerTask('compile-server', ['run:lint-server', 'run:compile-server'])
-  grunt.registerTask('compile-client', ['run:lint-client', 'run:compile-client'])
-
-  grunt.registerTask('test-server', ['env:env-test-server-unit', 'run:test-server-unit'])
-  grunt.registerTask('test-shared', ['env:env-test-shared-unit', 'run:test-shared-unit'])
-  grunt.registerTask('test-client', ['env:env-test-client-unit', 'run:test-client-unit'])
-  grunt.registerTask('test-unit', ['test-server', 'test-client', 'test-shared']);
-  grunt.registerTask('test-int', ['run:test-cucumber', 'run:test-minimal-config', 'run:test-complete-config', 'run:test-inactivity']);
-
-  grunt.registerTask('copy-resources', ['copy:resources', 'copy:views', 'copy:images', 'copy:thirdparties', 'concat:css']);
-  
-  grunt.registerTask('generate-config-schema', ['run:generate-config-schema', 'copy:schema']);
-  
-  grunt.registerTask('build-client', ['compile-client', 'browserify']);
-
-  grunt.registerTask('build-server', ['compile-server', 'copy-resources', 'generate-config-schema']);
-  
-  grunt.registerTask('build', ['build-client', 'build-server']);
-  grunt.registerTask('build-dist', ['clean:backup', 'copy:backup', 'clean:dist', 'build', 'run:minify', 'cssmin', 'run:include-minified-script']);
-  
-  grunt.registerTask('schema', ['run:generate-config-schema'])
-
-  grunt.registerTask('docker-build', ['run:docker-build']);
-  
-  grunt.registerTask('check', function() {
-      if ((theme != 'default') && (theme != 'black') && (theme != 'matrix') && (theme != 'squares') && (theme != 'triangles')) {
-        grunt.warn('Valid argmuents are just "grunt" (will use default) or "grunt --theme=|default|black|matrix|squares|triangles"');
-    }
-      if (grunt.option('theme') == 'default' || 'black' || 'matrix' || 'squares' || 'triangles') {
-        grunt.log.ok();
-        grunt.log.writeln('Building "'+ theme +'" theme');
-    }
-  });
-
-  grunt.registerTask('default', ['check', 'build-dist']);
-};
--- a/client/.env.development
+++ b/client/.env.development
@ -0,0 +1,2 @@
+
+REACT_APP_CSP_CONTENT="default-src 'unsafe-inline'; script-src * 'unsafe-inline'; img-src * data:; style-src 'unsafe-inline'; connect-src * 'unsafe-inline' extensions:"
--- a/client/.env.production
+++ b/client/.env.production
@ -0,0 +1,2 @@
+
+REACT_APP_CSP_CONTENT="default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self' data:"
--- a/client/.gitignore
+++ b/client/.gitignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/client/Dockerfile
+++ b/client/Dockerfile
@ -0,0 +1,9 @@
+FROM node:10.15.0-jessie
+
+WORKDIR /usr/app/client
+
+ADD package.json package.json
+
+RUN npm i
+
+CMD ["npm", "start"]
--- a/client/README.md
+++ b/client/README.md
@ -0,0 +1,44 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
--- a/client/docker-compose.yml
+++ b/client/docker-compose.yml
@ -0,0 +1,15 @@
+version: '2'
+services:
+  authelia-frontend-dev:
+    build:
+      context: client
+    restart: always
+    volumes:
+      - ./client/tsconfig.json:/usr/app/client/tsconfig.json
+      - ./client/public:/usr/app/client/public
+      - ./client/src:/usr/app/client/src
+      - ./client/.env.development:/usr/app/client/.env.development
+    networks:
+      authelianet:
+        aliases:
+          - authelia-frontend
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -0,0 +1,52 @@
+{
+  "name": "authelia-portal",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material/react-button": "^0.8.0",
+    "@material/react-checkbox": "^0.8.0",
+    "@material/react-text-field": "^0.8.0",
+    "@types/classnames": "^2.2.7",
+    "@types/jss": "^9.5.7",
+    "@types/node": "^10.12.2",
+    "@types/node-sass": "^3.10.32",
+    "@types/qrcode.react": "^0.8.1",
+    "@types/query-string": "^6.2.0",
+    "@types/react": "^16.4.18",
+    "@types/react-dom": "^16.0.9",
+    "@types/react-redux": "^6.0.12",
+    "@types/react-router-dom": "^4.3.1",
+    "@types/redux-thunk": "^2.1.0",
+    "await-to-js": "^2.1.1",
+    "classnames": "^2.2.6",
+    "connected-react-router": "^6.2.1",
+    "node-sass": "^4.11.0",
+    "qrcode.react": "^0.9.2",
+    "query-string": "^6.2.0",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^2.1.3",
+    "redux-thunk": "^2.3.0",
+    "typesafe-actions": "^3.0.0",
+    "typescript": "^3.1.6",
+    "u2f-api": "^1.0.10",
+    "utility-types": "^3.4.1"
+  },
+  "scripts": {
+    "start": "SASS_PATH=./node_modules react-scripts start",
+    "build": "INLINE_RUNTIME_CHUNK=false SASS_PATH=./node_modules react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
--- a/client/public/index.html
+++ b/client/public/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="robots" content="noindex, nofollow, nosnippet, noarchive">
+
+    <meta http-equiv="Content-Security-Policy" content="%REACT_APP_CSP_CONTENT%">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Authelia - Portal</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@ -0,0 +1,13 @@
+{
+  "short_name": "Authelia",
+  "name": "Authelia - Portal",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone"
+}
--- a/client/src/App.scss
+++ b/client/src/App.scss
@ -0,0 +1,3 @@
+@import "@material/react-button/index.scss";
+@import "@material/react-checkbox/index.scss";
+@import "@material/react-text-field/index.scss";
--- a/client/src/App.test.tsx
+++ b/client/src/App.test.tsx
@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import './App.scss';
+
+import { Route, Switch } from "react-router-dom";
+import { routes } from './routes/index';
+import { createBrowserHistory } from 'history';
+import { createStore, applyMiddleware, compose } from 'redux';
+import reducer from './reducers';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import { routerMiddleware, ConnectedRouter } from 'connected-react-router';
+
+const history = createBrowserHistory();
+const store = createStore(
+  reducer(history),
+  compose(
+    applyMiddleware(
+      routerMiddleware(history),
+      thunk
+    )
+  )
+);
+
+class App extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <div className="App">
+            <Switch>
+              {routes.map((r, key) => {
+                return <Route path={r.path} component={r.component} key={key}/>
+              })}
+            </Switch>
+          </div>
+        </ConnectedRouter>
+      </Provider>
+    );
+  }
+}
+
+export default App;
--- a/client/src/assets/images/applestore-badge.svg
+++ b/client/src/assets/images/applestore-badge.svg
--- a/client/src/assets/images/error.svg
+++ b/client/src/assets/images/error.svg
@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve">
+<g>
+	<path style="fill:#E2574C;" d="M168.352,142.924l25.28-25.28c3.495-3.504,3.495-9.154,0-12.64l-12.64-12.649
+		c-3.495-3.486-9.145-3.495-12.64,0l-25.289,25.289l-25.271-25.271c-3.504-3.504-9.163-3.504-12.658-0.018l-12.64,12.649
+		c-3.495,3.486-3.486,9.154,0.018,12.649l25.271,25.271L92.556,168.15c-3.495,3.495-3.495,9.145,0,12.64l12.64,12.649
+		c3.495,3.486,9.145,3.495,12.64,0l25.226-25.226l25.405,25.414c3.504,3.504,9.163,3.504,12.658,0.009l12.64-12.64
+		c3.495-3.495,3.486-9.154-0.009-12.658L168.352,142.924z M143.027,0.004C64.031,0.004,0,64.036,0,143.022
+		c0,78.996,64.031,143.027,143.027,143.027s143.027-64.031,143.027-143.027C286.054,64.045,222.022,0.004,143.027,0.004z
+		 M143.027,259.232c-64.183,0-116.209-52.026-116.209-116.209s52.026-116.21,116.209-116.21s116.209,52.026,116.209,116.209
+		S207.21,259.232,143.027,259.232z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/client/src/assets/images/googleplay-badge.svg
+++ b/client/src/assets/images/googleplay-badge.svg
--- a/client/src/assets/images/mail.png
+++ b/client/src/assets/images/mail.png
--- a/client/src/assets/images/security-key-hand.png
+++ b/client/src/assets/images/security-key-hand.png
--- a/client/src/assets/images/security-key-large.png
+++ b/client/src/assets/images/security-key-large.png
--- a/client/src/assets/images/security-key.png
+++ b/client/src/assets/images/security-key.png
--- a/client/src/assets/images/user.svg
+++ b/client/src/assets/images/user.svg
@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
+<path d="M55,27.5C55,12.337,42.663,0,27.5,0S0,12.337,0,27.5c0,8.009,3.444,15.228,8.926,20.258l-0.026,0.023l0.892,0.752
+	c0.058,0.049,0.121,0.089,0.179,0.137c0.474,0.393,0.965,0.766,1.465,1.127c0.162,0.117,0.324,0.234,0.489,0.348
+	c0.534,0.368,1.082,0.717,1.642,1.048c0.122,0.072,0.245,0.142,0.368,0.212c0.613,0.349,1.239,0.678,1.88,0.98
+	c0.047,0.022,0.095,0.042,0.142,0.064c2.089,0.971,4.319,1.684,6.651,2.105c0.061,0.011,0.122,0.022,0.184,0.033
+	c0.724,0.125,1.456,0.225,2.197,0.292c0.09,0.008,0.18,0.013,0.271,0.021C25.998,54.961,26.744,55,27.5,55
+	c0.749,0,1.488-0.039,2.222-0.098c0.093-0.008,0.186-0.013,0.279-0.021c0.735-0.067,1.461-0.164,2.178-0.287
+	c0.062-0.011,0.125-0.022,0.187-0.034c2.297-0.412,4.495-1.109,6.557-2.055c0.076-0.035,0.153-0.068,0.229-0.104
+	c0.617-0.29,1.22-0.603,1.811-0.936c0.147-0.083,0.293-0.167,0.439-0.253c0.538-0.317,1.067-0.648,1.581-1
+	c0.185-0.126,0.366-0.259,0.549-0.391c0.439-0.316,0.87-0.642,1.289-0.983c0.093-0.075,0.193-0.14,0.284-0.217l0.915-0.764
+	l-0.027-0.023C51.523,42.802,55,35.55,55,27.5z M2,27.5C2,13.439,13.439,2,27.5,2S53,13.439,53,27.5
+	c0,7.577-3.325,14.389-8.589,19.063c-0.294-0.203-0.59-0.385-0.893-0.537l-8.467-4.233c-0.76-0.38-1.232-1.144-1.232-1.993v-2.957
+	c0.196-0.242,0.403-0.516,0.617-0.817c1.096-1.548,1.975-3.27,2.616-5.123c1.267-0.602,2.085-1.864,2.085-3.289v-3.545
+	c0-0.867-0.318-1.708-0.887-2.369v-4.667c0.052-0.52,0.236-3.448-1.883-5.864C34.524,9.065,31.541,8,27.5,8
+	s-7.024,1.065-8.867,3.168c-2.119,2.416-1.935,5.346-1.883,5.864v4.667c-0.568,0.661-0.887,1.502-0.887,2.369v3.545
+	c0,1.101,0.494,2.128,1.34,2.821c0.81,3.173,2.477,5.575,3.093,6.389v2.894c0,0.816-0.445,1.566-1.162,1.958l-7.907,4.313
+	c-0.252,0.137-0.502,0.297-0.752,0.476C5.276,41.792,2,35.022,2,27.5z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/client/src/assets/scss/_variables.scss
+++ b/client/src/assets/scss/_variables.scss
@ -0,0 +1,2 @@
+
+$theme-spacing: 10px;
--- a/client/src/assets/scss/components/AlreadyAuthenticated/AlreadyAuthenticated.module.scss
+++ b/client/src/assets/scss/components/AlreadyAuthenticated/AlreadyAuthenticated.module.scss
@ -0,0 +1,24 @@
+@import '../../variables.scss';
+
+.container {
+  text-align: center;
+}
+
+.messageContainer {
+  color: green;
+  
+  .username {
+    display: block;
+    font-size: 1.6em;
+    font-weight: bold;
+  }
+}
+
+.statusIcon {
+  margin-top: ($theme-spacing) * 2;
+  margin-bottom: ($theme-spacing) * 2;
+}
+
+.logoutButtonContainer {
+  margin-top: ($theme-spacing) * 2,
+}
--- a/client/src/assets/scss/components/CircleLoader/CircleLoader.module.scss
+++ b/client/src/assets/scss/components/CircleLoader/CircleLoader.module.scss
@ -0,0 +1,148 @@
+$brand-success: #5cb85c;
+$brand-failure: #d44141;
+$loader-size: 4em;
+$check-height: $loader-size/2;
+$check-width: $check-height/2;
+$check-left: ($loader-size/6 + $loader-size/25);
+$check-thickness: 3px;
+$check-color: $brand-success;
+
+$cross-height: $loader-size/2;
+$cross-width: $check-height/10 - $check-height/12;
+$cross-left: $loader-size/2;
+$cross-top: $loader-size/4;
+
+.circleLoader {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-left-color: $check-color;
+  animation: loader-spin 1.2s infinite linear;
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  border-radius: 50%;
+  width: $loader-size;
+  height: $loader-size;
+}
+
+.loadComplete {
+  -webkit-animation: none;
+  animation: none;
+  transition: border 500ms ease-out;
+  &.success {
+    border-color: $brand-success;
+  }
+  &.failure {
+    border-color: $brand-failure;
+  }
+}
+
+.checkmark {
+  display: none;
+
+  &.show {
+    display: inline;
+  }
+  
+  &.draw:after {
+    animation-duration: 800ms;
+    animation-timing-function: ease;
+    animation-name: checkmark;
+    transform: scaleX(-1) rotate(135deg);
+  }
+  
+  &:after {
+    opacity: 1;
+    height: $check-height;
+    width: $check-width;
+    transform-origin: left top;
+    border-right: $check-thickness solid $check-color;
+    border-top: $check-thickness solid $check-color;
+    content: '';
+    left: $check-left;
+    top: $check-height;
+    position: absolute;
+  }
+}
+
+.cross {
+  display: none;
+
+  &.show {
+    display: inline;
+  }
+
+  &.draw:after, &.draw:before {
+    animation-duration: 300ms;
+    animation-timing-function: ease;
+    animation-name: cross;
+  }
+
+  &:before, &:after {
+    position: absolute;
+    left: $cross-left;
+    top: $cross-top;
+    content: '';
+    height: $cross-height;
+    width: $cross-width;
+    background-color: $brand-failure;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+  }
+}
+
+@keyframes loader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes checkmark {
+  0% {
+    height: 0;
+    width: 0;
+    opacity: 1;
+  }
+  20% {
+    height: 0;
+    width: $check-width;
+    opacity: 1;
+  }
+  40% {
+    height: $check-height;
+    width: $check-width;
+    opacity: 1;
+  }
+  100% {
+    height: $check-height;
+    width: $check-width;
+    opacity: 1;
+  }
+}
+
+@keyframes cross {
+  0% {
+    width: 0;
+    height: 0;
+  }
+  20% {
+    height: 0;
+    width: $cross-width;
+  }
+  40% {
+    height: $cross-height;
+    width: $cross-width;
+  }
+  100% {
+    width: $cross-width;
+    height: $cross-height;
+  }
+}
--- a/client/src/assets/scss/components/FirstFactorForm/FirstFactorForm.module.scss
+++ b/client/src/assets/scss/components/FirstFactorForm/FirstFactorForm.module.scss
@ -0,0 +1,43 @@
+@import '../../variables.scss';
+
+.notification {
+  margin-bottom: ($theme-spacing) * 2;
+}
+
+.field {
+  padding-bottom: ($theme-spacing) * 2;
+}
+
+.input {
+  width: 100%;
+}
+
+.buttons button{
+  width: 100%;
+}
+
+.controls {
+  display: inline-block;
+  width: 100%;
+  font-size: 0.875rem;
+}
+
+.rememberMe {
+  float: left;
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  margin-left: -11px;
+}
+
+.resetPassword {
+  height: 40px;
+  float: right;
+  display: flex;
+  align-items: center;
+}
+
+.resetPassword a {
+  color: black;
+  font-size: 0.8em;
+}
--- a/client/src/assets/scss/components/Notification/Notification.module.scss
+++ b/client/src/assets/scss/components/Notification/Notification.module.scss
@ -0,0 +1,10 @@
+@import '../../variables.scss';
+
+.container {
+  color: white;
+  font-size: 0.8em;
+  padding: ($theme-spacing) * 2;
+  border: 1px solid red;
+  border-radius: 5px;
+  background-color: #ff8d8d;
+}
--- a/client/src/assets/scss/components/SecondFactorForm/SecondFactorForm.module.scss
+++ b/client/src/assets/scss/components/SecondFactorForm/SecondFactorForm.module.scss
@ -0,0 +1,75 @@
+@import '../../variables.scss';
+
+.container {
+  position: relative,
+}
+
+.header {
+  font-size: 1.5em;
+  margin-bottom: ($theme-spacing);
+  position: relative;
+
+  .hello {
+    display: inline-block;
+  }
+
+  .logout {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    font-size: 0.6em,
+  }
+}
+
+.body {
+  padding-top: ($theme-spacing) * 2;
+  padding-bottom: ($theme-spacing) * 2;
+  padding-left: ($theme-spacing) * 2;
+  padding-right: ($theme-spacing) * 2;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+}
+
+.methodName {
+  font-size: 1.2em;
+  font-weight: bold;
+  margin-bottom: ($theme-spacing);
+}
+
+.methodU2f {
+  border-bottom: 1px solid #e0e0e0;
+  padding: ($theme-spacing);
+}
+
+.methodTotp {
+  padding: ($theme-spacing);
+  padding-top: ($theme-spacing) * 2;
+}
+
+.image {
+  width: '120px';
+}
+
+.imageContainer {
+  text-align: center;
+  margin-top: ($theme-spacing) * 2;
+  margin-bottom: ($theme-spacing) * 2;
+}
+
+.registerDeviceContainer {
+  text-align: right;
+  font-size: 0.7em;
+}
+
+.totpField {
+  margin-top: ($theme-spacing) * 2;
+  width: 100%;
+}
+
+.totpButton {
+  margin-top: ($theme-spacing);
+
+  button {
+    width: 100%;
+  }
+}
--- a/client/src/assets/scss/layouts/PortalLayout/PortalLayout.module.scss
+++ b/client/src/assets/scss/layouts/PortalLayout/PortalLayout.module.scss
@ -0,0 +1,40 @@
+@import '../../variables.scss';
+@import "@material/theme/mdc-theme";
+
+.mainContent {
+  width: 440px;
+  margin: auto;
+  margin-top: 80px;
+}
+
+.title {
+  font-size: 1.4em;
+  font-weight: bold;
+  display: inline-block;
+  padding-bottom: ($theme-spacing);
+}
+
+.frame {
+  box-shadow:
+    rgba(0,0,0,0.14902) 0px 1px 1px 0px,
+    rgba(0,0,0,0.09804) 0px 1px 2px 0px;
+  background-color: white;
+  border-radius: 5px;
+  padding: 40px;
+  border-top: 6px solid ($mdc-theme-primary);
+}
+
+.innerFrame {
+  width: 100%;
+}
+
+.footer {
+  margin-top: 10px;
+  text-align: center;
+  font-size: 0.65em;
+  color: grey;
+
+  a:visited {
+    color: grey;
+  }
+}
--- a/client/src/assets/scss/views/ConfirmationSentView/ConfirmationSentView.module.scss
+++ b/client/src/assets/scss/views/ConfirmationSentView/ConfirmationSentView.module.scss
@ -0,0 +1,26 @@
+
+.image {
+  width: 100%;
+  display: inline-block
+}
+
+.image img {
+  width: 64px;
+  display: block;
+}
+
+
+.left {
+  width: 24%;
+  display: inline-block;
+}
+
+.right {
+  width: 76%;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.buttonContainer {
+  padding-top: 20px;
+}
--- a/client/src/assets/scss/views/ForgotPasswordView/ForgotPasswordView.module.scss
+++ b/client/src/assets/scss/views/ForgotPasswordView/ForgotPasswordView.module.scss
@ -0,0 +1,36 @@
+@import '../../variables.scss';
+
+.form {
+  padding-top: ($theme-spacing) * 2;
+}
+
+.field {
+  width: 100%;
+}
+
+.buttonsContainer {
+  margin-top: ($theme-spacing) * 2;
+  width: 100%;
+}
+
+.buttonContainer {
+  width: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.buttonConfirmContainer {
+  padding-right: ($theme-spacing) / 2;
+}
+
+.buttonConfirm {
+  width: 100%;
+}
+
+.buttonCancelContainer {
+  padding-left: ($theme-spacing) / 2;
+}
+
+.buttonCancel {
+  width: 100%;
+}
--- a/client/src/assets/scss/views/OneTimePasswordRegistrationView/OneTimePasswordRegistrationView.module.scss
+++ b/client/src/assets/scss/views/OneTimePasswordRegistrationView/OneTimePasswordRegistrationView.module.scss
@ -0,0 +1,64 @@
+@import '../../variables.scss';
+
+.secretContainer {
+  width: 100%;
+  border: 1px solid #dcdcdc;
+  border-radius: 10px;
+  margin-top: ($theme-spacing) * 2;
+  margin-bottom: ($theme-spacing) * 2;
+}
+
+.qrcodeContainer {
+  text-align: center;
+  padding: ($theme-spacing) * 2;
+}
+
+.base32Container {
+  text-align: center;
+  border-top: 1px solid #dcdcdc;
+  padding: ($theme-spacing);
+  word-wrap: break-word;
+}
+
+.otpauthContainer {
+  display: none;
+}
+
+.text {
+  text-align: center;
+}
+
+.needGoogleAuthenticator {
+  text-align: center;
+  margin-top: ($theme-spacing) * 2;
+}
+
+.needGoogleAuthenticatorText {
+  font-size: 0.8em;
+}
+
+.store {
+  width: 100px;
+  margin-top: ($theme-spacing) * 0.5;
+  margin-left: ($theme-spacing) * 0.5;
+  margin-right: ($theme-spacing) * 0.5;
+}
+
+.buttonContainer {
+  text-align: center;
+  padding-top: ($theme-spacing) * 2;
+}
+
+.progressContainer {
+  text-align: center;
+  padding-top: ($theme-spacing) * 2,
+}
+
+.button {
+  margin-left: ($theme-spacing);
+  margin-right: ($theme-spacing);
+}
+
+.loginButtonContainer {
+  text-align: center;
+}
--- a/client/src/assets/scss/views/ResetPasswordView/ResetPasswordView.module.scss
+++ b/client/src/assets/scss/views/ResetPasswordView/ResetPasswordView.module.scss
@ -0,0 +1,32 @@
+@import '../../variables.scss';
+
+.form {
+  margin-top: ($theme-spacing) * 2,
+}
+
+.field {
+  width: 100%;
+  margin-bottom: ($theme-spacing) * 2;
+}
+
+.buttonsContainer {
+  width: 100%;
+}
+
+.buttonContainer {
+  width: 50%;
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.buttonResetContainer {
+  padding-right: ($theme-spacing) / 2;
+}
+
+.buttonCancelContainer {
+  padding-left: ($theme-spacing) / 2;
+}
+
+.button {
+  width: 100%;
+}
--- a/client/src/assets/scss/views/SecurityKeyRegistrationView/SecurityKeyRegistrationView.module.scss
+++ b/client/src/assets/scss/views/SecurityKeyRegistrationView/SecurityKeyRegistrationView.module.scss
@ -0,0 +1,18 @@
+@import '../../variables.scss';
+
+.infoContainer {
+  margin-bottom: ($theme-spacing) * 2;
+}
+
+.imageContainer {
+  text-align: center;
+  
+  img {
+    width: 120px;
+  }
+}
+
+.retryButtonContainer {
+  text-align: center;
+  padding-top: ($theme-spacing) * 2;
+}
--- a/client/src/behaviors/FetchStateBehavior.ts
+++ b/client/src/behaviors/FetchStateBehavior.ts
@ -0,0 +1,19 @@
+import { Dispatch } from "redux";
+import * as AutheliaService from '../services/AutheliaService';
+import { fetchStateFailure, fetchStateSuccess } from "../reducers/Portal/Authentication/actions";
+import to from "await-to-js";
+
+export default async function(dispatch: Dispatch) {
+  let err, res;
+  [err, res] = await to(AutheliaService.fetchState());
+  if (err) {
+    await dispatch(fetchStateFailure(err.message));
+    return;
+  }
+  if (!res) {
+    await dispatch(fetchStateFailure('No response'));
+    return
+  }
+  await dispatch(fetchStateSuccess(res));
+  return res;
+}
--- a/client/src/behaviors/LogoutBehavior.ts
+++ b/client/src/behaviors/LogoutBehavior.ts
@ -0,0 +1,18 @@
+import { Dispatch } from "redux";
+import { logout, logoutFailure, logoutSuccess } from "../reducers/Portal/SecondFactor/actions";
+import to from "await-to-js";
+import * as AutheliaService from '../services/AutheliaService';
+import fetchState from "./FetchStateBehavior";
+
+export default async function(dispatch: Dispatch) {
+  await dispatch(logout());
+  let err, res;
+  [err, res] = await to(AutheliaService.postLogout());
+
+  if (err) {
+    await dispatch(logoutFailure(err.message));
+    return;
+  }
+  await dispatch(logoutSuccess());
+  await fetchState(dispatch);
+}
--- a/client/src/behaviors/SafelyRedirectBehavior.ts
+++ b/client/src/behaviors/SafelyRedirectBehavior.ts
@ -0,0 +1,15 @@
+import { Dispatch } from "redux";
+import * as AutheliaService from '../services/AutheliaService';
+
+export default async function(url: string) {
+  try {
+    // Check the url against the backend before redirecting.
+    await AutheliaService.checkRedirection(url);
+    window.location.href = url;
+  } catch (e) {
+    console.error(
+      'Cannot redirect since the URL is not in the protected domain.' +
+      'This behavior could be malicious so please the issue to an administrator.');
+    throw e;
+  }
+}
--- a/client/src/components/AlreadyAuthenticated/AlreadyAuthenticated.tsx
+++ b/client/src/components/AlreadyAuthenticated/AlreadyAuthenticated.tsx
@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import classnames from 'classnames';
+
+import styles from '../../assets/scss/components/AlreadyAuthenticated/AlreadyAuthenticated.module.scss';
+import Button from "@material/react-button";
+import CircleLoader, { Status } from "../CircleLoader/CircleLoader";
+
+export interface OwnProps {
+  username: string;
+  redirectionUrl: string;
+}
+
+export interface DispatchProps {
+  onLogoutClicked: () => void;
+}
+
+export type Props = OwnProps & DispatchProps;
+
+class AlreadyAuthenticated extends Component<Props> {
+  render() {
+    return (
+      <div className={classnames(styles.container, 'already-authenticated-step')}>
+        <div className={styles.successContainer}>
+          <div className={styles.messageContainer}>
+            <span className={styles.username}>{this.props.username}</span>
+            you are authenticated
+          </div>
+          <div className={styles.statusIcon}><CircleLoader status={Status.SUCCESSFUL} /></div>
+        </div>
+        <a href={this.props.redirectionUrl}>{this.props.redirectionUrl}</a>
+        <div className={styles.logoutButtonContainer}>
+          <Button
+            onClick={this.props.onLogoutClicked}
+            color="red">
+            Logout
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AlreadyAuthenticated;
--- a/client/src/components/CircleLoader/CircleLoader.tsx
+++ b/client/src/components/CircleLoader/CircleLoader.tsx
@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import classnames from 'classnames';
+
+import styles from '../../assets/scss/components/CircleLoader/CircleLoader.module.scss';
+
+export enum Status {
+  LOADING,
+  SUCCESSFUL,
+  FAILURE,
+}
+
+export interface Props {
+  status: Status;
+}
+
+class CircleLoader extends Component<Props> {
+  render() {
+    const containerClasses = [styles.circleLoader];
+    const checkmarkClasses = [styles.checkmark, styles.draw];
+    const crossClasses = [styles.cross, styles.draw];
+
+    if (this.props.status === Status.SUCCESSFUL) {
+      containerClasses.push(styles.loadComplete);
+      containerClasses.push(styles.success);
+      checkmarkClasses.push(styles.show);
+    }
+    else if (this.props.status === Status.FAILURE) {
+      containerClasses.push(styles.loadComplete);
+      containerClasses.push(styles.failure);
+      crossClasses.push(styles.show);
+    }
+
+    const key = 'container-' + this.props.status;
+    
+    return (
+      <div className={classnames(containerClasses)} key={key}>
+        {<div className={classnames(checkmarkClasses)} />}
+        {<div className={classnames(crossClasses)} />}
+      </div>
+    )
+  }
+}
+
+export default CircleLoader;
--- a/client/src/components/FirstFactorForm/FirstFactorForm.tsx
+++ b/client/src/components/FirstFactorForm/FirstFactorForm.tsx
@ -0,0 +1,143 @@
+import React, { Component, KeyboardEvent, FormEvent } from "react";
+
+import TextField, {Input} from '@material/react-text-field';
+import Button from '@material/react-button';
+import Checkbox from '@material/react-checkbox';
+
+import { Link } from "react-router-dom";
+
+import Notification from "../../components/Notification/Notification";
+
+import styles from '../../assets/scss/components/FirstFactorForm/FirstFactorForm.module.scss';
+
+export interface OwnProps {
+  redirectionUrl: string | null;
+}
+
+export interface StateProps {
+  formDisabled: boolean;
+  error: string | null;
+}
+
+export interface DispatchProps {
+  onAuthenticationRequested(username: string, password: string, rememberMe: boolean): void;
+}
+
+export type Props = OwnProps & StateProps & DispatchProps;
+
+interface State {
+  username: string;
+  password: string;
+  rememberMe: boolean;
+}
+
+class FirstFactorForm extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      username: '',
+      password: '',
+      rememberMe: false,
+    }
+  }
+
+  toggleRememberMe = () => {
+    this.setState({
+      rememberMe: !(this.state.rememberMe)
+    })
+  }
+
+  onUsernameChanged = (e: FormEvent<HTMLElement>) => {
+    const val = (e.target as HTMLInputElement).value;
+    this.setState({username: val});
+  }
+
+  onPasswordChanged = (e: FormEvent<HTMLElement>) => {
+    const val = (e.target as HTMLInputElement).value;
+    this.setState({password: val});
+  }
+
+  onLoginClicked = () => {
+    this.authenticate();
+  }
+
+  onPasswordKeyPressed = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      this.authenticate();
+    }
+  }
+
+  render() {
+    return (
+      <div className='first-factor-step'>
+        <Notification
+          show={this.props.error != null}
+          className={styles.notification}>
+          {this.props.error || ''}
+        </Notification>
+        <div className={styles.fields}>
+          <div className={styles.field}>
+            <TextField
+              className={styles.input}
+              label="Username"
+              outlined={true}>
+              <Input
+                id="username"
+                onChange={this.onUsernameChanged}
+                disabled={this.props.formDisabled}
+                value={this.state.username}/>
+            </TextField>
+          </div>
+          <div className={styles.field}>
+            <TextField
+              className={styles.input}
+              label="Password"
+              outlined={true}>
+              <Input
+                id="password"
+                type="password"
+                disabled={this.props.formDisabled}
+                onChange={this.onPasswordChanged}
+                onKeyPress={this.onPasswordKeyPressed}
+                value={this.state.password} />
+            </TextField>
+          </div>
+        </div>
+        <div>
+          <div className={styles.buttons}>
+            <Button
+              onClick={this.onLoginClicked}
+              color='primary'
+              raised={true}
+              id='login-button'
+              disabled={this.props.formDisabled}>
+              Login
+            </Button>
+          </div>
+          <div className={styles.controls}>
+            <div className={styles.rememberMe}>
+              <Checkbox
+                nativeControlId='remember-checkbox'
+                checked={this.state.rememberMe}
+                onChange={this.toggleRememberMe}
+              />
+              <label htmlFor='remember-checkbox'>Remember me</label>
+            </div>
+            <div className={styles.resetPassword}>
+              <Link to="/forgot-password">Forgot password?</Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  private authenticate() {
+    this.props.onAuthenticationRequested(
+      this.state.username,
+      this.state.password,
+      this.state.rememberMe);
+  }
+}
+
+export default FirstFactorForm;
--- a/client/src/components/Notification/Notification.tsx
+++ b/client/src/components/Notification/Notification.tsx
@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import classnames from 'classnames';
+
+import styles from '../../assets/scss/components/Notification/Notification.module.scss';
+
+interface Props {
+  className?: string;
+  show: boolean;
+}
+
+class Notification extends Component<Props> {
+  render() {
+    return (this.props.show)
+      ? (<div className={classnames(styles.container, this.props.className, 'notification')}>
+          {this.props.children}
+        </div>)
+      : null;
+  }
+}
+
+export default Notification;
--- a/client/src/components/SecondFactorForm/SecondFactorForm.tsx
+++ b/client/src/components/SecondFactorForm/SecondFactorForm.tsx
@ -0,0 +1,162 @@
+import React, { Component, KeyboardEvent, FormEvent } from 'react';
+import classnames from 'classnames';
+
+import TextField, { Input } from '@material/react-text-field';
+import Button from '@material/react-button';
+
+import styles from '../../assets/scss/components/SecondFactorForm/SecondFactorForm.module.scss';
+import CircleLoader, { Status } from '../../components/CircleLoader/CircleLoader';
+import Notification from '../Notification/Notification';
+
+export interface OwnProps {
+  username: string;
+  redirectionUrl: string | null;
+}
+
+export interface StateProps {
+  securityKeySupported: boolean;
+  securityKeyVerified: boolean;
+  securityKeyError: string | null;
+
+  oneTimePasswordVerificationInProgress: boolean,
+  oneTimePasswordVerificationError: string | null;
+}
+
+export interface DispatchProps {
+  onInit: () => void;
+  onLogoutClicked: () => void;
+  onRegisterSecurityKeyClicked: () => void;
+  onRegisterOneTimePasswordClicked: () => void;
+
+  onOneTimePasswordValidationRequested: (token: string) => void;
+}
+
+export type Props = OwnProps & StateProps & DispatchProps;
+
+interface State {
+  oneTimePassword: string;
+}
+
+class SecondFactorView extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      oneTimePassword: '',
+    }
+  }
+
+  componentWillMount() {
+    this.props.onInit();
+  }
+
+  private renderU2f(n: number) {
+    let u2fStatus = Status.LOADING;
+    if (this.props.securityKeyVerified) {
+      u2fStatus = Status.SUCCESSFUL;
+    } else if (this.props.securityKeyError) {
+      u2fStatus = Status.FAILURE;
+    }
+    return (
+      <div className={styles.methodU2f} key='u2f-method'>
+        <div className={styles.methodName}>Option {n} - Security Key</div>
+        <div>Insert your security key into a USB port and touch the gold disk.</div>
+        <div className={styles.imageContainer}>
+          <CircleLoader status={u2fStatus}></CircleLoader>
+        </div>
+        <div className={styles.registerDeviceContainer}>
+          <a className={classnames(styles.registerDevice, 'register-u2f')} href="#"
+            onClick={this.props.onRegisterSecurityKeyClicked}>
+            Register device
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  private onOneTimePasswordChanged = (e: FormEvent<HTMLElement>) => {
+    this.setState({oneTimePassword: (e.target as HTMLInputElement).value});
+  }
+
+  private onTotpKeyPressed = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      this.onOneTimePasswordValidationRequested();
+    }
+  }
+
+  private onOneTimePasswordValidationRequested = () => {
+    if (this.props.oneTimePasswordVerificationInProgress) return;
+    this.props.onOneTimePasswordValidationRequested(this.state.oneTimePassword);
+  }
+
+  private renderTotp(n: number) {
+    return (
+      <div className={classnames(styles.methodTotp, 'second-factor-step')} key='totp-method'>
+        <div className={styles.methodName}>Option {n} - One-Time Password</div>
+        <Notification show={this.props.oneTimePasswordVerificationError !== null}>
+          {this.props.oneTimePasswordVerificationError}
+        </Notification>
+        <TextField
+          className={styles.totpField}
+          label="One-Time Password"
+          outlined={true}>
+          <Input
+            name='totp-token'
+            id='totp-token'
+            onChange={this.onOneTimePasswordChanged as any}
+            onKeyPress={this.onTotpKeyPressed}
+            value={this.state.oneTimePassword} />
+        </TextField>
+        <div className={styles.registerDeviceContainer}>
+          <a className={classnames(styles.registerDevice, 'register-totp')} href="#"
+            onClick={this.props.onRegisterOneTimePasswordClicked}>
+            Register device
+          </a>
+        </div>
+        <div className={styles.totpButton}>
+          <Button
+            color="primary"
+            raised={true}
+            id='totp-button'
+            onClick={this.onOneTimePasswordValidationRequested}
+            disabled={this.props.oneTimePasswordVerificationInProgress}>
+            OK
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  private renderMode() {
+    const methods = [];
+    let n = 1;
+    if (this.props.securityKeySupported) {
+      methods.push(this.renderU2f(n));
+      n++;
+    }
+    methods.push(this.renderTotp(n));
+
+    return (
+      <div className={styles.methodsContainer}>
+        {methods}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.hello}>Hello <b>{this.props.username}</b></div>
+          <div className={styles.logout}>
+            <a onClick={this.props.onLogoutClicked} href="#">Logout</a>
+          </div>
+        </div>
+        <div className={styles.body}>
+          {this.renderMode()}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default SecondFactorView;
--- a/client/src/constants.ts
+++ b/client/src/constants.ts
@ -0,0 +1,3 @@
+
+export const AUTHELIA_URL = "https://www.authelia.com/"
+export const AUTHELIA_GITHUB_URL = "https://github.com/clems4ever/authelia";
--- a/client/src/containers/components/AlreadyAuthenticated/AlreadyAuthenticated.ts
+++ b/client/src/containers/components/AlreadyAuthenticated/AlreadyAuthenticated.ts
@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { RootState } from '../../../reducers';
+import AlreadyAuthenticated, { DispatchProps } from '../../../components/AlreadyAuthenticated/AlreadyAuthenticated';
+import LogoutBehavior from '../../../behaviors/LogoutBehavior';
+
+const mapStateToProps = (state: RootState) => {
+  return {};
+}
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    onLogoutClicked: () => LogoutBehavior(dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlreadyAuthenticated);
--- a/client/src/containers/components/FirstFactorForm/FirstFactorForm.ts
+++ b/client/src/containers/components/FirstFactorForm/FirstFactorForm.ts
@ -0,0 +1,65 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { authenticateFailure, authenticateSuccess, authenticate } from '../../../reducers/Portal/FirstFactor/actions';
+import FirstFactorForm, { StateProps, OwnProps } from '../../../components/FirstFactorForm/FirstFactorForm';
+import { RootState } from '../../../reducers';
+import * as AutheliaService from '../../../services/AutheliaService';
+import to from 'await-to-js';
+import FetchStateBehavior from '../../../behaviors/FetchStateBehavior';
+import SafelyRedirectBehavior from '../../../behaviors/SafelyRedirectBehavior';
+
+const mapStateToProps = (state: RootState): StateProps => {
+  return {
+    error: state.firstFactor.error,
+    formDisabled: state.firstFactor.loading,
+  };
+}
+
+function onAuthenticationRequested(dispatch: Dispatch, redirectionUrl: string | null) {
+  return async (username: string, password: string, rememberMe: boolean) => {
+    let err, res;
+    
+    // Validate first factor
+    dispatch(authenticate());
+    [err, res] = await to(AutheliaService.postFirstFactorAuth(
+      username, password, rememberMe, redirectionUrl));
+
+    if (err) {
+      await dispatch(authenticateFailure(err.message));
+      return;
+    }
+
+    if (!res) {
+      await dispatch(authenticateFailure('No response'));
+      return;
+    }
+
+    if (res.status === 200) {
+      const json = await res.json();
+      if ('error' in json) {
+        await dispatch(authenticateFailure(json['error']));
+        return;
+      }
+
+      if ('redirect' in json) {
+        window.location.href = json['redirect'];
+        return;
+      }
+    } else if (res.status === 204) {
+      dispatch(authenticateSuccess());
+
+      // fetch state to move to next stage
+      FetchStateBehavior(dispatch);
+    } else {
+      dispatch(authenticateFailure('Unknown error'));
+    }
+  }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => {
+  return {
+    onAuthenticationRequested: onAuthenticationRequested(dispatch, ownProps.redirectionUrl),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FirstFactorForm);
--- a/client/src/containers/components/SecondFactorForm/SecondFactorForm.ts
+++ b/client/src/containers/components/SecondFactorForm/SecondFactorForm.ts
@ -0,0 +1,119 @@
+import { connect } from 'react-redux';
+import { RootState } from '../../../reducers';
+import { Dispatch } from 'redux';
+import u2fApi from 'u2f-api';
+import to from 'await-to-js';
+import { securityKeySignSuccess, securityKeySign, securityKeySignFailure, setSecurityKeySupported, oneTimePasswordVerification, oneTimePasswordVerificationFailure, oneTimePasswordVerificationSuccess } from '../../../reducers/Portal/SecondFactor/actions';
+import SecondFactorForm, { OwnProps, StateProps } from '../../../components/SecondFactorForm/SecondFactorForm';
+import * as AutheliaService from '../../../services/AutheliaService';
+import { push } from 'connected-react-router';
+import fetchState from '../../../behaviors/FetchStateBehavior';
+import LogoutBehavior from '../../../behaviors/LogoutBehavior';
+import SafelyRedirectBehavior from '../../../behaviors/SafelyRedirectBehavior';
+
+const mapStateToProps = (state: RootState): StateProps => ({
+  securityKeySupported: state.secondFactor.securityKeySupported,
+  securityKeyVerified: state.secondFactor.securityKeySignSuccess || false,
+  securityKeyError: state.secondFactor.error,
+
+  oneTimePasswordVerificationInProgress: state.secondFactor.oneTimePasswordVerificationLoading,
+  oneTimePasswordVerificationError: state.secondFactor.oneTimePasswordVerificationError,
+});
+
+async function triggerSecurityKeySigning(dispatch: Dispatch) {
+  let err, result;
+  dispatch(securityKeySign());
+  [err, result] = await to(AutheliaService.requestSigning());
+  if (err) {
+    await dispatch(securityKeySignFailure(err.message));
+    throw err;
+  }
+
+  if (!result) {
+    await dispatch(securityKeySignFailure('No response'));
+    throw 'No response';
+  }
+
+  [err, result] = await to(u2fApi.sign(result, 60));
+  if (err) {
+    await dispatch(securityKeySignFailure(err.message));
+    throw err;
+  }
+
+  if (!result) {
+    await dispatch(securityKeySignFailure('No response'));
+    throw 'No response';
+  }
+
+  [err, result] = await to(AutheliaService.completeSecurityKeySigning(result));
+  if (err) {
+    await dispatch(securityKeySignFailure(err.message));
+    throw err;
+  }
+  await dispatch(securityKeySignSuccess());
+}
+
+async function handleSuccess(dispatch: Dispatch, ownProps: OwnProps, duration?: number) {
+  async function handle() {
+    if (ownProps.redirectionUrl) {
+      try {
+        await SafelyRedirectBehavior(ownProps.redirectionUrl);
+      } catch (e) {
+        await fetchState(dispatch);
+      }
+    } else {
+      await fetchState(dispatch);
+    }
+  }
+
+  if (duration) {
+    setTimeout(handle, duration);
+  } else {
+    await handle();
+  }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => {
+  return {
+    onLogoutClicked: () => LogoutBehavior(dispatch),
+    onRegisterSecurityKeyClicked: async () => {
+      await AutheliaService.startU2FRegistrationIdentityProcess();
+      await dispatch(push('/confirmation-sent'));
+    },
+    onRegisterOneTimePasswordClicked: async () => {
+      await AutheliaService.startTOTPRegistrationIdentityProcess();
+      await dispatch(push('/confirmation-sent'));
+    },
+    onInit: async () => {
+      const isU2FSupported = await u2fApi.isSupported();
+      if (isU2FSupported) {
+        await dispatch(setSecurityKeySupported(true));
+        await triggerSecurityKeySigning(dispatch);
+        await handleSuccess(dispatch, ownProps, 1000);
+      }
+    },
+    onOneTimePasswordValidationRequested: async (token: string) => {
+      let err, res;
+      dispatch(oneTimePasswordVerification());
+      [err, res] = await to(AutheliaService.verifyTotpToken(token));
+      if (err) {
+        dispatch(oneTimePasswordVerificationFailure(err.message));
+        throw err;
+      }
+      if (!res) {
+        dispatch(oneTimePasswordVerificationFailure('No response'));
+        throw 'No response';
+      }
+
+      const body = await res.json();
+      if ('error' in body) {
+        dispatch(oneTimePasswordVerificationFailure(body['error']));
+        throw body['error'];
+      }
+      dispatch(oneTimePasswordVerificationSuccess());
+      await handleSuccess(dispatch, ownProps);
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SecondFactorForm);
--- a/client/src/containers/layouts/PortalLayout/PortalLayout.ts
+++ b/client/src/containers/layouts/PortalLayout/PortalLayout.ts
@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import PortalLayout from '../../../layouts/PortalLayout/PortalLayout';
+import { RootState } from '../../../reducers';
+
+const mapStateToProps = (state: RootState) => ({});
+
+export default connect(mapStateToProps)(PortalLayout);
--- a/client/src/containers/views/AuthenticationView/AuthenticationView.ts
+++ b/client/src/containers/views/AuthenticationView/AuthenticationView.ts
@ -0,0 +1,46 @@
+import { connect } from 'react-redux';
+import QueryString from 'query-string';
+import AuthenticationView, {StateProps, Stage, DispatchProps, OwnProps} from '../../../views/AuthenticationView/AuthenticationView';
+import { RootState } from '../../../reducers';
+import { Dispatch } from 'redux';
+import AuthenticationLevel from '../../../types/AuthenticationLevel';
+import FetchStateBehavior from '../../../behaviors/FetchStateBehavior';
+
+function authenticationLevelToStage(level: AuthenticationLevel): Stage {
+  switch (level)  {
+    case AuthenticationLevel.NOT_AUTHENTICATED:
+      return Stage.FIRST_FACTOR;
+    case AuthenticationLevel.ONE_FACTOR:
+      return Stage.SECOND_FACTOR;
+    case AuthenticationLevel.TWO_FACTOR:
+      return Stage.ALREADY_AUTHENTICATED;
+  }
+}
+
+const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => {
+  const stage = (state.authentication.remoteState)
+    ? authenticationLevelToStage(state.authentication.remoteState.authentication_level)
+    : Stage.FIRST_FACTOR;
+
+  let url: string | null = null;
+  if (ownProps.location) {
+    const params = QueryString.parse(ownProps.location.search);
+    if ('rd' in params) {
+      url = params['rd'] as string;
+    }
+  }
+
+  return {
+    redirectionUrl: url,
+    remoteState: state.authentication.remoteState,
+    stage: stage,
+  };
+}
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return {
+    onInit: async () => await FetchStateBehavior(dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AuthenticationView);
--- a/client/src/containers/views/ForgotPasswordView/ForgotPasswordView.ts
+++ b/client/src/containers/views/ForgotPasswordView/ForgotPasswordView.ts
@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import { RootState } from '../../../reducers';
+import { Dispatch } from 'redux';
+import { push } from 'connected-react-router';
+import * as AutheliaService from '../../../services/AutheliaService';
+import ForgotPasswordView from '../../../views/ForgotPasswordView/ForgotPasswordView';
+import { forgotPasswordRequest, forgotPasswordSuccess, forgotPasswordFailure } from '../../../reducers/Portal/ForgotPassword/actions';
+
+const mapStateToProps = (state: RootState) => ({
+  disabled: state.forgotPassword.loading,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return {
+    onPasswordResetRequested: async (username: string) => {
+      try {
+        dispatch(forgotPasswordRequest());
+        await AutheliaService.initiatePasswordResetIdentityValidation(username);
+        dispatch(forgotPasswordSuccess());
+        await dispatch(push('/confirmation-sent'));
+      } catch (err) {
+        dispatch(forgotPasswordFailure(err.message));
+      }
+    },
+    onCancelClicked: async () => {
+      dispatch(push('/'));
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordView);
--- a/client/src/containers/views/OneTimePasswordRegistrationView/OneTimePasswordRegistrationView.ts
+++ b/client/src/containers/views/OneTimePasswordRegistrationView/OneTimePasswordRegistrationView.ts
@ -0,0 +1,68 @@
+import { connect } from 'react-redux';
+import OneTimePasswordRegistrationView from '../../../views/OneTimePasswordRegistrationView/OneTimePasswordRegistrationView';
+import { RootState } from '../../../reducers';
+import { Dispatch } from 'redux';
+import {to} from 'await-to-js';
+import { generateTotpSecret, generateTotpSecretSuccess, generateTotpSecretFailure } from '../../../reducers/Portal/OneTimePasswordRegistration/actions';
+import { push } from 'connected-react-router';
+
+const mapStateToProps = (state: RootState) => ({
+  error: state.oneTimePasswordRegistration.error,
+  secret: state.oneTimePasswordRegistration.secret,
+});
+
+async function checkIdentity(token: string) {
+  return fetch(`/api/secondfactor/totp/identity/finish?token=${token}`, {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+  })
+    .then(async (res) => {
+      if (res.status !== 200) {
+        throw new Error('Status code ' + res.status);
+      }
+
+      const body = await res.json();
+      if ('error' in body) {
+        throw new Error(body['error']);
+      }
+      return body;
+    });
+}
+
+async function tryGenerateTotpSecret(dispatch: Dispatch, token: string) {
+  let err, result;
+  dispatch(generateTotpSecret());
+  [err, result] = await to(checkIdentity(token));
+  if (err) {
+    const e = err;
+    setTimeout(() => {
+      dispatch(generateTotpSecretFailure(e.message));
+    }, 2000);
+    return;
+  }
+  dispatch(generateTotpSecretSuccess(result));
+}
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  let internalToken: string;
+  return {
+    onInit: async (token: string) => {
+      internalToken = token;
+      await tryGenerateTotpSecret(dispatch, internalToken);
+    },
+    onRetryClicked: async () => {
+      await tryGenerateTotpSecret(dispatch, internalToken);
+    },
+    onCancelClicked: () => {
+      dispatch(push('/'));
+    },
+    onLoginClicked: () => {
+      dispatch(push('/'));
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(OneTimePasswordRegistrationView);
--- a/client/src/containers/views/ResetPasswordView/ResetPasswordView.ts
+++ b/client/src/containers/views/ResetPasswordView/ResetPasswordView.ts
@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { RootState } from '../../../reducers';
+import { Dispatch } from 'redux';
+import { push } from 'connected-react-router';
+import * as AutheliaService from '../../../services/AutheliaService';
+import ResetPasswordView, { StateProps } from '../../../views/ResetPasswordView/ResetPasswordView';
+
+const mapStateToProps = (state: RootState): StateProps => ({
+  disabled: state.resetPassword.loading,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return {
+    onInit: async (token: string) => {
+      await AutheliaService.completePasswordResetIdentityValidation(token);
+    },
+    onPasswordResetRequested: async (newPassword: string) => {
+      await AutheliaService.resetPassword(newPassword);
+      await dispatch(push('/'));
+    },
+    onCancelClicked: async () => {
+      await dispatch(push('/'));
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ResetPasswordView);
--- a/client/src/containers/views/SecurityKeyRegistrationView/SecurityKeyRegistrationView.ts
+++ b/client/src/containers/views/SecurityKeyRegistrationView/SecurityKeyRegistrationView.ts
@ -0,0 +1,90 @@
+import { connect } from 'react-redux';
+import SecurityKeyRegistrationView from '../../../views/SecurityKeyRegistrationView/SecurityKeyRegistrationView';
+import { RootState } from '../../../reducers';
+import { Dispatch } from 'redux';
+import {to} from 'await-to-js';
+import * as U2fApi from "u2f-api";
+import { Props } from '../../../views/SecurityKeyRegistrationView/SecurityKeyRegistrationView';
+import { registerSecurityKey, registerSecurityKeyFailure, registerSecurityKeySuccess } from '../../../reducers/Portal/SecurityKeyRegistration/actions';
+
+const mapStateToProps = (state: RootState) => ({
+  deviceRegistered: state.securityKeyRegistration.success,
+  error: state.securityKeyRegistration.error,
+});
+
+async function checkIdentity(token: string) {
+  return fetch(`/api/secondfactor/u2f/identity/finish?token=${token}`, {
+    method: 'POST',
+  });
+}
+
+async function requestRegistration() {
+  return fetch('/api/u2f/register_request')
+    .then(async (res) => {
+      if (res.status !== 200) {
+        throw new Error('Status code ' + res.status);
+      }
+      return res.json();
+    });
+}
+
+async function completeRegistration(response: U2fApi.RegisterResponse) {
+  return fetch('/api/u2f/register', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(response),
+  })
+    .then(async (res) => {
+      if (res.status !== 200) {
+        throw new Error('Status code ' + res.status);
+      }
+    });
+}
+
+function fail(dispatch: Dispatch, err: Error) {
+  dispatch(registerSecurityKeyFailure(err.message));
+}
+
+const mapDispatchToProps = (dispatch: Dispatch, ownProps: Props) => {
+  return {
+    onInit: async (token: string) => {
+      let err, result;
+      dispatch(registerSecurityKey());
+      [err, result] = await to(checkIdentity(token));
+      if (err) {
+        fail(dispatch, err);
+        return;
+      }
+      [err, result] = await to(requestRegistration());
+      if (err) {
+        fail(dispatch, err);
+        return;
+      }
+
+      [err, result] = await to(U2fApi.register(result, [], 60));
+      if (err) {
+        fail(dispatch, err);
+        return;
+      }
+
+      [err, result] = await to(completeRegistration(result as U2fApi.RegisterResponse));
+      if (err) {
+        fail(dispatch, err);
+        return;
+      }
+
+      dispatch(registerSecurityKeySuccess());
+      setTimeout(() => {
+        ownProps.history.push('/2fa');
+      }, 2000);
+    },
+    onBackClicked: () => {
+      ownProps.history.push('/2fa');
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SecurityKeyRegistrationView);
--- a/client/src/css/00-bootstrap.min.css
+++ b/client/src/css/00-bootstrap.min.css
--- a/client/src/css/01-main.css
+++ b/client/src/css/01-main.css
@ -1,67 +0,0 @@
-body {
-  background-image: url("/img/background.svg");
-}
-.authelia-brand {
-  font-weight: bold;
-  font-style: italic;
-  color: #648caf
-}
-.poweredby-block {
-  margin: 0px 30px;
-  margin-top: 10px;
-  padding-top: 15px;
-  border-top: 1px solid rgba(0, 0, 0, 0.15);
-}
-.poweredby {
-  font-size: 0.7em;
-  color: #6b6b6b;
-}
-/* notifications */
-.notification {
-  padding: 10px;
-  margin: 15px 0px;
-  border-radius: 6px;
-  display: none;
-  position: absolute;
-}
-.notification img {
-  width: 24px;
-  margin-right: 10px;
-}
-.notification i,
-.notification span {
-  display:table-cell;
-  vertical-align:middle;
-}
-.info {
-  border: 1px solid #9cb1ff;
-  background-color: rgb(192, 220, 255);
-}
-.success {
-  border: 1px solid #65ec7c;
-  background-color: rgb(163, 255, 157);
-}
-.error {
-  border: 1px solid #ffa3a3;
-  background-color: rgb(255, 175, 175);
-}
-.warning {
-  border: 1px solid #ffd743;
-  background-color: rgb(255, 230, 143);
-}
-.bottom-right-links {
-  text-align: right;
-  margin-top: 10px;
-  font-size: 0.8em;
-}
-.header {
-  background-color: #778dab;
-  color: white;
-  margin: 0px;
-}
-.body {
-  padding: 10px;
-}
-h1 {
-  font-size: 25px;
-}
--- a/client/src/css/02-login.css
+++ b/client/src/css/02-login.css
@ -1,132 +0,0 @@
-.form-signin
-{
-    margin: 0 auto;
-}
-
-.form-signin .form-signin-heading, .form-signin .checkbox
-{
-    margin-bottom: 10px;
-}
-
-.form-signin .checkbox
-{
-    font-weight: normal;
-}
-
-.form-signin .form-control
-{
-    position: relative;
-    font-size: 16px;
-    height: auto;
-    padding: 10px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.form-signin .form-control:focus
-{
-    z-index: 2;
-}
-.form-signin input[type="text"]
-{
-    margin-bottom: -1px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-.form-signin input[type="password"]
-{
-    /* margin-bottom: 10px; */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-.account-wall
-{
-    border: 1px solid #DDD;
-    margin-top: 20px;
-    padding-bottom: 20px;
-    background-color: #f7f7f7;
-    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-}
-.account-wall h1
-{
-    margin-bottom: 15px;
-    margin-top: 15px;
-    font-weight: 800;
-    display: block;
-    text-align: center;
-}
-.account-wall h3
-{
-    display: block;
-    text-align: center;
-}
-.account-wall p 
-{
-    text-align: center;
-    margin: 10px;
-}
-.account-wall .form-inputs 
-{
-    margin-bottom: 10px;
-}
-.account-wall hr {
-    border-color: #c5c5c5;
-}
-
-.header-img
-{
-    width: 96px;
-    height: 96px;
-    margin: 0 auto 10px;
-    display: block;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-}
-
-.link
-{
-    margin-top: 10px;
-}
-
-.btn-primary.totp
-{
-    background-color: rgb(102, 135, 162);
-}
-
-.btn-primary.u2f
-{
-    background-color: rgb(83, 149, 204);
-}
-
-.u2f-token {
-    text-align: center;
-}
-
-.u2f-token img {
-    width: 70px;
-}
-
-.keep-me-logged-in {
-    margin-top: 10px;
-    font-size: 0.8em;
-}
-
-.keep-me-logged-in input[type=checkbox] {
-    transform: scale(0.8);
-    margin: 0;
-    margin-right: 4px;
-}
-
-.keep-me-logged-in label {
-    font-weight: 300;
-}
-
-.keep-me-logged-in input,
-.keep-me-logged-in label {
-    display: inline-block;
-    margin-bottom: 0; /* I added this after I posted my reply */
-    vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
-}
--- a/client/src/css/03-errors.css
+++ b/client/src/css/03-errors.css
@ -1,12 +0,0 @@
-
-.error-401 .header-img {
-    border-radius: 0%;
-}
-
-.error-403 .header-img {
-    border-radius: 0%;
-}
-
-.error-404 .header-img {
-    border-radius: 0%;
-}
--- a/client/src/css/03-password-reset-form.css
+++ b/client/src/css/03-password-reset-form.css
@ -1,4 +0,0 @@
-
-.password-reset-form .header-img {
-    border-radius: 0%;
-}
--- a/client/src/css/03-password-reset-request.css
+++ b/client/src/css/03-password-reset-request.css
@ -1,4 +0,0 @@
-
-.password-reset-request .header-img {
-    border-radius: 0%;
-}
--- a/client/src/css/03-totp-register.css
+++ b/client/src/css/03-totp-register.css
@ -1,22 +0,0 @@
-.totp-register #secret {
-  background-color: white;
-  font-size: 0.9em;
-  font-weight: bold;
-  padding: 5px;
-  border: 1px solid #c7c7c7;
-  word-wrap: break-word;
-}
-.totp-register #qrcode img {
-  margin: 10px auto;
-}
-.totp-register .need-google-authenticator {
-  text-align: center;
-  margin-top: 20px;
-}
-.totp-register .store-badges {
-  margin-top: 5px;
-}
-.totp-register .store-badge {
-  width: 110px;
-  height: 30px;
-}
--- a/client/src/css/03-u2f-register.css
+++ b/client/src/css/03-u2f-register.css
@ -1,5 +0,0 @@
-
-.u2f-register img {
-    display: block;
-    margin: 20px auto;
-}
--- a/client/src/img/background.svg
+++ b/client/src/img/background.svg
@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="56" height="100">
-<rect width="56" height="100" fill="#FFFFFF"></rect>
-<path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100" fill="none" stroke="#FCFCFC" stroke-width="2"></path>
-<path d="M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34" fill="none" stroke="#FBFBFB" stroke-width="2"></path>
-</svg>
--- a/client/src/img/icon.png
+++ b/client/src/img/icon.png
--- a/client/src/img/notifications/error.png
+++ b/client/src/img/notifications/error.png
--- a/client/src/img/notifications/info.png
+++ b/client/src/img/notifications/info.png
--- a/client/src/img/notifications/success.png
+++ b/client/src/img/notifications/success.png
--- a/client/src/img/notifications/warning.png
+++ b/client/src/img/notifications/warning.png
--- a/client/src/img/padlock.png
+++ b/client/src/img/padlock.png
--- a/client/src/img/password.png
+++ b/client/src/img/password.png
--- a/client/src/img/pendrive.png
+++ b/client/src/img/pendrive.png
--- a/client/src/img/success.png
+++ b/client/src/img/success.png
--- a/client/src/img/user.png
+++ b/client/src/img/user.png
--- a/client/src/img/warning.png
+++ b/client/src/img/warning.png
--- a/client/src/index.css
+++ b/client/src/index.css
@ -0,0 +1,11 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  background: #eee;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
--- a/client/src/index.ts
+++ b/client/src/index.ts
@ -1,34 +0,0 @@
-
-import FirstFactorValidator = require("./lib/firstfactor/FirstFactorValidator");
-
-import FirstFactor from "./lib/firstfactor/index";
-import SecondFactor from "./lib/secondfactor/index";
-import TOTPRegister from "./lib/totp-register/totp-register";
-import U2fRegister from "./lib/u2f-register/u2f-register";
-import ResetPasswordRequest from "./lib/reset-password/reset-password-request";
-import ResetPasswordForm from "./lib/reset-password/reset-password-form";
-import jslogger = require("js-logger");
-import jQuery = require("jquery");
-import Endpoints = require("../../shared/api");
-
-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)
-    SecondFactor(window, jQuery);
-  else if (window.location.pathname == Endpoints.SECOND_FACTOR_TOTP_IDENTITY_FINISH_GET)
-    TOTPRegister(window, jQuery);
-  else if (window.location.pathname == Endpoints.SECOND_FACTOR_U2F_IDENTITY_FINISH_GET)
-    U2fRegister(window, jQuery);
-  else if (window.location.pathname == Endpoints.RESET_PASSWORD_IDENTITY_FINISH_GET)
-    ResetPasswordForm(window, jQuery);
-  else if (window.location.pathname == Endpoints.RESET_PASSWORD_REQUEST_GET)
-    ResetPasswordRequest(window, jQuery);
-})();
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();
--- a/client/src/layouts/PortalLayout/PortalLayout.tsx
+++ b/client/src/layouts/PortalLayout/PortalLayout.tsx
@ -0,0 +1,52 @@
+import React, { Component } from "react";
+
+import { Route, Switch, Redirect, RouterProps, RouteProps } from "react-router";
+
+import { routes } from '../../routes/routes';
+import { AUTHELIA_GITHUB_URL } from "../../constants";
+
+import styles from '../../assets/scss/layouts/PortalLayout/PortalLayout.module.scss';
+
+interface Props extends RouterProps, RouteProps {}
+
+class PortalLayout extends Component<Props> {
+  private renderTitle() {
+    if (!this.props.location) return;
+
+    for (let i in routes) {
+      const route = routes[i];
+      if (route.path && route.path.indexOf(this.props.location.pathname) > -1) {
+        return route.title.toUpperCase();
+      }
+    }
+    return;
+  }
+
+
+  render() {
+    return (
+      <div className={styles.main}>
+        <div className={styles.mainContent}>
+          <div className={styles.title}>
+            {this.renderTitle()}
+          </div>
+          <div className={styles.frame}>
+            <div className={styles.innerFrame}>
+              <Switch>
+                {routes.map((r, key) => {
+                  return <Route path={r.path} component={r.component} exact={true} key={key} />
+                })}
+                <Redirect to='/' />
+              </Switch>
+            </div>
+          </div>
+          <div className={styles.footer}>
+            <div><a href={AUTHELIA_GITHUB_URL}>Powered by Authelia</a></div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PortalLayout;
--- a/client/src/lib/GetPromised.ts
+++ b/client/src/lib/GetPromised.ts
@ -1,14 +0,0 @@
-import BluebirdPromise = require("bluebird");
-
-export default function ($: JQueryStatic, url: string, data: Object, fn: any,
-  dataType: string): BluebirdPromise<any> {
-  return new BluebirdPromise<any>((resolve, reject) => {
-    $.get(url, {}, undefined, dataType)
-      .done((data: any) => {
-        resolve(data);
-      })
-      .fail((xhr: JQueryXHR, textStatus: string) => {
-        reject(textStatus);
-      });
-  });
-}
--- a/client/src/lib/INotifier.ts
+++ b/client/src/lib/INotifier.ts
@ -1,14 +0,0 @@
-
-declare type Handler = () => void;
-
-export interface Handlers {
-  onFadedIn: Handler;
-  onFadedOut: Handler;
-}
-
-export interface INotifier {
-  success(msg: string, handlers?: Handlers): void;
-  error(msg: string, handlers?: Handlers): void;
-  warning(msg: string, handlers?: Handlers): void;
-  info(msg: string, handlers?: Handlers): void;
-}
--- a/client/src/lib/Notifier.ts
+++ b/client/src/lib/Notifier.ts
@ -1,83 +0,0 @@
-
-
-import util = require("util");
-import { INotifier, Handlers } from "./INotifier";
-
-class NotificationEvent {
-  private element: JQuery;
-  private message: string;
-  private statusType: string;
-  private timeoutId: any;
-
-  constructor(element: JQuery, msg: string, statusType: string) {
-    this.message = msg;
-    this.statusType = statusType;
-    this.element = element;
-  }
-
-  private clearNotification() {
-    this.element.removeClass(this.statusType);
-    this.element.html("");
-  }
-
-  start(handlers?: Handlers) {
-    const that = this;
-    const FADE_TIME = 500;
-    const html = util.format('<i><img src="/img/notifications/%s.png" alt="status %s"/></i>\
-      <span>%s</span>', this.statusType, this.statusType, this.message);
-    this.element.html(html);
-    this.element.addClass(this.statusType);
-    this.element.fadeIn(FADE_TIME, function () {
-      if (handlers)
-        handlers.onFadedIn();
-    });
-
-    this.timeoutId = setTimeout(function () {
-      that.element.fadeOut(FADE_TIME, function () {
-        that.clearNotification();
-        if (handlers)
-          handlers.onFadedOut();
-      });
-    }, 4000);
-  }
-
-  interrupt() {
-    this.clearNotification();
-    this.element.hide();
-    clearTimeout(this.timeoutId);
-  }
-}
-
-export class Notifier implements INotifier {
-  private element: JQuery;
-  private onGoingEvent: NotificationEvent;
-
-  constructor(selector: string, $: JQueryStatic) {
-    this.element = $(selector);
-    this.onGoingEvent = undefined;
-  }
-
-  private displayAndFadeout(msg: string, statusType: string, handlers?: Handlers): void {
-    if (this.onGoingEvent)
-      this.onGoingEvent.interrupt();
-
-    this.onGoingEvent = new NotificationEvent(this.element, msg, statusType);
-    this.onGoingEvent.start(handlers);
-  }
-
-  success(msg: string, handlers?: Handlers) {
-    this.displayAndFadeout(msg, "success", handlers);
-  }
-
-  error(msg: string, handlers?: Handlers) {
-    this.displayAndFadeout(msg, "error", handlers);
-  }
-
-  warning(msg: string, handlers?: Handlers) {
-    this.displayAndFadeout(msg, "warning", handlers);
-  }
-
-  info(msg: string, handlers?: Handlers) {
-    this.displayAndFadeout(msg, "info", handlers);
-  }
-}
--- a/client/src/lib/QueryParametersRetriever.ts
+++ b/client/src/lib/QueryParametersRetriever.ts
@ -1,12 +0,0 @@
-
-export class QueryParametersRetriever {
-  static get(name: string, url?: string): string {
-    if (!url) url = window.location.href;
-    name = name.replace(/[\[\]]/g, "\\$&");
-    const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-      results = regex.exec(url);
-    if (!results) return undefined;
-    if (!results[2]) return "";
-    return decodeURIComponent(results[2].replace(/\+/g, " "));
-  }
-}
--- a/client/src/lib/SafeRedirect.ts
+++ b/client/src/lib/SafeRedirect.ts
@ -1,10 +0,0 @@
-import { BelongToDomain } from "../../../shared/BelongToDomain";
-
-export function SafeRedirect(url: string, cb: () => void): void {
-  const domain = window.location.hostname.split(".").slice(-2).join(".");
-  if (url.startsWith("/") || BelongToDomain(url, domain)) {
-    window.location.href = url;
-    return;
-  }
-  cb();
-}
--- a/client/src/lib/firstfactor/FirstFactorValidator.ts
+++ b/client/src/lib/firstfactor/FirstFactorValidator.ts
@ -1,46 +0,0 @@
-
-import BluebirdPromise = require("bluebird");
-import Endpoints = require("../../../../shared/api");
-import Constants = require("../../../../shared/constants");
-import Util = require("util");
-import UserMessages = require("../../../../shared/UserMessages");
-
-export function validate(username: string, password: string,
-  keepMeLoggedIn: boolean, redirectUrl: string, $: JQueryStatic)
-  : BluebirdPromise<string> {
-  return new BluebirdPromise<string>(function (resolve, reject) {
-    let url: string;
-    if (redirectUrl != undefined) {
-      const redirectParam = Util.format("%s=%s", Constants.REDIRECT_QUERY_PARAM, redirectUrl);
-      url = Util.format("%s?%s", Endpoints.FIRST_FACTOR_POST, redirectParam);
-    }
-    else {
-      url = Util.format("%s", Endpoints.FIRST_FACTOR_POST);
-    }
-
-    const data: any = {
-      username: username,
-      password: password,
-    };
-
-    if (keepMeLoggedIn) {
-      data.keepMeLoggedIn = "true";
-    }
-
-    $.ajax({
-      method: "POST",
-      url: url,
-      data: data
-    })
-      .done(function (body: any) {
-        if (body && body.error) {
-          reject(new Error(body.error));
-          return;
-        }
-        resolve(body.redirect);
-      })
-      .fail(function (xhr: JQueryXHR, textStatus: string) {
-        reject(new Error(UserMessages.AUTHENTICATION_FAILED));
-      });
-  });
-}
--- a/client/src/lib/firstfactor/UISelectors.ts
+++ b/client/src/lib/firstfactor/UISelectors.ts
@ -1,5 +0,0 @@
-
-export const USERNAME_FIELD_ID = "#username";
-export const PASSWORD_FIELD_ID = "#password";
-export const SIGN_IN_BUTTON_ID = "#signin";
-export const KEEP_ME_LOGGED_IN_ID = "#keep_me_logged_in";
--- a/client/src/lib/firstfactor/index.ts
+++ b/client/src/lib/firstfactor/index.ts
@ -1,49 +0,0 @@
-import FirstFactorValidator = require("./FirstFactorValidator");
-import JSLogger = require("js-logger");
-import UISelectors = require("./UISelectors");
-import { Notifier } from "../Notifier";
-import { QueryParametersRetriever } from "../QueryParametersRetriever";
-import Constants = require("../../../../shared/constants");
-import Endpoints = require("../../../../shared/api");
-import UserMessages = require("../../../../shared/UserMessages");
-import { SafeRedirect } from "../SafeRedirect";
-
-export default function (window: Window, $: JQueryStatic,
-  firstFactorValidator: typeof FirstFactorValidator, jslogger: typeof JSLogger) {
-
-  const notifier = new Notifier(".notification", $);
-
-  function onFormSubmitted() {
-    const username: string = $(UISelectors.USERNAME_FIELD_ID).val() as string;
-    const password: string = $(UISelectors.PASSWORD_FIELD_ID).val() as string;
-    const keepMeLoggedIn: boolean = $(UISelectors.KEEP_ME_LOGGED_IN_ID).is(":checked");
-
-    $("form").css("opacity", 0.5);
-    $("input,button").attr("disabled", "true");
-    $(UISelectors.SIGN_IN_BUTTON_ID).text("Please wait...");
-
-    const redirectUrl = QueryParametersRetriever.get(Constants.REDIRECT_QUERY_PARAM);
-    firstFactorValidator.validate(username, password, keepMeLoggedIn, redirectUrl, $)
-      .then(onFirstFactorSuccess, onFirstFactorFailure);
-    return false;
-  }
-
-  function onFirstFactorSuccess(redirectUrl: string) {
-    SafeRedirect(redirectUrl, () => {
-      notifier.error("Cannot redirect to an external domain.");
-    });
-  }
-
-  function onFirstFactorFailure(err: Error) {
-    $("input,button").removeAttr("disabled");
-    $("form").css("opacity", 1);
-    notifier.error(UserMessages.AUTHENTICATION_FAILED);
-    $(UISelectors.PASSWORD_FIELD_ID).select();
-    $(UISelectors.SIGN_IN_BUTTON_ID).text("Sign in");
-  }
-
-  $(window.document).ready(function () {
-    $("form").on("submit", onFormSubmitted);
-  });
-}
-
--- a/client/src/lib/reset-password/constants.ts
+++ b/client/src/lib/reset-password/constants.ts
@ -1,2 +0,0 @@
-
-export const FORM_SELECTOR = ".form-signin";
--- a/client/src/lib/reset-password/reset-password-form.ts
+++ b/client/src/lib/reset-password/reset-password-form.ts
@ -1,57 +0,0 @@
-import BluebirdPromise = require("bluebird");
-
-import Endpoints = require("../../../../shared/api");
-import UserMessages = require("../../../../shared/UserMessages");
-
-import Constants = require("./constants");
-import { Notifier } from "../Notifier";
-
-export default function (window: Window, $: JQueryStatic) {
-  const notifier = new Notifier(".notification", $);
-
-  function modifyPassword(newPassword: string) {
-    return new BluebirdPromise(function (resolve, reject) {
-      $.post(Endpoints.RESET_PASSWORD_FORM_POST, {
-        password: newPassword,
-      })
-        .done(function (body: any) {
-          if (body && body.error) {
-            reject(new Error(body.error));
-            return;
-          }
-          resolve(body);
-        })
-        .fail(function (xhr, status) {
-          reject(status);
-        });
-    });
-  }
-
-  function onFormSubmitted() {
-    const password1 = $("#password1").val() as string;
-    const password2 = $("#password2").val() as string;
-
-    if (!password1 || !password2) {
-      notifier.warning(UserMessages.MISSING_PASSWORD);
-      return false;
-    }
-
-    if (password1 != password2) {
-      notifier.warning(UserMessages.DIFFERENT_PASSWORDS);
-      return false;
-    }
-
-    modifyPassword(password1)
-      .then(function () {
-        window.location.href = Endpoints.FIRST_FACTOR_GET;
-      })
-      .error(function () {
-        notifier.error(UserMessages.RESET_PASSWORD_FAILED);
-      });
-    return false;
-  }
-
-  $(document).ready(function () {
-    $(Constants.FORM_SELECTOR).on("submit", onFormSubmitted);
-  });
-}
--- a/client/src/lib/reset-password/reset-password-request.ts
+++ b/client/src/lib/reset-password/reset-password-request.ts
@ -1,56 +0,0 @@
-
-import BluebirdPromise = require("bluebird");
-
-import Endpoints = require("../../../../shared/api");
-import UserMessages = require("../../../../shared/UserMessages");
-import Constants = require("./constants");
-import jslogger = require("js-logger");
-import { Notifier } from "../Notifier";
-
-export default function (window: Window, $: JQueryStatic) {
-  const notifier = new Notifier(".notification", $);
-
-  function requestPasswordReset(username: string) {
-    return new BluebirdPromise(function (resolve, reject) {
-      $.get(Endpoints.RESET_PASSWORD_IDENTITY_START_GET, {
-        userid: username,
-      })
-        .done(function (body: any) {
-          if (body && body.error) {
-            reject(new Error(body.error));
-            return;
-          }
-          resolve();
-        })
-        .fail(function (xhr: JQueryXHR, textStatus: string) {
-          reject(new Error(textStatus));
-        });
-    });
-  }
-
-  function onFormSubmitted() {
-    const username = $("#username").val() as string;
-
-    if (!username) {
-      notifier.warning(UserMessages.MISSING_USERNAME);
-      return;
-    }
-
-    requestPasswordReset(username)
-      .then(function () {
-        notifier.success(UserMessages.MAIL_SENT);
-        setTimeout(function () {
-          window.location.replace(Endpoints.FIRST_FACTOR_GET);
-        }, 1000);
-      })
-      .error(function () {
-        notifier.error(UserMessages.MAIL_NOT_SENT);
-      });
-    return false;
-  }
-
-  $(document).ready(function () {
-    $(Constants.FORM_SELECTOR).on("submit", onFormSubmitted);
-  });
-}
-
--- a/client/src/lib/secondfactor/TOTPValidator.ts
+++ b/client/src/lib/secondfactor/TOTPValidator.ts
@ -1,28 +0,0 @@
-
-import BluebirdPromise = require("bluebird");
-import Endpoints = require("../../../../shared/api");
-import { RedirectionMessage } from "../../../../shared/RedirectionMessage";
-import { ErrorMessage } from "../../../../shared/ErrorMessage";
-
-export function validate(token: string, $: JQueryStatic): BluebirdPromise<string> {
-  return new BluebirdPromise<string>(function (resolve, reject) {
-    $.ajax({
-      url: Endpoints.SECOND_FACTOR_TOTP_POST,
-      data: {
-        token: token,
-      },
-      method: "POST",
-      dataType: "json"
-    } as JQueryAjaxSettings)
-      .done(function (body: RedirectionMessage | ErrorMessage) {
-        if (body && "error" in body) {
-          reject(new Error((body as ErrorMessage).error));
-          return;
-        }
-        resolve((body as RedirectionMessage).redirect);
-      })
-      .fail(function (xhr: JQueryXHR, textStatus: string) {
-        reject(new Error(textStatus));
-      });
-  });
-}
--- a/client/src/lib/secondfactor/U2FValidator.ts
+++ b/client/src/lib/secondfactor/U2FValidator.ts
@ -1,42 +0,0 @@
-import U2f = require("u2f");
-import U2fApi from "u2f-api";
-import BluebirdPromise = require("bluebird");
-import Endpoints = require("../../../../shared/api");
-import UserMessages = require("../../../../shared/UserMessages");
-import { INotifier } from "../INotifier";
-import { RedirectionMessage } from "../../../../shared/RedirectionMessage";
-import { ErrorMessage } from "../../../../shared/ErrorMessage";
-import GetPromised from "../GetPromised";
-
-function finishU2fAuthentication(responseData: U2fApi.SignResponse,
-  $: JQueryStatic): BluebirdPromise<string> {
-  return new BluebirdPromise<string>(function (resolve, reject) {
-    $.ajax({
-      url: Endpoints.SECOND_FACTOR_U2F_SIGN_POST,
-      data: responseData,
-      method: "POST",
-      dataType: "json"
-    } as JQueryAjaxSettings)
-      .done(function (body: RedirectionMessage | ErrorMessage) {
-        if (body && "error" in body) {
-          reject(new Error((body as ErrorMessage).error));
-          return;
-        }
-        resolve((body as RedirectionMessage).redirect);
-      })
-      .fail(function (xhr: JQueryXHR, textStatus: string) {
-        reject(new Error(textStatus));
-      });
-  });
-}
-
-export function validate($: JQueryStatic): BluebirdPromise<string> {
-  return GetPromised($, Endpoints.SECOND_FACTOR_U2F_SIGN_REQUEST_GET, {},
-    undefined, "json")
-    .then(function (signRequest: U2f.Request) {
-      return U2fApi.sign(signRequest, 60);
-    })
-    .then(function (signResponse: U2fApi.SignResponse) {
-      return finishU2fAuthentication(signResponse, $);
-    });
-}
--- a/client/src/lib/secondfactor/constants.ts
+++ b/client/src/lib/secondfactor/constants.ts
@ -1,3 +0,0 @@
-
-export const TOTP_FORM_SELECTOR = ".form-signin.totp";
-export const TOTP_TOKEN_SELECTOR = ".form-signin #token";
--- a/client/src/lib/secondfactor/index.ts
+++ b/client/src/lib/secondfactor/index.ts
@ -1,59 +0,0 @@
-import TOTPValidator = require("./TOTPValidator");
-import U2FValidator = require("./U2FValidator");
-import ClientConstants = require("./constants");
-import { Notifier } from "../Notifier";
-import { QueryParametersRetriever } from "../QueryParametersRetriever";
-import UserMessages = require("../../../../shared/UserMessages");
-import SharedConstants = require("../../../../shared/constants");
-import { SafeRedirect } from "../SafeRedirect";
-
-export default function (window: Window, $: JQueryStatic) {
-  const notifier = new Notifier(".notification", $);
-
-  function onAuthenticationSuccess(serverRedirectUrl: string) {
-    const queryRedirectUrl = QueryParametersRetriever.get(SharedConstants.REDIRECT_QUERY_PARAM);
-    if (queryRedirectUrl) {
-      SafeRedirect(queryRedirectUrl, () => {
-        notifier.error(UserMessages.CANNOT_REDIRECT_TO_EXTERNAL_DOMAIN);
-      });
-    } else if (serverRedirectUrl) {
-      SafeRedirect(serverRedirectUrl, () => {
-        notifier.error(UserMessages.CANNOT_REDIRECT_TO_EXTERNAL_DOMAIN);
-      });
-    } else {
-      notifier.success(UserMessages.AUTHENTICATION_SUCCEEDED);
-    }
-  }
-
-  function onSecondFactorTotpSuccess(redirectUrl: string) {
-    onAuthenticationSuccess(redirectUrl);
-  }
-
-  function onSecondFactorTotpFailure(err: Error) {
-    notifier.error(UserMessages.AUTHENTICATION_TOTP_FAILED);
-  }
-
-  function onU2fAuthenticationSuccess(redirectUrl: string) {
-    onAuthenticationSuccess(redirectUrl);
-  }
-
-  function onU2fAuthenticationFailure() {
-    // TODO(clems4ever): we should not display this error message until a device
-    //                   is registered.
-    // notifier.error(UserMessages.AUTHENTICATION_U2F_FAILED);
-  }
-
-  function onTOTPFormSubmitted(): boolean {
-    const token = $(ClientConstants.TOTP_TOKEN_SELECTOR).val() as string;
-    TOTPValidator.validate(token, $)
-      .then(onSecondFactorTotpSuccess)
-      .catch(onSecondFactorTotpFailure);
-    return false;
-  }
-
-  $(window.document).ready(function () {
-    $(ClientConstants.TOTP_FORM_SELECTOR).on("submit", onTOTPFormSubmitted);
-    U2FValidator.validate($)
-      .then(onU2fAuthenticationSuccess, onU2fAuthenticationFailure);
-  });
-}
--- a/client/src/lib/totp-register/totp-register.ts
+++ b/client/src/lib/totp-register/totp-register.ts
@ -1,11 +0,0 @@
-
-import jslogger = require("js-logger");
-import UISelector = require("./ui-selector");
-
-export default function(window: Window, $: JQueryStatic) {
-  jslogger.debug("Creating QRCode from OTPAuth url");
-  const qrcode = $(UISelector.QRCODE_ID_SELECTOR);
-  const val = qrcode.text();
-  qrcode.empty();
-  new (window as any).QRCode(qrcode.get(0), val);
-}
--- a/client/src/lib/totp-register/ui-selector.ts
+++ b/client/src/lib/totp-register/ui-selector.ts
@ -1,2 +0,0 @@
-
-export const QRCODE_ID_SELECTOR = "#qrcode";
--- a/client/src/lib/u2f-register/u2f-register.ts
+++ b/client/src/lib/u2f-register/u2f-register.ts
@ -1,56 +0,0 @@
-
-import BluebirdPromise = require("bluebird");
-import U2f = require("u2f");
-import * as U2fApi from "u2f-api";
-import { Notifier } from "../Notifier";
-import GetPromised from "../GetPromised";
-import Endpoints = require("../../../../shared/api");
-import UserMessages = require("../../../../shared/UserMessages");
-import { RedirectionMessage } from "../../../../shared/RedirectionMessage";
-import { ErrorMessage } from "../../../../shared/ErrorMessage";
-import { SafeRedirect } from "../SafeRedirect";
-
-export default function (window: Window, $: JQueryStatic) {
-  const notifier = new Notifier(".notification", $);
-
-  function checkRegistration(regResponse: U2fApi.RegisterResponse): BluebirdPromise<string> {
-    return new BluebirdPromise<string>(function (resolve, reject) {
-      $.post(Endpoints.SECOND_FACTOR_U2F_REGISTER_POST, regResponse, undefined, "json")
-        .done((body: RedirectionMessage | ErrorMessage) => {
-          if (body && "error" in body) {
-            reject(new Error((body as ErrorMessage).error));
-            return;
-          }
-          resolve((body as RedirectionMessage).redirect);
-        })
-        .fail((xhr, status) => {
-          reject(new Error("Failed to register device."));
-        });
-    });
-  }
-
-  function requestRegistration(): BluebirdPromise<string> {
-    return GetPromised($, Endpoints.SECOND_FACTOR_U2F_REGISTER_REQUEST_GET, {},
-      undefined, "json")
-      .then((registrationRequest: U2f.Request) => {
-        return U2fApi.register(registrationRequest, [], 60);
-      })
-      .then((res) => checkRegistration(res));
-  }
-
-  function onRegisterFailure(err: Error) {
-    notifier.error(UserMessages.REGISTRATION_U2F_FAILED);
-  }
-
-  $(document).ready(function () {
-    requestRegistration()
-      .then((redirectionUrl: string) => {
-        SafeRedirect(redirectionUrl, () => {
-          notifier.error(UserMessages.CANNOT_REDIRECT_TO_EXTERNAL_DOMAIN);
-        });
-      })
-      .catch((err) => {
-        onRegisterFailure(err);
-      });
-  });
-}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1,2 @@`

				`REACT_APP_CSP_CONTENT="default-src 'unsafe-inline'; script-src * 'unsafe-inline'; img-src * data:; style-src 'unsafe-inline'; connect-src * 'unsafe-inline' extensions:"`
				`@ -0,0 +1,2 @@`

				`REACT_APP_CSP_CONTENT="default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self' data:"`
				`@ -1,2 +0,0 @@`

				`export const FORM_SELECTOR = ".form-signin";`
				`@ -1,2 +0,0 @@`

				`export const QRCODE_ID_SELECTOR = "#qrcode";`