+
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index d467bf0..752d2e1 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,23 +1,28 @@
import { Routes } from '@angular/router';
import { Startpage } from './sites/startpage/startpage';
-import {TestIt} from './sites/test-it/test-it';
-import {GeneratorPassword} from './sites/generator/password/generator-password.component';
+import { TestIt } from './sites/test-it/test-it';
+import { GeneratorPassword } from './sites/generator/password/generator-password.component';
+import { GeneratorQrcode } from './sites/generator/qrcode/generator-qrcode';
export const routes: Routes = [
{
- path:'test',
+ path: 'test',
component: TestIt,
},
{
path: '',
component: Startpage,
- },
+ }, // GENERATORS
{
path: 'generator/password',
component: GeneratorPassword,
},
+ {
+ path: 'generator/qrcode',
+ component: GeneratorQrcode,
+ },
{
path: '**',
redirectTo: '',
- }
+ },
];
diff --git a/src/app/components/custom-card/custom-card.html b/src/app/components/custom-card/custom-card.html
index 330f8bd..6a85138 100644
--- a/src/app/components/custom-card/custom-card.html
+++ b/src/app/components/custom-card/custom-card.html
@@ -1,8 +1,8 @@
@if (enabled()) {
+ class="h-full hover:cursor-pointer flex flex-col p-6 rounded-lg border border-gray-700 bg-zinc-800 transition-colors duration-200 hover:border-blue-500"
+ [routerLink]="destination()"
+ >
}
diff --git a/src/app/components/custom-card/custom-card.ts b/src/app/components/custom-card/custom-card.ts
index 51a6c57..cc0051c 100644
--- a/src/app/components/custom-card/custom-card.ts
+++ b/src/app/components/custom-card/custom-card.ts
@@ -1,7 +1,7 @@
import { Component, input } from '@angular/core';
import { CustomTitle } from '../custom-title/custom-title';
-import {RouterLink} from '@angular/router';
-import {NgStyle} from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { NgStyle } from '@angular/common';
@Component({
selector: 'app-custom-card',
@@ -10,7 +10,6 @@ import {NgStyle} from '@angular/common';
styleUrl: './custom-card.css',
})
export class CustomCard {
-
title = input.required
- ();
additionalListEnabled = input(false);
- additionalListText =input();
+ additionalListText = input();
}
diff --git a/src/app/components/custom-title/custom-title.html b/src/app/components/custom-title/custom-title.html
index a258993..5ec4ae0 100644
--- a/src/app/components/custom-title/custom-title.html
+++ b/src/app/components/custom-title/custom-title.html
@@ -1,6 +1,8 @@
{{ text() }}
+ 'font-size': textSizeInPx() + 'px',
+ color: textColor(),
+ 'font-weight': fontWeight(),
+ }"
+ >{{ text() }}
diff --git a/src/app/components/custom-title/custom-title.ts b/src/app/components/custom-title/custom-title.ts
index 51b111d..cd977c0 100644
--- a/src/app/components/custom-title/custom-title.ts
+++ b/src/app/components/custom-title/custom-title.ts
@@ -1,5 +1,5 @@
import { Component, input } from '@angular/core';
-import {NgClass, NgStyle} from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
@Component({
selector: 'app-custom-title',
@@ -11,5 +11,5 @@ export class CustomTitle {
text = input.required();
textSizeInPx = input(16);
textColor = input();
- fontWeight = input("normal");
+ fontWeight = input('normal');
}
diff --git a/src/app/sites/generator/password/generator-password.component.html b/src/app/sites/generator/password/generator-password.component.html
index 423ea5a..faf1e97 100644
--- a/src/app/sites/generator/password/generator-password.component.html
+++ b/src/app/sites/generator/password/generator-password.component.html
@@ -1,62 +1,105 @@
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [GeneratorQrcode],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(GeneratorQrcode);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/sites/generator/qrcode/generator-qrcode.ts b/src/app/sites/generator/qrcode/generator-qrcode.ts
new file mode 100644
index 0000000..bd976d2
--- /dev/null
+++ b/src/app/sites/generator/qrcode/generator-qrcode.ts
@@ -0,0 +1,61 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import QRCode from 'qrcode';
+import { CustomTitle } from "../../../components/custom-title/custom-title";
+import { CustomDescription } from "../../../components/custom-description/custom-description";
+
+@Component({
+ selector: 'app-generator-qrcode',
+ templateUrl: './generator-qrcode.html',
+ styleUrls: ['./generator-qrcode.css'],
+ imports: [ReactiveFormsModule, CustomTitle, CustomDescription],
+})
+export class GeneratorQrcode {
+ qrDataUrl: string | null = null;
+ qrCodeDetailsForm: any;
+
+ @ViewChild('canvas', { static: false }) canvasRef!: ElementRef;
+
+ @ViewChild('ziel') zielRef!: ElementRef;
+
+ constructor(private fb: FormBuilder) {
+ this.qrCodeDetailsForm = this.fb.group({
+ text: ['', Validators.required],
+ size: [300, Validators.required],
+ darkColor: ['#000000', Validators.required],
+ lightColor: ['#FFFFFF', Validators.required],
+ });
+ }
+
+ async generateQR(): Promise {
+ if (!this.qrCodeDetailsForm.valid) return;
+ const canvas = this.canvasRef?.nativeElement;
+ if (!canvas) return;
+
+ try {
+ await QRCode.toCanvas(canvas, this.qrCodeDetailsForm.value.text, {
+ width: this.qrCodeDetailsForm.value.size,
+ margin: 2,
+ color: {
+ dark: this.qrCodeDetailsForm.value.darkColor,
+ light: this.qrCodeDetailsForm.value.lightColor,
+ },
+ });
+ this.qrDataUrl = canvas.toDataURL('image/png');
+ this.zielRef.nativeElement.scrollIntoView({ behavior: 'smooth' });
+
+ } catch (err) {
+ console.error('Error generating QR code:', err);
+ }
+ }
+
+ downloadQR(): void {
+ if (!this.qrDataUrl) return;
+ const link = document.createElement('a');
+ link.download = 'qrcode.png';
+ link.href = this.qrDataUrl;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+}
diff --git a/src/app/sites/startpage/startpage.html b/src/app/sites/startpage/startpage.html
index 2cbef19..0ada5f7 100644
--- a/src/app/sites/startpage/startpage.html
+++ b/src/app/sites/startpage/startpage.html
@@ -21,7 +21,13 @@
diff --git a/src/app/sites/startpage/startpage.ts b/src/app/sites/startpage/startpage.ts
index 0b7244a..d0eaf2d 100644
--- a/src/app/sites/startpage/startpage.ts
+++ b/src/app/sites/startpage/startpage.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';
import { CustomTitle } from '../../components/custom-title/custom-title';
import { CustomCard } from '../../components/custom-card/custom-card';
-import {ReactiveFormsModule} from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-startpage',
@@ -11,33 +11,42 @@ import {ReactiveFormsModule} from '@angular/forms';
imports: [CustomTitle, CustomCard, ReactiveFormsModule],
})
export class Startpage {
-
- features = [{
- name: 'Generators',
- enabled: true,
- tools: [{
- name: 'Password Generator',
- description: 'Create secure passwords with custom options',
- link: '/generator/password',
+ features = [
+ {
+ name: 'Generators',
enabled: true,
- }, {
- name: 'QR Code Generator',
- description: 'Generate and download QR codes for any text or URL',
- link: '/generator/qr',
+ tools: [
+ {
+ name: 'Password Generator',
+ description: 'Create secure passwords with custom options',
+ link: '/generator/password',
+ enabled: true,
+ },
+ {
+ name: 'QR Code Generator',
+ description: 'Generate and download QR codes for any text or URL',
+ link: '/generator/qrcode',
+ enabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Tests',
enabled: true,
- }]}, {
- name: 'Tests',
- enabled: true,
- tools: [{
- name: 'Test 1',
- description: 'This is a just test description.',
- link: '/test',
- enabled: true,
- },{
- name: 'Test 2',
- description: 'This is a just test description.',
- link: '/test',
- enabled: false,
- }]
- }];
+ tools: [
+ {
+ name: 'Test 1',
+ description: 'This is a just test description.',
+ link: '/test',
+ enabled: true,
+ },
+ {
+ name: 'Test 2',
+ description: 'This is a just test description.',
+ link: '/test',
+ enabled: false,
+ },
+ ],
+ },
+ ];
}
diff --git a/src/app/sites/test-it/test-it.html b/src/app/sites/test-it/test-it.html
index c3d7063..824c597 100644
--- a/src/app/sites/test-it/test-it.html
+++ b/src/app/sites/test-it/test-it.html
@@ -4,6 +4,8 @@
+ >
+ Home
+
{{descriptionText()}}
+{{ descriptionText() }}
@if (additionalListEnabled()) {-
@for (item of additionalListText(); track $index) {
-
- {{item}} +
- {{ item }} }
-
-
-
+
+
+
-
-
-+
+
+
@if (getStrengthDescription(passwordGenerator.value.length)) { - {{getStrengthDescription(passwordGenerator.value.length).text}}* + {{ getStrengthDescription(passwordGenerator.value.length).text }}* }
-
+
-
+
-
+
*Based on the length of the password
-
+
@if (generated) {
-
-
-
-
{{generatedPassword}}
+
}
+
+
-
+
-
+ {{ generatedPassword }}
+
+
+
\ No newline at end of file
diff --git a/src/app/sites/generator/qrcode/generator-qrcode.spec.ts b/src/app/sites/generator/qrcode/generator-qrcode.spec.ts
new file mode 100644
index 0000000..d94c402
--- /dev/null
+++ b/src/app/sites/generator/qrcode/generator-qrcode.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneratorQrcode } from './generator-qrcode';
+
+describe('GeneratorQrcode', () => {
+ let component: GeneratorQrcode;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (qrDataUrl) {
+ ![Generated QR Code]()
+
+ }
+
+
@for (tool of feature.tools; track $index) {
-