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

Másik változat:

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

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

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

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

    const pass = this.passgen.generatePassword(
      12, true, true, true, true);
    console.log('Generált jelszó:', 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
  }