From fdf837c02ef15b9af8a98586dc05d5fe9cfaf844 Mon Sep 17 00:00:00 2001
From: thivatm <thivagartm@gmail.com>
Date: Tue, 9 Apr 2019 08:52:38 +0530
Subject: [PATCH] Added URL validations

---
 .../src/app/secure/create-post/create-post.component.css | 4 ++++
 .../app/secure/create-post/create-post.component.html    | 2 +-
 .../src/app/secure/create-post/create-post.component.ts  | 9 ++++++++-
 .../app/secure/create-stack/create-stack.component.css   | 5 +++++
 .../app/secure/create-stack/create-stack.component.html  | 4 ++--
 .../app/secure/create-stack/create-stack.component.ts    | 8 ++++++++
 6 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/stackle-app/src/app/secure/create-post/create-post.component.css b/stackle-app/src/app/secure/create-post/create-post.component.css
index a724b7e..b5ab173 100644
--- a/stackle-app/src/app/secure/create-post/create-post.component.css
+++ b/stackle-app/src/app/secure/create-post/create-post.component.css
@@ -2,6 +2,10 @@
   margin-top: 10vh;
 }
 
+.form-container .url-input:invalid {
+  color: red;
+}
+
 .form-container {
   display: flex;
   flex-direction: column;
diff --git a/stackle-app/src/app/secure/create-post/create-post.component.html b/stackle-app/src/app/secure/create-post/create-post.component.html
index 13cd4cb..74c42ce 100644
--- a/stackle-app/src/app/secure/create-post/create-post.component.html
+++ b/stackle-app/src/app/secure/create-post/create-post.component.html
@@ -21,7 +21,7 @@
                 </mat-select>
               </mat-form-field>
               <mat-form-field>
-                <input matInput placeholder="Repository *" [(ngModel)]="postObject.repository">
+                <input type="url" class="url-input" matInput placeholder="Repository *" [(ngModel)]="postObject.repository">
               </mat-form-field>
               <mat-form-field>
                 <input matInput placeholder="Issue" [(ngModel)]="postObject.linkIssue">
diff --git a/stackle-app/src/app/secure/create-post/create-post.component.ts b/stackle-app/src/app/secure/create-post/create-post.component.ts
index 40d2d79..bb906d2 100644
--- a/stackle-app/src/app/secure/create-post/create-post.component.ts
+++ b/stackle-app/src/app/secure/create-post/create-post.component.ts
@@ -49,8 +49,9 @@ export class CreatePostComponent implements OnInit {
       this.showSnackBar('Please enter a repository!');
     }else if(this.postObject.description == "" || this.postObject.description == undefined){
       this.showSnackBar('Please enter a description!');
+    }else if (!this.checkUrl(this.postObject.repository)){
+      this.showSnackBar('Please enter a valid URL to the repository!');
     }
-
     else {
       this.postObject.date = new Date();
       this.postObject.user = localStorage.getItem('username');
@@ -66,6 +67,12 @@ export class CreatePostComponent implements OnInit {
     }
   };
 
+  checkUrl(url: any) {
+    const regx = /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/;
+    let urlIsValid = new RegExp(regx).test(url);
+    return urlIsValid;
+  }
+
   clear = () => {
     this.postObject.title = "";
     this.postObject.org_name = "";
diff --git a/stackle-app/src/app/secure/create-stack/create-stack.component.css b/stackle-app/src/app/secure/create-stack/create-stack.component.css
index a724b7e..56d489d 100644
--- a/stackle-app/src/app/secure/create-stack/create-stack.component.css
+++ b/stackle-app/src/app/secure/create-stack/create-stack.component.css
@@ -6,6 +6,11 @@
   display: flex;
   flex-direction: column;
 }
+
+.form-container .url-input:invalid {
+  color: red;
+}
+
 .form-container > * {
   width: 100%;
 }
diff --git a/stackle-app/src/app/secure/create-stack/create-stack.component.html b/stackle-app/src/app/secure/create-stack/create-stack.component.html
index 6cc359b..edff921 100644
--- a/stackle-app/src/app/secure/create-stack/create-stack.component.html
+++ b/stackle-app/src/app/secure/create-stack/create-stack.component.html
@@ -17,10 +17,10 @@
                 <input matInput placeholder="Description *" [(ngModel)]="stackObject.description">
               </mat-form-field>
               <mat-form-field>
-                <input matInput placeholder="Stackle URL *" [(ngModel)]="stackObject.stackleUrl">
+                <input type="url" class="url-input" matInput placeholder="Stackle URL *" [(ngModel)]="stackObject.stackleUrl">
               </mat-form-field>
               <mat-form-field>
-                <input matInput placeholder="GitHub URL" [(ngModel)]="stackObject.githubUrl">
+                <input type="url" class="url-input" matInput placeholder="GitHub URL" [(ngModel)]="stackObject.githubUrl">
               </mat-form-field>
             </div>
           </mat-card-content>
diff --git a/stackle-app/src/app/secure/create-stack/create-stack.component.ts b/stackle-app/src/app/secure/create-stack/create-stack.component.ts
index 5d6c3aa..efd0206 100644
--- a/stackle-app/src/app/secure/create-stack/create-stack.component.ts
+++ b/stackle-app/src/app/secure/create-stack/create-stack.component.ts
@@ -32,6 +32,8 @@ export class CreateStackComponent implements OnInit {
       this.showSnackBar('Please enter a description!');
     }else if(this.stackObject.stackleUrl == undefined || this.stackObject.stackleUrl == ""){
       this.showSnackBar('Please enter the Stackle URL!');
+    }else if (!this.checkUrl(this.stackObject.stackleUrl) || !this.checkUrl(this.stackObject.githubUrl)){
+      this.showSnackBar('Please enter a Valid URL!');
     }else {
 
       this.stackService.createNewStack(this.stackObject).subscribe( response => {
@@ -47,6 +49,12 @@ export class CreateStackComponent implements OnInit {
 
   }
 
+  checkUrl(url: any) {
+    const regx = /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/;
+    let urlIsValid = new RegExp(regx).test(url);
+    return urlIsValid;
+  }
+
   clear() {
     this.stackObject = {};
   }