wip: change how styles are applied to the root app [skip ci]

Signed-off-by: Sekwah <[email protected]>

package.json

@@ -23,6 +23,7 @@
     "@coreui/coreui": "5.1.2",
     "@coreui/icons": "3.0.1",
     "@coreui/vue": "5.2.0",
+    "@vee-validate/rules": "^4.13.2",
     "axios": "1.7.5",
     "bootstrap": "^5.3.3",
     "bootstrap-table": "1.23.2",

src/App.vue

@@ -143,13 +143,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '@coreui/icons/css/free.min.css';
-$fa-font-path: 'font-awesome/fonts/';
-@import 'font-awesome/scss/font-awesome.scss';
-$simple-line-font-path: 'simple-line-icons/fonts/';
-@import 'simple-line-icons/scss/simple-line-icons.scss';
-@import 'bootstrap-vue/dist/bootstrap-vue.css';
-@import 'assets/scss/style';
-</style>

src/assets/scss/style.scss

@@ -1,3 +1,10 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+@import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
+
+@import '@coreui/icons/css/free.min.css';
+@import 'font-awesome/scss/font-awesome.scss';
+@import 'simple-line-icons/scss/simple-line-icons.scss';
+
 // If you want to override variables do it here
 @import 'variables';
 
@@ -15,3 +22,5 @@
 @import 'ie-fix';
 
 @import 'vue-multiselect/dist/vue-multiselect.css';
+
+

src/forms/BValidatedInputGroupFormInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <validation-provider
+  <Field
     :vid="id"
     :name="label"
     :rules="rules"
@@ -31,17 +31,17 @@
         {{ errors[0] }}
       </b-form-invalid-feedback>
     </b-form-group>
-  </validation-provider>
+  </Field>
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate';
+import { Field } from 'vee-validate';
 import common from '../shared/common';
 
 export default {
   name: 'BValidatedInputGroupFormInput',
   components: {
-    ValidationProvider,
+    Field,
   },
   props: {
     id: String,

src/main.js

@@ -13,8 +13,7 @@ import { getContextPath } from './shared/utils';
 import { VueToastr } from 'vue-toastr';
 import { createBootstrap } from 'bootstrap-vue-next';
 
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
+import './assets/scss/style.scss';
 
 const app = createApp(App);
 

src/validation/index.js

@@ -1,5 +1,10 @@
-import { configure } from 'vee-validate';
-import {} from 'vee-validate';
+import { configure, defineRule } from 'vee-validate';
+import {
+  required,
+  confirmed,
+  min_value,
+  max_value,
+} from '@vee-validate/rules';
 
 import i18n from '../i18n';
 
@@ -9,3 +14,8 @@ const { t } = i18n.global;
 configure({
   defaultMessage: (_, values) => t(`validation.${values._rule_}`, values),
 });
+
+defineRule('required', required);
+defineRule('confirmed', confirmed);
+defineRule('min_value', min_value);
+defineRule('max_value', max_value);

src/views/pages/Login.vue

@@ -6,7 +6,7 @@
           <b-card-group>
             <b-card no-body class="p-4">
               <b-card-body>
-                <validation-observer tag="form" v-slot="{ passes }">
+                <Form tag="form" v-slot="{ passes }">
                   <b-form @submit.prevent.stop="passes(login)">
                     <h1>{{ $t('message.login') }}</h1>
                     <p class="text-muted">{{ $t('message.login_desc') }}</p>
@@ -69,7 +69,7 @@
                       >{{ $t('message.login_more_options') }}</b-link
                     >
                   </b-form>
-                </validation-observer>
+                </Form>
               </b-card-body>
             </b-card>
             <b-card
@@ -99,19 +99,19 @@ import axios from 'axios';
 import Oidc from 'oidc-client';
 // bootstrap-table still relies on jQuery for ajax calls, even though there's a supported Vue wrapper for it.
 import $ from 'jquery';
-import { ValidationObserver } from 'vee-validate';
+import { Form } from 'vee-validate';
 import BValidatedInputGroupFormInput from '../../forms/BValidatedInputGroupFormInput.vue';
 import InformationalModal from '../modals/InformationalModal.vue';
 import EventBus from '../../shared/eventbus';
 import { getRedirectUrl, getContextPath } from '../../shared/utils';
-const qs = require('querystring');
+import qs from 'querystring';
 
 export default {
   name: 'Login',
   components: {
     InformationalModal,
     BValidatedInputGroupFormInput,
-    ValidationObserver,
+    Form,
   },
   data() {
     return {