Password generátor Angular használatával

Mi a cél?

Egy egyszerű jelszó generátor előállítása Angular-ral, melyben a megadott jelszó hossz és a felhasznált karakterek kiválasztása után egy gombra kattintva létrejön a véletlenszerűen előállított jelszó.

DEMO folyamatban

A template

Személy szerint nem szeretem a third-party CSS-eket, de most a bemutató kevesebb CSS kód miatt használjuk a bulma-t (bulma.io) npm install bulma. A styles.css file-ban húzzuk be (importáljuk) a bulma file-t a megjelenítéshez a node modules-ból. A bulma egyébként sokkal beszédesebb és kevésbé terjengős mint a bootstrap css.

    @import 'bulma/css/bulma.css';
    

Egyetlen egyedi elemmel egészítettem ki a CSS-et app.component.css, hogy a komponens ne legyen teljesen a lap tetején:

.container {
    margin-top: 5rem;
    }
    

A container a szokásos third-party div-ekkel és a címmel indul:

<div class="container">
      <div class="columns is-centered">
        <div class="box column is-one-third">
          <h1 class="title has-text-centered">Password Generator</h1>
    

Az első beviteli mező a jelszó kívánt hosszát várja és event binding-gal hívja majd meg a component class alábbi metódusát, átadva neki a beírt számot (szövegként):

    <div class="field">
            <label>Length</label>
            <input class="input" (input)="onChangeLength($event.target.value)" />
        </div>
    

A checkbox-ok esetében is eseményfigyelőt használunk( a change eseményre), mindhárom checkbox a saját metódusát hívja meg a class-ban:

<div class="field">
            <div class="control">
              <label class="checkbox">
                <input (change)="onChangeUseLetters()" type="checkbox" />
                Use Letters
              </label>
            </div>
          </div>
    
          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input (change)="onChangeUseNumbers()" type="checkbox" />
                Use Numbers
              </label>
            </div>
          </div>
    
          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input (change)="onChangeUseSymbols()" type="checkbox" />
                Use Symbols
              </label>
            </div>
          </div>
    

A generáló gombnak is megvan természetesen a maga eseménye, de emellett a property binding használatával ha nincs kitöltve a length input és legalább az egyik checkbox nincs bepipálva, akkor nem kattintható (disabled állapotú):

<button [disabled]="
              !(length && (includeLetters || includeSymbols || includeNumbers))
            " (click)="onButtonClick()" class="button is-link is-fullwidth">
            Generate!
          </button>
    

A végére maradt a generált jelszó megjelenítése. Egy strukturális direktíva használatával *ngIf megadjuk, hogy amennyiben a password property üres, akkor ez a div ne jelenjen meg. Ha nem üres, akkor pedig a property binding használatával az input value attribútuma fogja felvenni a password értékét:

<div class="box" *ngIf="password">
            <label>Your Password</label>
            <input class="input" [value]="password" />
          </div>
        </div>
      </div>
    </div>
    

A Component class

Az osztályhoz öt változót (property-t) rendelünk, kezdetben a checkbox-ok nincsenek bekattintva, ezért false az értékük:

export class AppComponent {
      length = 0;
      includeLetters = false;
      includeNumbers = false;
      includeSymbols = false;
      password = '';
    

A jelszó kívánt hosszának megadása után az eseményt az alábbi metódus dolgozza fel. Mivel az input tartalma szövegként közlekedik az http világban, ezért először számmá parse-oljuk, majd amennyiben számot kaptunk, úgy átadjuk ezt az értéket a length változónak:

onChangeLength(value: string) {
        const parsedValue = parseInt(value);
    
        if (!isNaN(parsedValue)) {
          this.length = parsedValue;
        }
      }
    

A három checkbox-ra ugyanolyan logikájú eseményfigyelő kerül, ha kattintás történik rájuk, akkor átáll a boolean jelölőjük:

onChangeUseLetters() {
        this.includeLetters = !this.includeLetters;
      }
    
      onChangeUseNumbers() {
        this.includeNumbers = !this.includeNumbers;
      }
    
      onChangeUseSymbols() {
        this.includeSymbols = !this.includeSymbols;
      }
    

A jelszó előállítása és átadása

A három különböző típusú változóban felsoroljuk a lehetséges értékeket és megvizsgáljuk, hogy amennyiben be vannak kattintva, úgy azon string-ek összefűzésre kerülnek a validChars változóban. Ezt követően annyiszor generálunk egy max. validChars hosszúságú véletlenszámot, ahány karakterből szeretnénk, hogy a jelszó állna. Ezek a véletlenszámok adják majd a validChars soron következő indexét. A generált jelszót ezt követően átadjuk a password class property-nek, mely az Angular template syntax-en keresztül összeköttetésben van a HTML file-lal (egy ún property binding-on keresztül), s mivel változott a class property állapota, ezért a component és az oldal újra render-elődik:

onButtonClick() {
        const numbers = '1234567890';
        const letters = 'abcdefglmnopqrstuwxyz';
        const symbols = '@!#&÷()^~';
        let validChars = '';
    
        if (this.includeLetters) {
          validChars += letters;
        }
        if (this.includeNumbers) {
          validChars += numbers;
        }
        if (this.includeSymbols) {
          validChars += symbols;
        }
    
        let generatedPassword = '';
        for (let i = 0; i < this.length; i++) {
          const index = Math.floor(Math.random() * validChars.length);
          generatedPassword += validChars[index];
        }
        this.password = generatedPassword;
      }
    }