refactor: client-side optimizations + lazy-loading

client/js/components/anchor.vue

@@ -14,8 +14,6 @@
 </template>
 
 <script>
-  import * as _ from 'lodash'
-
   export default {
     name: 'anchor',
     data () {

client/js/components/modal-create-page.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+  .modal(v-if='isShown')
+    .modal-background
+    .modal-container
+      .modal-content
+        header.is-light-blue Create New Document
+        section
+          label.label Enter the new document path:
+          p.control.is-fullwidth(v-class='{ "is-loading": isLoading }')
+            input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
+            span.help.is-danger(v-show='isInvalid') This document path is invalid!
+        footer
+          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+          a.button.is-light-blue(v-on:click='create') Create
+</template>
+
+<script>
+  import { isEmpty } from 'lodash'
+  // import { makeSafePath } from '../helpers/pages'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'modal-create',
+    data () {
+      return {
+        isLoading: false
+      }
+    },
+    computed: mapState('createPage', {
+      entrypath: '',
+      isShown: 'shown',
+      isInvalid: 'invalid'
+    }),
+    methods: {
+      cancel: function () {
+        this.$store.dispatch('createPageClose')
+      },
+      create: function () {
+        this.isInvalid = false
+        let newDocPath = makeSafePath(this.entrypath)
+        if (isEmpty(newDocPath)) {
+          this.$store.createPage.commit('')
+        } else {
+          this.isLoading = true
+          window.location.assign('/create/' + newDocPath)
+        }
+      }
+    },
+    mounted () {
+      // this.entrypath = currentBasePath + '/new-page'
+    }
+  }
+</script>

client/js/components/modal-create-user.vue

@@ -0,0 +1,93 @@
+<template lang="pug">
+  .modal(v-bind:class='{ "is-active": isShown }')
+    .modal-background
+    .modal-container
+      .modal-content
+        header.is-blue
+          span Create / Authorize User
+          p.modal-notify(v-bind:class='{ "is-active": loading }'): i
+        section
+          label.label Email address:
+          p.control.is-fullwidth
+            input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email', autofocus)
+        section
+          label.label Provider:
+          p.control.is-fullwidth
+            select(v-model='provider')
+              option(value='local') Local Database
+              option(value='windowslive') Microsoft Account
+              option(value='google') Google ID
+              option(value='facebook') Facebook
+              option(value='github') GitHub
+              option(value='slack') Slack
+        section(v-if='provider=="local"')
+          label.label Password:
+          p.control.is-fullwidth
+            input.input(type='password', placeholder='', v-model='password')
+        section(v-if='provider=="local"')
+          label.label Full Name:
+          p.control.is-fullwidth
+            input.input(type='text', placeholder='e.g. John Doe', v-model='name')
+        footer
+          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+          a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
+          a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User
+</template>
+
+<script>
+  export default {
+    name: 'admin-users-create',
+    data () {
+      return {
+        email: '',
+        provider: 'local',
+        password: '',
+        name: '',
+        loading: false
+      }
+    },
+    computed: {
+      isShown () {
+        return this.$store.state.adminUsersCreate.shown
+      }
+    },
+    methods: {
+      cancel () {
+        this.$store.dispatch('adminUsersCreateClose')
+        this.email = ''
+        this.provider = 'local'
+      },
+      create () {
+        let self = this
+        this.loading = true
+        this.$http.post('/admin/users/create', {
+          email: this.email,
+          provider: this.provider,
+          password: this.password,
+          name: this.name
+        }).then(resp => {
+          return resp.json()
+        }).then(resp => {
+          this.loading = false
+          if (resp.ok) {
+            this.cancel()
+            window.location.reload(true)
+          } else {
+            self.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'square-cross',
+              msg: resp.msg
+            })
+          }
+        }).catch(err => {
+          this.loading = false
+          self.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'square-cross',
+            msg: 'Error: ' + err.body.msg
+          })
+        })
+      }
+    }
+  }
+</script>

client/js/components/page-loader.js

@@ -1,13 +1,13 @@
 'use strict'
 
 import $ from 'jquery'
-import _ from 'lodash'
+import delay from 'lodash/delay'
 
 module.exports = {
 
   complete () {
     $('#page-loader').addClass('is-loaded')
-    _.delay(() => {
+    delay(() => {
       $('#page-loader').addClass('is-hidden')
     }, 1100)
   }