zgo/src/app/login/login.component.html

<div align="center" class="text">
	<mat-card class="coolcard">
		<mat-card-content>
			<img mat-card-image src="/assets/logo-new-white_01.png" height="120px" />
			<p class="text">Last block seen: <span class="numbers">{{ heightUpdate | async }}</span></p>
		</mat-card-content>
	</mat-card>
</div>
<div align="center">
	<mat-card class="centercard">
		<h3>The Zcash Register</h3>
			<mat-vertical-stepper #stepper linear>
				<mat-step label="Connect your wallet to ZGo" editable="false">
					<div align="center" id="info">
						<button mat-raised-button color="primary" (click)="login(stepper)">
							<mat-icon class="icon">login</mat-icon><span class="bigbutton">Link wallet</span>
						</button>
					</div>
				</mat-step>
				<mat-step label="ZGo confirms your login on the Zcash blockhain:" editable="false">
					<p>{{barMessage}}</p>
					<mat-progress-bar
						[mode]="barMode"
						[value]="barValue">
					</mat-progress-bar>
				</mat-step>
				<mat-step label="Enter the PIN sent by ZGo to confirm wallet ownership:">
					<mat-card [formGroup]="pinForm">
						<h4>
							Check your wallet
						</h4>
						<mat-form-field appearance="outline">
							<mat-label>PIN</mat-label>
							<input matInput formControlName="pinValue">
						</mat-form-field>
						<p *ngIf="pinError">Wrong pin!</p>
						<mat-card-actions>
							<button mat-raised-button color="primary" [disabled]="!pinForm.valid" (click)="confirmPin()">
								Confirm
							</button>
						</mat-card-actions>
					</mat-card>
				</mat-step>
			</mat-vertical-stepper>
	</mat-card>
</div>