Checked text validation on comments and modal

Author: agavgavi

static/components/comment/comment.html

@@ -35,9 +35,10 @@
                 <div v-if="!comment.edit">
                     {{comment.content}}
                 </div>
-                <textarea v-if="comment.edit" :class="{'is-danger' : comment.error}"
+                <textarea v-if="comment.edit" :class="{'is-danger' : comment.error || comment.text_type_error}"
                           v-model="comment.new_content" class="textarea"></textarea>
                 <span class="has-text-danger" v-if="comment.error">Required Field</span>
+                <span class="has-text-danger" v-if="comment.text_type_error">Field must be Alphanumeric</span>
             </div>
         </div>
         <div class="level" v-if="comment.edit">
@@ -55,12 +56,10 @@
     </div>
     <div class="box" v-if="edit">
         <div class="columns">
-            <!--div class="column is-one-fifth">
-                <img src="https://laughingsquid.com/wp-content/uploads/2014/11/Screenshot-2014-11-19-17.41.33.png">
-            </div-->
             <div class="column">
-                <textarea :class="{'is-danger' : error}" v-model="new_comment" class="textarea"></textarea>
+                <textarea :class="{'is-danger' : error || text_type_error}" v-model="new_comment" class="textarea"></textarea>
                 <span v-if="error" class="has-text-danger">Required Field</span>
+                <span class="has-text-danger" v-if="text_type_error">Field must be Alphanumeric</span>
             </div>
         </div>
         <!-- i'm not sure why, but to get a level-right to display correctly, there needs to be a level left -->

static/components/comment/comment.js

@@ -19,7 +19,8 @@
             add_url: this.add_url,
             edit_url: this.edit_url,
             delete_url: this.delete_url,
-            error: false
+            error: false,
+            text_type_error: false,
         };
 
         data = comment.methods.load(data);
@@ -33,6 +34,7 @@
             c.show_settings = false;
             c.edit = false;
             c.error = false;
+            c.text_type_error = false;
         }
         return comments;
     };
@@ -75,6 +77,16 @@
             return;
         }
 
+        if (!this.new_comment || sluggo.checkNameString(this.new_comment) === false) {
+            this.text_type_error = true;
+            this.sleep(2000)().then(() => {
+                this.text_type_error = false;
+            });
+            return;
+        }
+
+
+
         axios.post(this.add_url, {
             content: this.new_comment,
             ticket_id: this.ticket_id
@@ -120,7 +132,16 @@
             selected.error = true;
             this.comments.splice(idx, 1, selected);
             this.sleep(2000)().then(() => {
-                selected.error = false;
+                selected.text_type_error = false;
+                this.comments.splice(idx, 1, selected);
+            });
+            return;
+        }
+        if (sluggo.checkNameString(selected.new_content) === false) {
+            selected.text_type_error = true;
+            this.comments.splice(idx, 1, selected);
+            this.sleep(2000)().then(() => {
+                selected.text_type_error = false;
                 this.comments.splice(idx, 1, selected);
             });
             return;

static/components/ticket_modal/ticket_modal.html

@@ -6,16 +6,18 @@
                 <div class="column is-three-quarters">
                     <div class="field">
                         <span class="subtitle">Title</span>
-                        <input type="text" v-model="ticket.ticket_title" class="input" :class="{'is-danger' : text_error}" placeholder="Enter new title here">
+                        <input type="text" v-model="ticket.ticket_title" class="input" :class="{'is-danger' : text_error || title_type_error}" placeholder="Enter new title here">
                         <span class="has-text-danger" v-if="text_error">Required Field</span>
+                        <span class="has-text-danger" v-if="title_type_error">Field must be Alphanumeric</span>
                     </div>
                     <div class="field">
                         <span class="subtitle">Tags</span>
                         <v-select class="tag-chooser" maxHeight="100px" multiple placeholder="Choose Tags" v-model="selected" :options="options"></v-select>
                     </div>
                     <div class="field">
                         <span class="subtitle">Description</span>
-                        <textarea v-model="ticket.ticket_text" class="textarea is-fullwidth" placeholder="Enter new ticket here"></textarea>
+                        <textarea v-model="ticket.ticket_text" class="textarea is-fullwidth" :class="{'is-danger' : text_type_error}" placeholder="Enter new ticket here"></textarea>
+                        <span class="has-text-danger" v-if="text_type_error">Field must be Alphanumeric</span>
                     </div>
                 </div>
                 <div class="column">

static/components/ticket_modal/ticket_modal.js

@@ -19,6 +19,8 @@ Vue.component('v-select', VueSelect.VueSelect);
             assigned_user: "",
             text_error: false,
             date_error: false,
+            title_type_error: false,
+            text_type_error: false,
             time_zone: luxon.DateTime.local().zoneName
         };
     };
@@ -28,8 +30,8 @@ Vue.component('v-select', VueSelect.VueSelect);
             return new Promise(resolve => setTimeout(() => resolve(x), ms));
         };
     };
-    
-    
+
+
     // the data can either come in mm / dd / yyyy (on mac) or
     // yyyy-mm-dd because using normal things is not the safari way
     // so we have a function that handles that hogwash for us
@@ -71,7 +73,7 @@ Vue.component('v-select', VueSelect.VueSelect);
             });
             error = true;
         }
-        
+
         if(!this.ticket.ticket_title || this.ticket.ticket_title.length === 0) {
             this.text_error = true;
             this.sleep(2000)().then(() => {
@@ -80,6 +82,23 @@ Vue.component('v-select', VueSelect.VueSelect);
             error = true;
         }
 
+        if(sluggo.checkNameString(this.ticket.ticket_title) === false) {
+            this.title_type_error = true;
+            this.sleep(2000)().then(() => {
+                this.title_type_error = false;
+            });
+            error = true;
+
+        }
+
+        if(sluggo.checkNameString(this.ticket.ticket_text) === false) {
+            this.text_type_error = true;
+            this.sleep(2000)().then(() => {
+                this.text_type_error = false;
+            });
+            error = true;
+
+        }
         if(!error) {
 
             // TODO: convert the timestamp
@@ -99,4 +118,4 @@ Vue.component('v-select', VueSelect.VueSelect);
             ticket_modal.template = template.data;
             return ticket_modal;
         });
-})();
+})();

static/js/sluggo.js

@@ -29,6 +29,10 @@ sluggo.isOverdue = (dueDate) => {
 
 sluggo.checkTagsList = (tag_list) => {
 
+    if(!tag_list) {
+        return false;
+    }
+
     if(tag_list.length === 0) {
         return true;
     }
@@ -48,6 +52,10 @@ sluggo.checkTagsList = (tag_list) => {
 
 sluggo.checkTagsString = (tag) => {
 
+    if(!tag) {
+        return false;
+    }
+
     if(tag.length === 0) {
         return true;
     }
@@ -69,6 +77,11 @@ sluggo.checkTagsString = (tag) => {
 
 sluggo.checkNameString = (name) => {
 
+
+    if(!name) {
+        return false;
+    }
+
     if(name.length === 0) {
         return true;
     }