Password Generator UI

A password generator should not use predictable patterns. A common beginner mistake is choosing characters with Math.random() and assuming that the result is secure enough. For a visual demo this may appear fine, but a password generator has a security-related purpose, so the randomness strategy matters more than in ordinary UI projects.

Problematic approach:

          function getRandomCharacter(characters: string): string {
            const index = Math.floor(Math.random() * characters.length);

            return characters[index];
          }

          function generatePassword(length: number, characters: string): string {
            let password = "";

            for (let i = 0; i < length; i++) {
              password += getRandomCharacter(characters);
            }

            return password;
          }

This code is easy to understand, but Math.random() is not designed for security-sensitive generation. If the app claims to create secure passwords, use the browser's cryptographic random APIs instead.

Better approach:

          function getSecureRandomIndex(max: number): number {
            const randomValues = new Uint32Array(1);

            window.crypto.getRandomValues(randomValues);

            return randomValues[0] % max;
          }

          function getSecureRandomCharacter(characters: string): string {
            const index = getSecureRandomIndex(characters.length);

            return characters[index];
          }

          function generatePassword(length: number, characters: string): string {
            let password = "";

            for (let i = 0; i < length; i++) {
              password += getSecureRandomCharacter(characters);
            }

            return password;
          }

Pay attention to: A password generator should use crypto.getRandomValues() instead of Math.random(). Even in a portfolio project, this shows that you understand the security context of the feature.

Users should not be able to generate a password when every character group is disabled. Another common issue is allowing impossible or unsafe length values such as 0, negative numbers, or extremely large numbers that can freeze the UI. Since this project uses Angular Reactive Forms, validation should live in the form model, not only in template conditions.

Problematic code:

          form = new FormGroup({
            length: new FormControl(12),
            uppercase: new FormControl(false),
            lowercase: new FormControl(false),
            numbers: new FormControl(false),
            symbols: new FormControl(false)
          });

          generate(): void {
            const options = this.form.value;

            this.password = createPassword(options);
          }

This version allows the user to click generate even when no character sets are selected. The generator may return an empty string, crash, or create misleading output.

Better approach:

          function atLeastOneCharacterSet(control: AbstractControl): ValidationErrors | null {
            const value = control.value;

            const hasCharacterSet =
              value.uppercase ||
              value.lowercase ||
              value.numbers ||
              value.symbols;

            return hasCharacterSet ? null : { noCharacterSet: true };
          }

          form = new FormGroup(
            {
              length: new FormControl(16, {
                nonNullable: true,
                validators: [Validators.required, Validators.min(8), Validators.max(64)]
              }),
              uppercase: new FormControl(true, { nonNullable: true }),
              lowercase: new FormControl(true, { nonNullable: true }),
              numbers: new FormControl(true, { nonNullable: true }),
              symbols: new FormControl(false, { nonNullable: true })
            },
            { validators: [atLeastOneCharacterSet] }
          );

Template protection:

          <button
            mat-raised-button
            color="primary"
            type="button"
            [disabled]="form.invalid"
            (click)="generate()"
          >
            Generate password
          </button>

          <mat-error *ngIf="form.hasError('noCharacterSet')">
            Select at least one character type.
          </mat-error>

Pay attention to: Validate the whole configuration, not only individual controls. A password generator should always know when the current settings cannot produce a valid password.

If a user enables uppercase, lowercase, numbers, and symbols, they usually expect the generated password to include all selected groups. A naive generator builds one combined character pool and randomly picks from it. That can produce a password that accidentally contains no numbers or no symbols, even though those options were enabled.

Problematic approach:

          const characterPool =
            uppercaseCharacters +
            lowercaseCharacters +
            numberCharacters +
            symbolCharacters;

          let password = "";

          for (let i = 0; i < length; i++) {
            password += getSecureRandomCharacter(characterPool);
          }

This respects the allowed pool, but it does not guarantee character diversity. With shorter passwords, missing a selected group is common.

Better approach:

          function buildSelectedGroups(options: PasswordOptions): string[] {
            const groups: string[] = [];

            if (options.uppercase) groups.push("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
            if (options.lowercase) groups.push("abcdefghijklmnopqrstuvwxyz");
            if (options.numbers) groups.push("0123456789");
            if (options.symbols) groups.push("!@#$%^&*()_+-=[]{};:,.?/");

            return groups;
          }

          function shuffleCharacters(characters: string[]): string[] {
            return characters
              .map((character) => ({
                character,
                sortValue: getSecureRandomIndex(1000000)
              }))
              .sort((a, b) => a.sortValue - b.sortValue)
              .map((item) => item.character);
          }

          function generatePassword(options: PasswordOptions): string {
            const groups = buildSelectedGroups(options);
            const allCharacters = groups.join("");

            const requiredCharacters = groups.map((group) => {
              return getSecureRandomCharacter(group);
            });

            const remainingLength = options.length - requiredCharacters.length;
            const remainingCharacters = Array.from({ length: remainingLength }, () => {
              return getSecureRandomCharacter(allCharacters);
            });

            return shuffleCharacters([
              ...requiredCharacters,
              ...remainingCharacters
            ]).join("");
          }

Pay attention to: Add at least one character from each selected group, then fill the remaining length from the full allowed pool and shuffle the final result. Also prevent the password length from being shorter than the number of selected groups.

A strength meter should explain why a password is weak or strong. Beginners often use only length and change a bar color from red to green. Length matters, but character variety, repeated characters, predictable sequences, and common patterns also affect perceived strength. The UI should provide a clear label and practical feedback, not only a decorative progress bar.

Problematic code:

          function getStrength(password: string): number {
            if (password.length > 16) return 100;
            if (password.length > 10) return 70;
            if (password.length > 6) return 40;

            return 10;
          }

This makes a long but repetitive password look strong. For example, aaaaaaaaaaaaaaaaaaaa would receive a high score even though it is obviously poor.

Better approach:

          function analyzePasswordStrength(password: string): PasswordStrength {
            let score = 0;
            const suggestions: string[] = [];

            if (password.length >= 12) {
              score += 25;
            } else {
              suggestions.push("Use at least 12 characters.");
            }

            if (/[a-z]/.test(password)) score += 15;
            if (/[A-Z]/.test(password)) score += 15;
            if (/[0-9]/.test(password)) score += 15;
            if (/[^A-Za-z0-9]/.test(password)) score += 15;

            if (/(.)\1{2,}/.test(password)) {
              score -= 15;
              suggestions.push("Avoid repeating the same character many times.");
            }

            if (/1234|abcd|qwerty|password/i.test(password)) {
              score -= 25;
              suggestions.push("Avoid common words or predictable sequences.");
            }

            const safeScore = Math.max(0, Math.min(100, score));

            return {
              score: safeScore,
              label: getStrengthLabel(safeScore),
              suggestions
            };
          }

          function getStrengthLabel(score: number): string {
            if (score >= 80) return "Strong";
            if (score >= 55) return "Good";
            if (score >= 30) return "Weak";

            return "Very weak";
          }

Template example:

          <mat-progress-bar
            mode="determinate"
            [value]="passwordStrength.score"
          ></mat-progress-bar>

          <p>Strength: {{ passwordStrength.label }}</p>

          <ul *ngIf="passwordStrength.suggestions.length">
            <li *ngFor="let suggestion of passwordStrength.suggestions">
              {{ suggestion }}
            </li>
          </ul>

Pay attention to: Strength feedback should be informative. Show a label, score, and suggestions. This makes the feature useful instead of only decorative.

Copying the generated password is a core interaction. A common mistake is calling the Clipboard API and assuming it always works. Clipboard access may fail because of browser restrictions, insecure context, missing permissions, or user settings. The UI should tell users whether copying succeeded and offer a clear fallback message when it fails.

Problematic code:

          copyPassword(): void {
            navigator.clipboard.writeText(this.password);
          }

This gives no feedback. If the copy fails, the user may paste nothing and assume the password was copied correctly.

Better approach:

          async copyPassword(): Promise<void> {
            if (!this.password) {
              this.snackBar.open("Generate a password first.", "Close", {
                duration: 2500
              });
              return;
            }

            try {
              await navigator.clipboard.writeText(this.password);

              this.snackBar.open("Password copied to clipboard.", "Close", {
                duration: 2500
              });
            } catch {
              this.snackBar.open("Copy failed. Select the password manually.", "Close", {
                duration: 3500
              });
            }
          }

Template example:

          <button
            mat-stroked-button
            type="button"
            [disabled]="!password"
            (click)="copyPassword()"
          >
            Copy password
          </button>

Pay attention to: Disable the copy button until a password exists. Show confirmation after success and a useful message after failure. Clipboard behavior is part of the user experience, not a hidden technical detail.