setup wizard intro + syscheck

client/js/configure.js

@@ -0,0 +1,46 @@
+'use strict'
+
+/* global jQuery, _, Vue, axios */
+
+jQuery(document).ready(function ($) {
+  new Vue({ // eslint-disable-line no-new
+    el: 'main',
+    data: {
+      loading: false,
+      state: 'welcome',
+      syscheck: {
+        ok: false,
+        error: ''
+      },
+      conf: {
+        title: 'Wiki',
+        host: ''
+      }
+    },
+    methods: {
+      proceedToSyscheck: function (ev) {
+        let self = this
+        this.state = 'syscheck'
+        this.loading = true
+
+        _.delay(() => {
+          axios.post('/syscheck').then(resp => {
+            if (resp.data.ok === true) {
+              self.syscheck.ok = true
+            } else {
+              self.syscheck.ok = false
+              self.syscheck.error = resp.data.error
+            }
+            self.loading = false
+          }).catch(err => {
+            window.alert(err.message)
+          })
+        }, 1000)
+      },
+      proceedToGeneral: function (ev) {
+        this.state = 'general'
+        this.loading = true
+      }
+    }
+  })
+})

client/scss/configure.scss

@@ -25,3 +25,28 @@ $primary: 'indigo';
 	}
 
 }
+
+i.icon-loader {
+  display: inline-block;
+  color: mc('indigo', '500')
+}
+i.icon-check {
+  color: mc('green', '500')
+}
+i.icon-square-cross {
+  color: mc('red', '500')
+}
+
+.tst-welcome-leave-active {
+  transition: all .5s;
+  overflow-y: hidden;
+}
+.tst-welcome-leave {
+  opacity: 1;
+  max-height: 200px;
+}
+.tst-welcome-leave-to {
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+}