Commit 5053de8d authored by Emily Jensen's avatar Emily Jensen

working on getting ZXing to generate custom code

parent f0289b13
Pipeline #61119243 passed with stage
in 7 minutes and 2 seconds
......@@ -6,7 +6,6 @@ import { routes } from "./account.common";
import { LoggedInGuard } from "../guards";
import { AccountComponent } from "./account.component";
import { ManageBackupCodeContainer } from "./manage-backup-code/manage-backup-code.container";
import { DeleteContainer } from "./delete/delete.container";
import { ResetPasswordVerifyContainer } from "./reset-password/reset-password-verify/reset-password-verify.container";
import { SetPasswordContainer } from "./reset-password/set-password/set-password.container";
......@@ -21,14 +20,6 @@ export const appRoutes: Routes = [
title: "Account Management"
}
},
{
path: "change-backup-code",
component: ManageBackupCodeContainer,
canActivate: [LoggedInGuard],
data: {
title: "Change Backup Code"
}
},
{
path: "delete",
component: DeleteContainer,
......
......@@ -11,7 +11,6 @@ import { ResetPasswordContainer } from "./reset-password/reset-password.containe
import { ManageBackupCodeContainer } from "./manage-backup-code/manage-backup-code.container";
export const routes: Routes = [
{ path: "", component: ManageBackupCodeContainer },
{
path: "change-password",
component: ChangePasswordContainer,
......@@ -20,6 +19,14 @@ export const routes: Routes = [
title: "Change Account Password"
}
},
{
path: "change-backup-code",
component: ManageBackupCodeContainer,
canActivate: [LoggedInGuard],
data: {
title: "Change Backup Code"
}
},
{
path: "forgot-password",
component: ForgotLearnMoreContainer,
......
import { Injectable } from "@angular/core";
import { Injectable, ViewChild, ElementRef } from "@angular/core";
const ZXing = require("nativescript-zxing");
import { Image } from "tns-core-modules/ui/image";
const ImageSource = require("image-source");
@Injectable({
providedIn: "root"
})
export class BackupCodePdfService {
constructor() {}
@ViewChild("image") image: ElementRef;
@ViewChild("barcodeImg") barcodeImg: ElementRef;
barcodeText = "00381500107604446618";
/**
* Downloads PDF containing backup code string and matching QR Code
* @param code: 32 character backupcode string
*/
download(code: string) {}
download(code: string) {
alert(code);
const barcodeImage = <Image>this.barcodeImg.nativeElement;
const zx = new ZXing();
const newImg = zx.createBarcode({
encode: this.barcodeText,
format: ZXing.QR_CODE
});
barcodeImage.imageSource = ImageSource.fromNativeSource(newImg);
}
// const zx = new ZXing();
// const img = zx.createBarcode({
// encode: "Something else",
// height: 300,
// width: 300,
// format: ZXing.QR_CODE
// });
// const image: Image = this.image.nativeElement;
// image.imageSource = img;
// image.src = img;
// image.height = 300;
// image.width = 300;
// }
}
<DockLayout stretchLastChild="true" class="auth-container">
<FlexboxLayout
#foo
dock="bottom"
class="auth-actions"
flexDirection="row"
justifyContent="space-between"
>
<!-- <app-button text="Print" type="text" (tap)="print()"></app-button> -->
<app-button text="Submit" (tap)="onSubmit()"></app-button>
</FlexboxLayout>
<Scrollview>
<StackLayout class="auth-form-body">
<Button
(tap)="generateBarcode()"
id="barcode"
text="GENERATE BARCODE"
></Button>
<app-text-field
#password
autocorrect="false"
autocapitalizationType="none"
type="password"
label="Verify Password"
returnKeyType="next"
[isFormSubmitted]="form.isSubmitted"
[ngrxFormControl]="form.controls.oldPassword"
></app-text-field>
<Label class="p-10 m-b-10" text="Backup Code: "></Label>
<Label class="p-10 m-b-10" [text]="backupCode"></Label>
<Image
#barcodeImg
id="barcode-img"
height="500"
stretch="aspectFill"
class="text-center"
></Image>
<image #image></image>
</StackLayout>
</Scrollview>
</DockLayout>
import {
Component,
Input,
Output,
ChangeDetectionStrategy,
EventEmitter,
OnDestroy,
ViewChild,
ElementRef
} from "@angular/core";
import { FormGroupState } from "ngrx-forms";
import { IForm } from "./manage-backup-code.reducer";
import { Printer } from "nativescript-printer";
import { BackupCodePdfService } from "../backup-code-pdf.service";
import { Image } from "tns-core-modules/ui/image";
const ZXing = require("nativescript-zxing");
const ImageSource = require("image-source");
@Component({
selector: "app-manage-backup-code",
templateUrl: "./manage-backup-code.component.html",
styleUrls: [
"./manage-backup-code.component.scss",
"../account.component.scss",
"../../../styles/_utility.scss"
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ManageBackupCodeComponent implements OnDestroy {
@Input()
form: FormGroupState<IForm>;
@Input()
errorMessage: string;
@Input()
hasStarted: boolean;
@Input()
hasFinished: boolean;
@Input()
nonFieldErrors: string[];
@Input()
backupCode: string;
@Output()
newBackupCode = new EventEmitter();
@Output()
getBackupPDF = new EventEmitter();
@Output()
reset = new EventEmitter();
@Output()
toggleShowConfirm = new EventEmitter();
@ViewChild("foo") codeInput: ElementRef;
@ViewChild("barcodeImg") barcodeImg: ElementRef;
barcodeText = "00381500107604446618";
@ViewChild("passwordInput") passwordInput: ElementRef;
constructor(private backupCodeToPdf: BackupCodePdfService) {}
onSubmit() {
if (this.form.isValid) {
this.newBackupCode.emit();
}
}
generateBarcode() {
// const barcodeImage = <Image>this.barcodeImg.nativeElement;
// const zx = new ZXing();
// const newImg = zx.createBarcode({
// encode: this.barcodeText,
// format: ZXing.QR_CODE
// });
// barcodeImage.imageSource = ImageSource.fromNativeSource(newImg);
this.backupCodeToPdf.download("whatever");
}
ngOnDestroy() {
this.reset.emit();
}
print() {
alert("backup code: " + this.backupCode);
const printer = new Printer();
printer.isSupported().then((supported: boolean) => {
printer.printScreen({ view: this.codeInput.nativeElement });
});
}
}
import {
Component,
ChangeDetectionStrategy,
ViewChild,
ElementRef,
OnInit
} from "@angular/core";
import { Component, ChangeDetectionStrategy } from "@angular/core";
import * as fromAccount from "../account.reducer";
import { Store, select } from "@ngrx/store";
import { SubmitForm, ResetForm } from "./manage-backup-code.actions";
......@@ -13,31 +7,23 @@ import { BackupCodePdfService } from "../backup-code-pdf.service";
import { SetValueAction } from "ngrx-forms";
import { FORM_ID } from "./manage-backup-code.reducer";
import { Printer } from "nativescript-printer";
const ZXing = require("nativescript-zxing");
import { Image } from "tns-core-modules/ui/image";
@Component({
template: `
<FlexboxLayout
#foo
dock="bottom"
class="auth-actions"
flexDirection="row"
justifyContent="flex-end"
>
<image #image></image>
<app-button
height="36"
text="Sign Up"
type="border"
(tap)="print()"
></app-button>
</FlexboxLayout>
<app-manage-backup-code
[form]="form$ | async"
[hasStarted]="hasStarted$ | async"
[hasFinished]="hasFinished$ | async"
[nonFieldErrors]="errorMessage$ | async"
[backupCode]="backupCode"
(newBackupCode)="newBackupCode()"
(getBackupPDF)="getBackupPDF()"
(reset)="reset()"
(toggleShowConfirm)="toggleConfirm()"
></app-manage-backup-code>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ManageBackupCodeContainer implements OnInit {
export class ManageBackupCodeContainer {
form$ = this.store.pipe(select(fromAccount.manageBackupCode));
hasStarted$ = this.store.pipe(select(fromAccount.manageBackupCodeHasStarted));
hasFinished$ = this.store.pipe(
......@@ -48,8 +34,6 @@ export class ManageBackupCodeContainer implements OnInit {
);
backupCode: string;
showConfirm = true;
@ViewChild("foo") codeInput: ElementRef;
@ViewChild("image") image: ElementRef;
constructor(
private store: Store<any>,
......@@ -65,30 +49,8 @@ export class ManageBackupCodeContainer implements OnInit {
);
}
ngOnInit() {
const zx = new ZXing();
const img = zx.createBarcode({
encode: "Text",
height: 100,
width: 100,
format: ZXing.QR_CODE
});
const image: Image = this.image.nativeElement;
image.imageSource = img;
image.src = img;
image.height = 100;
image.width = 100;
}
print() {
const printer = new Printer();
printer.isSupported().then((supported: boolean) => {
printer.printScreen({ view: this.codeInput.nativeElement });
});
}
getBackupPDF() {
this.backupCodeToPdf.download(this.backupCode);
this.backupCodeToPdf.download("this is fine");
}
newBackupCode() {
this.store.dispatch(new SubmitForm());
......
......@@ -140,6 +140,7 @@ export class ResetPasswordVerifyComponent implements OnInit, OnDestroy {
const code = jsQR(imageData.data, imageData.width, imageData.height);
this.showQuitButton = true;
if (code) {
console.log(code.data);
this.handleQrFound(code.data);
}
}
......
......@@ -5,8 +5,7 @@ import { SecretListContainer } from "./list";
// import { VerifyMfaContainer } from "./login/verify-mfa/verify-mfa.container";
export const routes: Routes = [
// { path: "", redirectTo: "list", pathMatch: "full" },
{ path: "", loadChildren: "./account/account.module#AccountModule" },
{ path: "", redirectTo: "list", pathMatch: "full" },
{
path: "account/login",
component: LoginContainer,
......
......@@ -48,6 +48,7 @@ export class SideDrawer {
{ title: "Passwords" },
// {title: "Groups"},
{ title: "Change Account Password" },
{ title: "Manage Backup Code" },
{ title: "Import" },
{ title: "Export" },
{ title: "Error Reporting" },
......@@ -76,20 +77,23 @@ export class SideDrawer {
);
return;
case 2:
this.zone.run(() => this.router.navigate(["/import"]));
this.zone.run(() => this.router.navigate(["/account/change-backup-code"]));
return;
case 3:
this.zone.run(() => this.router.navigate(["/export"]));
this.zone.run(() => this.router.navigate(["/import"]));
return;
case 4:
this.zone.run(() => this.router.navigate(["/export"]));
return;
case 5:
this.zone.run(() =>
this.router.navigate(["/account/error-reporting"])
);
return;
case 5:
case 6:
this.store.dispatch(new LogoutAction());
return;
case 6:
case 7:
this.zone.run(() =>
this.router.navigate(["/account/forgot-password"])
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment