misc: deps cleanup + form validation fixes

client/components/admin/admin-utilities-importv1.vue

@@ -1,13 +1,13 @@
 <template lang='pug'>
-  v-card.wiki-form
+  v-card
     v-toolbar(flat, color='primary', dark, dense)
       .subtitle-1 {{ $t('admin:utilities.importv1Title') }}
     v-card-text
-      .text-xs-center
+      .text-center
         img.animated.fadeInUp.wait-p1s(src='/svg/icon-software.svg')
         .body-2 Import from Wiki.js 1.x
       v-divider.my-4
-      .body-1 Data from a Wiki.js 1.x installation can be imported easily using this tool. What do you want to import?
+      .body-2 Data from a Wiki.js 1.x installation can easily be imported using this tool. What do you want to import?
       v-checkbox(
         label='Content'
         value='content'
@@ -29,9 +29,9 @@
         v-model='importFilters'
         hide-details
       )
-      v-divider.my-3
+      v-divider.my-5
       v-text-field.mt-3(
-        outline
+        outlined
         label='MongoDB Connection String'
         hint='The connection string to connect to the Wiki.js 1.x MongoDB database.'
         persistent-hint
@@ -39,7 +39,7 @@
         v-if='needDB'
       )
       v-text-field.mt-3(
-        outline
+        outlined
         label='Content Repo Path'
         hint='The full path to where the Wiki.js 1.x content is stored on disk.'
         persistent-hint
@@ -47,18 +47,39 @@
         v-if='needDisk'
       )
     v-card-chin
-      v-btn(depressed, color='deep-orange darken-2', :disabled='!needDB && !needDisk').ml-0
-        v-icon(left, color='white') label_important
+      v-btn.px-3(depressed, color='deep-orange darken-2', :disabled='!needDB && !needDisk', @click='startImport').ml-0
+        v-icon(left, color='white') mdi-database-import
         span.white--text Start Import
+    v-dialog(
+      v-model='isLoading'
+      persistent
+      max-width='350'
+      )
+      v-card(color='deep-orange darken-2', dark)
+        v-card-text.pa-10.text-center
+          semipolar-spinner.animated.fadeIn(
+            :animation-duration='1500'
+            :size='65'
+            color='#FFF'
+            style='margin: 0 auto;'
+          )
+          .mt-5.body-1.white--text Importing from Wiki.js 1.x...
+          .caption Please wait
 </template>
 
 <script>
+import { SemipolarSpinner } from 'epic-spinners'
+
 export default {
+  components: {
+    SemipolarSpinner
+  },
   data() {
     return {
-      importFilters: ['content', 'uploads'],
+      importFilters: ['content', 'uploads', 'users'],
       dbConnStr: 'mongodb://',
-      contentPath: '/wiki-v1/repo'
+      contentPath: '/wiki-v1/repo',
+      isLoading: false
     }
   },
   computed: {
@@ -68,6 +89,11 @@ export default {
     needDisk() {
       return this.importFilters.indexOf('content') >= 0 || this.importFilters.indexOf('uploads') >= 0
     }
+  },
+  methods: {
+    async startImport () {
+      this.isLoading = true
+    }
   }
 }
 </script>