Initial commit

src/app/app.component.html

@@ -0,0 +1,45 @@
+<div class="container">
+  <div class="columns is-centered">
+    <div class="box column is-one-third">
+      <h1 class="title">Password Generator</h1>
+      <div class="field">
+        <label class="label">Enter Length:</label>
+        <div class="control">
+          <input class="input" type="number" min="1" max="100" (input)="onChangeLength($event)">
+        </div>
+      </div>
+      <div class="field">
+        <label class="checkbox">
+          <input type="checkbox" (change)="onChangeIncludeLetters()">
+          Include Letters
+        </label>
+      </div>
+      <div class="field">
+        <label class="checkbox">
+          <input type="checkbox" (change)="onChangeIncludeNumbers()">
+          Include Numbers
+        </label>
+      </div>
+      <div class="field">
+        <label class="checkbox">
+          <input type="checkbox" (change)="onChangeIncludeSymbols()">
+          Include Symbols
+        </label>
+      </div>
+      <div class="field">
+        <div class="control">
+          <button class="button is-primary" (click)="onButtonClick()"
+                  [disabled]="!(length && (includeLetters || includeNumbers || includeSymbols))">
+            Generate Password
+          </button>
+        </div>
+      </div>
+      <div class="box" *ngIf="password">
+        <label class="label">Generated Password:</label>
+        <div class="control">
+          <input class="input" type="text" readonly [value]="password">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'testproject' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('testproject');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, testproject');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,75 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  length = 0;
+  includeLetters = false;
+  includeNumbers = false;
+  includeSymbols = false;
+  generateBtnEnabled = false;
+  password = "";
+
+  onChangeIncludeLetters() {
+    this.includeLetters = !this.includeLetters;
+    this.generateBtnEnabled = true;
+  }
+
+  onChangeIncludeNumbers() {
+    this.includeNumbers = !this.includeNumbers;
+  }
+
+  onChangeIncludeSymbols() {
+    this.includeSymbols = !this.includeSymbols;
+  }
+  onButtonClick() {
+    this.generatePassword();
+  }
+
+  onChangeLength($event: Event) {
+    const target = $event.target as HTMLInputElement;
+    const parsedValue = parseInt(target.value);
+
+    if (!isNaN(parsedValue)) {
+      this.length = parsedValue;
+    } else {
+      this.length = 0;
+    }
+  }
+
+  generatePassword() {
+    const numbers : string = '1234567890';
+    const letters : string = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const symbols : string = '!@#$%^&*()';
+
+    let validChars : string = '';
+
+    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;
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];