From f33a920d2967f7bce4def2e1f66a9965f90d75fd Mon Sep 17 00:00:00 2001
From: Rene Vergara <rene@vergara.network>
Date: Tue, 1 Feb 2022 12:56:02 -0600
Subject: [PATCH] Refactor the confirm dialog to re-use

---
 src/app/app.module.ts                   |  4 +---
 src/app/cancel/cancel.component.css     |  4 ++++
 src/app/cancel/cancel.component.html    |  4 ++--
 src/app/cancel/cancel.component.ts      | 10 +++++++--
 src/app/header/header.component.ts      |  5 +++--
 src/app/logout/logout.component.css     |  3 ---
 src/app/logout/logout.component.html    | 28 -------------------------
 src/app/logout/logout.component.spec.ts | 25 ----------------------
 src/app/logout/logout.component.ts      | 26 -----------------------
 src/app/order/order.component.ts        |  1 +
 10 files changed, 19 insertions(+), 91 deletions(-)
 delete mode 100644 src/app/logout/logout.component.css
 delete mode 100644 src/app/logout/logout.component.html
 delete mode 100644 src/app/logout/logout.component.spec.ts
 delete mode 100644 src/app/logout/logout.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 88af6cd..7992df6 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/cancel/cancel.component.css b/src/app/cancel/cancel.component.css
index 0b79f36..a81a136 100644
--- a/src/app/cancel/cancel.component.css
+++ b/src/app/cancel/cancel.component.css
@@ -1,3 +1,7 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+mat-dialog-content {
+	max-width: 400px;
+}
diff --git a/src/app/cancel/cancel.component.html b/src/app/cancel/cancel.component.html
index 52fc63b..2c68a3b 100644
--- a/src/app/cancel/cancel.component.html
+++ b/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>
diff --git a/src/app/cancel/cancel.component.ts b/src/app/cancel/cancel.component.ts
index 2c71b59..212ab58 100644
--- a/src/app/cancel/cancel.component.ts
+++ b/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);
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index a20f169..a1441e5 100644
--- a/src/app/header/header.component.ts
+++ b/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!');
diff --git a/src/app/logout/logout.component.css b/src/app/logout/logout.component.css
deleted file mode 100644
index eeb06e6..0000000
--- a/src/app/logout/logout.component.css
+++ /dev/null
@@ -1,3 +0,0 @@
-* {
-	font-family: 'Spartan', sans-serif;
-}
diff --git a/src/app/logout/logout.component.html b/src/app/logout/logout.component.html
deleted file mode 100644
index 1e8f626..0000000
--- a/src/app/logout/logout.component.html
+++ /dev/null
@@ -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>
diff --git a/src/app/logout/logout.component.spec.ts b/src/app/logout/logout.component.spec.ts
deleted file mode 100644
index 2f92d47..0000000
--- a/src/app/logout/logout.component.spec.ts
+++ /dev/null
@@ -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();
-  });
-});
diff --git a/src/app/logout/logout.component.ts b/src/app/logout/logout.component.ts
deleted file mode 100644
index eb13e88..0000000
--- a/src/app/logout/logout.component.ts
+++ /dev/null
@@ -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);
-  }
-
-}
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts
index 74e92e4..b63308d 100644
--- a/src/app/order/order.component.ts
+++ b/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) => {