remove base-input, validation from bootstrap

frontend/src/components/BaseButton.vue

@@ -1,75 +0,0 @@
-<template>
-  <b-button
-    :type="nativeType"
-    :disabled="disabled || loading"
-    @click="handleClick"
-    class="base-button"
-    :variant="!outline ? type : `outline-${type}`"
-    :size="size"
-    :block="block"
-    :class="[
-      { 'rounded-circle': round },
-      { 'btn-wd': wide },
-      { 'btn-icon btn-fab': icon },
-      { 'btn-link': link },
-      { disabled: disabled },
-    ]"
-  >
-    <slot name="loading">
-      <i v-if="loading" class="fas fa-spinner fa-spin"></i>
-    </slot>
-    <slot></slot>
-  </b-button>
-</template>
-<script>
-export default {
-  name: 'base-button',
-  props: {
-    round: Boolean,
-    icon: Boolean,
-    block: Boolean,
-    loading: Boolean,
-    wide: Boolean,
-    disabled: Boolean,
-    type: {
-      type: String,
-      default: 'default',
-      description: 'Button type (primary|secondary|danger etc)',
-    },
-    nativeType: {
-      type: String,
-      default: 'button',
-      description: 'Button native type (e.g button, input etc)',
-    },
-    size: {
-      type: String,
-      default: '',
-      description: 'Button size (sm|lg)',
-    },
-    outline: {
-      type: Boolean,
-      description: 'Whether button is outlined (only border has color)',
-    },
-    link: {
-      type: Boolean,
-      description: 'Whether button is a link (no borders or background)',
-    },
-  },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt)
-    },
-  },
-}
-</script>
-<style lang="scss">
-.base-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  i {
-    padding: 0 3px;
-  }
-}
-</style>

frontend/src/components/index.js

@@ -1,6 +1,5 @@
 import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
-import BaseButton from './BaseButton.vue'
 
 import BaseTable from './BaseTable.vue'
 
@@ -15,7 +14,6 @@ import Collapse from './Collapse/Collapse.vue'
 import CollapseItem from './Collapse/CollapseItem.vue'
 import BaseSlider from './BaseSlider.vue'
 
-
 import SidebarPlugin from './SidebarPlugin'
 
 export {
@@ -30,7 +28,6 @@ export {
   TabPane,
   Tabs,
   BaseSlider,
-  BaseButton,
   Collapse,
   CollapseItem,
 }

frontend/src/plugins/dashboard-plugin.js

@@ -3,7 +3,7 @@ import '@/polyfills'
 // Notifications plugin. Used on Notifications page
 import Notifications from '@/components/NotificationPlugin'
 // Validation plugin used to validate forms
-import { configure, extend } from 'vee-validate'
+import { /* configure, */ extend, localize } from 'vee-validate'
 // A plugin file where you could register global components used across the app
 import GlobalComponents from './globalComponents'
 // A plugin file where you could register global directives
@@ -11,14 +11,11 @@ import GlobalDirectives from './globalDirectives'
 // Sidebar on the right. Used as a local plugin in DashboardLayout.vue
 import SideBar from '@/components/SidebarPlugin'
 
-// vue-bootstrap
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
-
 // asset imports
 import '@/assets/scss/argon.scss'
 import '@/assets/vendor/nucleo/css/nucleo.css'
 import * as rules from 'vee-validate/dist/rules'
-import { messages } from 'vee-validate/dist/locale/en.json'
+import en, { messages } from 'vee-validate/dist/locale/en.json'
 
 import VueQrcodeReader from 'vue-qrcode-reader'
 import VueQrcode from 'vue-qrcode'
@@ -35,6 +32,11 @@ import Loading from 'vue-loading-overlay'
 // import the styles
 import 'vue-loading-overlay/dist/vue-loading.css'
 
+// vue-bootstrap
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
+localize('en', en)
+
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
@@ -55,12 +57,12 @@ export default {
     Vue.use(VueQrcode)
     Vue.use(VueFlatPickr)
     Vue.use(Loading)
-    configure({
-      classes: {
-        valid: 'is-valid',
-        invalid: 'is-invalid',
-        dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
-      },
-    })
+    // configure({
+    //  classes: {
+    //    valid: 'is-valid',
+    //    invalid: 'is-invalid',
+    //    dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
+    //  },
+    // })
   },
 }

frontend/src/plugins/globalComponents.js

@@ -1,16 +1,13 @@
 import BaseInput from '@/components/Inputs/BaseInput.vue'
 import Card from '@/components/Cards/Card.vue'
 import StatsCard from '@/components/Cards/StatsCard.vue'
-import BaseButton from '@/components/BaseButton.vue'
 import Badge from '@/components/Badge.vue'
 import BaseNav from '@/components/Navbar/BaseNav'
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 
-
 const GlobalComponents = {
   install(Vue) {
     Vue.component(Badge.name, Badge)
-    Vue.component(BaseButton.name, BaseButton)
     Vue.component(BaseInput.name, BaseInput)
     Vue.component(BaseNav.name, BaseNav)
     Vue.component(Card.name, Card)

frontend/src/views/Pages/Login.vue

@@ -22,34 +22,68 @@
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('login') }}</small>
               </div>
-              <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <base-input
-                    alternative
-                    class="mb-3"
+
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
+                <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+                  <validation-provider
                     name="Email"
                     :rules="{ required: true, email: true }"
-                    prepend-icon="ni ni-email-83"
-                    placeholder="Email"
-                    v-model="model.email"
-                  ></base-input>
+                    v-slot="validationContext"
+                  >
+                    <b-form-group
+                      class="mb-3"
+                      id="example-input-group-1"
+                      label="Email"
+                      label-for="example-input-1"
+                    >
+                      <b-form-input
+                        id="example-input-1"
+                        name="example-input-1"
+                        v-model="model.email"
+                        placeholder="Email"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="input-1-live-feedback"
+                      ></b-form-input>
 
-                  <b-input-group>
-                    <b-form-input
-                      class="mb-0"
-                      v-model="model.password"
-                      name="Password"
-                      :type="passwordVisible ? 'text' : 'password'"
-                      prepend-icon="ni ni-lock-circle-open"
-                      :placeholder="$t('form.password')"
-                    ></b-form-input>
+                      <b-form-invalid-feedback id="input-1-live-feedback">
+                        {{ validationContext.errors[0] }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </validation-provider>
 
-                    <b-input-group-append>
-                      <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                        <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                      </b-button>
-                    </b-input-group-append>
-                  </b-input-group>
+                  <validation-provider
+                    :name="$t('form.password')"
+                    :rules="{ required: true }"
+                    v-slot="validationContext"
+                  >
+                  <b-form-group
+                      class="mb-5"
+                      id="example-input-group-1"
+                      :label="$t('form.password')"
+                      label-for="example-input-1"
+                    >
+                    <b-input-group >
+                      <b-form-input
+                        id="input-pwd"
+                        name="input-pwd"
+                        v-model="model.password"
+                        :placeholder="$t('form.password')"
+                        :type="passwordVisible ? 'text' : 'password'"
+                        :state="getValidationState(validationContext)"
+                        aria-describedby="input-2-live-feedback"
+                      ></b-form-input>
+
+                      <b-input-group-append>
+                        <b-button variant="outline-primary" @click="togglePasswordVisibility">
+                          <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
+                        </b-button>
+                      </b-input-group-append>
+                    </b-input-group>
+                    <b-form-invalid-feedback id="input-2-live-feedback">
+                      {{ validationContext.errors[0] }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                  </validation-provider>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
                     <span class="alert-text bv-example-row">
@@ -62,12 +96,9 @@
                       </b-row>
                     </span>
                   </b-alert>
-
-                  <!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> -->
-                  <div class="text-center" ref="submitButton">
-                    <base-button type="secondary" native-type="submit" class="my-4">
-                      {{ $t('site.login.signin') }}
-                    </base-button>
+                  <div class="text-center">
+                      <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset')}}</b-button>
+                  <b-button type="submit" variant="primary" >{{ $t('form.save')}}</b-button>                
                   </div>
                 </b-form>
               </validation-observer>
@@ -109,6 +140,20 @@ export default {
     }
   },
   methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
+    resetForm() {
+      this.model = {
+        email: null,
+        password: null,
+      }
+
+      this.$nextTick(() => {
+        this.$refs.observer.reset()
+      })
+    },
+
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },

frontend/test/testSetup.js

@@ -0,0 +1,44 @@
+import { createLocalVue } from '@vue/test-utils'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import Vuex from 'vuex'
+import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
+import * as rules from 'vee-validate/dist/rules'
+
+import { messages } from 'vee-validate/dist/locale/en.json'
+import BaseInput from '@/components/Inputs/BaseInput.vue'
+import RegeneratorRuntime from 'regenerator-runtime'
+import Notifications from '@/components/NotificationPlugin'
+import SideBar from '@/components/SidebarPlugin'
+import VueRouter from 'vue-router'
+import VueQrcode from 'vue-qrcode'
+import StatsCard from '@/components/Cards/StatsCard.vue'
+
+import VueMoment from 'vue-moment'
+
+import clickOutside from '@/directives/click-ouside.js'
+import { focus } from 'vue-focus'
+
+global.localVue = createLocalVue()
+
+Object.keys(rules).forEach((rule) => {
+  extend(rule, {
+    ...rules[rule], // copies rule configuration
+    message: messages[rule], // assign message
+  })
+})
+
+global.localVue.use(BootstrapVue)
+global.localVue.use(Vuex)
+global.localVue.use(IconsPlugin)
+global.localVue.use(RegeneratorRuntime)
+global.localVue.use(Notifications)
+global.localVue.use(SideBar)
+global.localVue.use(VueRouter)
+global.localVue.use(VueQrcode)
+global.localVue.use(VueMoment)
+global.localVue.component(BaseInput.name, BaseInput)
+global.localVue.component('validation-provider', ValidationProvider)
+global.localVue.component('validation-observer', ValidationObserver)
+global.localVue.component(StatsCard.name, StatsCard)
+global.localVue.directive('click-outside', clickOutside)
+global.localVue.directive('focus', focus)