handle errors better.

add dashboard location validation.

frontend/src/app/pages/dashboard/dashboard.component.html

@@ -79,16 +79,34 @@
             id="remoteDashboardLocation"
             class="form-control"
             placeholder="https://gist.github.com/..."
+            pattern="https://gist.github.com/.*"
             name="remoteDashboardLocation"
             type="url"
             [(ngModel)]="dashboardLocation"
+            #dashboardLocationField="ngModel"
           />
         </div>
       </div>
+
+      <div *ngIf="dashboardLocationField.invalid && (dashboardLocationField.dirty || dashboardLocationField.touched)"
+           class="alert alert-danger">
+
+        <div *ngIf="dashboardLocationField.errors?.['required']">
+          Dashboard Location is required.
+        </div>
+        <div *ngIf="dashboardLocationField.errors?.['pattern']">
+          Dashboard Location must be a valid github gist url.
+        </div>
+      </div>
+
+      <div *ngIf="dashboardLocationError" class="alert alert-danger">
+        {{dashboardLocationError}}
+      </div>
+
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" [disabled]="addDashboardLoading" (click)="addDashboardLocation()">Add</button>
+    <button type="button" class="btn  btn-outline-indigo" [disabled]="addDashboardLoading" (click)="addDashboardLocation()">Add</button>
   </div>
 </ng-template>
 

frontend/src/app/pages/dashboard/dashboard.component.ts

@@ -36,6 +36,7 @@ export class DashboardComponent implements OnInit {
   //dashboardLocation is used to store the location of the dashboard that we're trying to add
   addDashboardLoading: boolean = false
   dashboardLocation: string = ''
+  dashboardLocationError: string = ''
 
   @ViewChild(GridstackComponent) gridComp?: GridstackComponent;
 
@@ -140,6 +141,7 @@ export class DashboardComponent implements OnInit {
 
   public addDashboardLocation(){
     this.addDashboardLoading = true
+    this.dashboardLocationError = ''
     this.fastenApi.addDashboardLocation(this.dashboardLocation).subscribe((result) => {
       console.log("Added Remote Dashboard", result)
       this.addDashboardLoading = false
@@ -151,6 +153,8 @@ export class DashboardComponent implements OnInit {
     }, (error) => {
       console.log("Error Adding Remote Dashboard", error)
       this.addDashboardLoading = false
+      this.dashboardLocationError = error
+
       },
     () => {
       console.log("Completed Adding Remote Dashboard")