szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular - Jelszógenerálás ======

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Szerkesztve: 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:

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

</code>


Másik változat:

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

}

</code>

===== Használat =====

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

<code javascript>
  constructor(
    private passGen: PasswordGeneratorService
  ) {}
</code>

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

<code javascript>
  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)
    
  }
</code>

===== Alternatív változat használata =====

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

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

===== Jelszavak láthatósága =====

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

<code javascript>
export class UserComponent {
  visiblePassword = true

}
</code>


<code html>
<input class="form-control" id="pass"
  placeholder="jelszó" required
  formControlName="pass"
  [type]="visiblePassword ? 'text' : 'password'"
  >
</code>

Egy nyomógomb, amivel válthatunk:

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

Váltás:

<code javascript>
  toggleVisiblePassword() {
    this.visiblePassword = !this.visiblePassword
  }
</code>