...
 
Commits (2)
<Button text="new-backup-code works!" class="btn btn-primary"></Button>
\ No newline at end of file
<Label class="p-10 m-b-10" text="Backup Code: "></Label>
<Label class="p-10 m-b-10" [text]="code"></Label>
<Button
(tap)="generateBarcode()"
id="barcode"
text="Step 3: Generate Backup Code Page"
></Button>
<Image
#barcodeImg
id="barcode-img"
height="500"
stretch="aspectFill"
class="text-center"
></Image>
<app-button text="Step 4: Print" type="text" (tap)="print()"></app-button>
import { Component, Input, ViewChild } from "@angular/core";
import { Printer } from "nativescript-printer";
import { Image } from "tns-core-modules/ui/image";
const ZXing = require("nativescript-zxing");
const ImageSource = require("image-source");
@Component({
selector: "app-download-backup-code",
templateUrl: "./download-backup-code.component.html",
styleUrls: [
"./download-backup-code.component.scss",
"../manage-backup-code.component.scss"
]
})
export class DownloadBackupCodeComponent {
@Input() code: string;
@ViewChild("printArea") printArea: ElementRef;
@ViewChild("barcodeImg") barcodeImg: ElementRef;
generateBarcode() {
if (this.code) {
const barcodeImage = <Image>this.barcodeImg.nativeElement;
const zx = new ZXing();
const newImg = zx.createBarcode({
encode: this.code,
format: ZXing.QR_CODE
});
barcodeImage.imageSource = ImageSource.fromNativeSource(newImg);
} else {
alert("invalid code");
}
}
print() {
const printer = new Printer();
printer.isSupported().then((supported: boolean) => {
printer.printScreen({ view: this.printArea.nativeElement });
});
}
}
......@@ -11,20 +11,9 @@
[ngrxFormControl]="form.controls.oldPassword"
></app-text-field>
<app-button text="Step 2: Submit" (tap)="onSubmit()"></app-button>
<Label class="p-10 m-b-10" text="Backup Code: "></Label>
<Label class="p-10 m-b-10" [text]="backupCode"></Label>
<Button
(tap)="generateBarcode()"
id="barcode"
text="Step 3: Generate Backup Code Page"
></Button>
<Image
#barcodeImg
id="barcode-img"
height="500"
stretch="aspectFill"
class="text-center"
></Image>
<app-button text="Step 4: Print" type="text" (tap)="print()"></app-button>
<app-download-backup-code
*ngIf="hasFinished"
[code]="backupCode"
></app-download-backup-code>
</StackLayout>
</Scrollview>
......@@ -10,11 +10,6 @@ import {
} from "@angular/core";
import { FormGroupState } from "ngrx-forms";
import { IForm } from "./manage-backup-code.reducer";
import { Printer } from "nativescript-printer";
import { Image } from "tns-core-modules/ui/image";
const ZXing = require("nativescript-zxing");
const ImageSource = require("image-source");
@Component({
selector: "app-manage-backup-code",
......@@ -39,14 +34,11 @@ export class ManageBackupCodeComponent implements OnDestroy {
@Output() reset = new EventEmitter();
@Output() toggleShowConfirm = new EventEmitter();
@ViewChild("printArea") printArea: ElementRef;
@ViewChild("barcodeImg") barcodeImg: ElementRef;
@ViewChild("passwordInput") passwordInput: ElementRef;
onSubmit() {
if (this.form.isValid) {
alert("submitted and valid");
this.newBackupCode.emit();
}
}
......@@ -54,21 +46,4 @@ export class ManageBackupCodeComponent implements OnDestroy {
ngOnDestroy() {
this.reset.emit();
}
generateBarcode() {
const barcodeImage = <Image>this.barcodeImg.nativeElement;
const zx = new ZXing();
const newImg = zx.createBarcode({
encode: this.backupCode,
format: ZXing.QR_CODE
});
barcodeImage.imageSource = ImageSource.fromNativeSource(newImg);
}
print() {
const printer = new Printer();
printer.isSupported().then((supported: boolean) => {
printer.printScreen({ view: this.printArea.nativeElement });
});
}
}