< Angular

Angular - Jelszógenerálás

Szerző: Sallai András

Copyright © 2025, Sallai András

Szerkesztve: 2025

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Szolgáltatás

A jelszó generátor létrehozhatjuk például szolgáltatásként.

ng generate service shared/password-generator

Legyen kétféle generálási lehetőség:

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class PasswordGeneratorService { constructor() { } generateStrongPassword() { const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz'; const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const numberChars = '0123456789'; const symbolChars = '!@#$%^&*()_+~`|}{[]:;?><,./-='; const allChars = lowercaseChars + uppercaseChars + numberChars + symbolChars; const chars: string[] = new Array(12).fill(0).map(() => allChars[Math.floor(Math.random() * allChars.length)]); return chars.join(''); } generateSimplePassword() { return Math.random().toString(36).slice(2, 12); } }

Másik változat:

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class PasswordGeneratorService { constructor() { } /** * Jelszógenerálás * @param length Jelszó hossza. * @param useLowercase Legyen benne kisbetűs. * @param useUppercase Legyen benne nagybetűs. * @param useNumbers Legyen benne szám. * @param useSymbols Legyen benne speciális karakter. * @returns A generált jelszó. */ generatePassword(length: number, useLowercase: boolean, useUppercase: boolean, useNumbers: boolean, useSymbols: boolean): string { const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz'; const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const numberChars = '0123456789'; const symbolChars = '!@#$%^&*()_+~`|}{[]:;?><,./-='; let characters = ''; if (useLowercase) { characters += lowercaseChars; } if (useUppercase) { characters += uppercaseChars; } if (useNumbers) { characters += numberChars; } if (useSymbols) { characters += symbolChars; } if (characters.length === 0) { return ''; // Nincs kiválasztott karaktertípus } let password = ''; for (let i = 0; i < length; i++) { const randomIndex = Math.floor(Math.random() * characters.length); password += characters[randomIndex]; } return password; } }

Használat

Fecskendezzük be függőségként:

constructor( private passGen: PasswordGeneratorService ) {}

Készítsünk egy függvényt, ami a kiválasztja mi fusson:

generatePassword() { let pass: string if(this.simplePassword) { pass = this.passGen.generateStrongPassword() }else { pass = this.passGen.generateSimplePassword() } this.userForm.get('pass')?.setValue(pass) this.userForm.get('passre')?.setValue(pass) }

Alternatív változat használata

Itt paraméterezni kell generatePassword() függvényt.

const pass = this.passgen.generatePassword( 12, true, true, true, true); console.log('Generált jelszó:', pass);

Jelszavak láthatósága

Kell egy változó, amiben felírjuk, éppen látható vagy nem a jelszó.

export class UserComponent { visiblePassword = true }
<input class="form-control" id="pass" placeholder="jelszó" required formControlName="pass" [type]="visiblePassword ? 'text' : 'password'" >

Egy nyomógomb, amivel válthatunk:

<button type="button" class="btn" (click)="toggleVisiblePassword()" [class]="visiblePassword ? 'btn-info' : 'btn-primary'" >Látható</button>

Váltás:

toggleVisiblePassword() { this.visiblePassword = !this.visiblePassword }