From b66650d34dd7ada3fa01dc96137842b83c931cdb Mon Sep 17 00:00:00 2001 From: Rene Vergara Date: Wed, 10 Nov 2021 09:25:26 -0600 Subject: [PATCH] Implement session length selector --- src/app/app.module.ts | 7 +++- src/app/login/login.component.css | 9 ++++ src/app/login/login.component.html | 24 +++++++---- src/app/login/login.component.ts | 66 ++++++++++++++++++++++++------ src/app/scan/scan.component.css | 3 ++ src/app/scan/scan.component.html | 19 +++++++++ src/app/scan/scan.component.ts | 50 ++++++++++++++++++++++ 7 files changed, 156 insertions(+), 22 deletions(-) create mode 100644 src/app/scan/scan.component.css create mode 100644 src/app/scan/scan.component.html create mode 100644 src/app/scan/scan.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c973846..8772c3c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { MatDialogModule } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; import { MatDividerModule } from '@angular/material/divider'; import { MatListModule } from '@angular/material/list'; +import { MatSelectModule } from '@angular/material/select'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -26,6 +27,7 @@ import { CancelComponent } from './cancel/cancel.component'; import { CheckoutComponent } from './checkout/checkout.component'; import { SettingsComponent } from './settings/settings.component'; import { ListOrdersComponent } from './listorders/listorders.component'; +import { ScanComponent } from './scan/scan.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ @@ -42,6 +44,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; CancelComponent, CheckoutComponent, SettingsComponent, + ScanComponent, ListOrdersComponent ], imports: [ @@ -59,6 +62,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; MatDialogModule, MatDividerModule, MatListModule, + MatSelectModule, BrowserAnimationsModule ], exports: [ @@ -72,7 +76,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ItemAddComponent, CancelComponent, CheckoutComponent, - SettingsComponent + SettingsComponent, + ScanComponent ] }) export class AppModule { } diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css index 94ef346..0177792 100644 --- a/src/app/login/login.component.css +++ b/src/app/login/login.component.css @@ -5,3 +5,12 @@ mat-card.coolcard{ background-color: #FF5722; color: #FFFFFF; } +.icon{ + font-family: 'Material Icons'; +} +.bigbutton{ + display: inline-flex; + vertical-align: middle; + font-size: 120%; + padding: 3px; +} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 46425dd..d571d2d 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -18,8 +18,8 @@
- - + + diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 9ac2add..274d2e9 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit, OnDestroy, Injectable, ChangeDetectorRef } from '@angular/core'; import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router'; +import { MatDialog, MatDialogConfig} from '@angular/material/dialog'; +import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'; import { UserService } from '../user.service'; import { FullnodeService } from '../fullnode.service'; +import { ScanComponent} from '../scan/scan.component'; import { Tx } from '../tx.model'; import { Subscription, Observable } from 'rxjs'; import { v4 as uuidv4 } from 'uuid'; @@ -20,19 +23,38 @@ export class LoginComponent implements OnInit { txs: Tx[] = []; intervalHolder: any; nodeAddress: string = ''; + localToken: string | null = ''; + selectedValue: number = 0.001; private FullnodeSub: Subscription = new Subscription(); private UserSub: Subscription = new Subscription(); public heightUpdate: Observable; public uZaddrUpdate: Observable; public txsUpdate: Observable; + tickets = [ + { + value: 0.001, + viewValue: 'One hour' + },{ + value: 0.005, + viewValue: 'One day' + } + ]; + + entryForm: FormGroup; + constructor( + private fb: FormBuilder, private activatedRoute: ActivatedRoute, public fullnodeService: FullnodeService, private router: Router, public userService: UserService, + private dialog: MatDialog, private _changeDetectorRef: ChangeDetectorRef ){ //this.fullnodeService.getAddr(); + this.entryForm = fb.group({ + selectedSession: [0.001, Validators.required] + }); this.heightUpdate = fullnodeService.heightUpdate; this.uZaddrUpdate = userService.uZaddrUpdate; this.txsUpdate = userService.txUpdate; @@ -47,12 +69,12 @@ export class LoginComponent implements OnInit { //console.log('FETCH ADDRESS', addrData); this.nodeAddress = addrData.response.addr; //console.log('Node addres ', this.nodeAddress); - var localToken = localStorage.getItem('s4z_token'); + this.localToken = localStorage.getItem('s4z_token'); //console.log(localToken); - if(localToken == null){ + if(this.localToken == null){ var token = uuidv4(); localStorage.setItem('s4z_token', token); - localToken = token; + this.localToken = token; } this.userService.findUser(); this.userService.uZaddrUpdate. @@ -62,16 +84,16 @@ export class LoginComponent implements OnInit { this.router.navigate(['/shop']); } else { console.log('No login for existing token found'); - console.log('Showing QR code for login'); - //console.log(URLSafeBase64.encode(Buffer.from('S4ZEC::'.concat(localToken)))); - var codeString = `zcash:${this.nodeAddress}?amount=0.005&memo=${URLSafeBase64.encode(Buffer.from('ZGO::'.concat(localToken!)))}`; - console.log(codeString); - var qrcode = new QRCode(document.getElementById("qrcode"), { - text: codeString, - logo: "/assets/zcash.png", - logoWidth: 80, - logoHeight: 80 - }); + //console.log('Showing QR code for login'); + ////console.log(URLSafeBase64.encode(Buffer.from('S4ZEC::'.concat(localToken)))); + //var codeString = `zcash:${this.nodeAddress}?amount=0.005&memo=${URLSafeBase64.encode(Buffer.from('ZGO::'.concat(this.localToken!)))}`; + //console.log(codeString); + //var qrcode = new QRCode(document.getElementById("qrcode"), { + //text: codeString, + //logo: "/assets/zcash.png", + //logoWidth: 80, + //logoHeight: 80 + //}); } }); }); @@ -97,6 +119,24 @@ export class LoginComponent implements OnInit { }); } + login() { + console.log('Dropdown:', this.entryForm.value.selectedSession); + const dialogConfig = new MatDialogConfig(); + + dialogConfig.disableClose = true; + dialogConfig.autoFocus = true; + dialogConfig.data = { + totalZec: this.entryForm.value.selectedSession, + addr: this.nodeAddress, + session: this.localToken + }; + + const dialogRef = this.dialog.open(ScanComponent, dialogConfig); + dialogRef.afterClosed().subscribe((val) => { + console.log('Awaiting confirmation'); + }); + } + ngOnDestroy(){ this.FullnodeSub.unsubscribe(); this.UserSub.unsubscribe(); diff --git a/src/app/scan/scan.component.css b/src/app/scan/scan.component.css new file mode 100644 index 0000000..c921a22 --- /dev/null +++ b/src/app/scan/scan.component.css @@ -0,0 +1,3 @@ +.text { + font-family: "Roboto Mono", monospace; +} diff --git a/src/app/scan/scan.component.html b/src/app/scan/scan.component.html new file mode 100644 index 0000000..5be9343 --- /dev/null +++ b/src/app/scan/scan.component.html @@ -0,0 +1,19 @@ +
+

Scan to log in!

+
+ + +
+ + +
@@ -38,13 +38,21 @@ It has {{tx.confirmations}} confirmations, needs 10. - +
-

- Ensure you include your Reply-To shielded address! -

-
-
+ + Session length + + + {{ticket.viewValue}} + + + + + +
+ + + +
+ + +
+ diff --git a/src/app/scan/scan.component.ts b/src/app/scan/scan.component.ts new file mode 100644 index 0000000..0774969 --- /dev/null +++ b/src/app/scan/scan.component.ts @@ -0,0 +1,50 @@ +import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; + +var QRCode = require('easyqrcodejs'); +var URLSafeBase64 = require('urlsafe-base64'); +var Buffer = require('buffer/').Buffer; + +@Component({ + selector: 'app-scan', + templateUrl: './scan.component.html', + styleUrls: ['./scan.component.css'] +}) + +export class ScanComponent implements OnInit{ + address: string; + total: number; + session: string; + codeString: string = ''; + zcashUrl: SafeUrl; + + constructor( + private dialogRef: MatDialogRef, + private sanitizer: DomSanitizer, + @Inject(MAT_DIALOG_DATA) public data: { totalZec: number, addr: string, session: string} + ) { + this.address = data.addr; + this.total = data.totalZec; + this.session = data.session; + this.codeString = `zcash:${this.address}?amount=${this.total.toFixed(6)}&memo=${URLSafeBase64.encode(Buffer.from('ZGO::'.concat(this.session)))}`; + this.zcashUrl = this.sanitizer.bypassSecurityTrustUrl(this.codeString); + } + + ngOnInit() { + var qrcode = new QRCode(document.getElementById("checkout-qr"), { + text: this.codeString, + logo: "/assets/zcash.png", + logoWidth: 80, + logoHeight: 80 + }); + } + + confirm() { + this.dialogRef.close(true); + } + + close() { + this.dialogRef.close(false); + } +}