Commit 37992c0a authored by David Burke's avatar David Burke

Began work on registration backup code with pdf

parent 3b07a1ed
Pipeline #30312471 failed with stage
in 8 minutes and 21 seconds
import { configure } from "@storybook/angular";
import "!style-loader!css-loader!sass-loader!../src/app/app.style.scss";
function loadStories() {
require("../src/stories/index.ts");
}
configure(loadStories, module);
......@@ -21,6 +21,7 @@
"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json",
"compodoc-serve": "./node_modules/.bin/compodoc -p tsconfig.json -s",
"compodoc-gitlab": "./node_modules/.bin/compodoc -p tsconfig.json -d public/",
"storybook": "start-storybook -p 9001 -c .storybook",
"prettier": "find src/ -type f -name \"*.ts\" | xargs ./node_modules/.bin/prettier --write"
},
"homepage": "https://gitlab.com/burke-software/passit-frontend",
......@@ -47,12 +48,16 @@
"@ngrx/store": "^6.0.1",
"@ngrx/store-devtools": "^6.0.1",
"@types/file-saver": "^1.3.0",
"@types/jspdf": "^1.1.31",
"@types/papaparse": "~4.5.2",
"@types/qrcode": "^1.2.0",
"angular2-hotkeys": "^2.0.3",
"canvg": "^1.5.3",
"core-js": "^2.5.1",
"file-saver": "~1.3.3",
"global": "^4.3.2",
"jasmine-marbles": "^0.3.1",
"jspdf": "^1.4.1",
"ng-inline-svg": "~8.0.0",
"ng-select": "~1.0.0",
"ngrx-forms": "^3.0.2",
......@@ -62,6 +67,7 @@
"normalize-scss": "~7.0.0",
"papaparse": "~4.6.0",
"passit-sdk-js": "2.3.0",
"qrcode": "^1.2.2",
"raven-js": "^3.26.4",
"rxjs": "~6.1.0",
"rxjs-compat": "^6.1.0",
......@@ -77,10 +83,12 @@
"@angular/cli": "^6.1.2",
"@angular/compiler-cli": "^6.0.0",
"@compodoc/compodoc": "~1.1.3",
"@storybook/angular": "^3.4.10",
"@types/jasmine": "~2.8.2",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.5.2",
"@wext/shipit": "^0.1.3",
"babel-core": "^6.26.3",
"breakpoint-sass": "~2.7.1",
"codelyzer": "~4.4.3",
"jasmine-core": "~2.8.0",
......@@ -99,6 +107,6 @@
"typescript": "~2.9.2",
"web-ext": "^2.4.0",
"web-ext-types": "^2.1.0",
"webpack-bundle-analyzer": "^2.9.2"
"webpack-bundle-analyzer": "^3.0.2"
}
}
<p>
backup-code works!
</p>
<button id="backup-download-button" class="button button--primary" (click)="download()">
Download
</button>
<a class="text-link text-link--caret text-link--large" id="backup-skip" href="javascript:void(0)" (click)="skip.emit()">Skip (Not Recommended)</a>
\ No newline at end of file
import { Component, Input, EventEmitter, Output } from "@angular/core";
import * as jsPDF from "jspdf";
import * as QRCode from "qrcode";
import * as canvg from "canvg";
@Component({
selector: "app-backup-code",
templateUrl: "./backup-code.component.html"
})
export class BackupCodeComponent {
@Input()
code: string;
@Output()
skip = new EventEmitter();
constructor() {}
download() {
// Placing a svg into a pdf is not easy
// https://stackoverflow.com/a/35788928/443457
QRCode.toString(this.code).then(image => {
const doc = new jsPDF({
unit: "in",
format: [8.5, 11]
});
const canvas = document.createElement("canvas");
// Set the size here, anywhere else seems to result in a cropped or ugly qrcode.
canvas.width = 500;
canvas.height = 500;
canvg(canvas, image);
doc.text(this.code, 0.5, 0.5);
doc.addImage(
canvas,
"PNG",
1,
1,
undefined,
undefined,
undefined,
"FAST"
);
doc.save("Passit-Backup.pdf");
});
}
}
......@@ -32,6 +32,7 @@ import { ConfirmEmailGuard } from "./confirm-email/confirm-email.guard";
import { ErrorReportingComponent } from "./error-reporting/error-reporting.component";
import { ErrorReportingContainer } from "./error-reporting/error-reporting.container";
import { ErrorReportingEffects } from "./error-reporting/error-reporting.effects";
import { BackupCodeComponent } from "./backup-code/backup-code.component";
export const COMPONENTS = [
AccountComponent,
......@@ -46,7 +47,8 @@ export const COMPONENTS = [
LoginComponent,
LoginContainer,
RegisterComponent,
RegisterContainer
RegisterContainer,
BackupCodeComponent
];
export const SERVICES = [UserService, ConfirmEmailGuard];
......
<div class="account-container">
<app-backup-code></app-backup-code>
<div class="account-column account-column--left">
<div class="account-column__inner account-column__inner--left">
<div class="account-column__logo" [inlineSVG]="'../assets/svg/passit-logo.svg'"></div>
......
......@@ -34,7 +34,7 @@ describe("Service: UserService", () => {
store = TestBed.get(Store);
});
it("Can set up SDK", done => {
it("Can set up SDK", (done: any) => {
const user: User = {
email: "test@example.com",
password: "mypass"
......
......@@ -48,7 +48,7 @@ describe("FormFill", () => {
* Using set timeout....because the guess and fill function doesn't return anything
* maybe it should?
*/
it("should find and fill a login form", done => {
it("should find and fill a login form", (done: any) => {
skipIfPhantom();
const submitButton = document.getElementById("the-submit");
spyOn(submitButton as HTMLElement, "click");
......
......@@ -62,7 +62,7 @@ describe("Group Service", () => {
let service: GroupService;
let sdk: any;
it("create new secret and save in store", done => {
it("create new secret and save in store", (done: any) => {
// Should test that the current user is ALWAYS added to a new group
sdk = new FakeSDK();
service = new GroupService(sdk);
......
......@@ -36,7 +36,7 @@ describe("Secret Service", () => {
}).compileComponents();
}));
it("get secrets and save in store", done => {
it("get secrets and save in store", (done: any) => {
sdk = new FakeSDK();
service = new SecretService(sdk);
service.getSecrets().subscribe(secrets => {
......
declare module "@braintree/sanitize-url" {
export function sanitizeUrl(url: string): string;
};
}
declare module "canvg";
import { storiesOf } from "@storybook/angular";
import { BackupCodeComponent } from "../app/account/backup-code/backup-code.component";
storiesOf("backup pdf", module).add("shows pdf", () => ({
component: BackupCodeComponent,
props: {
code: "CBVDCH4G23MJ46FXJBR8GDX4WKBF97VR"
}
}));
This source diff could not be displayed because it is too large. You can view the blob instead.
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