Not working - Owner config data form in progress

src/app/order/order.component.css

@@ -13,10 +13,11 @@ img.icon{
 
 .noOrderMsg {
 	font-family: Roboto Mono;
-    font-size: 14px;
+  font-size: 20px;
   font-weight: 700;
-    margin-top: 5px; 
+  margin:  10px; 
   align-items: center;
+  text-align: center;
 }
 
 .newOrder {
@@ -72,3 +73,12 @@ img.icon{
   cursor: pointer;
   margin: auto;
 }
+
+.availableItems{
+  background: lightblue;
+  font-family: Roboto Mono;
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+  margin: 5px;
+}

src/app/order/order.component.html

@@ -123,11 +123,7 @@
 -->
 </div>
 </mat-card>
-<div style="font-family: Roboto Mono;
-            font-size: 18px;
-            font-weight: 700;
-            margin-left: 10px;
-            margin-top: 5px;" >
+<div class="availableItems" >
      Available Items:
 </div>
 

src/app/settings/settings.component.html

@@ -16,6 +16,13 @@
 	<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>

src/app/settings/settings.component.ts

@@ -2,8 +2,8 @@ import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angula
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
-import {User} from '../user.model';
-import {Owner} from '../owner.model';
+import { User } from '../user.model';
+import { Owner } from '../owner.model';
 
 @Component({
 	selector: 'app-settings',
@@ -44,7 +44,8 @@ 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.]
 		});
 		this.owner = data;
 	}
@@ -66,4 +67,8 @@ export class SettingsComponent implements OnInit {
 	onChange(ob: MatSlideToggleChange) {
 		this.useZats = ob.checked;
 	}
+
+	onChangeVKeyOn(ob: MatSlideToggleChange) {
+		console.log("Viewing key switch is " + ( ob.checked ? "[ON]." : "[OFF].") );
+	}
 }