< 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); } }

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) }

Jelszavak láthatósága

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 }