diff --git a/client/package.json b/client/package.json index 5ec072a..2aeee84 100644 --- a/client/package.json +++ b/client/package.json @@ -23,6 +23,7 @@ "bootstrap": "^5.3.8", "bootstrap-icons": "^1.13.1", "ng-qrcode": "^21.0.0", + "qr-scanner": "^1.4.2", "qrcode": "^1.5.4", "rxjs": "~7.8.0", "tslib": "^2.3.0" diff --git a/client/src/app/components/modal/modal.html b/client/src/app/components/modal/modal.html new file mode 100644 index 0000000..e03e5ab --- /dev/null +++ b/client/src/app/components/modal/modal.html @@ -0,0 +1,7 @@ +
+ + +
+
+ +
diff --git a/client/src/app/components/modal/modal.less b/client/src/app/components/modal/modal.less new file mode 100644 index 0000000..e69de29 diff --git a/client/src/app/components/modal/modal.spec.ts b/client/src/app/components/modal/modal.spec.ts new file mode 100644 index 0000000..f7c9287 --- /dev/null +++ b/client/src/app/components/modal/modal.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Modal } from './modal'; + +describe('Modal', () => { + let component: Modal; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Modal], + }).compileComponents(); + + fixture = TestBed.createComponent(Modal); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/src/app/components/modal/modal.ts b/client/src/app/components/modal/modal.ts new file mode 100644 index 0000000..3c0199e --- /dev/null +++ b/client/src/app/components/modal/modal.ts @@ -0,0 +1,19 @@ +import { NgTemplateOutlet } from '@angular/common'; +import { Component, Input, TemplateRef } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-modal', + imports: [NgTemplateOutlet], + templateUrl: './modal.html', + styleUrl: './modal.less', +}) +export class Modal { + @Input({required: true}) title!: string; + @Input({required: true}) body!: TemplateRef; + + constructor( + public activeModal: NgbActiveModal + ){} + +} diff --git a/client/src/app/screens/screen-receive/screen-receive.html b/client/src/app/screens/screen-receive/screen-receive.html index f1fd70a..06943a6 100644 --- a/client/src/app/screens/screen-receive/screen-receive.html +++ b/client/src/app/screens/screen-receive/screen-receive.html @@ -38,19 +38,13 @@ - -
- - -
-
- -
+ +
-
diff --git a/client/src/app/screens/screen-receive/screen-receive.ts b/client/src/app/screens/screen-receive/screen-receive.ts index 1d97b99..107debc 100644 --- a/client/src/app/screens/screen-receive/screen-receive.ts +++ b/client/src/app/screens/screen-receive/screen-receive.ts @@ -1,8 +1,9 @@ -import { Component, inject, TemplateRef } from '@angular/core'; +import { Component, inject, TemplateRef, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { QrCodeComponent } from 'ng-qrcode'; import { APIService } from '../../services/api'; +import { Modal } from '../../components/modal/modal'; @Component({ selector: 'app-screen-receive', @@ -13,6 +14,7 @@ import { APIService } from '../../services/api'; export class ScreenReceive { private modalService = inject(NgbModal); api = inject(APIService); + @ViewChild('qrTemplate') qrTemplate !: TemplateRef; amount: number = 0; get shareableLink(): string { @@ -23,7 +25,9 @@ export class ScreenReceive { copyLink() { navigator.clipboard.writeText(this.shareableLink); } - open(content: TemplateRef) { - this.modalService.open(content) + openModal() { + const modalRef = this.modalService.open(Modal); + modalRef.componentInstance.title = `Pay ${this.amount} to ${this.api.currentUser.id}` + modalRef.componentInstance.body = this.qrTemplate; } } diff --git a/client/src/app/screens/screen-send/screen-send.html b/client/src/app/screens/screen-send/screen-send.html index 4be2355..930e074 100644 --- a/client/src/app/screens/screen-send/screen-send.html +++ b/client/src/app/screens/screen-send/screen-send.html @@ -31,6 +31,7 @@ placeholder="username" [(ngModel)]="recipient" /> + @@ -55,3 +56,7 @@ + + Abc + + diff --git a/client/src/app/screens/screen-send/screen-send.ts b/client/src/app/screens/screen-send/screen-send.ts index 47331cd..88be295 100644 --- a/client/src/app/screens/screen-send/screen-send.ts +++ b/client/src/app/screens/screen-send/screen-send.ts @@ -1,11 +1,14 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { APIService } from '../../services/api'; import { NotificationService } from '../../services/notification'; +import QrScanner from 'qr-scanner'; +import { NgbModal, NgbSlide } from '@ng-bootstrap/ng-bootstrap'; +import { Modal } from '../../components/modal/modal'; @Component({ selector: 'app-screen-send', - imports: [FormsModule], + imports: [FormsModule, NgbSlide], templateUrl: './screen-send.html', styleUrl: './screen-send.less', }) @@ -13,10 +16,13 @@ export class ScreenSend { amount: number = 0; recipient: string = ''; reference: string = ''; + scanner!: QrScanner; + @ViewChild('qrScanner') templScanner!: TemplateRef; constructor( private api: APIService, private notify: NotificationService, + private modalService: NgbModal, ){} sendMoney() { @@ -44,4 +50,12 @@ export class ScreenSend { this.recipient = ''; this.reference = ''; } + openScanner(){ + const modalRef = this.modalService.open(Modal); + modalRef.componentInstance.title = 'Scan a QR Code'; + modalRef.componentInstance.body = this.templScanner; + + + } + closeScanner(){} } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4b1f548..58afe44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "bootstrap": "^5.3.8", "bootstrap-icons": "^1.13.1", "ng-qrcode": "^21.0.0", + "qr-scanner": "^1.4.2", "qrcode": "^1.5.4", "rxjs": "~7.8.0", "tslib": "^2.3.0" @@ -4391,6 +4392,12 @@ "undici-types": "~7.18.0" } }, + "node_modules/@types/offscreencanvas": { + "version": "2019.7.3", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz", + "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==", + "license": "MIT" + }, "node_modules/@types/pg": { "version": "8.16.0", "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.16.0.tgz", @@ -9237,6 +9244,15 @@ "node": ">=6" } }, + "node_modules/qr-scanner": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/qr-scanner/-/qr-scanner-1.4.2.tgz", + "integrity": "sha512-kV1yQUe2FENvn59tMZW6mOVfpq9mGxGf8l6+EGaXUOd4RBOLg7tRC83OrirM5AtDvZRpdjdlXURsHreAOSPOUw==", + "license": "MIT", + "dependencies": { + "@types/offscreencanvas": "^2019.6.4" + } + }, "node_modules/qrcode": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",