Settings form in testing mode - read/write is not workng properly

src/app/settings/settings.component.css

@@ -1,7 +1,18 @@
-* {
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
-	font-family: 'Spartan', sans-serif;
+
+.settings-title {
+	font-family: Roboto Mono;
+	background: #ff4700;
+	color: white;
+	font-size: 30px;
+	font-weight: 700;
+	text-align: center;
+	margin-bottom: 15px;
+	height: 40px;
+	justify-content: center;
 }
 
-.mat-dialog-content {
+.settings_field {
-	max-width: 300px;
+	width:  100%;
 }
+

src/app/settings/settings.component.html

@@ -1,31 +1,57 @@
-<h2 mat-dialog-title class="text">Settings</h2>
 
-<mat-dialog-content [formGroup]="settingsForm">
+<div class="settings-title">Settings</div>
-	<mat-form-field appearance="outline">
-		<mat-label>Name</mat-label>
-		<input matInput placeholder="Name" formControlName="name">
-	</mat-form-field>
-	<mat-form-field appearance="outline">
-		<mat-label>Currency</mat-label>
-		<mat-select formControlName="currency">
-			<mat-option *ngFor="let coin of coins" [value]="coin.symbol">
-				{{coin.label}}
-			</mat-option>
-		</mat-select>
-	</mat-form-field>
-	<mat-slide-toggle formControlName="useZats" (change)="onChange($event)">
-		Display Zcash amount in zatoshis?
-	</mat-slide-toggle>
-	<mat-slide-toggle formControlName="VkeyOn" (change)="onChangeVKeyOn($event)">
-		Activate payment confirmation?
-	</mat-slide-toggle>
-	<mat-form-field appearance="outline">
-		<mat-label>Viewing key</mat-label>
-		<input matInput placeholder="Viewing Key" formControlName="vKey">
-	</mat-form-field>
-</mat-dialog-content>
 
-<mat-dialog-actions>
+<div class="container">
-	<button mat-raised-button class="text" (click)="close()">Cancel</button>
+	<mat-dialog-content [formGroup]="settingsForm">
-	<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
+		<mat-form-field  class="settings-field" [style.width.%]="100">
-</mat-dialog-actions>
+			<mat-label>Name</mat-label>
+			<input matInput 
+			       width="100%"
+			       placeholder="Name" 
+			       formControlName="name">
+		</mat-form-field>
+		<mat-form-field [style.width.%]="100" >
+			<mat-label>Currency</mat-label>
+			<mat-select formControlName="currency">
+				<mat-option *ngFor="let coin of coins" 
+				            [value]="coin.symbol">
+					{{coin.label}}
+				</mat-option>
+			</mat-select>
+		</mat-form-field>
+		<mat-slide-toggle formControlName="useZats" 
+		                  (change)="onChange($event)">
+			Use zatoshis?
+		</mat-slide-toggle>
+
+			<pre></pre>
+			<mat-slide-toggle formControlName="VkeyOn" 
+			                  (change)="onChangeVKeyOn($event)">
+				Activate payment confirmation?
+			</mat-slide-toggle>
+			<pre></pre>
+			<mat-form-field [style.width.%]="100">
+				<mat-label>Viewing key</mat-label>
+				<input matInput placeholder="Your wallet viewing key" 
+				       formControlName="VKey"
+				       [formControl]="viewkeyControl">
+				      
+			</mat-form-field>
+
+	</mat-dialog-content>
+
+	<mat-dialog-actions style="display: flex;
+							   justify-content: space-between;
+							   align-items: center;
+							   margin-top: 12px;">
+			<button mat-raised-button 
+					(click)="close()">
+				Cancel
+			</button>
+			<button mat-raised-button 
+			        color="primary" 
+			        (click)="save()">
+			    Save
+			</button>
+	</mat-dialog-actions>
+</div>

src/app/settings/settings.component.ts

@@ -16,6 +16,7 @@ export class SettingsComponent implements OnInit {
 	settingsForm: UntypedFormGroup;
 	owner: Owner;
 	useZats: boolean;
+	useVKey: boolean = false;
 	coins = [
 		{
 			label: 'US Dollar',
@@ -35,6 +36,8 @@ export class SettingsComponent implements OnInit {
 		}
 	];
 
+    viewkeyControl = new FormControl({ value: null, disabled: true });
+
 	constructor(
 		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<SettingsComponent>,
@@ -44,10 +47,14 @@ export class SettingsComponent implements OnInit {
 		this.settingsForm = fb.group({
 			name: [data.name, Validators.required],
 			currency: [data.currency, Validators.required],
-			useZats: [data.zats, Validators.required],
+			useZats: [data.zats,  Validators.required],
-			VkeyOn: [data.]
+			VkeyOn: [data.payconf, Validators.required],
+			VKey: [{value:data.viewkey, disabled: true },
+			        Validators.required
+			      ]
 		});
 		this.owner = data;
+
 	}
 
 	ngOnInit() {
@@ -60,7 +67,13 @@ export class SettingsComponent implements OnInit {
 	save() {
 		this.owner.name = this.settingsForm.value.name;
 		this.owner.currency = this.settingsForm.value.currency;
-		this.owner.zats = this.useZats;
+		this.owner.zats = this.settingsForm.value.useZats;
+		this.owner.payconf = this.useVKey;
+		if ( this.settingsForm.value.VkeyOn ) {
+		    this.owner.viewkey = this.settingsForm.value.VKey;
+		  }
+		 else 
+		    this.owner.viewkey = '';                      	
 		this.dialogRef.close(this.owner);
 	}
 
@@ -69,6 +82,15 @@ export class SettingsComponent implements OnInit {
 	}
 
 	onChangeVKeyOn(ob: MatSlideToggleChange) {
-		console.log("Viewing key switch is " + ( ob.checked ? "[ON]." : "[OFF].") );
+		console.log("Viewing key switch is " + 
+			        ( ob.checked ? "[ON]." : "[OFF]." ) );
+        
+        this.useVKey = ob.checked;
+
+	    if ( ob.checked ) 
+	      this.viewkeyControl.enable()
+	    else 
+	      this.viewkeyControl.disable();
+
 	}
 }

src/app/viewer/viewer.component.css

@@ -1,13 +1,26 @@
 * {
 	font-family: 'Spartan', sans-serif;
 }
+
 .icon{
 	font-family: 'Material Icons';
 }
+
+
+.shop-menu {
+	font-family: Roboto, sans-serif;
+}
+
+.main-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
 .small{
-	font-size: x-small;
+	margin-top: 5px;
-	margin-top: 0px;
+	font-size: 14px !important; 
-}
-h3{
-	margin-bottom: 0px;
 }
+

src/app/viewer/viewer.component.html

@@ -1,16 +1,37 @@
 <app-header></app-header>
-<div align="center">
+<div class="shop-menu" align="center">
-	<h3>{{(ownerUpdate | async)!.name}}</h3>
+	<div style="margin-top: 8px;">
-	<p class="small">{{ shortenZaddr((ownerUpdate | async)!.address) }}</p>
+		<div style="font-size: 24px;
-	<span align="center">
+		            font-weight: 700;">
-		<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
+		          {{(ownerUpdate | async)!.name}}
-		<button mat-raised-button class="text" (click)="openSettings()">
+		</div>          
+		<div class="small">
+		   {{ shortenZaddr((ownerUpdate | async)!.address) }}
+		</div>
+	</div>
+	<div class="main-buttons">
+		<button mat-raised-button 
+		        style="background: #ff4700;
+		               font-weight: 700;
+		        	   color: white;" 
+		        [routerLink]="['/orders']">
+		   View Orders
+		</button>
+		<button mat-raised-button 
+		        style="background: #ff4700;
+		        	   color: white;" 
+		        class="text" (click)="openSettings()">
 			 <mat-icon class="icon">manage_accounts</mat-icon>
 		</button>
-		<a href="https://zgo.cash/" mat-raised-button target="_blank" rel="noopener noreferrer">
+		<a mat-raised-button 
-			<mat-icon class="icon">help</mat-icon>
+	       style="background: #ff4700;
+	              color: white;" 
+		   href="https://zgo.cash/" 
+		   target="_blank" 
+		   rel="noopener noreferrer">
+		   <mat-icon class="icon">help</mat-icon>
 		</a>
-	</span>
+	</div>
 </div>
 <div *ngIf="orientation">
 <app-order></app-order>