Vergara_Tech/zgo
Vergara_Tech/zgo
2
1
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Enhance login screen

Browse source
This commit is contained in:
Rene Vergara 2021-11-17 16:03:46 -06:00
parent ed46fd9b23
commit b48f10fe03
8 changed files with 4340 additions and 9736 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13986
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

25
package.json
View file

@ -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/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/common": "~13.0.2",
"@angular/compiler": "~13.0.2",
"@angular/core": "~13.0.2",
"@angular/forms": "~13.0.2",
"@angular/material": "^12.2.8",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@angular/platform-browser": "~13.0.2",
"@angular/platform-browser-dynamic": "~13.0.2",
"@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/cli": "~12.2.8",
"@angular/compiler-cli": "~12.2.0",
"@angular-devkit/build-angular": "~13.0.2",
"@angular/cli": "~13.0.2",
"@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"
}
}

5
src/app/login/login.component.css
View file

@ -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;
}

27
src/app/login/login.component.html
View file

@ -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>
<p>Your Zcash shielded address is your login.</p>
<p>Your customer pays directly to your wallet.</p>
<h3>The Zcash Register</h3>
<div width="75%" align="left" *ngIf="!confirmedMemo">
<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>

6
src/app/login/login.component.ts
View file

@ -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;
});
});
}

8
src/app/scan/scan.component.css
View file

@ -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;
}

17
src/app/scan/scan.component.html
View file

@ -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()">
<mat-icon>verified_user</mat-icon>
<button mat-raised-button class="text" color="primary" (click)="confirm()">
<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>

2
src/index.html
View file

@ -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>