Angular Password Generator

README.md

Angular Password Generator

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":"5f0c542a4a2ce5e528e01fdf","templateVersion":"1","templateId":"angular","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">","<title>Angular</title>"],"dependencies":[{"name":"typescript","version":"3.9.6","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/typescript/3.9.7/typescript.min.js"},{"name":"rxjs","version":"6.2.1","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.min.js"},{"name":"core-js","version":"2.5.7","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"},{"name":"angular-core","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/core@9.1.1/bundles/core.umd.js"},{"name":"zone","version":"0.8.26","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"},{"name":"angular-common","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/common@9.1.1/bundles/common.umd.js"},{"name":"angular-compiler","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/compiler@9.1.1/bundles/compiler.umd.js"},{"name":"angular-animations","version":"9.1.1","type":"js","url":"https://unpkg.com/browse/@angular/animations@9.1.1/bundles/animations.umd.js"},{"name":"angular-platform-browser","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/platform-browser@9.1.1/bundles/platform-browser.umd.js"},{"name":"angular-platform-browser-dynamic","version":"9.1.1","type":"js","url":"https://unpkg.com/@angular/platform-browser-dynamic@9.1.1/bundles/platform-browser-dynamic.umd.js"},{"name":"angular-router","version":"9.1.1","type":"js","url":"https://unpkg.com/browse/@angular/router@9.1.1/bundles/router.umd.js"},{"name":"bulma","type":"css","url":"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css","version":"0.9.1"}],"files":[{"id":1,"parentId":0,"name":"public","path":"/public","type":"folder","isRoot":true,"selected":false,"expanded":false,"children":[{"id":2,"name":"index.html"}]},{"id":2,"parentId":1,"name":"index.html","path":"/src/index.html","type":"file","mimeType":"html","isRoot":false,"open":false,"selected":false,"content":""},{"id":3,"parentId":0,"name":"src","path":"/src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4,"name":"index.ts"},{"id":5,"name":"styles.css"}]},{"id":4,"parentId":3,"name":"index.ts","path":"/src/index.ts","type":"file","mimeType":"ts","isRoot":false,"open":true,"selected":true,"content":""},{"id":5,"parentId":3,"name":"style.css","path":"/src/style.css","type":"file","mimeType":"css","isRoot":false,"open":false,"selected":false,"content":""}],"experimentId":"5f76c7eb89e2f700171ad339"}

css.css

Body {
	margin-top: 10%;
}

html.html

<root/>

javascript.js

const { Component, VERSION } = ng.core;

// Component Template
@Component({
  selector: 'root',
  template: `
    <div class="container">
      <div class="columns is-centered">
        <div class="box column is-one-third">
          <h1 class="title has-text-centered">Password Generator</h1>

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

          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input (change)="onUseLettersChange()" type="checkbox" />
                Use Letters
              </label>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input (change)="onUseNumbersChange()" type="checkbox" />
                Use Numbers
              </label>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input (change)="onUseSymbolsChange()" type="checkbox" />
                Use Symbols
              </label>
            </div>
          </div>

          <button [disabled]="
            !(length && (useLetters || useNumbers || useSymbols))
            " (click)="onButtonClick()" class="button is-link is-fullwidth">
            Generate!
          </button>

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

// Property Binding
// <button [disabled]="length">Submit</button>

// Event Binding
// <button (click)="onButtonClick()">Submit</button>

// Interpolation
// <div>Your password is {{ length }} characters long</div>

// Structural Directive
// <div *ngIf="showSubmit()">
//   <button>Submit</button>
//</div>

// Component Class
class AppComponent {
  length = 0;
  useLetters = false;
  useNumbers = false;
  useSymbols = false;

  password = '';

  constructor() {}

  ngOnInit() {}

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

  onUseLettersChange() {
    this.useLetters = !this.useLetters;
  }

  onUseNumbersChange() {
    this.useNumbers = !this.useNumbers;
  }

  onUseSymbolsChange() {
    this.useSymbols = !this.useSymbols;
  }

  onButtonClick() {
    // console.log(`
    //   About to generate password.
    //   includes letters: ${this.useLetters}
    //   includes numbers: ${this.useNumbers}
    //   includes symbols: ${this.useSymbols}
    // `);

    let letters = 'abcdefghijklmnopqrstuvwxyz';
    let numbers = '1234567890';    
    let symbols = '!@#$%^&*()+=-|\?/<>,.';

    let validChars = '';

    if (this.useLetters) {
      validChars += letters;
    }
    if (this.useNumbers) {
      validChars += numbers;
    }
    if (this.useSymbols) {
      validChars += symbols;
    }

    let generatedPassword = '';
    for (let i = 0; i < this.length; i++) {
      let index = Math.floor(Math.random() * validChars.length);
      generatedPassword += validChars[index];
    }
    this.password = generatedPassword;
  }
  
}


// main.js
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
class AppModule {}

const { platformBrowserDynamic } = ng.platformBrowserDynamic;

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));