fixed some remains from old vee validate

src/App.vue

@@ -3,6 +3,7 @@
         <div id="bg">
             <img src="./assets/lens.jpg" alt="">
         </div>
+        {{dismissCountDown}}
         <sync-loader :loading="isLoading"></sync-loader>
         <b-alert
                 :show="dismissCountDown"

src/api/Repository.js

@@ -65,6 +65,7 @@ api.interceptors.response.use(function (response) {
             }
         });
     } else {
+        console.error(error);
         return Promise.reject(error);
     }
 });

src/components/Login.vue

@@ -1,10 +1,11 @@
 <!-- components/Login.vue -->
 <template>
     <div>
+        <section class="hero is-primary">
+            <div class="hero-body">
+                <div class="container">
         <div v-if="!authenticated">
-            <section class="hero is-primary">
+
-                <div class="hero-body">
-                    <div class="container">
                         <div class="has-text-centered">
                             <h2 class="title">Login or Register</h2>
                             <p class="subtitle error-msg">{{ errorMsg }}</p>
@@ -72,9 +73,7 @@
                                 </form>
                             </b-tab>
                         </b-tabs>
-                    </div>
+
-                </div>
-            </section>
         </div>
         <div v-else>
             <h1>{{ $t('You are already logged in!') }}</h1>
@@ -84,6 +83,9 @@
             </h2>
             <p><a href="" @click.prevent="logout()">{{$t('logout')}}</a></p>
         </div>
+                </div>
+            </div>
+        </section>
     </div>
 </template>
 

src/components/Profile.vue

@@ -91,7 +91,7 @@
         </div>
       </div>
     </section>
-    {{ profile }}
+    <!--{{ profile }}-->
   </div>
 </template>
 

src/components/Recorders.vue

@@ -739,14 +739,16 @@
             saveRecorder() {
                 this.$parent.$data.isLoading = true;
                 recorderRepository.createRecorder(this.form)
-                    .then(() => {
+                    .then((result) => {
+                        console.info(result);
                         this.$store.dispatch('loadRecorders')
                             .then(() => {
                                 this.$parent.$data.isLoading = false;
                                 this.tabIndex = 0;
                             });
-                    }).catch((msg) => {
+                    }).catch((error) => {
-                    this.showErrorMessage('Could not safe recorder!');
+                        console.error("could not safe recorder! ("+error.data+")");
+                    this.$parent.showErrorMessage('Could not safe recorder!');
                 });
             },
             deleteRecorder(id) {
@@ -759,11 +761,11 @@
                             });
                     });
             },
-            showErrorMessage(msg) {
+            //showErrorMessage(msg) {
-                this.$parent.$data.isLoading = false;
+            //   this.$parent.$data.isLoading = false;
-                this.$parent.$data.showAlert = true;
+            //    this.$parent.$data.showAlert = true;
-                this.$parent.$data.alertMessage = msg;
+            //    this.$parent.$data.alertMessage = msg;
-            },
+            //},
             filterShowAllRecorders(){
                 this.onlyShowOfflineRecorders = false;
                 this.onlyShowNonOfflineRecorders = false;

src/components/Rooms.vue

@@ -37,16 +37,15 @@
                                         </a>
                                     </span>
                   <b-input-group v-else>
-                    <ValidationProvider v-slot="{ errors }">
+                    <ValidationProvider v-slot="{ errors }" rules="required|min:3">
                       <b-form-input :id="room.id+'_name'" name="name"
                                     v-model="updateValues[room.id+'_name']"
-                                    v-validate="'required|min:3'"
+                                    v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
-                                    v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
                                     class="form-control" type="text"
                                     :placeholder="'Name ('+room.name +')'"
                                     required></b-form-input>
                       <b-input-group-append>
-                        <b-button :disabled="errors.has('name')"
+                        <b-button :disabled="errors.length > 0"
                                   @click="updateRoom(room.id, 'name')"
                                   variant="outline-success">
                           <font-awesome-icon icon="check"></font-awesome-icon>
@@ -66,16 +65,15 @@
                                         </a>
                                     </span>
                   <b-input-group v-else>
-                    <ValidationProvider v-slot="{ errors }">
+                    <ValidationProvider v-slot="{ errors }" rules="required|min:3">
                       <b-form-input :id="room.id+'_building_number'" name="building_number"
                                     v-model="updateValues[room.id+'_building_number']"
-                                    v-validate="'required|min:3'"
+                                    v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
-                                    v-bind:class="{'is-danger': errors.has('building_number'), 'is-invalid': errors.has('building_number')}"
                                     class="form-control" type="text"
                                     :placeholder="$t('Building_number') +'('+room.building_number +')'"
                                     required></b-form-input>
                       <b-input-group-append>
-                        <b-button :disabled="errors.has('building_number')"
+                        <b-button :disabled="errors.length > 0"
                                   @click="updateRoom(room.id, 'building_number')"
                                   variant="outline-success">
                           <font-awesome-icon icon="check"></font-awesome-icon>
@@ -93,16 +91,15 @@
                                         </a>
                                     </span>
                   <b-input-group v-else>
-                    <ValidationProvider v-slot="{ errors }">
+                    <ValidationProvider v-slot="{ errors }" rules="required|min:3">
                       <b-form-input :id="room.id+'_building_name'" name="building_name"
                                     v-model="updateValues[room.id+'_building_name']"
-                                    v-validate="'required|min:3'"
+                                    v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
-                                    v-bind:class="{'is-danger': errors.has('building_name'), 'is-invalid': errors.has('building_name')}"
                                     class="form-control" type="text"
                                     :placeholder="'Building name ('+room.building_name +')'"
                                     required></b-form-input>
                       <b-input-group-append>
-                        <b-button :disabled="errors.has('building_name')"
+                        <b-button :disabled="errors.length > 0"
                                   @click="updateRoom(room.id, 'building_name')"
                                   variant="outline-success">
                           <font-awesome-icon icon="check"></font-awesome-icon>
@@ -130,7 +127,7 @@
                                     @blur="updateRoom(room.id, 'alternate_name')"
                                     @keyup.enter="updateRoom(room.id, 'alternate_name')"></b-form-input>
                       <b-input-group-append>
-                        <b-button :disabled="errors.has('alternate_name')"
+                        <b-button :disabled="errors.length > 0"
                                   @click="updateRoom(room.id, 'alternate_name')"
                                   variant="outline-success">
                           <font-awesome-icon icon="check"></font-awesome-icon>
@@ -148,18 +145,17 @@
                                         </a>
                                     </span>
                   <b-input-group v-else size="sm">
-                    <ValidationProvider v-slot="{ errors }">
+                    <ValidationProvider v-slot="{ errors }" rules="required|min:3">
                       <b-form-input name="number"
                                     v-model="updateValues[room.id+'_number']"
-                                    v-validate="'required|min:3'"
+                                    v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
-                                    v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
                                     class="form-control" type="text"
                                     :placeholder="'Room number ('+room.number +')'"
                                     @blur="updateRoom(room.id, 'number')"
                                     @keyup.enter="updateRoom(room.id, 'number')"
                                     required></b-form-input>
                       <b-input-group-append>
-                        <b-button :disabled="errors.has('number')"
+                        <b-button :disabled="errors.length > 0"
                                   @click="updateRoom(room.id, 'number')"
                                   variant="outline-success">
                           <font-awesome-icon icon="check"></font-awesome-icon>
@@ -211,7 +207,7 @@
                         </option>
                       </select>
                       <b-input-group-append>
-                        <b-button :disabled="errors.has('recorder_id')"
+                        <b-button :disabled="errors.length > 0"
                                   @click="updateRoom(room.id, 'recorder_id')"
                                   variant="outline-success">
                           <font-awesome-icon icon="check"></font-awesome-icon>
@@ -345,13 +341,13 @@
       </b-tabs>
     </section>
 
+    <!--
     <hr>
 
     <div class="column">
       <section class="section" id="results">
         <div class="box">
           <ul>
-            <!-- loop through all the `form` properties and show their values -->
             <li v-for="(item, k) in form">
               <strong>{{ k }}:</strong> {{ item }}
             </li>
@@ -366,6 +362,8 @@
       </section>
     </div>
 
+    -->
+
   </div>
 </template>
 

src/main.ts

@@ -7,7 +7,6 @@ import router from './router';
 import store from './store';
 import VueSweetalert2 from 'vue-sweetalert2';
 import VueCookies from 'vue-cookies';
-import VueLogger from 'vuejs-logger';
 import VueSocketIOExt from 'vue-socket.io-extended';
 import io from 'socket.io-client';
 import i18n from '@/plugins/i18n';

src/validation.js

@@ -1,5 +1,5 @@
-import { extend } from 'vee-validate';
+import {extend} from 'vee-validate';
-import { required, email } from 'vee-validate/dist/rules';
+import {required, email} from 'vee-validate/dist/rules';
 import isIp from 'is-ip';
 
 extend('positive', value => {
@@ -11,19 +11,33 @@ const ip6_re = new RegExp("(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F
 
 const mac_re = new RegExp("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$");
 
+const fqdn_re = new RegExp("^(?!:\\/\\/)(?=.{1,255}$)((.{1,63}\\.){1,127}(?![0-9]*$)[a-z0-9-]+\\.?)$");
+
 extend('ip', value => {
     return isIp.v4(value);
-})
+});
+
 extend('ip6', value => {
     return isIp.v6(value);
-})
+});
 extend('ip6', value => {
     return isIp.v6(value);
-})
+});
 
 extend('mac', value => {
     return mac_re.test(value);
-})
+});
+
+extend('ip_or_fqdn', value => {
+    if (value === null) return true;
+    if (isIp.v4(value)) {
+        return true;
+    } else if (isIp.v6(value)) {
+        return true;
+    } else {
+        return fqdn_re.test(value);
+    }
+});
 
 
 //extend('email', email);

src/views/About.vue

@@ -1,11 +1,29 @@
 <template>
-  <div class="about">
+    <div class="about">
-    <h1>This is an about page</h1>
+        <h1>This is an about page</h1>
-  </div>
+    </div>
 </template>
 
 <style lang="scss">
-.about {
+    .about {
-  background: $bg-classroom;
+        background: $bg-classroom;
-}
+    }
 </style>
+
+<script>
+    import {Vue} from "vue-property-decorator";
+
+    export default class Home extends Vue {
+        data() {
+            return {};
+        }
+
+        mounted() {
+            this.$parent.$data.isLoading = true;
+            this.$parent.$data.dismissCountDown = 5;
+
+        }
+
+    }
+
+</script>

src/views/NotFound.vue

@@ -1,6 +1,15 @@
 <template>
     <div>
-        <p>404 - Not Found -> have you meant... blabla (GT)</p>
+        <section class="hero is-primary">
+            <div class="hero-body">
+                <div class="container has-text-centered">
+                    <div class="clearfix">
+                        <h1>Requested resource could not be found!</h1>
+                        <p>404 - Not Found -> have you meant... blabla (GT)</p>
+                    </div>
+                </div>
+            </div>
+        </section>
     </div>
 </template>
 
@@ -8,6 +17,6 @@
     export default {
         created() {
             // window.location.href = "/my-new-404-page.html";
-        }
+        },
     };
 </script>