zgo/src/app/settings/settings.component.html

<div class="settings-title"> {{ vE.settingsViewTitle }}</div>

<div class="container" 
	 style="margin-top: 10px;
			height: 520px;
			margin-left: 10px;
			margin-right: 10px;">
	<mat-tab-group mat-tab-align-tabs="start">
		<mat-tab label="{{ vE.settingsTabMainlbl }}" 
		         style="height: 400px;">
			<div class="container" style="margin-bottom:  20px;">
				<mat-dialog-content [formGroup]="settingsForm">
					<mat-form-field  class="settings-field" [style.width.%]="100">
						<mat-label>{{ vE.settingsNameLbl }}</mat-label>
						<input matInput 
							   width="100%"
							   placeholder="{{ vE.settingsNamePlaceholder }}" 
							   formControlName="name">
					</mat-form-field>
					<mat-form-field [style.width.%]="100" >
						<mat-label>{{ vE.settingsCurrencyLbl }}</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" 
									  class="settings-toggle"
									  (change)="onChange($event)">
						{{ vE.settingsUseSatoshi }} 
					</mat-slide-toggle>
					<pre></pre>
					<mat-slide-toggle formControlName="useVKey" 
									  class="settings-toggle"
									  (change)="onChangeVKeyOn($event)">
						{{ vE.settingsConfirmPayments }} 
					</mat-slide-toggle>
					<pre></pre>
					<mat-form-field class="full-width" 
									appearance="fill">
						<mat-label>{{ vE.settingsVkeyLbl }}</mat-label>
						<textarea matInput placeholder="{{ vE.settingsVkeyPlaceholder }}" 
								formControlName="vKey">
						</textarea>
					</mat-form-field>
<!--					
					<pre></pre>
					<mat-slide-toggle formControlName="proVersion" 
									  class="settings-toggle"
								  (change)="onChangeProVersion($event)">
						Enable Integrations
					</mat-slide-toggle>
-->
				</mat-dialog-content>
			</div>

			<div class="container" 
			 	 style="display: flex;
						justify-content: space-between;
						align-items: center;">
				<button mat-raised-button 
						(click)="close()">
					{{ vE.settingsCloseBtn }} 
				</button>
				<button mat-raised-button 
						color="primary" 
						(click)="save()">
					{{ vE.settingsSaveBtn }}
				</button>
			</div>
			<div style="height: 20px;
						margin-top: 10px;">
			</div>			
		</mat-tab>
		<mat-tab *ngIf="proVersion"
		         label="{{ vE.settingsTabIntegrations }}"
				 style="align-items: center;">
			<mat-tab-group mat-tab-align-tabs="start">
				<mat-tab label="{{ vE.settingsXeroLbl }}">
					<div class="container" style="margin-bottom:  10px;">
						<mat-dialog-content [formGroup]="accCodForm">
							<div style="height: 5px;">
							</div>			
							<div class="container" 
								 style="height: 300;">
								<p  style="text-align:center">
									<a mat-raised-button   	 
									   color="primary" 
									   href="{{this.xeroLink}}">
										{{ linkMsg }}
									</a>
								</p>

								<table *ngIf="linked2Xero"
									   [style.width.%]="100"
									   style="margin-top: 5px;">
									<thead style="width: 100%;">
										<tr>
											<th class="urlLabel"
												style="text-align: left;" 
												width="94%">{{ vE.settingsPmtservURL }}
											</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<td class="urlDetail" 
											style="text-align: left;" 
											width="94%">
											<div>
												<textarea disabled
														  style="font-size: 10px !important;
																 border: none;
																 outline: none;
																 min-height: 150px;
																 width: 95%;"
														  cdkTextareaAutosize
														  cdkAutosizeMinRows="6"
														  cdkAutosizeMaxRows="10">{{ pmtServiceURL }}
												</textarea>
											</div>

										</td>
										<td class="urlCopyBtn">
											<a (click)='copyUrl()' >	
												<fa-icon [icon]="faCopy" 
											class="copy-button">
												</fa-icon>
											</a>
										</td>
									</tbody>
								</table>
								<div style="height: 5px;">
								</div>			
								<mat-form-field  *ngIf="linked2Xero"
									 class="settings-field"
									 [style.width.%]="100">
									<mat-label>{{ vE.settingsAcodeLbl }}</mat-label>
									<input matInput 
										   width="100%"
										   placeholder="9999999999" 
										   formControlName="xAcc"
										   (keyup)="checkStatus($event)">
								</mat-form-field>

							</div>	
						</mat-dialog-content>		
					</div>	
					<div class="container" 
						 style="display: flex;
								justify-content: space-between;
								align-items: center;
								padding-left: 20px;
								padding-right: 20px;">
						<button mat-raised-button 
								(click)="closeIntegration()">
							{{ vE.settingsXeroClosebtn }}
						</button>
						<button *ngIf="saveAccOk" 
								mat-raised-button 
								color="primary" 
								(click)="saveAccCod()">
							{{ vE.settingsXeroSavebtn }}
						</button>
					</div>
					<div style="height: 20px;
								margin-top: 10px;">
					</div>			
				</mat-tab>
				<mat-tab label="{{ vE.settingsWCLbl }}">
					<div >
							<div *ngIf="wooOwner == ''" align="center">
								<button mat-raised-button color="primary" (click)="generateWooToken()">
									{{ vE.settingsWCGentoken }}
								</button>
							</div>
							<table *ngIf="wooOwner != ''">
								<tbody>
								<tr>
									<td class="heading" style="width: 100%;">{{ vE.settingsWCOwnerlbl }}</td>
								</tr>
								<tr>
									<td>
									<div>
										<textarea disabled
												  style="border: none;
														 outline: none;
														 min-height: 150px;
														 width: 94%;"
												  cdkTextareaAutosize
												  cdkAutosizeMinRows="1"
												  cdkAutosizeMaxRows="3">{{wooOwner}}
										</textarea>
									</div>
									</td>
									<td class="urlCopyBtn">
										<a (click)='copyWooOwner()' >	
											<fa-icon [icon]="faCopy" 
										class="copy-button">
											</fa-icon>
										</a>
									</td>
								</tr>
								<tr>
									<td class="heading" style="width: 60%;">Token:</td>
								</tr>
								<tr>
									<td>
									<div>
										<textarea disabled
												  style="border: none;
														 outline: none;
														 min-height: 150px;
														 width: 94%;"
												  cdkTextareaAutosize
												  cdkAutosizeMinRows="1"
												  cdkAutosizeMaxRows="3">{{wooToken}}
										</textarea>
									</div>
									</td>
									<td class="urlCopyBtn">
										<a (click)='copyWooToken()' >	
											<fa-icon [icon]="faCopy" 
										class="copy-button">
											</fa-icon>
										</a>
									</td>
								</tr>
								<tr>
									<td class="heading" style="width: 60%;">URL:</td>
								</tr>
								<tr>
									<td>
									<div>
										<textarea disabled
												  style="border: none;
														 outline: none;
														 min-height: 150px;
														 width: 94%;"
												  cdkTextareaAutosize
												  cdkAutosizeMinRows="1"
												  cdkAutosizeMaxRows="3">{{wooUrl}}
										</textarea>
									</div>
									</td>
								</tr>
							    </tbody>
							</table>
							<div class="toolbar" align="center">
								<button mat-raised-button 
										(click)="close()">
									{{ vE.settingsWCClosebtn }}
								</button>
							</div>
					</div>
				</mat-tab>
			</mat-tab-group>
		</mat-tab>
	</mat-tab-group>
</div>