refactor: alerts + admin profile + user create dialog as Vue components

client/js/app.js

@@ -6,12 +6,13 @@
 import $ from 'jquery'
 import _ from 'lodash'
 import Vue from 'vue'
-import Vuex from 'vuex'
+import VueResource from 'vue-resource'
+import store from './store'
 import io from 'socket.io-client'
 import i18next from 'i18next'
 import i18nextXHR from 'i18next-xhr-backend'
 import VueI18Next from '@panter/vue-i18next'
-import Alerts from './components/alerts.js'
+// import Alerts from './components/alerts.js'
 import 'jquery-smooth-scroll'
 import 'jquery-sticky'
 
@@ -19,18 +20,22 @@ import 'jquery-sticky'
 // Load Vue Components
 // ====================================
 
+import alertComponent from './components/alert.vue'
 import anchorComponent from './components/anchor.vue'
 import colorPickerComponent from './components/color-picker.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
 import searchComponent from './components/search.vue'
 
+import adminUsersCreateComponent from './modals/admin-users-create.vue'
+
 import adminProfileComponent from './pages/admin-profile.component.js'
 import adminSettingsComponent from './pages/admin-settings.component.js'
 
 // ====================================
-// Initialize i18next
+// Initialize Vue Modules
 // ====================================
 
+Vue.use(VueResource)
 Vue.use(VueI18Next)
 
 i18next
@@ -43,46 +48,18 @@ i18next
     fallbackLng: siteLang
   })
 
-// ====================================
-// Initialize Vuex
-// ====================================
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  state: {
-    loading: false
-  },
-  mutations: {
-    startLoading: state => { state.loading = true },
-    stopLoading: state => { state.loading = false }
-  }
-})
-
 $(() => {
-  // ====================================
-  // Scroll
-  // ====================================
-
-  $('a').smoothScroll({
-    speed: 500,
-    offset: -50
-  })
-
-  $('#header').sticky({ topSpacing: 0 })
-  $('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
-
   // ====================================
   // Notifications
   // ====================================
 
   $(window).bind('beforeunload', () => {
-    store.commit('startLoading')
+    store.dispatch('startLoading')
   })
   $(document).ajaxSend(() => {
-    store.commit('startLoading')
+    store.dispatch('startLoading')
   }).ajaxComplete(() => {
-    store.commit('stopLoading')
+    store.dispatch('stopLoading')
   })
 
   var alerts = {}
@@ -107,27 +84,41 @@ $(() => {
   const i18n = new VueI18Next(i18next)
   new Vue({
     components: {
+      alert: alertComponent,
       adminProfile: adminProfileComponent,
       adminSettings: adminSettingsComponent,
+      adminUsersCreate: adminUsersCreateComponent,
       anchor: anchorComponent,
       colorPicker: colorPickerComponent,
       loadingSpinner: loadingSpinnerComponent,
       search: searchComponent
     },
+    directives: {
+      // sticky: VueSticky
+    },
     store,
     i18n,
-    el: '#root'
+    el: '#root',
+    mounted() {
+      $('a').smoothScroll({
+        speed: 500,
+        offset: -50
+      })
+
+      $('#header').sticky({ topSpacing: 0 })
+      $('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
+
+      // ====================================
+      // Pages logic
+      // ====================================
+
+      require('./pages/view.js')(alerts)
+      require('./pages/all.js')(alerts, socket)
+      require('./pages/create.js')(alerts, socket)
+      require('./pages/edit.js')(alerts, socket)
+      require('./pages/source.js')(alerts)
+      require('./pages/history.js')(alerts)
+      require('./pages/admin.js')(alerts)
+    }
   })
-
-  // ====================================
-  // Pages logic
-  // ====================================
-
-  require('./pages/view.js')(alerts)
-  require('./pages/all.js')(alerts, socket)
-  require('./pages/create.js')(alerts, socket)
-  require('./pages/edit.js')(alerts, socket)
-  require('./pages/source.js')(alerts)
-  require('./pages/history.js')(alerts)
-  require('./pages/admin.js')(alerts)
 })

client/js/components/alert.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  transition(name='alert', enter-active-class="animated zoomIn", leave-active-class="animated fadeOutRight")
+    .alert(v-if='shown', v-bind:class='style')
+      .alert-icon: i(v-bind:class='icon')
+      .alert-msg {{ msg }}
+</template>
+
+<script>
+  export default {
+    name: 'alert',
+    data () {
+      return {}
+    },
+    computed: {
+      shown() { return this.$store.state.alert.shown },
+      style() { return 'is-' + this.$store.state.alert.style },
+      icon() { return 'icon-' + this.$store.state.alert.icon },
+      msg() { return this.$store.state.alert.msg },
+    }
+  }
+</script>

client/js/modals/admin-users-create.js

@@ -1,56 +0,0 @@
-'use strict'
-
-import $ from 'jquery'
-import Vue from 'vue'
-
-// Vue Create User instance
-
-module.exports = (alerts) => {
-  let vueCreateUser = new Vue({
-    el: '#modal-admin-users-create',
-    data: {
-      email: '',
-      provider: 'local',
-      password: '',
-      name: '',
-      loading: false
-    },
-    methods: {
-      open: (ev) => {
-        $('#modal-admin-users-create').addClass('is-active')
-        $('#modal-admin-users-create input').first().focus()
-      },
-      cancel: (ev) => {
-        $('#modal-admin-users-create').removeClass('is-active')
-        vueCreateUser.email = ''
-        vueCreateUser.provider = 'local'
-      },
-      create: (ev) => {
-        vueCreateUser.loading = true
-        $.ajax('/admin/users/create', {
-          data: {
-            email: vueCreateUser.email,
-            provider: vueCreateUser.provider,
-            password: vueCreateUser.password,
-            name: vueCreateUser.name
-          },
-          dataType: 'json',
-          method: 'POST'
-        }).then((rData, rStatus, rXHR) => {
-          vueCreateUser.loading = false
-          if (rData.ok) {
-            vueCreateUser.cancel()
-            window.location.reload(true)
-          } else {
-            alerts.pushError('Something went wrong', rData.msg)
-          }
-        }, (rXHR, rStatus, err) => {
-          vueCreateUser.loading = false
-          alerts.pushError('Error', rXHR.responseJSON.msg)
-        })
-      }
-    }
-  })
-
-  $('.btn-create-prompt').on('click', vueCreateUser.open)
-}

client/js/modals/admin-users-create.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/pages/admin-profile.component.js

@@ -1,7 +1,5 @@
 'use strict'
 
-import * as $ from 'jquery'
-
 export default {
   name: 'admin-profile',
   props: ['email', 'name', 'provider'],
@@ -13,17 +11,29 @@ export default {
   },
   methods: {
     saveUser() {
+      let self = this
       if (this.password !== this.passwordVerify) {
-        //alerts.pushError('Error', "Passwords don't match!")
-        return
+        return self.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'square-cross',
+          msg: 'The passwords don\'t match. Try again.'
+        })
       }
-      $.post(window.location.href, {
+      this.$http.post(window.location.href, {
         password: this.password,
         name: this.name
-      }).done((resp) => {
-        //alerts.pushSuccess('Saved successfully', 'Changes have been applied.')
-      }).fail((jqXHR, txtStatus, resp) => {
-        //alerts.pushError('Error', resp)
+      }).then(resp => {
+        self.$store.dispatch('alert', {
+          style: 'green',
+          icon: 'check',
+          msg: 'Changes have been applied successfully.'
+        })
+      }).catch(err => {
+        self.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'square-cross',
+          msg: 'Error: ' + err.body.msg
+        })
       })
     }
   }

client/js/pages/admin.js

@@ -7,9 +7,7 @@ import _ from 'lodash'
 import Vue from 'vue'
 
 module.exports = (alerts) => {
-  if ($('#page-type-admin-users').length) {
-    require('../modals/admin-users-create.js')(alerts)
-  } else if ($('#page-type-admin-users-edit').length) {
+  if ($('#page-type-admin-users-edit').length) {
     let vueEditUser = new Vue({
       el: '#page-type-admin-users-edit',
       data: {

client/js/pages/view.js

@@ -4,8 +4,6 @@
 
 import $ from 'jquery'
 import MathJax from 'mathjax'
-// import * as CopyPath from '../components/copy-path.vue'
-import Vue from 'vue'
 
 module.exports = (alerts) => {
   if ($('#page-type-view').length) {

client/js/store/index.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import alert from './modules/alert'
+import adminUsersCreate from './modules/admin-users-create'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    loading: false
+  },
+  mutations: {
+    loadingChange: (state, loadingState) => { state.loading = loadingState }
+  },
+  actions: {
+    startLoading({ commit }) { commit('loadingChange', true) },
+    stopLoading({ commit }) { commit('loadingChange', false) }
+  },
+  getters: {},
+  modules: {
+    alert,
+    adminUsersCreate
+  }
+})

client/js/store/modules/admin-users-create.js

@@ -0,0 +1,15 @@
+'use strict'
+
+export default {
+  state: {
+    shown: false
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState }
+  },
+  actions: {
+    adminUsersCreateOpen({ commit }) { commit('shownChange', true) },
+    adminUsersCreateClose({ commit }) { commit('shownChange', false) }
+  }
+}

client/js/store/modules/alert.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import _ from 'lodash'
+
+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)
+  }
+}