From 79ff5eb6d1d0113f79a4656d34a99eb9166f73fc Mon Sep 17 00:00:00 2001 From: danielvici123 Date: Tue, 18 Nov 2025 21:05:41 +0100 Subject: [PATCH] add: password generator; change: Startpage Header made bold --- src/app/app.routes.ts | 5 ++ .../custom-description/custom-description.css | 0 .../custom-description.html | 12 +++ .../custom-description.spec.ts | 23 ++++++ .../custom-description/custom-description.ts | 13 ++++ .../password/generator-password.component.css | 0 .../generator-password.component.html | 62 ++++++++++++++++ .../generator-password.component.spec.ts | 23 ++++++ .../password/generator-password.component.ts | 74 +++++++++++++++++++ src/app/sites/startpage/startpage.html | 5 +- 10 files changed, 214 insertions(+), 3 deletions(-) create mode 100644 src/app/components/custom-description/custom-description.css create mode 100644 src/app/components/custom-description/custom-description.html create mode 100644 src/app/components/custom-description/custom-description.spec.ts create mode 100644 src/app/components/custom-description/custom-description.ts create mode 100644 src/app/sites/generator/password/generator-password.component.css create mode 100644 src/app/sites/generator/password/generator-password.component.html create mode 100644 src/app/sites/generator/password/generator-password.component.spec.ts create mode 100644 src/app/sites/generator/password/generator-password.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index c7eb174..d467bf0 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,6 +1,7 @@ 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'; export const routes: Routes = [ { @@ -11,6 +12,10 @@ export const routes: Routes = [ path: '', component: Startpage, }, + { + path: 'generator/password', + component: GeneratorPassword, + }, { path: '**', redirectTo: '', diff --git a/src/app/components/custom-description/custom-description.css b/src/app/components/custom-description/custom-description.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/custom-description/custom-description.html b/src/app/components/custom-description/custom-description.html new file mode 100644 index 0000000..fc5dbf4 --- /dev/null +++ b/src/app/components/custom-description/custom-description.html @@ -0,0 +1,12 @@ +
+
+

{{descriptionText()}}

+ @if (additionalListEnabled()) { +
    + @for (item of additionalListText(); track $index) { +
  • {{item}}
    • + } +
+ } +
+
diff --git a/src/app/components/custom-description/custom-description.spec.ts b/src/app/components/custom-description/custom-description.spec.ts new file mode 100644 index 0000000..5d5fc62 --- /dev/null +++ b/src/app/components/custom-description/custom-description.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CustomDescription } from './custom-description'; + +describe('CustomDescription', () => { + let component: CustomDescription; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CustomDescription] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CustomDescription); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/custom-description/custom-description.ts b/src/app/components/custom-description/custom-description.ts new file mode 100644 index 0000000..786d152 --- /dev/null +++ b/src/app/components/custom-description/custom-description.ts @@ -0,0 +1,13 @@ +import {Component, input} from '@angular/core'; + +@Component({ + selector: 'app-custom-description', + imports: [], + templateUrl: './custom-description.html', + styleUrl: './custom-description.css', +}) +export class CustomDescription { + descriptionText = input.required(); + additionalListEnabled = input(false); + additionalListText =input(); +} diff --git a/src/app/sites/generator/password/generator-password.component.css b/src/app/sites/generator/password/generator-password.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/sites/generator/password/generator-password.component.html b/src/app/sites/generator/password/generator-password.component.html new file mode 100644 index 0000000..423ea5a --- /dev/null +++ b/src/app/sites/generator/password/generator-password.component.html @@ -0,0 +1,62 @@ +
+
+ +
+
+ +
+
+
+ + +
+
+

+ @if (getStrengthDescription(passwordGenerator.value.length)) { + {{getStrengthDescription(passwordGenerator.value.length).text}}* + } +

+
+
+ +
+ +
+
+ +
+
+ +
+
+

*Based on the length of the password

+
+ + +
+ @if (generated) { +
+ +
+
{{generatedPassword}} +
+ +
+
+ } +
+
+
+
\ No newline at end of file diff --git a/src/app/sites/generator/password/generator-password.component.spec.ts b/src/app/sites/generator/password/generator-password.component.spec.ts new file mode 100644 index 0000000..f52e344 --- /dev/null +++ b/src/app/sites/generator/password/generator-password.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GeneratorPassword } from './generator-password.component'; + +describe('Password', () => { + let component: GeneratorPassword; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [GeneratorPassword] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GeneratorPassword); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/sites/generator/password/generator-password.component.ts b/src/app/sites/generator/password/generator-password.component.ts new file mode 100644 index 0000000..c7c7bbf --- /dev/null +++ b/src/app/sites/generator/password/generator-password.component.ts @@ -0,0 +1,74 @@ +import { Component } from '@angular/core'; +import {CustomTitle} from '../../../components/custom-title/custom-title'; +import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {CustomDescription} from '../../../components/custom-description/custom-description'; + +@Component({ + selector: 'app-password', + imports: [ + CustomTitle, + CustomDescription, + ReactiveFormsModule, + ], + templateUrl: './generator-password.component.html', + styleUrl: './generator-password.component.css', +}) +export class GeneratorPassword { + + passwordGenerator!: any; + generatedPassword: string = ''; + generated: boolean = false; + + + + constructor(private fb:FormBuilder) { + + this.passwordGenerator = this.fb.group({ + length: [16], + includeLetters: [true], + includeNumbers: [true], + includeSymbols: [true] + }) + } + + generatePassword() { + this.generatedPassword = ''; + const length = this.passwordGenerator.value.length; + let includeLetters = this.passwordGenerator.value.includeLetters; + let includeNumbers = this.passwordGenerator.value.includeNumbers; + let includeSymbols = this.passwordGenerator.value.includeSymbols; + + if(!includeLetters && !includeNumbers && !includeSymbols) { + this.passwordGenerator.value.includeLetters = true; + includeLetters = true; + console.log(this.passwordGenerator.value) + } + + const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz'; + const numberChars = '0123456789'; + const symbolChars = '!@#$%^&*()_+[]{}|;:,.<>?'; + + let allChars = ''; + if (includeLetters) allChars += uppercaseChars + lowercaseChars; + if (includeNumbers) allChars += numberChars; + if (includeSymbols) allChars += symbolChars; + + for (let i = 0; i < length; i++) { + this.generatedPassword += allChars[Math.floor(Math.random() * allChars.length)] + } + + this.generated = true; + } + + copyPassword() { + navigator.clipboard.writeText(this.generatedPassword); + } + + public getStrengthDescription = (len: number) => { + if (len < 10) return { text: 'Very Weak', color: 'text-red-500' } + if (len < 15) return { text: 'Weak', color: 'text-orange-500' } + if (len < 20) return { text: 'Strong', color: 'text-green-500' } + return { text: 'Very Strong', color: 'text-emerald-500' } + } +} diff --git a/src/app/sites/startpage/startpage.html b/src/app/sites/startpage/startpage.html index dcfdd5f..2cbef19 100644 --- a/src/app/sites/startpage/startpage.html +++ b/src/app/sites/startpage/startpage.html @@ -4,7 +4,7 @@ [textSizeInPx]="24" text="Tools" textColor="white" - class="font-bold" + fontWeight="bold" >
@@ -21,8 +21,7 @@
@for (tool of feature.tools; track $index) { - + }