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

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:

src/app/shared/password-generator.service.ts

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

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

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
  }