added: vuelidate

Author: adenvt

package-lock.json

@@ -65,6 +65,7 @@
     "vue-router": "^3.0.1",
     "vue-sweetalert2": "^1.5.9",
     "vuejs-datepicker": "^1.5.4",
+    "vuelidate": "^0.7.4",
     "vuex": "^3.0.1",
     "vuex-easy-access": "^3.1.4"
   },

package.json

@@ -6,6 +6,7 @@ import Datepicker from 'vuejs-datepicker'
 import { id } from 'vuejs-datepicker/dist/locale'
 import Notifications from 'vue-notification'
 import Sweetalert from 'vue-sweetalert2'
+import Vuelidate from 'vuelidate'
 import Loading from './components/Loading'
 import Select2 from './components/Select'
 import App from './App'
@@ -15,6 +16,16 @@ import store from './store'
 Vue.use(BootstrapVue)
 Vue.use(Notifications)
 Vue.use(Sweetalert)
+Vue.use(Vuelidate)
+
+Vue.filter('state', (value, dirtyOnly = true) => {
+  if (dirtyOnly) {
+    if (!value.$dirty)
+      return null
+  }
+
+  return !value.$invalid ? 'valid' : 'invalid'
+})
 
 Vue.component('b-loading', Loading)
 Vue.component('b-select-2', Select2)

resources/js/coreui/main.js

@@ -11,24 +11,45 @@
                 <h1>Login</h1>
                 <p class="text-muted">Sign In to your account</p>
                 <b-input-group class="mb-3">
-                  <b-input-group-prepend><b-input-group-text><i class="icon-user"/></b-input-group-text></b-input-group-prepend>
-                  <input
+                  <b-input-group-prepend>
+                    <b-input-group-text>
+                      <i class="icon-user"/>
+                    </b-input-group-text>
+                  </b-input-group-prepend>
+                  <b-input
                     type="text"
                     class="form-control"
-                    placeholder="Username">
+                    placeholder="Username"
+                    :state="$v.form.username | state"
+                    v-model="form.username" />
+                  <b-form-invalid-feedback>
+                    Required
+                  </b-form-invalid-feedback>
                 </b-input-group>
                 <b-input-group class="mb-4">
-                  <b-input-group-prepend><b-input-group-text><i class="icon-lock"/></b-input-group-text></b-input-group-prepend>
-                  <input
+                  <b-input-group-prepend>
+                    <b-input-group-text>
+                      <i class="icon-lock"/>
+                    </b-input-group-text>
+                  </b-input-group-prepend>
+                  <b-input
                     type="password"
                     class="form-control"
-                    placeholder="Password">
+                    placeholder="Password"
+                    :state="$v.form.password | state"
+                    v-model="form.password" />
+                  <b-form-invalid-feedback>
+                    Required
+                  </b-form-invalid-feedback>
                 </b-input-group>
                 <b-row>
                   <b-col cols="6">
                     <b-button
                       variant="primary"
-                      class="px-4">Login</b-button>
+                      class="px-4"
+                      @click="submit">
+                      Login
+                    </b-button>
                   </b-col>
                   <b-col
                     cols="6"
@@ -62,5 +83,30 @@
 </template>
 
 <script>
-export default { name: 'Login' }
+import { required } from 'validators'
+
+export default {
+  name: 'Login',
+  data () {
+    return {
+      form: {
+        username: '',
+        password: '',
+      },
+    }
+  },
+  validations () {
+    return {
+      form: {
+        username: { required },
+        password: { required },
+      },
+    }
+  },
+  methods: {
+    submit () {
+      this.$v.$touch()
+    },
+  },
+}
 </script>

resources/js/coreui/views/pages/Login.vue

@@ -20,8 +20,9 @@ mix.sass('resources/sass/app.scss', 'public/css')
 mix.webpackConfig({
   resolve: {
     alias: {
-      '@'     : path.resolve(__dirname, 'resources/js/coreui/'),
-      'static': path.resolve(__dirname, 'resources/static/'),
+      '@'         : path.resolve(__dirname, 'resources/js/coreui/'),
+      'static'    : path.resolve(__dirname, 'resources/static/'),
+      'validators': 'vuelidate/lib/validators',
     },
   },
   plugins: [
@@ -70,6 +71,7 @@ mix.extract([
   'chart.js',
   'jquery',
   'lodash',
+  'moment',
   'popper.js',
   'select2',
   'vue',
@@ -79,7 +81,9 @@ mix.extract([
   'vue-router',
   'vue-sweetalert2',
   'vuejs-datepicker',
+  'vuelidate',
   'vuex',
+  'vuex-easy-access',
 ])
 
 mix.options({