misc: migrate to vuetify 2.0 (wip)

client/components/admin/admin-users-create.vue

@@ -2,46 +2,72 @@
   v-dialog(v-model='isShown', max-width='650', persistent)
     v-card.wiki-form
       .dialog-header.is-short
+        v-icon.mr-3(color='white') mdi-plus
         span New User
+        v-spacer
+        v-btn.mx-0(color='white', outlined, disabled, dark)
+          v-icon(left) mdi-database-import
+          span Bulk Import
       v-card-text
         v-select(
           :items='providers'
           item-text='title'
           item-value='key'
-          outline
-          prepend-icon='business'
+          outlined
+          prepend-icon='mdi-domain'
           v-model='provider'
           label='Provider'
           )
         v-text-field(
-          outline
-          prepend-icon='email'
+          outlined
+          prepend-icon='mdi-at'
           v-model='email'
           label='Email Address'
+          v-validate='{ required: true, email: true, min: 2, max: 255 }',
+          data-vv-name='email',
+          data-vv-as='Email Address',
+          data-vv-scope='newUser',
+          :error-messages='errors.collect(`newUser.email`)'
+          key='newUserEmail'
+          persistent-hint
           ref='emailInput'
           )
         v-text-field(
           v-if='provider === `local`'
-          outline
-          prepend-icon='lock'
-          append-icon='casino'
+          outlined
+          prepend-icon='mdi-lock-outline'
+          append-icon='mdi-dice-5'
           v-model='password'
           :label='mustChangePwd ? `Temporary Password` : `Password`'
           counter='255'
           @click:append='generatePwd'
+          v-validate='{ required: true, min: 6, max: 255 }',
+          data-vv-name='password',
+          data-vv-as='Password',
+          data-vv-scope='newUser',
+          :error-messages='errors.collect(`newUser.password`)'
+          key='newUserPassword'
+          persistent-hint
           )
         v-text-field(
-          outline
-          prepend-icon='person'
+          outlined
+          prepend-icon='mdi-account-outline'
           v-model='name'
           label='Name'
+          v-validate='{ required: true, min: 2, max: 255 }',
+          data-vv-name='name',
+          data-vv-as='Name',
+          data-vv-scope='newUser',
+          :error-messages='errors.collect(`newUser.name`)'
+          key='newUserName'
+          persistent-hint
           )
         v-select(
           :items='groups'
           item-text='name'
           item-value='key'
-          outline
-          prepend-icon='people'
+          outlined
+          prepend-icon='mdi-account-group'
           v-model='group'
           label='Assign to Group(s)...'
           clearable
@@ -63,14 +89,15 @@
         )
       v-card-chin
         v-spacer
-        v-btn(flat, @click='isShown = false') Cancel
-        v-btn(color='primary', @click='newUser(true)') Create
-        v-btn(color='primary', @click='newUser(false)') Create and Close
+        v-btn(text, @click='isShown = false') Cancel
+        v-btn(depressed, color='primary', @click='newUser(false)', :disabled='errors.any(`newUser`)') Create
+        v-btn(depressed, color='primary', @click='newUser(true)', :disabled='errors.any(`newUser`)') Create and Close
 </template>
 
 <script>
-import uuidv4 from 'uuid/v4'
+import _ from 'lodash'
 
+import createUserMutation from 'gql/admin/users/users-mutation-create.gql'
 import providersQuery from 'gql/admin/users/users-query-strategies.gql'
 import groupsQuery from 'gql/admin/auth/auth-query-groups.gql'
 
@@ -103,18 +130,69 @@ export default {
   watch: {
     value(newValue, oldValue) {
       if (newValue) {
+        this.$validator.reset()
         this.$nextTick(() => {
           this.$refs.emailInput.focus()
         })
       }
+    },
+    provider(newValue, oldValue) {
+      this.$validator.reset()
     }
   },
   methods: {
-    async newUser() {
-      this.isShown = false
+    async newUser(close = false) {
+      const validationSuccess = await this.$validator.validateAll('newUser')
+      if (!validationSuccess) {
+        return
+      }
+
+      try {
+        const resp = await this.$apollo.mutate({
+          mutation: createUserMutation,
+          variables: {
+            providerKey: this.provider,
+            email: this.email,
+            passwordRaw: this.password,
+            name: this.name,
+            groups: this.groups,
+            mustChangePassword: this.mustChangePwd,
+            sendWelcomeEmail: this.sendWelcomeEmail
+          },
+          watchLoading (isLoading) {
+            this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-create')
+          }
+        })
+        if (_.get(resp, 'data.users.create.responseResult.succeeded', false)) {
+          this.$store.commit('showNotification', {
+            style: 'success',
+            message: 'New user created successfully.',
+            icon: 'check'
+          })
+
+          this.email = ''
+          this.password = ''
+          this.name = ''
+
+          if (close) {
+            this.isShown = false
+          } else {
+            this.$refs.emailInput.focus()
+          }
+        } else {
+          this.$store.commit('showNotification', {
+            style: 'red',
+            message: _.get(resp, 'data.users.create.responseResult.message', 'An unexpected error occured.'),
+            icon: 'warning'
+          })
+        }
+      } catch (err) {
+        this.$store.commit('pushGraphError', err)
+      }
     },
     generatePwd() {
-      this.password = uuidv4().slice(-12)
+      const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
+      this.password = _.sampleSize(pwdChars, 12).join('')
     }
   },
   apollo: {