Viewing key error messages implemented partially

CHANGELOG.md

@@ -13,6 +13,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     
 ### Changed
+- (2022-07-21) user.service.ts 
+               - Function updateOwner() removed - not needed anymore.
+               - Response Error 500 (Invalid Viewing Key) catched in 
+                 function addOwner()
+               - Beta version of Invalid viewing key message (snackbar)
+                 implemented and working. 
+                 ToDo -> CSS definition.
 - (2022-07-20) Buttons in Main form have been enclosed to display 
                inside a fixed area.
                On wide screens, new Order will display below main buttons.

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
+
 export class AppComponent {
 	//StoredPosts: Post[] = [];
 	title = 'sell4zec';

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -41,6 +42,7 @@ import { ReceiptQRComponent } from './receipt-qr/receipt-qr.component';
 import { InvoiceComponent } from './invoice/invoice.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { PromptInvoiceComponent } from './prompt-invoice/prompt-invoice.component';
+import { ShowErrorComponent } from './show-error/show-error.component';
 
 @NgModule({
     declarations: [
@@ -64,7 +66,8 @@ import { PromptInvoiceComponent } from './prompt-invoice/prompt-invoice.componen
         ReceiptComponent,
         ReceiptQRComponent,
         InvoiceComponent,
-        PromptInvoiceComponent
+        PromptInvoiceComponent,
+        ShowErrorComponent
     ],
     imports: [
         BrowserModule,
@@ -86,6 +89,7 @@ import { PromptInvoiceComponent } from './prompt-invoice/prompt-invoice.componen
         MatStepperModule,
         MatAutocompleteModule,
         MatSlideToggleModule,
+        MatSnackBarModule,
         BrowserAnimationsModule,
         FontAwesomeModule
     ],

src/app/settings/settings.component.ts

@@ -39,23 +39,20 @@ export class SettingsComponent implements OnInit {
 	constructor(
 		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<SettingsComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: Owner
-	) {
-		this.useZats = data.zats;
-		this.useVKey = data.payconf;
-		this.settingsForm = fb.group({
-			name: [data.name, Validators.required],
-			currency: [data.currency, Validators.required],
-			useZats: [data.zats,  Validators.required],
-			useVKey: [data.payconf, Validators.required],
-			vKey: [data.viewkey]
-		});
-		if (data.payconf) {
-			this.settingsForm.get('vKey')!.enable();
-		}
-		this.owner = data;
-
- 
+		@Inject(MAT_DIALOG_DATA) public data: Owner) {
+			this.useZats = data.zats;
+			this.useVKey = data.payconf;
+			this.settingsForm = fb.group({
+				name: [data.name, Validators.required],
+				currency: [data.currency, Validators.required],
+				useZats: [data.zats,  Validators.required],
+				useVKey: [data.payconf, Validators.required],
+				vKey: [data.viewkey]
+			});
+			if (data.payconf) {
+				this.settingsForm.get('vKey')!.enable();
+			}
+			this.owner = data;
 	}
 
 	ngOnInit() {
@@ -66,19 +63,14 @@ export class SettingsComponent implements OnInit {
 	}
 
 	save() {
-		console.log('===> Saving Settins ');
-		console.log('viewnkey from Form: ' + this.settingsForm.value.vKey);
-		console.log('payconf from Form: ' + (this.settingsForm.value.useVKey?"On":"Off"));
 		this.owner.name = this.settingsForm.value.name;
 		this.owner.currency = this.settingsForm.value.currency;
 		this.owner.zats = this.settingsForm.value.useZats;
 		this.owner.payconf = this.settingsForm.value.useVKey;
 
 		this.owner.viewkey = this.settingsForm.value.vKey;
-		console.log('Save Settings from Owner.viewkey :' + this.owner.viewkey);
 
 		this.dialogRef.close(this.owner);
-		console.log("===> Settings dialog closed")
 	}
 
 	onChange(ob: MatSlideToggleChange) {

src/app/show-error/show-error.component.css

@@ -0,0 +1,21 @@
+.green-snackbar {
+    background: rgb(65, 252, 134);
+    color: white;
+}
+
+.green-snackbar button {
+    background-color: rgb(65, 252, 134);
+    color: white;
+    border: none;
+}
+
+.red-snackbar {
+    background: #F44336;
+    color: white;
+}
+
+.red-snackbar button {
+    background-color: #F44336;
+    color: white !important;
+    border: none;
+}

src/app/show-error/show-error.component.html

@@ -0,0 +1,8 @@
+<div>
+  <div>{{ data }}</div>
+  <div class="dismiss" test-selector="aaaa">
+    <button mat-icon-button (click)="sbRef.dismiss()">
+      <mat-icon>Dismiss</mat-icon>AAAA
+    </button>
+  </div>
+</div>

src/app/show-error/show-error.component.spec.ts

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

src/app/show-error/show-error.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Inject  } from '@angular/core';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-show-error',
+  templateUrl: './show-error.component.html',
+  styleUrls: ['./show-error.component.css']
+})
+
+
+export class ShowErrorComponent implements OnInit {
+
+  constructor(   
+     public sbRef: MatSnackBarRef<ShowErrorComponent>,
+     @Inject(MAT_SNACK_BAR_DATA) public data: any
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/user.service.ts

@@ -1,10 +1,14 @@
-import {Injectable} from '@angular/core';
-import {Subject, BehaviorSubject, Observable} from 'rxjs';
-import {HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
-import {User} from './user.model';
-import {Owner} from './owner.model';
+import { Injectable } from '@angular/core';
+import { Subject, BehaviorSubject, Observable } from 'rxjs';
+
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import { MatSnackBar } from '@angular/material/snack-bar';
+//import { ShowErrorComponent } from './show-error/show-error.component';
+
+import { User } from './user.model';
+import { Owner } from './owner.model';
 import { Country } from './country.model';
-import {Tx} from './tx.model';
+import { Tx } from './tx.model';
 
 import { ConfigData } from './configdata';
 
@@ -69,7 +73,8 @@ export class UserService{
 	public readonly countriesUpdate: Observable<Country[]> = this._countriesUpdated.asObservable();
 	private reqHeaders: HttpHeaders;
 
-	constructor(private http: HttpClient){
+	constructor(private http: HttpClient,
+				private _snackBar: MatSnackBar){
 		var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
 		this.reqHeaders = new HttpHeaders().set('Authorization', auth);
 		//console.log('US:', this.reqHeaders);
@@ -142,26 +147,31 @@ export class UserService{
 	}
 
 	addOwner(owner: Owner) {
+
 		owner.address = this.dataStore.user.address;
 		let obs = this.http.post(this.beUrl+'api/owner', {payload: owner}, {headers: this.reqHeaders});
 
 		obs.subscribe((responseData) => {
+			console.log("Entra a console log");
 			this.getOwner(this.dataStore.user.address);
+		}, (error) => {
+			console.log("Status is : [" + error.status + "]");
+			if ( error.status = 500 ) {
+			    let sb = this._snackBar.open("Error: Invalid Viewing Key",
+			    	                         "Close", 
+			    	                         { duration: 4000,
+			      							   panelClass: ["green-snackbar"]
+			    							 }
+			    );
+			    sb.onAction().subscribe(() => {
+			      sb.dismiss();
+			    });
+			};
 		});
 
 		return obs;
 	}
 
-	updateOwner(owner: Owner) {
-		this.http.post<{message: string, owner: Owner}>(this.beUrl+'api/updateowner', {owner: owner}, {headers: this.reqHeaders}).
-		subscribe((responseData) => {
-			//console.log(responseData.message);
-			this.dataStore.owner = responseData.owner;
-			this._ownerUpdated.next(Object.assign({},this.dataStore).owner); 
-		});
-	}
-
-
 	getOwner(address: string) {
 		console.log('getOwner', address);
 		const ownParams = new HttpParams().append('address', address);
@@ -194,4 +204,8 @@ export class UserService{
 
 		return obs;
 	}
+
+	openSnackBar(message: string, action: string) {
+    	this._snackBar.open(message, action);
+	}
 }

src/styles.css

@@ -25,3 +25,4 @@ body {
 	margin: 0;
 	font-family: 'Spartan', sans-serif;
 }
+