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

+<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

-'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

+<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

 '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

+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

+'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

+'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)
+  }
+}

client/scss/components/alert.scss

-/*#alerts {
-	position: fixed;
-	top: 60px;
-	right: 10px;
-	width: 350px;
-	z-index: 10;
-	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
-
-	.notification {
-		animation: 0.5s ease slideInRight;
-		margin-top: 5px;
-
-		&.exit {
-			animation: 0.5s ease fadeOutRight;
-		}
-
-	}
-
-	h3 {
-		font-size: 16px;
-		font-size: 500;
-	}
-
-}*/
-
-#alerts {
-	position: fixed;
-	top: 55px;
-	right: 10px;
-	width: 350px;
-	z-index: 100;
-
-	> ul {
-		margin: 0;
-		padding: 0;
-		list-style-type: none;
-
-		> li {
-			background-color: material-color('blue-grey', '800');
-			box-shadow: 5px 5px 0 transparentize(material-color('blue-grey', '900'), 0.7);
-			border: 1px solid material-color('blue-grey', '500');
-			border-left-width: 5px;
-			margin-top: 5px;
-			padding: 8px 12px;
-			animation-name: slideFromRight;
-			animation-duration: 1s;
-			cursor: pointer;
-			position: relative;
-
-			&:hover {
-				background-color: material-color('blue-grey', '900');
-			}
-
-			&.exit {
-				animation-name: zoomOut;
-				animation-duration: 1s;
-				transform-origin: top center;
-			}
-
-			> button {
-        background-color: transparent;
-        border: none;
-        color: #FFF;
-        width: 15px;
-        height: 15px;
-        padding: 0;
-        position: absolute;
-        top: 10px;
-        right: 10px;
-
-        &:before {
-          content: 'X';
-        }
-
+.alert {
+  background-color: #FFF;
+  border-right: 3px solid mc('grey', '500');
+  position: fixed;
+  top: 60px;
+  margin-left: 10px;
+  right: 10px;
+  max-width: 500px;
+  z-index: 1000;
+  display: flex;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  animation-duration: .6s;
+
+  &-icon {
+    width: 50px;
+    height: 50px;
+    background-color: mc('grey', '500');
+    color: #FFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-msg {
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-top: 1px solid mc('grey', '200');
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  @each $color, $colorvalue in $material-colors {
+		&.is-#{$color} {
+			border-right-color: mc($color, '500');
+
+      .alert-icon {
+        background-color: mc($color, '500');
+      }
+      .alert-msg {
+        color: mc($color, '900');
       }
-
-			> strong {
-				display: block;
-				font-size: 13px;
-				font-weight: 500;
-				color: #FFF;
-
-				> i {
-					margin-right: 5px;
-				}
-
-			}
-
-			> span {
-				font-size: 12px;
-				font-weight: 500;
-				color: material-color('blue-grey', '100');
-			}
-
-			&.error {
-				border-color: material-color('red', '400');
-				background-color: material-color('red', '600');
-				> span {
-					color: material-color('red', '50');
-				}
-			}
-			&.success {
-				border-color: material-color('green', '400');
-				background-color: material-color('green', '700');
-				> span {
-					color: material-color('green', '50');
-				}
-			}
 
 		}
-
 	}
 
 }

package.json

@@ -69,7 +69,7 @@
     "i18next-express-middleware": "^1.0.5",
     "i18next-node-fs-backend": "^1.0.0",
     "image-size": "^0.5.4",
-    "jimp": "https://github.com/ngpixel/jimp.git",
+    "jimp": "^0.2.28",
     "js-yaml": "^3.8.4",
     "jsonwebtoken": "^7.4.1",
     "klaw": "^1.3.1",
@@ -157,6 +157,7 @@
     "uglify-js": "latest",
     "vee-validate": "^2.0.0-rc.3",
     "vue": "^2.3.3",
+    "vue-resource": "^1.3.1",
     "vue-template-compiler": "^2.3.3",
     "vue-template-es2015-compiler": "^1.5.2",
     "vuex": "^2.3.1"

server/views/layout.pug

@@ -29,7 +29,7 @@ html
   body
     #root.has-stickynav
       include ./common/header.pug
-      //-include ./common/alerts.pug
+      alert
       main
         block content
       include ./common/footer.pug

server/views/pages/admin/users.pug

@@ -3,45 +3,44 @@ extends ./_layout.pug
 block rootNavRight
   i.nav-item#notifload
   .nav-item
-    a.button.btn-create-prompt
+    a.button(v-on:click='$store.dispatch("adminUsersCreateOpen")')
       i.icon-plus
       span= t('admin:users.createauthorize')
 
 block adminContent
-  #page-type-admin-users
-    .hero
-      h1.title#title= t('nav.users')
-      h2.subtitle= t('admin:users.subtitle')
-    table.table
-      thead
+  .hero
+    h1.title#title= t('nav.users')
+    h2.subtitle= t('admin:users.subtitle')
+  table.table
+    thead
+      tr
+        th
+        th= t('admin:users.name')
+        th= t('admin:users.email')
+        th= t('admin:users.provider')
+        th= t('admin:users.createdon')
+        th= t('admin:users.updatedon')
+    tbody
+      each usr in usrs
         tr
-          th
-          th= t('admin:users.name')
-          th= t('admin:users.email')
-          th= t('admin:users.provider')
-          th= t('admin:users.createdon')
-          th= t('admin:users.updatedon')
-      tbody
-        each usr in usrs
-          tr
-            td.is-icon
-              i.icon-user.is-grey
-            td
-              a(href='/admin/users/' + usr._id)= usr.name
-            td= usr.email
-            td.is-centered.has-icons
-              case usr.provider
-                when 'local': i.icon-server
-                when 'windowslive': i.icon-windows2.is-blue
-                when 'azure': i.icon-windows2.is-blue
-                when 'google': i.icon-google.is-blue
-                when 'facebook': i.icon-facebook.is-indigo
-                when 'github': i.icon-github.is-grey
-                when 'slack': i.icon-slack.is-purple
-                when 'ldap': i.icon-arrow-repeat-outline
-                default: i.icon-warning
-              = t('auth:providers.' + usr.provider)
-            td.is-centered= moment(usr.createdAt).format('lll')
-            td.is-centered= moment(usr.updatedAt).format('lll')
+          td.is-icon
+            i.icon-user.is-grey
+          td
+            a(href='/admin/users/' + usr._id)= usr.name
+          td= usr.email
+          td.is-centered.has-icons
+            case usr.provider
+              when 'local': i.icon-server
+              when 'windowslive': i.icon-windows2.is-blue
+              when 'azure': i.icon-windows2.is-blue
+              when 'google': i.icon-google.is-blue
+              when 'facebook': i.icon-facebook.is-indigo
+              when 'github': i.icon-github.is-grey
+              when 'slack': i.icon-slack.is-purple
+              when 'ldap': i.icon-arrow-repeat-outline
+              default: i.icon-warning
+            = t('auth:providers.' + usr.provider)
+          td.is-centered= moment(usr.createdAt).format('lll')
+          td.is-centered= moment(usr.updatedAt).format('lll')
 
-    include ../../modals/admin-createuser.pug
+  admin-users-create