Refactor the confirm dialog to re-use

src/app/app.module.ts

@@ -36,7 +36,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BusinessComponent } from './business/business.component';
 import { SearchOptionsPipe } from './searchoptions.pipe';
 import { TermsComponent } from './terms/terms.component';
-import { LogoutComponent } from './logout/logout.component';
 
 @NgModule({
   declarations: [
@@ -56,8 +55,7 @@ import { LogoutComponent } from './logout/logout.component';
 	ListOrdersComponent,
 	BusinessComponent,
 	SearchOptionsPipe,
- TermsComponent,
- LogoutComponent
+	TermsComponent
   ],
   imports: [
     BrowserModule,

src/app/cancel/cancel.component.css

@@ -1,3 +1,7 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+mat-dialog-content {
+	max-width: 400px;
+}

src/app/cancel/cancel.component.html

@@ -1,7 +1,7 @@
-<h3 mat-dialog-title class="text">Cancel Order</h3>
+<h3 mat-dialog-title class="text">{{title}}</h3>
 
 <mat-dialog-content>
-	<p class="text">Are you sure you want to cancel the order?</p>
+	<p class="text">{{msg}}</p>
 </mat-dialog-content>
 
 <mat-dialog-actions>

src/app/cancel/cancel.component.ts

@@ -8,10 +8,16 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialo
 })
 
 export class CancelComponent {
+	title: string;
+	msg: string;
 
 	constructor(
-		private dialogRef: MatDialogRef<CancelComponent>
-	) {}
+		private dialogRef: MatDialogRef<CancelComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: { title: string, msg: string}
+	) {
+		this.title = data.title;
+		this.msg = data.msg;
+	}
 
 	confirm() {
 		this.dialogRef.close(true);

src/app/header/header.component.ts

@@ -3,7 +3,7 @@ import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {FullnodeService} from '../fullnode.service';
 import { Router } from '@angular/router';
 import { UserService } from '../user.service';
-import { LogoutComponent } from '../logout/logout.component';
+import { CancelComponent } from '../cancel/cancel.component';
 import {Subscription, Observable} from 'rxjs';
 
 import {Owner} from '../owner.model';
@@ -73,8 +73,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
+		dialogConfig.data = {title: 'Logout?', msg: 'Are you sure you want to disconnect from ZGo? You will have to re-link your wallet via shielded memo.'};
 
-		const dialogRef = this.dialog.open(LogoutComponent, dialogConfig);
+		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe(val => {
 			if(val){
 				console.log('Logout!');

src/app/logout/logout.component.css

@@ -1,3 +0,0 @@
-* {
-	font-family: 'Spartan', sans-serif;
-}

src/app/logout/logout.component.html

@@ -1,28 +0,0 @@
-<h3 mat-dialog-title>Logout?</h3>
-
-<mat-dialog-content>
-	<div align="center">
-		<p>Are you sure you want to disconnect this device from ZGo?</p>
-		<p>You will have to re-link your device to ZGo via Zcash shielded memo if you want to access your shop again.</p>
-	</div>
-</mat-dialog-content>
-
-
-<mat-dialog-actions>
-	<table cellspacing="0" width="100%">
-		<tr>
-			<td>
-				<button mat-raised-button color="primary" (click)="confirm()">
-					Yes
-				</button>
-
-			</td>
-			<td align="right">
-				<button mat-raised-button (click)="close()">
-					No
-				</button>
-
-			</td>
-		</tr>
-	</table>
-</mat-dialog-actions>

src/app/logout/logout.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LogoutComponent } from './logout.component';
-
-describe('LogoutComponent', () => {
-  let component: LogoutComponent;
-  let fixture: ComponentFixture<LogoutComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ LogoutComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LogoutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/logout/logout.component.ts

@@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-
-@Component({
-  selector: 'app-logout',
-  templateUrl: './logout.component.html',
-  styleUrls: ['./logout.component.css']
-})
-export class LogoutComponent implements OnInit {
-
-  constructor(
-	  private dialogRef: MatDialogRef<LogoutComponent>
-  ) { }
-
-  ngOnInit(): void {
-  }
-
-  confirm() {
-	  this.dialogRef.close(true);
-  }
-
-  close() {
-	  this.dialogRef.close(false);
-  }
-
-}

src/app/order/order.component.ts

@@ -65,6 +65,7 @@ export class OrderComponent implements OnInit{
 
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
+		dialogConfig.data = {title: 'Cancel Order?', msg: 'Are you sure you want to cancel the order?'};
 
 		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe((val) => {