Enhance login screen

package.json

@@ -10,16 +10,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.0",
+    "@angular/animations": "~13.0.2",
     "@angular/cdk": "^12.2.8",
-    "@angular/common": "~12.2.0",
+    "@angular/common": "~13.0.2",
-    "@angular/compiler": "~12.2.0",
+    "@angular/compiler": "~13.0.2",
-    "@angular/core": "~12.2.0",
+    "@angular/core": "~13.0.2",
-    "@angular/forms": "~12.2.0",
+    "@angular/forms": "~13.0.2",
     "@angular/material": "^12.2.8",
-    "@angular/platform-browser": "~12.2.0",
+    "@angular/platform-browser": "~13.0.2",
-    "@angular/platform-browser-dynamic": "~12.2.0",
+    "@angular/platform-browser-dynamic": "~13.0.2",
-    "@angular/router": "~12.2.0",
+    "@angular/router": "~13.0.2",
     "@supercharge/request-ip": "^1.1.2",
     "angular-local-storage": "^0.7.1",
     "async": "^3.2.2",
@@ -28,15 +28,16 @@
     "material-design-icons": "^3.0.1",
     "mongoose": "^6.0.13",
     "rxjs": "~6.6.0",
+    "stdrpc": "^1.3.0",
     "tslib": "^2.3.0",
     "urlsafe-base64": "^1.0.0",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.8",
+    "@angular-devkit/build-angular": "~13.0.2",
-    "@angular/cli": "~12.2.8",
+    "@angular/cli": "~13.0.2",
-    "@angular/compiler-cli": "~12.2.0",
+    "@angular/compiler-cli": "~13.0.2",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.20.33",
     "@types/urlsafe-base64": "^1.0.28",
@@ -47,6 +48,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.4.4"
   }
 }

src/app/login/login.component.css

@@ -1,5 +1,5 @@
 * {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 mat-card.coolcard{
 	background-color: #FF5722;
@@ -19,3 +19,6 @@ mat-card.coolcard{
 	margin: 5px;
 	background-color: #BBFFBB
 }
+.numbers{
+	font-family: 'Roboto Mono', monospace;
+}

src/app/login/login.component.html

@@ -1,7 +1,7 @@
 <br>
 <div align="center" class="text">
 	<mat-card class="coolcard">
-		<img src="/assets/logo.png" />
+		<img src="/assets/logo-new-white.png" height="120px" />
 	<!--<h3>-->
 		<!--<pre>-->
  <!--__||__   _____       _ -->
@@ -13,14 +13,31 @@
    <!--||                   -->
 		<!--</pre>-->
 	<!--</h3>-->
-	<p class="text">Last block seen: {{ heightUpdate | async }}</p>
+	<p class="text">Last block seen: <span class="numbers">{{ heightUpdate | async }}</span></p>
 	</mat-card>
 </div>
 <div align="center">
 	<mat-card>
-		<p>A non-custodial point-of-sale application, powered by Zcash!</p>
+		<h3>The Zcash Register</h3>
-			<p>Your Zcash shielded address is your login.</p>
+			<div width="75%" align="left" *ngIf="!confirmedMemo">
-			<p>Your customer pays directly to your wallet.</p>
+		<ol>
+			<li>
+				Select your session length.
+			</li>
+			<li>
+				Confirm you've sent your shielded memo.
+			</li>
+			<li>
+				Wait for confirmation of your transaction on the Zcash blockchain (~10 minutes).
+			</li>
+			<li>
+				Enter the PIN provided by ZGo to your wallet to confirm ownership.
+			</li>
+		</ol>
+			</div>
+			<div width="75%" *ngIf="confirmedMemo">
+				<p>Expecting confirmation around block {{targetBlock}}.</p>
+			</div>
 	</mat-card>
 	<mat-card [formGroup]="pinForm" *ngIf="prompt">
 		<h4>

src/app/login/login.component.ts

@@ -50,6 +50,8 @@ export class LoginComponent implements OnInit {
 		}
 	];
 	prompt: boolean = false;
+	confirmedMemo: boolean = false;
+	targetBlock: number = 0;
 
 	entryForm: FormGroup;
 	pinForm: FormGroup;
@@ -138,6 +140,10 @@ export class LoginComponent implements OnInit {
 		const dialogRef = this.dialog.open(ScanComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe((val) => {
 			console.log('Awaiting confirmation');
+			this.confirmedMemo = val;
+			this.heightUpdate.subscribe((block) => {
+				this.targetBlock = block + 10;
+			});
 		});
 	}
 

src/app/scan/scan.component.css

@@ -1,3 +1,9 @@
 .text {
-	font-family: "Roboto Mono", monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
+}
+.mat-dialog-title{
+	line-height: 20px;
+}
+h4.text{
+	margin: 0px;
 }

src/app/scan/scan.component.html

@@ -1,18 +1,25 @@
 <div align="center" mat-dialog-title>
-<h2 class="text">Scan to log in!</h2>
+<h4 class="text">Scan to log in!</h4>
 </div>
 
 <mat-dialog-content>
-	<div align="center" id="checkout-qr"></div>
+	<div align="center">
+	<p class="text">Ensure to check the "Include Reply-To" box in your wallet before sending your memo.</p>
+	<div class="qrcode" id="checkout-qr"></div>
+	</div>
 </mat-dialog-content>
 <mat-dialog-actions>
 	<table cellspacing="0" width="100%">
 		<tr>
 			<td>
-				<button mat-raised-button color="primary" (click)="confirm()">
+				<button mat-raised-button class="text" color="primary" (click)="confirm()">
-					<mat-icon>verified_user</mat-icon>
+					<mat-icon class="icon">verified_user</mat-icon>Memo Sent!
+				</button>
+			</td>
+			<td align="right">
+				<button mat-raised-button class="text" (click)="close()">
+					<mat-icon class="icon">close</mat-icon>Cancel
 				</button>
-
 			</td>
 		</tr>
 	</table>

src/index.html

@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Saira+Semi+Condensed:wght@400;500&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>