המשך תוכנית בסיסית

נמשיך את התוכנית עם טיפול בסיסי באירועים והפעלת המנוע של התוכנית של מנת שתעבוד.

נמשיך עם התוכנית הבסיסית. על מנת לקלוט שינויים מדף ה-HTML אנחנו צריכים לטפל באירועים של הדף.

טיפול באירועי checkbox

נצמיד טיפול באירוע לתיבת ה-checkbox, נקח את האירוע שאחריו עוקבים ונצמיד לו פעולה.

<div>
  <label>Use Letters</label>
  <input type="checkbox" (change)="onChangeUseLetters()">
</div>

את הטיפול באירוע, נכניס ל-class של הקומפוננטה. בכל פעם שיש לחיצה על תיבת הבחירה, ישתנה הערך של המשתנה includeLetter על פי הסימון.

export class AppComponent {
  password: string = '';
  includeLetter: boolean = false;

  onButtonClick(){
    this.password = "My Password";
  }

  onChangeUseLetters(){
    this.includeLetter = !this.includeLetter;
  }
}

את אותה הפעולה נבצע גם בשתי תיבות הבחירה האחרות.

קבלת תוכן מתיבת טקסט

השלב הבא הוא קבלת התוכן של תיבת הטקסט על מנת להשתמש בו בקוד. נחבר טיפול באירוע לתיבת הטקסט ובו נקבל את התוכן של התיבה.

<div>
  <label>Enter Length</label>
  <input (input)="onChangeLength(getValue($event))"/>
</div>

אנחנו מטפלים באירוע, מקבלים את הערך של תיבת הטקסט וגם פותרים על ידי הפונקציה getValue את הצורך של אנגולר לקבל ערך עם סוג מוגדר. אם מבטלים את אפשרות ה-strict של אנגולר, אפשר לשלוח ישירות את הערך event.target.value$ לפונקציה onChangeLength.

השלב הבא הוא להקים את הפונקציות שיקבלו את הערך המוחזר בקובץ ה-ts.

length: number = 0;

onChangeLength(value: string){
    const parseValue = parseInt(value);

    if(!isNaN(parseValue)){
      this.length = parseValue;
    }
  }

  getValue(event: Event): string {
    return (event.target as HTMLInputElement).value;
  }

אנחנו מקבלים את הערך, מעבירים אותו להיות מספר כי הוא מגיע כמחרוזת ומוודאים שאכן הגיע מספר ולא מוקלדות אותיות או תוים אחרים בתיבת הטקסט.

עכשיו יש לנו את כל המידע ליצירת הסיסמא, ניצור אותה בלחיצה על הכפתור.

onButtonClick(){
    const numbers = '1234567890';
    const letters = 'abcdefghijklmnopqrstuvwxyz';
    const symbols = '!@#$%^&*()';

    // According to user checkbox, add the chars to include in the password.
    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++){
      // Choose a random index on the chars array
      const index = Math.floor(Math.random() * validChars.length);
      generatedPassword += validChars[index];
    }

    this.password = generatedPassword;
  }

טיפול בכפתור

עוד שלב בתוכנית הוא לסמן את הכפתור כלא זמין אם אין לנו אורך סיסמא ובחירה בלפחות אחד ממרכיבי הסיסמא.

<div>
  <button [disabled]="!(length && (includeLetters || includeNumbers || includeSymbols))"
  (click)="onButtonClick()">Generate</button>
</div>

הכל עובד, מה שנשאר זה טיפה עיצוב.