From 2f610c8f7f339656d7eac1f53579b732f88219f7 Mon Sep 17 00:00:00 2001 From: Rene Vergara Date: Thu, 18 Nov 2021 16:38:25 -0600 Subject: [PATCH] Implement stepper for login --- backend/app.js | 13 ++-- backend/models/tx.js | 2 +- backend/models/zectxs.js | 12 ++++ src/app/app.module.ts | 4 ++ src/app/login/login.component.html | 103 +++++++++++++---------------- src/app/login/login.component.ts | 40 ++++++++--- 6 files changed, 97 insertions(+), 77 deletions(-) create mode 100644 backend/models/zectxs.js diff --git a/backend/app.js b/backend/app.js index 47356c6..b5cc3d3 100644 --- a/backend/app.js +++ b/backend/app.js @@ -10,6 +10,7 @@ const itemmodel = require('./models/item'); const ordermodel = require('./models/order'); const pricemodel = require('./models/price'); const txmodel = require('./models/tx'); +const zecTxModel = require('./models/zectxs.js'); const mongoose = require('mongoose'); const stdrpc = require('stdrpc'); const CoinGecko = require('coingecko-api'); @@ -99,7 +100,7 @@ var blockInterval = setInterval( function() { var re = /.*ZGO::(.*)\sReply-To:\s(z\w+)/; async.each (txs, function(txData, callback) { var memo = hexToString(txData.memo).replace(/\0/g, ''); - txmodel.updateOne({txid: txData.txid}, { confirmations: txData.confirmations, amount:txData.amount, memo: memo}, {new:true, upsert:true}, function(err,docs) { + zecTxModel.updateOne({txid: txData.txid}, { txid: txData.txid, confirmations: txData.confirmations, amount:txData.amount, memo: memo}, {new:true, upsert:true}, function(err,docs) { if (err) { console.log(err); } @@ -114,16 +115,14 @@ var blockInterval = setInterval( function() { var amount = txData.amount; var expiration = blocktime; //console.log(' ', session, blocktime); - txmodel.updateOne({txid: txData.txid}, { address: address, session: session, confirmations: txData.confirmations, amount:txData.amount, memo: memo}, {new:true, upsert:true}, function(err,docs) { + txmodel.updateOne({txid: txData.txid}, { txid: txData.txid, address: address, session: session, confirmations: txData.confirmations, amount:txData.amount, memo: memo}, {new:true, upsert:true}, function(err,docs) { if (err) { console.log(err); } }); if (txData.confirmations >= 6 ) { usermodel.findOne({address: address, session: session, blocktime: blocktime}).then(function(doc){ - if (doc != null) { - console.log('Found user'); - } else { + if (doc == null){ console.log('User not found', session, blocktime, amount); if (amount >= 0.001 && amount < 0.005){ expiration = blocktime + 3600; @@ -152,9 +151,7 @@ var blockInterval = setInterval( function() { } }); ownermodel.findOne({address: address}).then(function (oDoc) { - if (oDoc != null) { - console.log('Found owner'); - } else { + if (oDoc == null) { console.log('Owner not found', session); var owner = new ownermodel({ address: address, diff --git a/backend/models/tx.js b/backend/models/tx.js index 570b325..0140616 100644 --- a/backend/models/tx.js +++ b/backend/models/tx.js @@ -5,7 +5,7 @@ const txSchema = mongoose.Schema({ session: {type: String, required:true}, confirmations: {type: Number, required:true}, amount: {type: Number, required:true}, - txid: {type:String, required:true}, + txid: {type:String, required:true, unique: true}, memo: {type:String} }); diff --git a/backend/models/zectxs.js b/backend/models/zectxs.js new file mode 100644 index 0000000..8ad2553 --- /dev/null +++ b/backend/models/zectxs.js @@ -0,0 +1,12 @@ +const mongoose = require('mongoose'); + +const ZecTxSchema = mongoose.Schema({ + address: {type: String}, + session: {type: String, required:true}, + confirmations: {type: Number, required:true}, + amount: {type: Number, required:true}, + txid: {type:String, required:true, unique: true}, + memo: {type:String} +}); + +module.exports = mongoose.model('ZecTx', ZecTxSchema); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8772c3c..2cb527c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,6 +12,8 @@ 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 { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatStepperModule } from '@angular/material/stepper'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -63,6 +65,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; MatDividerModule, MatListModule, MatSelectModule, + MatProgressBarModule, + MatStepperModule, BrowserAnimationsModule ], exports: [ diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 032e8c5..f6e1cb0 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -19,62 +19,51 @@

The Zcash Register

-
-
    -
  1. - Select your session length. -
    2. -
  2. - Confirm you've sent your shielded memo. -
    3. -
  3. - Wait for confirmation of your transaction on the Zcash blockchain (~10 minutes). -
    4. -
  4. - Enter the PIN provided by ZGo to your wallet to confirm ownership. -
    5. -
-
-
-

Expecting confirmation around block {{targetBlock}}.

-
- - -

- Check your wallet -

- - PIN - - - - - - - -

Login received!

- - It needs {{6 - tx.confirmations}} more confirmations. - - - -
- - Session length - - - {{ticket.viewValue}} - - - -

Wrong pin!

- - - -
+ + + +
+

Select your session length and confirm once you've sent your memo:

+ + Session length + + + {{ticket.viewValue}} + + + + + + +
+ + + +

{{barMessage}}

+ + + + + +

+ Check your wallet +

+ + PIN + + +

Wrong pin!

+ + + + + +
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 9ec2ca3..131515d 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -1,7 +1,9 @@ -import { Component, OnInit, OnDestroy, Injectable, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, Injectable, ChangeDetectorRef, ViewChild, AfterViewInit } 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 { ProgressBarMode } from '@angular/material/progress-bar'; +import { MatStepper } from '@angular/material/stepper'; import { UserService } from '../user.service'; import { FullnodeService } from '../fullnode.service'; import { ScanComponent} from '../scan/scan.component'; @@ -21,7 +23,7 @@ var Buffer = require('buffer/').Buffer; styleUrls: ['./login.component.css'] }) -export class LoginComponent implements OnInit { +export class LoginComponent implements OnInit, AfterViewInit { txs: Tx[] = []; intervalHolder: any; nodeAddress: string = ''; @@ -57,10 +59,15 @@ export class LoginComponent implements OnInit { prompt: boolean = false; confirmedMemo: boolean = false; targetBlock: number = 0; + barMode: ProgressBarMode = 'indeterminate'; + barValue = 0; + barMessage = 'Scanning blockchain for login memo, please wait.'; + @ViewChild('stepper') private myStepper?: MatStepper; entryForm: FormGroup; pinForm: FormGroup; + constructor( private fb: FormBuilder, private activatedRoute: ActivatedRoute, @@ -89,7 +96,8 @@ export class LoginComponent implements OnInit { }); } - ngOnInit(){ + ngAfterViewInit(){ + //console.log('Step', this.myStepper); this.pinError = false; //console.log('Activated route data in Component:::', this.activatedRoute.data); this.activatedRoute.data.subscribe((addrData) => { @@ -105,12 +113,15 @@ export class LoginComponent implements OnInit { } this.loginCheck(); }); + } + + ngOnInit(){ this.intervalHolder = setInterval(() => { this.fullnodeService.getHeight(); //this.userService.findUser(); this.loginCheck(); this._changeDetectorRef.markForCheck(); - }, 1000 * 75); + }, 1000 * 60); } loginCheck(){ @@ -122,16 +133,24 @@ export class LoginComponent implements OnInit { }); this.userUpdate.subscribe((user) => { if (user.expiration > today) { - this.prompt = true; - console.log('Log in found in blockchain!'); + if(this.myStepper!.selectedIndex === 1){ + this.myStepper!.next(); + } + //console.log('Log in found in blockchain!'); if (user.validated) { this.router.navigate(['/shop']); } } }); + if (this.txs.length > 0) { + this.barMode = 'determinate'; + this.barValue = (this.txs[0].confirmations / 6) * 100; + this.confirmedMemo = true; + this.barMessage = 'Login memo found, awaiting confirmations'; + } } - login() { + login(stepper: MatStepper) { //console.log('Dropdown:', this.entryForm.value.selectedSession); const dialogConfig = new MatDialogConfig(); @@ -146,10 +165,9 @@ 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.pipe(take(1)).subscribe(block => { - this.targetBlock = block + 10; - }); + if(val){ + stepper.next(); + } }); }