Add generic confirm dialog.

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html

+<mat-toolbar class="dialog-toolbar">
+    <h1 class="dialog-toolbar-title">{{title}}</h1>
+    <button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button>
+</mat-toolbar>
+<mat-dialog-content id="confirmation-dialog" class="mat-typography dialog-with-toolbar">
+	<mat-dialog-content>
+		<p class="dialog-text" *ngFor="let line of text">{{line}}</p>
+	</mat-dialog-content>
+	<mat-dialog-actions align="end">
+        <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
+		<button mat-button [color]="confirmColor" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
+	</mat-dialog-actions>
+</mat-dialog-content>
\ No newline at end of file

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss

+.dialog-text {
+  color: #7e7e7e;
+  font-size: 16px;
+  margin-top: 1.2em;
+}

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemoveCourseConfirmDialogComponent } from './remove-course-confirm-dialog.component';
+
+describe('RemoveCourseConfirmDialogComponent', () => {
+  let component: RemoveCourseConfirmDialogComponent;
+  let fixture: ComponentFixture<RemoveCourseConfirmDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [RemoveCourseConfirmDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RemoveCourseConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts

+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'cse-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss'],
+})
+export class ConfirmDialogComponent {
+  title: string;
+  text: string[];
+  cancelText: string;
+  confirmText: string;
+  confirmColor: string;
+
+  constructor(
+    private dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) data: any,
+  ) {
+    // this.course = data.course;
+    // this.type = data.type;
+    const {
+      title = 'Are you sure?',
+      text = 'Are you sure you want to do this?',
+      cancelText = 'Cancel',
+      confirmText = 'Confirm',
+      confirmColor = 'primary',
+    } = data;
+
+    this.title = title;
+    this.text = text;
+    this.cancelText = cancelText;
+    this.confirmText = confirmText;
+    this.confirmColor = confirmColor;
+
+    if (typeof text === 'string') {
+      this.text = [text];
+    }
+  }
+
+  confirm() {
+    this.dialogRef.close({ confirmed: true });
+  }
+
+  cancel() {
+    this.dialogRef.close({ confirmed: false });
+  }
+}

src/app/shared/shared.module.ts

@@ -26,6 +26,8 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { CourseDetailsDialogComponent } from '../degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
 
+import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.component';
+
 const modules = [
   CommonModule,
   FormsModule,
@@ -57,6 +59,12 @@ const pipes = [
 @NgModule({
   imports: [modules],
   exports: [modules, pipes, CourseDetailsComponent],
-  declarations: [pipes, CourseDetailsComponent, CourseDetailsDialogComponent],
+  entryComponents: [ConfirmDialogComponent],
+  declarations: [
+    pipes,
+    CourseDetailsComponent,
+    CourseDetailsDialogComponent,
+    ConfirmDialogComponent,
+  ],
 })
 export class SharedModule {}