feat: login component, icon svg symbols, project structure

assets/svg/login-bg-motif-error.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="105" viewBox="0 0 80 105">
+    <g fill-rule="evenodd">
+        <g id="death-star" fill="#000000" fill-opacity="0.05">
+            <path d="M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z" />
+        </g>
+    </g>
+</svg>

assets/svg/login-bg-motif.svg

 <svg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='#039be5' fill-opacity='0.4' fill-rule='evenodd'/>
+  <path d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='#000000' fill-opacity='0.05' fill-rule='evenodd'/>
 </svg>
\ No newline at end of file

client/index.js

 'use strict'
 
 require('./scss/app.scss')
+require('./js/compatibility.js')
 require('./js/app.js')

client/js/app.js

@@ -12,7 +12,7 @@ import { ApolloClient } from 'apollo-client'
 import { HttpLink } from 'apollo-link-http'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import store from './store'
-import icons from '../svg/nc-icons.svg'
+import icons from '../svg/icons.svg'
 
 // ====================================
 // Load Modules
@@ -47,6 +47,7 @@ import modalDiscardPageComponent from './components/modal-discard-page.vue'
 import modalMovePageComponent from './components/modal-move-page.vue'
 import modalProfile2faComponent from './components/modal-profile-2fa.vue'
 import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
+import navigatorComponent from './components/navigator.vue'
 import pageLoaderComponent from './components/page-loader.vue'
 import searchComponent from './components/search.vue'
 import toggleComponent from './components/toggle.vue'
@@ -127,6 +128,7 @@ Vue.component('modalDiscardPage', modalDiscardPageComponent)
 Vue.component('modalMovePage', modalMovePageComponent)
 Vue.component('modalProfile2fa', modalProfile2faComponent)
 Vue.component('modalUpgradeSystem', modalUpgradeSystemComponent)
+Vue.component('navigator', navigatorComponent)
 Vue.component('pageLoader', pageLoaderComponent)
 Vue.component('search', searchComponent)
 Vue.component('setup', setupComponent)

client/js/compatibility.js

+// =======================================
+// Intl polyfill
+// =======================================
+// Requirement: Safari 9 and below
+
+if (!global.Intl) {
+  require('intl')
+  require('intl/locale-data/jsonp/en')
+  require('intl/locale-data/jsonp/fr')
+}
+
+// =======================================
+// Promise polyfill
+// =======================================
+// Requirement: IE 11 and below
+
+if (!window.Promise) {
+  window.Promise = require('bluebird')
+}
+
+// =======================================
+// Array.from polyfill
+// =======================================
+// Requirement: IE 11 and below
+
+if (!Array.from) {
+  require('./polyfills/array-from')
+}
+
+// =======================================
+// Fetch polyfill
+// =======================================
+// Requirement: Safari 9 and below, IE 11 and below
+
+if (!window.fetch) {
+  require('whatwg-fetch')
+}

client/js/components/login.vue

 <template lang="pug">
   .login(:class='{ "is-error": error }')
     .login-container(:class='{ "is-expanded": strategies.length > 1 }')
-      .login-error(v-if='error')
-        strong
-          i.icon-warning-outline
-          | {{ error.title }}
-        span {{ error.message }}
       .login-providers(v-show='strategies.length > 1')
         button(v-for='strategy in strategies', :class='{ "is-active": strategy.key === selectedStrategy }', @click='selectStrategy(strategy.key, strategy.useForm)', :title='strategy.title')
           em(v-html='strategy.icon')
           span {{ strategy.title }}
+        .login-providers-fill
       .login-frame
         h1 {{ siteTitle }}
         h2 {{ $t('auth:loginrequired') }}
-        form(method='post', action='/login')
-          input#login-user(type='text', name='email', :placeholder='$t("auth:fields.emailuser")')
-          input#login-pass(type='password', name='password', :placeholder='$t("auth:fields.password")')
-          button.button.is-light-blue.is-fullwidth(type='submit')
-            span {{ $t('auth:actions.login') }}
+        input(type='text', name='email', :placeholder='$t("auth:fields.emailuser")')
+        input(type='password', name='password', :placeholder='$t("auth:fields.password")')
+        button.button.is-orange.is-fullwidth(@click='login')
+          span {{ $t('auth:actions.login') }}
     .login-copyright
       span {{ $t('footer.poweredby') }}
       a(href='https://wiki.js.org', rel='external', title='Wiki.js') Wiki.js
@@ -62,9 +57,17 @@ export default {
       }).catch(err => {
         console.error(err)
       })
+    },
+    login() {
+      this.$store.dispatch('alert', {
+        style: 'error',
+        icon: 'gg-warning',
+        msg: 'Email or password is invalid'
+      })
     }
   },
   mounted() {
+    this.$store.commit('navigator/subtitleStatic', 'Login')
     this.refreshStrategies()
   }
 }

client/js/components/navigator.vue

+<template lang="pug">
+  .navigator
+    .navigator-bar
+      .navigator-fab
+        .navigator-fab-button(@click='toggleMainMenu')
+          svg.icons.is-24(role='img')
+            title Navigation
+            use(xlink:href='#gg-apps-grid')
+      .navigator-title
+        h1 {{ siteTitle }}
+      .navigator-subtitle(:class='subtitleClass')
+
+        svg.icons.is-24(role='img', v-if='subtitleIcon')
+          title {{subtitleText}}
+          use(:xlink:href='subtitleIconClass')
+        h2 {{subtitleText}}
+      .navigator-action
+        .navigator-action-item
+          svg.icons.is-32(role='img')
+            title User
+            use(xlink:href='#nc-user-circle')
+    .navigator-row
+      .navigator-nav
+</template>
+
+<script>
+/* global CONSTANTS, graphQL, siteConfig */
+
+import { mapState } from 'vuex'
+
+export default {
+  name: 'navigator',
+  data() {
+    return { }
+  },
+  computed: {
+    ...mapState('navigator', [
+      'subtitleShown',
+      'subtitleStyle',
+      'subtitleText',
+      'subtitleIcon'
+    ]),
+    siteTitle() {
+      return siteConfig.title
+    },
+    subtitleClass() {
+      return {
+        'is-active': this.subtitleShown,
+        'is-error': this.subtitleStyle === 'error',
+        'is-warning': this.subtitleStyle === 'warning',
+        'is-success': this.subtitleStyle === 'success',
+        'is-info': this.subtitleStyle === 'info'
+      }
+    },
+    subtitleIconClass() { return '#' + this.subtitleIcon }
+  },
+  methods: {
+    toggleMainMenu() {
+      this.$store.dispatch('navigator/alert', {
+        style: 'success',
+        icon: 'nc-check-simple',
+        msg: 'Changes were saved successfully!'
+      })
+    }
+  },
+  mounted() {
+  }
+}
+</script>

client/js/polyfills/array-from.js

+// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]'
+    }
+    var toInteger = function (value) {
+      var number = Number(value)
+      if (isNaN(number)) { return 0 }
+      if (number === 0 || !isFinite(number)) { return number }
+      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number))
+    }
+    var maxSafeInteger = Math.pow(2, 53) - 1
+    var toLength = function (value) {
+      var len = toInteger(value)
+      return Math.min(Math.max(len, 0), maxSafeInteger)
+    }
+
+    // The length property of the from method is 1.
+    return function from (arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike)
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined')
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length > 1 ? arguments[1] : void undefined
+      var T
+      if (typeof mapFn !== 'undefined') {
+        // 5. else
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function')
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length > 2) {
+          T = arguments[2]
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length)
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method
+      // of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len)
+
+      // 16. Let k be 0.
+      var k = 0
+      // 17. Repeat, while k < len… (also steps a - h)
+      var kValue
+      while (k < len) {
+        kValue = items[k]
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k)
+        } else {
+          A[k] = kValue
+        }
+        k += 1
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len
+      // 20. Return A.
+      return A
+    }
+  }())
+}

client/js/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import alert from './modules/alert'
 import anchor from './modules/anchor'
 import editor from './modules/editor'
 import editorCodeblock from './modules/editor-codeblock'
@@ -15,6 +14,7 @@ import modalDiscardPage from './modules/modal-discard-page'
 import modalMovePage from './modules/modal-move-page'
 import modalProfile2fa from './modules/modal-profile-2fa'
 import modalUpgradeSystem from './modules/modal-upgrade-system'
+import navigator from './modules/navigator'
 import pageLoader from './modules/page-loader'
 
 Vue.use(Vuex)
@@ -27,12 +27,12 @@ export default new Vuex.Store({
     loadingChange: (state, loadingState) => { state.loading = loadingState }
   },
   actions: {
+    alert({ dispatch }, opts) { dispatch('navigator/alert', opts) },
     startLoading({ commit }) { commit('loadingChange', true) },
     stopLoading({ commit }) { commit('loadingChange', false) }
   },
   getters: {},
   modules: {
-    alert,
     anchor,
     editor,
     editorCodeblock,
@@ -46,6 +46,7 @@ export default new Vuex.Store({
     modalMovePage,
     modalProfile2fa,
     modalUpgradeSystem,
+    navigator,
     pageLoader
   }
 })

client/js/store/modules/alert.js

-'use strict'
-
-import debounce from 'lodash/debounce'
-
-export default {
-  state: {
-    shown: false,
-    style: 'green',
-    icon: 'check',
-    msg: ''
-  },
-  getters: {},
-  mutations: {
-    alertChange: (state, opts) => {
-      state.shown = (opts.shown === true)
-      state.style = opts.style || 'green'
-      state.icon = opts.icon || 'check'
-      state.msg = opts.msg || ''
-    }
-  },
-  actions: {
-    alert({ commit, dispatch }, opts) {
-      opts.shown = true
-      commit('alertChange', opts)
-      dispatch('alertDismiss')
-    },
-    alertDismiss: debounce(({ commit }) => {
-      let opts = { shown: false }
-      commit('alertChange', opts)
-    }, 3000)
-  }
-}

client/js/store/modules/navigator.js

+import debounce from 'lodash/debounce'
+
+export default {
+  namespaced: true,
+  state: {
+    subtitleShown: false,
+    subtitleStyle: '',
+    subtitleIcon: false,
+    subtitleText: '',
+    subtitleStatic: 'Welcome'
+  },
+  getters: {},
+  mutations: {
+    subtitleChange (state, opts) {
+      state.subtitleShown = (opts.shown === true)
+      state.subtitleStyle = opts.style || ''
+      state.subtitleIcon = opts.icon || false
+      state.subtitleText = opts.msg || ''
+    },
+    subtitleStatic (state, text) {
+      state.subtitleText = text
+      state.subtitleStatic = text
+    }
+  },
+  actions: {
+    alert ({ commit, dispatch }, opts) {
+      opts.shown = true
+      commit('subtitleChange', opts)
+      dispatch('alertDismiss')
+    },
+    alertDismiss: debounce(({ commit, state }) => {
+      let opts = {
+        shown: false,
+        style: state.subtitleStyle,
+        msg: state.subtitleStatic
+      }
+      commit('subtitleChange', opts)
+    }, 5000)
+  }
+}

client/scss/app.scss

@@ -3,7 +3,7 @@
 $primary: 'indigo';
 
 @import "base/variables";
-@import "base/colors";
+@import "base/material";
 @import "base/reset";
 @import "base/mixins";
 @import "base/fonts";
@@ -21,9 +21,11 @@ $primary: 'indigo';
 @import 'components/grid';
 @import 'components/hero';
 @import 'components/history';
+@import 'components/login';
 @import 'components/markdown-content';
 @import 'components/modal';
 @import 'components/nav';
+@import 'components/navigator';
 @import 'components/panel';
 @import 'components/search';
 @import 'components/setup';
@@ -32,9 +34,7 @@ $primary: 'indigo';
 @import 'components/toggle';
 @import 'components/typography';
 
-@import 'libs/nucleo-icons';
 @import 'libs/twemoji-awesome';
-@import 'libs/jquery-contextmenu';
 @import 'node_modules/highlight.js/styles/atom-one-dark';
 @import 'node_modules/simplemde/dist/simplemde.min';
 @import 'node_modules/diff2html/dist/diff2html.min';
@@ -45,6 +45,4 @@ $primary: 'indigo';
 @import 'layout/_loader';
 @import 'layout/_rtl';
 
-@import 'pages/login';
-
 @import 'base/print';

client/scss/base/base.scss

@@ -12,12 +12,11 @@ html {
 }
 
 #app {
-  padding-bottom: 67px;
   position: relative;
   min-height: 100%;
 
   &.is-fullscreen {
-    width: 100vw;
+    //width: 100vw;
     height: 100vh;
   }
 }

client/scss/base/icons.scss

@@ -13,7 +13,7 @@
     fill: none;
   }
 
-  @each $size in 16,18,20,24,48,64,96,128 {
+  @each $size in 16,18,20,24,32,48,64,96,128 {
     &.is-#{$size} {
       width: #{$size}px;
       height: #{$size}px;

client/scss/base/colors.scss → client/scss/base/material.scss

@@ -325,3 +325,27 @@ $material-colors: (
 @function mc($color-name, $color-variant: '500') {
 	@return material-color($color-name, $color-variant);
 }
+
+@mixin md-elevation-0 {
+  box-shadow: none !important;
+}
+
+@mixin md-elevation-1 {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin md-elevation-2 {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+@mixin md-elevation-3 {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
+}
+
+@mixin md-elevation-4 {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
+}
+
+@mixin md-elevation-5 {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file

client/scss/pages/_login.scss → client/scss/components/login.scss

 .login {
-  background-color: #0288d1;
+  background-color: mc('blue', '800');
   background-image: url('../svg/login-bg-motif.svg');
   background-repeat: repeat;
-  background-size: 30%;
+  background-size: 200px;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  animation: loginBgReveal 20s linear infinite;
 
-  &.is-error {
-    background-image: linear-gradient(to right, mc('red', '400'), mc('red', '600'));
+  @include keyframes(loginBgReveal) {
+    0% {
+      background-position-y: 0;
+    }
+    100% {
+      background-position-y: -800px;
+    }
   }
 
   &::before {
@@ -23,6 +29,20 @@
     left: 0;
     width: 100vw;
     height: 100vh;
+
+    @include until($tablet) {
+      display: none;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    background-image: linear-gradient(to bottom, rgba(mc('blue', '800'), 1) 0%, rgba(mc('blue', '800'), 0) 100%);
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 25vh;
   }
 
   &-container {
@@ -32,6 +52,7 @@
     align-items: stretch;
     box-shadow: 0 14px 28px rgba(0,0,0,0.2);
     border-radius: 6px;
+    animation: zoomIn .5s ease;
 
     &.is-expanded {
       width: 650px;
@@ -39,45 +60,23 @@
       .login-frame {
         border-radius: 0 6px 6px 0;
         border-left: none;
+
+        @include until($tablet) {
+          border-radius: 0;
+        }
       }
     }
 
     @include until($tablet) {
-      width: 350px;
+      width: 100%;
+      border-radius: 0;
 
       &.is-expanded {
-        width: 400px;
+        width: 100%;
       }
     }
   }
 
-  &-error {
-    position: absolute;
-    bottom: 105%;
-    width: 100%;
-    min-height: 50px;
-    background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 100%);
-    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-    border-radius: 6px;
-    color: mc('red', '800');
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-
-    strong {
-      font-weight: 600;
-      text-transform: uppercase;
-      display: block;
-      padding: 0 1rem 0 0;
-      border-right: 1px solid mc('red', '200');
-    }
-    span {
-      padding: 0 0 0 1rem;
-      display: block;
-    }
-  }
-
   &-providers {
     display: flex;
     flex-direction: column;
@@ -90,15 +89,18 @@
 
     @include until($tablet) {
       width: 50px;
+      border-radius: 0;
     }
 
     button {
-      flex: 1 1;
+      flex: 0 1 50px;
       padding: 5px 15px;
       border: none;
       color: #FFF;
-      background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
-      border-top: 1px solid rgba(mc('light-blue', '900'), .5);
+      // background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
+      // border-top: 1px solid rgba(mc('light-blue', '900'), .5);
+      background: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .7));
+      border-top: 1px solid rgba(0,0,0, .2);
       font-family: $core-font-standard;
       font-weight: 600;
       text-align: left;
@@ -117,7 +119,7 @@
       }
 
       &:hover {
-        background-color: mc('light-blue', '900');
+        background-color: rgba(0,0,0, .4);
       }
 
       &:first-child {
@@ -130,7 +132,7 @@
 
       &.is-active {
         background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,.77) 100%);
-        color: mc('light-blue', '700');
+        color: mc('grey', '800');
         cursor: default;
 
         &:hover {
@@ -138,7 +140,7 @@
         }
 
         svg path {
-          fill: mc('light-blue', '800');
+          fill: mc('grey', '800');
         }
       }
 
@@ -177,6 +179,11 @@
         }
       }
     }
+
+    &-fill {
+      flex: 1 1 0;
+      background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
+    }
   }
 
   &-frame {
@@ -192,7 +199,9 @@
     text-align: center;
 
     @include until($tablet) {
-      width: 350px;
+      width: 100%;
+      border-radius: 0;
+      border: none;
     }
 
     h1 {
@@ -220,7 +229,7 @@
 
     input[type=text], input[type=password] {
       width: 100%;
-      border: 1px solid #FFF;
+      border: 1px solid rgba(mc('light-blue','500'), .5);
       border-radius: 3px;
       background-color: rgba(255,255,255,.9);
       box-shadow: inset 0 0 0 3px rgba(255,255,255, .25);
@@ -237,12 +246,22 @@
         outline: none;
         border-color: mc('light-blue','500');
         background-color: rgba(255,255,255,1);
-        box-shadow: inset 0 0 0 3px rgba(mc('light-blue','500'), .25);
+        box-shadow: inset 0 0 8px rgba(mc('light-blue','500'), .5);
         color: mc('light-blue', '800');
       }
 
     }
 
+    .button {
+      background-image: linear-gradient(to top, mc('deep-orange', '400') 0%, mc('deep-orange', '400') 50%, mc('orange', '500') 100%);
+      background-repeat: no-repeat;
+      background-size: 100% 200%;
+
+      &:hover {
+        background-position-y: 100%;
+      }
+    }
+
   }
 
   &-copyright {
@@ -259,8 +278,16 @@
 
     a {
       font-weight: 600;
-      color: mc('light-blue', '500');
+      color: mc('blue', '500');
       margin-left: .25rem;
+
+      @include until($tablet) {
+        color: mc('blue', '200');
+      }
+    }
+
+    @include until($tablet) {
+      color: mc('blue', '50');
     }
 
   }

client/scss/components/navigator.scss

+.navigator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  &-bar {
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: rgba(mc('grey', '900'), .7);
+  }
+
+  &-fab {
+
+    &-button {
+      width: 50px;
+      height: 50px;
+      background-color: #FFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      transition: all .4s ease;
+
+      svg use {
+        transition: all .4s ease;
+      }
+
+      &:hover {
+        svg use {
+          color: mc('blue', '500');
+          fill: mc('blue', '500');
+        }
+      }
+    }
+  }
+
+  &-title {
+    background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
+    background-size: 200%;
+    background-repeat: no-repeat;
+    padding: 0 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all .4s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-position-y: -50px;
+    }
+
+    h1 {
+      font-size: 1.2rem;
+      color: #FFF;
+      font-weight: 500;
+    }
+  }
+
+  &-subtitle {
+    background-repeat: no-repeat;
+    background-position-x: -100vw;
+    color: #FFF;
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 1rem;
+    transition: background-position-x 1s ease;
+
+    &.is-error {
+      background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
+    }
+    &.is-warning {
+      background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
+    }
+    &.is-success {
+      background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
+    }
+    &.is-info {
+      background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
+    }
+
+    &.is-active {
+      background-position-x: 0;
+    }
+
+    svg {
+      margin-right: .5rem;
+      animation: flash 1s linear;
+
+      use {
+        color: #FFF;
+        fill: #FFF;
+        stroke: #FFF;
+        transition: all .4s ease;
+      }
+    }
+
+    h2 {
+      font-size: 1rem;
+      font-weight: 400;
+    }
+  }
+
+  &-action {
+    display: flex;
+    justify-content: flex-end;
+    align-items: stretch;
+
+    &-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      cursor: pointer;
+
+      svg use {
+        color: #FFF;
+        fill: #FFF;
+        transition: all .4s ease;
+      }
+
+      &:hover {
+        svg use {
+          color: mc('blue', '500');
+          fill: mc('blue', '500');
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

client/scss/libs/jquery-contextmenu.scss

-@charset "UTF-8";
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: v2.2.5-dev
- *
- * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://swisnl.github.io/jQuery-contextMenu/
- *
- * Copyright (c) 2011-2016 SWIS BV and contributors
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *
- * Date: 2016-08-27T11:09:08.919Z
- */
-
-.context-menu-icon {
-  display: list-item;
-  font-family: inherit;
-}
-.context-menu-icon::before {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 2em; 
-  font-family: FontAwesome;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  color: mc('blue', '500');
-  text-align: center;
-  -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-       -o-transform: translateY(-50%);
-          transform: translateY(-50%);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.context-menu-icon.context-menu-hover:before {
-  color: #fff;
-}
-.context-menu-icon.context-menu-disabled::before {
-  color: #bbb;
-}
-
-.context-menu-list {
-  position: absolute; 
-  display: inline-block;
-  min-width: 13em;
-  max-width: 26em;
-  padding: 0 0;
-  margin: .3em;
-  font-family: inherit;
-  font-size: 14px;
-  list-style-type: none;
-  background: #fff;
-  border: 1px solid mc('blue', '500');
-  border-radius: .2em;
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
-          box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
-}
-
-.context-menu-item {
-  position: relative;
-  padding: 7px 2em;
-  color: #69707a;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; 
-  background-color: #fff;
-  font-size: 14px;
-  text-align: left;
-}
-
-.context-menu-separator {
-  padding: 0; 
-  margin: .35em 0;
-  border-bottom: 1px solid #e6e6e6;
-}
-
-.context-menu-item.context-menu-hover {
-  color: #fff;
-  cursor: pointer; 
-  background-color: mc('blue', '500');
-}
-
-.context-menu-item.context-menu-disabled {
-  color: #bbb;
-  cursor: default; 
-  background-color: #fff;
-}
-
-.context-menu-input.context-menu-hover {
-  cursor: default;
-}
-
-.context-menu-submenu:after {
-  position: absolute;
-  top: 50%;
-  right: .5em;
-  z-index: 1; 
-  width: 0;
-  height: 0;
-  content: '';
-  border-color: transparent transparent transparent #2f2f2f;
-  border-style: solid;
-  border-width: .25em 0 .25em .25em;
-  -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-       -o-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-
-.context-menu-item > .context-menu-list {
-  top: .3em; 
-  /* re-positioned by js */
-  right: -.3em;
-  display: none;
-}
-
-.context-menu-item.context-menu-visible > .context-menu-list {
-  display: block;
-}
-
-.context-menu-accesskey {
-  text-decoration: underline;
-}
\ No newline at end of file

package.json

@@ -156,6 +156,7 @@
     "fuse-box": "2.5.0-beta.1",
     "graphql-tag": "^2.6.1",
     "i18next-xhr-backend": "1.5.0",
+    "intl": "1.2.5",
     "jest": "22.0.4",
     "jest-junit": "3.4.1",
     "js-cookie": "2.2.0",
@@ -178,7 +179,8 @@
     "vue-template-compiler": "2.5.13",
     "vue-template-es2015-compiler": "1.6.0",
     "vuex": "3.0.1",
-    "vuex-persistedstate": "2.4.2"
+    "vuex-persistedstate": "2.4.2",
+    "whatwg-fetch": "2.0.3"
   },
   "jest": {
     "testResultsProcessor": "./node_modules/jest-junit",

server/extensions/authentication/azure.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------

server/extensions/authentication/facebook.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------

server/extensions/authentication/github.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------

server/extensions/authentication/google.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------
@@ -25,7 +23,7 @@ module.exports = {
         }).catch((err) => {
           return cb(err, null) || true
         })
-      }
-      ))
+      })
+    )
   }
 }

server/extensions/authentication/ldap.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------

server/extensions/authentication/microsoft.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------

server/extensions/authentication/slack.js

-'use strict'
-
 /* global wiki */
 
 // ------------------------------------

server/modules/auth.js

@@ -32,9 +32,14 @@ module.exports = {
     // Load authentication strategies
 
     _.forOwn(_.omitBy(wiki.config.auth.strategies, s => s.enabled === false), (strategyConfig, strategyKey) => {
-      strategyConfig.callbackURL = `${wiki.config.site.host}${wiki.config.site.path}/login/${strategyKey}/callback`
+      strategyConfig.callbackURL = `${wiki.config.site.host}${wiki.config.site.path}login/${strategyKey}/callback`
       let strategy = require(`../extensions/authentication/${strategyKey}`)
-      strategy.init(passport, strategyConfig)
+      try {
+        strategy.init(passport, strategyConfig)
+      } catch (err) {
+        wiki.logger.error(`Authentication Provider ${strategyKey}: [ FAILED ]`)
+        wiki.logger.error(err)
+      }
       fs.readFile(path.join(wiki.ROOTPATH, `assets/svg/auth-icon-${strategyKey}.svg`), 'utf8').then(iconData => {
         strategy.icon = iconData
       }).catch(err => {

server/views/auth/login.pug

@@ -4,3 +4,4 @@ block body
   body
     #app.is-fullscreen
       login
+      navigator