Implement stepper for login

This commit is contained in:
Rene Vergara 2021-11-18 16:38:25 -06:00
parent e5ff05d814
commit 2f610c8f7f
6 changed files with 97 additions and 77 deletions

View File

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

View File

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

12
backend/models/zectxs.js Normal file
View File

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

View File

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

View File

@ -19,62 +19,51 @@
<div align="center">
<mat-card>
<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>
Check your wallet
</h4>
<mat-form-field appearance="outline">
<mat-label>PIN</mat-label>
<input matInput formControlName="pinValue">
</mat-form-field>
<mat-card-actions>
<button mat-raised-button color="primary" [disabled]="!pinForm.valid" (click)="confirmPin()">
Confirm
</button>
</mat-card-actions>
</mat-card>
<mat-card class="alert-success" *ngIf = "txs.length > 0">
<h4>Login received!</h4>
<mat-list>
<mat-list-item *ngFor="let tx of txsUpdate | async">It needs {{6 - tx.confirmations}} more confirmations.</mat-list-item>
</mat-list>
</mat-card>
<mat-card [formGroup]="entryForm" *ngIf="!prompt && txs.length <=0">
<div align="center" id="info">
<mat-form-field appearance="outline">
<mat-label>Session length</mat-label>
<mat-select formControlName="selectedSession">
<mat-option *ngFor="let ticket of tickets" [value]="ticket.value">
{{ticket.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<p *ngIf="pinError">Wrong pin!</p>
<mat-card-actions>
<button mat-raised-button color="primary" [disabled]="!entryForm.valid" (click)="login()">
<mat-icon class="icon">login</mat-icon><span class="bigbutton">Log in</span>
</button>
</mat-card-actions>
</div>
<mat-vertical-stepper #stepper linear>
<mat-step label="Log in with a shielded memo">
<mat-card [formGroup]="entryForm">
<div align="center" id="info">
<p>Select your session length and confirm once you've sent your memo:</p>
<mat-form-field appearance="outline">
<mat-label>Session length</mat-label>
<mat-select formControlName="selectedSession">
<mat-option *ngFor="let ticket of tickets" [value]="ticket.value">
{{ticket.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-card-actions>
<button mat-raised-button color="primary" [disabled]="!entryForm.valid" (click)="login(stepper)">
<mat-icon class="icon">login</mat-icon><span class="bigbutton">Log in</span>
</button>
</mat-card-actions>
</div>
</mat-card>
</mat-step>
<mat-step label="Step 2">
<p>{{barMessage}}</p>
<mat-progress-bar
[mode]="barMode"
[value]="barValue">
</mat-progress-bar>
</mat-step>
<mat-step label="Step 3">
<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>

View File

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