first commit

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -0,0 +1,59 @@
+# NewPassSaver
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.7.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

angular.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "newPassSaver": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/new-pass-saver",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "newPassSaver:build:production"
+            },
+            "development": {
+              "buildTarget": "newPassSaver:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "newPassSaver:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "new-pass-saver",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.1.6",
+    "@angular/cdk": "^19.1.4",
+    "@angular/common": "^19.1.0",
+    "@angular/compiler": "^19.1.0",
+    "@angular/core": "^19.1.0",
+    "@angular/forms": "^19.1.0",
+    "@angular/material": "^19.1.4",
+    "@angular/platform-browser": "^19.1.0",
+    "@angular/platform-browser-dynamic": "^19.1.0",
+    "@angular/router": "^19.1.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@types/crypto-js": "^4.2.2",
+    "bootstrap": "^5.3.3",
+    "crypto-js": "^4.2.0",
+    "ngx-toastr": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.1.7",
+    "@angular/cli": "^19.1.7",
+    "@angular/compiler-cli": "^19.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.7.2"
+  }
+}

src/app/app.component.html

@@ -0,0 +1,2 @@
+<app-header></app-header>
+<router-outlet></router-outlet>

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 'newPassSaver' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('newPassSaver');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, newPassSaver');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderComponent } from './components/header/header.component';
+import { RouterOutlet } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [CommonModule, HeaderComponent, RouterOutlet]
+})
+export class AppComponent {
+  title = 'newPassSaver';
+}

src/app/app.config.ts

@@ -0,0 +1,31 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { authInterceptor } from './interceptors/auth.interceptor';
+import { provideToastr } from 'ngx-toastr';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideAnimations(),
+    provideHttpClient(
+      withInterceptors([authInterceptor])
+    ),
+    provideToastr({
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+      preventDuplicates: true,
+    }),
+    {
+      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+      useValue: {
+        duration: 3000,
+        horizontalPosition: 'end',
+        verticalPosition: 'top'
+      }
+    }
+  ]
+};

src/app/app.routes.ts

@@ -0,0 +1,34 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  { 
+    path: '', 
+    redirectTo: '/generator', 
+    pathMatch: 'full' 
+  },
+  {
+    path: 'generator',
+    loadComponent: () => import('./components/password-generator/password-generator.component')
+      .then(m => m.PasswordGeneratorComponent)
+  },
+  {
+    path: 'passwords',
+    loadComponent: () => import('./components/password-list/password-list.component')
+      .then(m => m.PasswordListComponent),
+    canActivate: [() => import('./guards/auth.guard').then(m => m.AuthGuard)]
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./components/login/login.component')
+      .then(m => m.LoginComponent)
+  },
+  {
+    path: 'register',
+    loadComponent: () => import('./components/register/register.component')
+      .then(m => m.RegisterComponent)
+  },
+  { 
+    path: '**', 
+    redirectTo: '/generator' 
+  }
+];

src/app/components/header/header.component.html

@@ -0,0 +1,24 @@
+<mat-toolbar color="primary">
+  <span class="logo" routerLink="/">Password Saver</span>
+  <span class="spacer"></span>
+  <ng-container *ngIf="!isLoggedIn">
+    <button mat-button routerLink="/login">
+      <mat-icon>login</mat-icon>
+      Login
+    </button>
+    <button mat-button routerLink="/register">
+      <mat-icon>person_add</mat-icon>
+      Register
+    </button>
+  </ng-container>
+  <ng-container *ngIf="isLoggedIn">
+    <button mat-button routerLink="/passwords">
+      <mat-icon>list</mat-icon>
+      My Passwords
+    </button>
+    <button mat-button (click)="logout()">
+      <mat-icon>logout</mat-icon>
+      Logout
+    </button>
+  </ng-container>
+</mat-toolbar>

src/app/components/header/header.component.scss

@@ -0,0 +1,20 @@
+.spacer {
+  flex: 1 1 auto;
+}
+
+.logo {
+  cursor: pointer;
+  font-size: 1.2rem;
+  font-weight: 500;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+button {
+  margin-left: 8px;
+}
+
+mat-icon {
+  margin-right: 4px;
+}

src/app/components/header/header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/header/header.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    RouterModule
+  ]
+})
+export class HeaderComponent implements OnInit {
+  isLoggedIn = false;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.authService.isAuthenticated$.subscribe(
+      (isAuthenticated) => {
+        this.isLoggedIn = isAuthenticated;
+      }
+    );
+  }
+
+  logout(): void {
+    this.authService.logout();
+    this.router.navigate(['/']);
+  }
+}

src/app/components/login/login.component.html

@@ -0,0 +1,47 @@
+<div class="container">
+  <mat-card class="login-card">
+    <mat-card-header>
+      <mat-card-title>Login</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+        <mat-form-field class="full-width">
+          <mat-label>Email</mat-label>
+          <input matInput type="email" formControlName="email" required>
+          <mat-error *ngIf="loginForm.get('email')?.hasError('required')">
+            Email is required
+          </mat-error>
+          <mat-error *ngIf="loginForm.get('email')?.hasError('email')">
+            Please enter a valid email address
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="full-width">
+          <mat-label>Password</mat-label>
+          <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" required>
+          <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword">
+            <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+          </button>
+          <mat-error *ngIf="loginForm.get('password')?.hasError('required')">
+            Password is required
+          </mat-error>
+        </mat-form-field>
+
+        <div class="form-actions">
+          <button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid || isLoading">
+            <mat-spinner diameter="20" *ngIf="isLoading"></mat-spinner>
+            <span *ngIf="!isLoading">Login</span>
+          </button>
+        </div>
+      </form>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <div class="text-center">
+        <span>Don't have an account? </span>
+        <a mat-button color="accent" routerLink="/register">Register</a>
+      </div>
+    </mat-card-actions>
+  </mat-card>
+</div>

src/app/components/login/login.component.scss

@@ -0,0 +1,30 @@
+.login-card {
+  max-width: 400px;
+  margin: 2rem auto;
+  padding: 20px;
+}
+
+mat-form-field {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.form-actions {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: center;
+
+  button {
+    min-width: 120px;
+    
+    mat-spinner {
+      display: inline-block;
+      margin-right: 8px;
+    }
+  }
+}
+
+mat-card-actions {
+  padding: 16px;
+  margin: 0;
+}

src/app/components/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/login/login.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { AuthService } from '../../services/auth.service';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    RouterModule
+  ]
+})
+export class LoginComponent implements OnInit {
+  loginForm: FormGroup;
+  isLoading = false;
+  hidePassword = true;
+
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) {
+    this.loginForm = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required]]
+    });
+  }
+
+  ngOnInit(): void {
+    // Eğer kullanıcı zaten giriş yapmışsa ana sayfaya yönlendir
+    this.authService.isAuthenticated$.subscribe(
+      isAuthenticated => {
+        if (isAuthenticated) {
+          this.router.navigate(['/']);
+        }
+      }
+    );
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.valid) {
+      this.isLoading = true;
+      const { email, password } = this.loginForm.value;
+
+      this.authService.login(email, password).subscribe(
+        () => {
+          this.isLoading = false;
+          this.router.navigate(['/']);
+          this.snackBar.open('Login successful!', 'Close', { duration: 3000 });
+        },
+        error => {
+          this.isLoading = false;
+          this.snackBar.open(error.message || 'Login failed', 'Close', { duration: 3000 });
+        }
+      );
+    }
+  }
+}

src/app/components/password-generator/password-generator.component.html

@@ -0,0 +1,68 @@
+<div class="container">
+  <mat-card class="password-generator-card">
+    <mat-card-header>
+      <mat-card-title>Password Generator</mat-card-title>
+      <span class="spacer"></span>
+      <button mat-icon-button (click)="toggleTheme()" [matTooltip]="(isDarkTheme$ | async) ? 'Light Mode' : 'Dark Mode'" class="theme-toggle">
+        <mat-icon>{{ (isDarkTheme$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>
+      </button>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="password-display">
+        <mat-form-field class="full-width">
+          <input matInput [value]="generatedPassword" readonly>
+          <button mat-icon-button matSuffix (click)="copyToClipboard()" matTooltip="Copy to clipboard">
+            <mat-icon>content_copy</mat-icon>
+          </button>
+        </mat-form-field>
+      </div>
+
+      <div class="password-options">
+        <div class="length-control">
+          <label>Password Length: {{passwordLength}}</label>
+          <mat-slider class="full-width">
+            <input matSliderThumb
+              [min]="8"
+              [max]="32"
+              [step]="1"
+              [value]="passwordLength"
+              (valueChange)="onLengthChange($event)">
+          </mat-slider>
+        </div>
+
+        <div class="character-options">
+          <mat-checkbox [(ngModel)]="includeUppercase" (change)="generatePassword()">
+            Uppercase Letters (A-Z)
+          </mat-checkbox>
+
+          <mat-checkbox [(ngModel)]="includeLowercase" (change)="generatePassword()">
+            Lowercase Letters (a-z)
+          </mat-checkbox>
+
+          <mat-checkbox [(ngModel)]="includeNumbers" (change)="generatePassword()">
+            Numbers (0-9)
+          </mat-checkbox>
+
+          <mat-checkbox [(ngModel)]="includeSpecial" (change)="generatePassword()">
+            Special Characters (!&#64;#$%^&*)
+          </mat-checkbox>
+        </div>
+      </div>
+    </mat-card-content>
+    
+    <mat-card-actions>
+      <button mat-raised-button color="primary" (click)="generatePassword()">
+        <mat-icon>refresh</mat-icon>
+        Generate New Password
+      </button>
+      <button mat-raised-button color="accent" (click)="savePassword()" [disabled]="!isLoggedIn">
+        <mat-icon>save</mat-icon>
+        Save Password
+      </button>
+    </mat-card-actions>
+  </mat-card>
+
+  <footer class="footer">
+    Created with ❤️ by <a href="https://ozdag.me" target="_blank">ozdag</a>
+  </footer>
+</div>

src/app/components/password-generator/password-generator.component.scss

@@ -0,0 +1,60 @@
+.password-generator-card {
+  max-width: 600px;
+  margin: 2rem auto;
+  padding: 1rem;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.password-display {
+  margin: 1rem 0;
+}
+
+.password-options {
+  margin: 1.5rem 0;
+}
+
+.length-control {
+  margin-bottom: 1.5rem;
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.character-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+mat-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+
+  .spacer {
+    flex: 1 1 auto;
+  }
+
+  .theme-toggle {
+    margin-right: 8px;
+  }
+}
+
+mat-card-actions {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  
+  button {
+    flex: 1;
+    
+    mat-icon {
+      margin-right: 0.5rem;
+    }
+  }
+}

src/app/components/password-generator/password-generator.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordGeneratorComponent } from './password-generator.component';
+
+describe('PasswordGeneratorComponent', () => {
+  let component: PasswordGeneratorComponent;
+  let fixture: ComponentFixture<PasswordGeneratorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PasswordGeneratorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PasswordGeneratorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/password-generator/password-generator.component.ts

@@ -0,0 +1,223 @@
+import { Component, OnInit } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { AuthService } from '../../services/auth.service';
+import { PasswordService } from '../../services/password.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-save-password-dialog',
+  template: `
+    <h2 mat-dialog-title>Save Password</h2>
+    <mat-dialog-content>
+      <mat-form-field class="full-width">
+        <mat-label>Description</mat-label>
+        <input matInput 
+               [(ngModel)]="description" 
+               placeholder="e.g., Gmail Account"
+               (keyup.enter)="savePassword()"
+               #descInput="ngModel"
+               required
+               minlength="3"
+               maxlength="100">
+        <mat-error *ngIf="descInput.errors?.['required']">
+          Description is required
+        </mat-error>
+        <mat-error *ngIf="descInput.errors?.['minlength']">
+          Description must be at least 3 characters
+        </mat-error>
+        <mat-error *ngIf="descInput.errors?.['maxlength']">
+          Description cannot exceed 100 characters
+        </mat-error>
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button mat-dialog-close>Cancel</button>
+      <button mat-raised-button 
+              color="primary" 
+              [disabled]="!description.trim() || description.length < 3"
+              (click)="savePassword()">
+        Save
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: [`
+    .full-width { 
+      width: 100%; 
+      margin-bottom: 15px;
+    }
+    mat-form-field {
+      margin-top: 10px;
+    }
+  `],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule
+  ]
+})
+export class SavePasswordDialogComponent {
+  description = '';
+
+  constructor(public dialogRef: MatDialogRef<SavePasswordDialogComponent>) {}
+
+  savePassword(): void {
+    const trimmedDesc = this.description.trim();
+    if (trimmedDesc && trimmedDesc.length >= 3) {
+      this.dialogRef.close(trimmedDesc);
+    }
+  }
+}
+
+@Component({
+  selector: 'app-password-generator',
+  templateUrl: './password-generator.component.html',
+  styleUrls: ['./password-generator.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSliderModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatDialogModule
+  ]
+})
+export class PasswordGeneratorComponent implements OnInit {
+  generatedPassword = '';
+  passwordLength = 16;
+  includeUppercase = true;
+  includeLowercase = true;
+  includeNumbers = true;
+  includeSpecial = true;
+  isLoggedIn = false;
+  isDarkTheme$;
+
+  constructor(
+    private snackBar: MatSnackBar,
+    private authService: AuthService,
+    private passwordService: PasswordService,
+    private router: Router,
+    private dialog: MatDialog,
+    private themeService: ThemeService
+  ) {
+    this.isDarkTheme$ = this.themeService.isDarkTheme$;
+  }
+
+  ngOnInit(): void {
+    this.generatePassword();
+    this.authService.isAuthenticated$.subscribe(
+      isAuthenticated => this.isLoggedIn = isAuthenticated
+    );
+  }
+
+  toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
+
+  generatePassword(): void {
+    const charset: { [key: string]: string } = {
+      uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+      lowercase: 'abcdefghijklmnopqrstuvwxyz',
+      numbers: '0123456789',
+      special: '!@#$%^&*()_+-=[]{}|;:,.<>?'
+    };
+
+    let availableChars = '';
+    if (this.includeUppercase) availableChars += charset['uppercase'];
+    if (this.includeLowercase) availableChars += charset['lowercase'];
+    if (this.includeNumbers) availableChars += charset['numbers'];
+    if (this.includeSpecial) availableChars += charset['special'];
+
+    if (availableChars === '') {
+      this.snackBar.open('Please select at least one character type', 'Close', { duration: 3000 });
+      return;
+    }
+
+    let password = '';
+    for (let i = 0; i < this.passwordLength; i++) {
+      const randomIndex = Math.floor(Math.random() * availableChars.length);
+      password += availableChars[randomIndex];
+    }
+
+    this.generatedPassword = password;
+  }
+
+  onLengthChange(value: number | null): void {
+    if (value !== null) {
+      this.passwordLength = value;
+      this.generatePassword();
+    }
+  }
+
+  copyToClipboard(): void {
+    navigator.clipboard.writeText(this.generatedPassword).then(() => {
+      this.snackBar.open('Password copied to clipboard!', 'Close', { duration: 2000 });
+    });
+  }
+
+  savePassword(): void {
+    if (!this.isLoggedIn) {
+      this.snackBar.open('Please log in to save passwords', 'Close', { duration: 3000 });
+      return;
+    }
+
+    if (!this.generatedPassword) {
+      this.snackBar.open('Please generate a password first', 'Close', { duration: 3000 });
+      return;
+    }
+
+    const dialogRef = this.dialog.open(SavePasswordDialogComponent, {
+      width: '400px',
+      disableClose: false
+    });
+
+    dialogRef.afterClosed().subscribe(description => {
+      if (description) {
+        this.passwordService.savePassword({
+          description: description.trim(),
+          password: this.generatedPassword
+        }).subscribe({
+          next: (response) => {
+            this.snackBar.open('Password saved successfully!', 'Close', { duration: 2000 });
+            this.router.navigate(['/passwords']);
+          },
+          error: (error) => {
+            let errorMessage = 'Failed to save password';
+            
+            if (error.message) {
+              errorMessage = error.message;
+            }
+            
+            this.snackBar.open(errorMessage, 'Close', {
+              duration: 5000,
+              panelClass: ['error-snackbar']
+            });
+          }
+        });
+      }
+    });
+  }
+}

src/app/components/password-list/password-list.component.html

@@ -0,0 +1,97 @@
+<div class="container">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>My Passwords</mat-card-title>
+      <span class="spacer"></span>
+      <button mat-icon-button (click)="toggleTheme()" [matTooltip]="(isDarkTheme$ | async) ? 'Light Mode' : 'Dark Mode'" class="theme-toggle">
+        <mat-icon>{{ (isDarkTheme$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>
+      </button>
+      <button mat-mini-fab routerLink="/generator" matTooltip="Generate New Password">
+        <mat-icon>add</mat-icon>
+      </button>
+    </mat-card-header>
+
+    <mat-card-content>
+      <!-- Loading Spinner -->
+      <div class="loading-spinner" *ngIf="isLoading">
+        <mat-spinner diameter="40" color="primary"></mat-spinner>
+      </div>
+
+      <!-- No Passwords Message -->
+      <div class="no-passwords" *ngIf="!isLoading && passwords.length === 0">
+        <mat-icon>lock</mat-icon>
+        <p>You haven't saved any passwords yet.</p>
+        <button mat-raised-button color="primary" routerLink="/generator">
+          <mat-icon>add</mat-icon>
+          Generate Your First Password
+        </button>
+      </div>
+
+      <!-- Password List -->
+      <div *ngIf="!isLoading && passwords.length > 0">
+        <div class="password-search">
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Search passwords</mat-label>
+            <input matInput [(ngModel)]="searchTerm" (keyup)="filterPasswords()" placeholder="Search by description...">
+            <button mat-icon-button matSuffix *ngIf="searchTerm" (click)="clearSearch()" matTooltip="Clear search">
+              <mat-icon>close</mat-icon>
+            </button>
+            <mat-icon matSuffix *ngIf="!searchTerm">search</mat-icon>
+          </mat-form-field>
+        </div>
+
+        <mat-list>
+          <div *ngFor="let password of filteredPasswords">
+            <div class="password-item" [@fadeInOut]>
+              <div class="password-info">
+                <h3>{{password.description}}</h3>
+                <p>
+                  <span class="password-text" [class.visible]="password.showPassword" [class.hidden]="!password.showPassword">
+                    {{password.password}}
+                  </span>
+                  <span class="password-text" [class.visible]="!password.showPassword" [class.hidden]="password.showPassword">
+                    ••••••••
+                  </span>
+                </p>
+                <p class="timestamp">
+                  <mat-icon inline>schedule</mat-icon>
+                  <span>Created: {{password.createdAt | date:'medium'}}</span>
+                </p>
+              </div>
+              
+              <div class="password-actions">
+                <button mat-icon-button (click)="togglePasswordVisibility(password)" 
+                        [matTooltip]="password.showPassword ? 'Hide Password' : 'Show Password'">
+                  <mat-icon>{{password.showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+                </button>
+                <button mat-icon-button (click)="copyPassword(password)" matTooltip="Copy Password">
+                  <mat-icon>content_copy</mat-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="deletePassword(password)" matTooltip="Delete Password">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+            <mat-divider></mat-divider>
+          </div>
+        </mat-list>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
+
+<!-- Delete Confirmation Dialog -->
+<ng-template #deleteDialog>
+  <h2 mat-dialog-title>Delete Password</h2>
+  <mat-dialog-content>
+    <p><mat-icon color="warn">warning</mat-icon> Are you sure you want to delete this password?</p>
+    <p class="mat-caption">This action cannot be undone.</p>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+      <mat-icon>delete</mat-icon>
+      Delete
+    </button>
+  </mat-dialog-actions>
+</ng-template>

src/app/components/password-list/password-list.component.scss

@@ -0,0 +1,225 @@
+.container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+mat-card {
+  margin: 20px 0;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+  
+  mat-card-header {
+    padding: 20px;
+    background: linear-gradient(135deg, #6b8aff, #4466ee);
+    color: white;
+    border-radius: 12px 12px 0 0;
+    margin: -16px -16px 16px -16px;
+
+    mat-card-title {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 500;
+    }
+
+    button[mat-mini-fab] {
+      background-color: white;
+      color: #4466ee;
+      transition: transform 0.2s;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+
+    .theme-toggle {
+      color: white;
+      margin-right: 12px;
+      opacity: 0.9;
+      transition: all 0.2s;
+
+      &:hover {
+        opacity: 1;
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.no-passwords {
+  text-align: center;
+  padding: 60px 0;
+  color: rgba(0, 0, 0, 0.6);
+
+  mat-icon {
+    font-size: 64px;
+    width: 64px;
+    height: 64px;
+    margin-bottom: 24px;
+    color: #4466ee;
+  }
+
+  p {
+    margin-bottom: 24px;
+    font-size: 18px;
+  }
+
+  button {
+    padding: 0 32px;
+    height: 48px;
+    font-size: 16px;
+  }
+}
+
+.password-search {
+  padding: 0 16px 16px;
+
+  .mat-form-field {
+    width: 100%;
+  }
+}
+
+mat-list {
+  padding: 0;
+  
+  mat-list-item {
+    height: auto !important;
+    margin: 8px 0;
+  }
+}
+
+.password-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  transition: background-color 0.2s;
+  border-radius: 8px;
+  margin: 8px 16px;
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .password-info {
+    flex: 1;
+    min-width: 0;
+    margin-right: 16px;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    p {
+      margin: 4px 0;
+      color: rgba(0, 0, 0, 0.6);
+      font-family: 'Roboto Mono', monospace;
+
+      &.timestamp {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        
+        mat-icon {
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .password-actions {
+    display: flex;
+    gap: 8px;
+
+    button {
+      opacity: 0.7;
+      transition: all 0.2s;
+
+      &:hover {
+        opacity: 1;
+        transform: scale(1.1);
+      }
+
+      &[color="warn"]:hover {
+        background-color: rgba(244, 67, 54, 0.1);
+      }
+    }
+  }
+}
+
+mat-divider {
+  margin: 0 16px;
+}
+
+// Animation for password visibility
+.password-text {
+  transition: opacity 0.3s;
+  word-break: break-all;
+  
+  &.hidden {
+    opacity: 0;
+  }
+  
+  &.visible {
+    opacity: 1;
+  }
+}
+
+// Custom scrollbar
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+// Responsive design
+@media (max-width: 600px) {
+  .container {
+    padding: 10px;
+  }
+
+  .password-item {
+    flex-direction: column;
+    align-items: stretch;
+
+    .password-info {
+      margin-right: 0;
+      margin-bottom: 12px;
+    }
+
+    .password-actions {
+      justify-content: flex-end;
+    }
+  }
+}

src/app/components/password-list/password-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordListComponent } from './password-list.component';
+
+describe('PasswordListComponent', () => {
+  let component: PasswordListComponent;
+  let fixture: ComponentFixture<PasswordListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PasswordListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PasswordListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/password-list/password-list.component.ts

@@ -0,0 +1,159 @@
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDividerModule } from '@angular/material/divider';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { ThemeService } from '../../services/theme.service';
+
+import { PasswordService, SavedPassword } from '../../services/password.service';
+
+interface PasswordWithVisibility extends SavedPassword {
+  showPassword: boolean;
+}
+
+@Component({
+  selector: 'app-password-list',
+  templateUrl: './password-list.component.html',
+  styleUrls: ['./password-list.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    MatCardModule,
+    MatListModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatProgressSpinnerModule,
+    MatDialogModule,
+    MatTooltipModule,
+    MatDividerModule
+  ],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(10px)' }),
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(10px)' }))
+      ])
+    ])
+  ]
+})
+export class PasswordListComponent implements OnInit {
+  @ViewChild('deleteDialog') deleteDialog!: TemplateRef<any>;
+  
+  passwords: PasswordWithVisibility[] = [];
+  filteredPasswords: PasswordWithVisibility[] = [];
+  isLoading = true;
+  searchTerm = '';
+  isDarkTheme$;
+
+  constructor(
+    private passwordService: PasswordService,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialog,
+    private themeService: ThemeService
+  ) {
+    this.isDarkTheme$ = this.themeService.isDarkTheme$;
+  }
+
+  ngOnInit(): void {
+    this.loadPasswords();
+  }
+
+  loadPasswords(): void {
+    this.isLoading = true;
+    this.passwordService.getPasswords().subscribe({
+      next: (passwords) => {
+        this.passwords = passwords.map(p => ({ ...p, showPassword: false }));
+        this.filteredPasswords = [...this.passwords];
+        this.isLoading = false;
+      },
+      error: (error) => {
+        this.isLoading = false;
+        this.snackBar.open('Error loading passwords', 'Close', { 
+          duration: 3000,
+          panelClass: ['error-snackbar']
+        });
+        console.error('Error loading passwords:', error);
+      }
+    });
+  }
+
+  filterPasswords(): void {
+    if (!this.searchTerm) {
+      this.filteredPasswords = [...this.passwords];
+      return;
+    }
+
+    const searchTerm = this.searchTerm.toLowerCase();
+    this.filteredPasswords = this.passwords.filter(password =>
+      password.description.toLowerCase().includes(searchTerm)
+    );
+  }
+
+  clearSearch(): void {
+    this.searchTerm = '';
+    this.filterPasswords();
+  }
+
+  togglePasswordVisibility(password: PasswordWithVisibility): void {
+    password.showPassword = !password.showPassword;
+  }
+
+  copyPassword(password: PasswordWithVisibility): void {
+    navigator.clipboard.writeText(password.password);
+    this.snackBar.open('Password copied to clipboard!', 'Close', { 
+      duration: 2000,
+      panelClass: ['success-snackbar']
+    });
+  }
+
+  deletePassword(password: PasswordWithVisibility): void {
+    const dialogRef = this.dialog.open(this.deleteDialog, {
+      width: '400px',
+      panelClass: 'confirm-dialog'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.passwordService.deletePassword(password._id).subscribe({
+          next: () => {
+            this.passwords = this.passwords.filter(p => p._id !== password._id);
+            this.filteredPasswords = this.filteredPasswords.filter(p => p._id !== password._id);
+            this.snackBar.open('Password deleted successfully', 'Close', { 
+              duration: 3000,
+              panelClass: ['success-snackbar']
+            });
+          },
+          error: (error) => {
+            this.snackBar.open('Error deleting password', 'Close', { 
+              duration: 3000,
+              panelClass: ['error-snackbar']
+            });
+            console.error('Error deleting password:', error);
+          }
+        });
+      }
+    });
+  }
+
+  toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
+}

src/app/components/register/register.component.html

@@ -0,0 +1,64 @@
+<div class="container">
+  <mat-card class="register-card">
+    <mat-card-header>
+      <mat-card-title>Register</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+        <mat-form-field class="full-width">
+          <mat-label>Email</mat-label>
+          <input matInput type="email" formControlName="email" required>
+          <mat-error *ngIf="registerForm.get('email')?.hasError('required')">
+            Email is required
+          </mat-error>
+          <mat-error *ngIf="registerForm.get('email')?.hasError('email')">
+            Please enter a valid email address
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="full-width">
+          <mat-label>Password</mat-label>
+          <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" required>
+          <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword">
+            <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+          </button>
+          <mat-error *ngIf="registerForm.get('password')?.hasError('required')">
+            Password is required
+          </mat-error>
+          <mat-error *ngIf="registerForm.get('password')?.hasError('minlength')">
+            Password must be at least 6 characters long
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="full-width">
+          <mat-label>Confirm Password</mat-label>
+          <input matInput [type]="hideConfirmPassword ? 'password' : 'text'" formControlName="confirmPassword" required>
+          <button mat-icon-button matSuffix (click)="hideConfirmPassword = !hideConfirmPassword">
+            <mat-icon>{{hideConfirmPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+          </button>
+          <mat-error *ngIf="registerForm.get('confirmPassword')?.hasError('required')">
+            Please confirm your password
+          </mat-error>
+          <mat-error *ngIf="registerForm.hasError('passwordMismatch')">
+            Passwords do not match
+          </mat-error>
+        </mat-form-field>
+
+        <div class="form-actions">
+          <button mat-raised-button color="primary" type="submit" [disabled]="registerForm.invalid || isLoading">
+            <mat-spinner diameter="20" *ngIf="isLoading"></mat-spinner>
+            <span *ngIf="!isLoading">Register</span>
+          </button>
+        </div>
+      </form>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <div class="text-center">
+        <span>Already have an account? </span>
+        <a mat-button color="accent" routerLink="/login">Login</a>
+      </div>
+    </mat-card-actions>
+  </mat-card>
+</div>

src/app/components/register/register.component.scss

@@ -0,0 +1,43 @@
+.register-card {
+  max-width: 400px;
+  margin: 2rem auto;
+  padding: 20px;
+}
+
+.full-width {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.text-center {
+  text-align: center;
+  margin: 1rem 0;
+}
+
+mat-card-header {
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+mat-card-title {
+  font-size: 24px;
+  margin-bottom: 1rem;
+}
+
+button[type="submit"] {
+  min-width: 120px;
+  position: relative;
+
+  mat-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

src/app/components/register/register.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegisterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/register/register.component.ts

@@ -0,0 +1,88 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { RouterModule } from '@angular/router';
+
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    RouterModule
+  ]
+})
+export class RegisterComponent implements OnInit {
+  registerForm: FormGroup;
+  isLoading = false;
+  hidePassword = true;
+  hideConfirmPassword = true;
+
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) {
+    this.registerForm = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: ['', [Validators.required]]
+    }, { validator: this.passwordMatchValidator });
+  }
+
+  ngOnInit(): void {}
+
+  passwordMatchValidator(g: FormGroup) {
+    return g.get('password')?.value === g.get('confirmPassword')?.value
+      ? null
+      : { passwordMismatch: true };
+  }
+
+  onSubmit() {
+    if (this.registerForm.valid) {
+      this.isLoading = true;
+      const { email, password } = this.registerForm.value;
+
+      this.authService.register(email, password).subscribe({
+        next: () => {
+          this.snackBar.open('Registration successful!', 'Close', {
+            duration: 3000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top'
+          });
+          this.router.navigate(['/login']);
+        },
+        error: (error) => {
+          this.isLoading = false;
+          this.snackBar.open(error.message || 'Registration failed', 'Close', {
+            duration: 3000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top'
+          });
+        },
+        complete: () => {
+          this.isLoading = false;
+        }
+      });
+    }
+  }
+}

src/app/guards/auth.guard.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+import { map, take } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {}
+
+  canActivate() {
+    return this.authService.isAuthenticated$.pipe(
+      take(1),
+      map(isAuthenticated => {
+        if (isAuthenticated) {
+          return true;
+        }
+        
+        this.router.navigate(['/login']);
+        return false;
+      })
+    );
+  }
+} 

src/app/interceptors/auth.interceptor.ts

@@ -0,0 +1,38 @@
+import { HttpInterceptorFn, HttpRequest, HttpHandlerFn, HttpErrorResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { catchError, throwError } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+export const authInterceptor: HttpInterceptorFn = (
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn
+) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const snackBar = inject(MatSnackBar);
+
+  const token = authService.getToken();
+
+  if (token) {
+    req = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`
+      }
+    });
+  }
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      if (error.status === 401) {
+        authService.logout();
+        router.navigate(['/login']);
+        snackBar.open('Session expired. Please login again.', 'Close', {
+          duration: 3000
+        });
+      }
+      return throwError(() => error);
+    })
+  );
+}; 

src/app/services/auth.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth.service.ts

@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable, tap, of } from 'rxjs';
+import { environment } from '../../environments/environment';
+
+interface User {
+  id: string;
+  email: string;
+}
+
+interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private readonly TOKEN_KEY = 'auth_token';
+  private readonly API_URL = `${environment.apiUrl}/auth`;
+  private currentUserSubject = new BehaviorSubject<User | null>(null);
+  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
+
+  isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
+  currentUser$ = this.currentUserSubject.asObservable();
+
+  constructor(private http: HttpClient) {
+    this.checkToken();
+  }
+
+  private checkToken(): void {
+    const token = this.getToken();
+    if (token) {
+      // Token varsa kullanıcıyı otomatik olarak giriş yapmış say
+      // Backend zaten her istekte token'ı kontrol edecek
+      this.isAuthenticatedSubject.next(true);
+    }
+  }
+
+  login(email: string, password: string): Observable<AuthResponse> {
+    return this.http.post<AuthResponse>(`${this.API_URL}/login`, { email, password }).pipe(
+      tap(response => {
+        localStorage.setItem(this.TOKEN_KEY, response.token);
+        this.currentUserSubject.next(response.user);
+        this.isAuthenticatedSubject.next(true);
+      })
+    );
+  }
+
+  register(email: string, password: string): Observable<AuthResponse> {
+    return this.http.post<AuthResponse>(`${this.API_URL}/register`, { email, password }).pipe(
+      tap(response => {
+        localStorage.setItem(this.TOKEN_KEY, response.token);
+        this.currentUserSubject.next(response.user);
+        this.isAuthenticatedSubject.next(true);
+      })
+    );
+  }
+
+  logout(): void {
+    localStorage.removeItem(this.TOKEN_KEY);
+    this.currentUserSubject.next(null);
+    this.isAuthenticatedSubject.next(false);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.TOKEN_KEY);
+  }
+}

src/app/services/database.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DatabaseService } from './database.service';
+
+describe('DatabaseService', () => {
+  let service: DatabaseService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DatabaseService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/database.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DatabaseService {
+
+  constructor() { }
+}

src/app/services/password.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PasswordService } from './password.service';
+
+describe('PasswordService', () => {
+  let service: PasswordService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PasswordService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/password.service.ts

@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, catchError, tap, throwError } from 'rxjs';
+import { environment } from '../../environments/environment';
+
+export interface SavedPassword {
+  _id: string;
+  userId: string;
+  description: string;
+  password: string;
+  createdAt: Date;
+}
+
+export interface SavePasswordRequest {
+  description: string;
+  password: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PasswordService {
+  private readonly API_URL = `${environment.apiUrl}/passwords`;
+
+  constructor(private http: HttpClient) {}
+
+  private handleError(error: HttpErrorResponse) {
+    let errorMessage = 'An unknown error occurred';
+
+    if (error.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = error.error.message;
+    } else {
+      // Backend error
+      if (error.error?.message) {
+        errorMessage = error.error.message;
+      } else if (typeof error.error === 'string') {
+        // Try to parse HTML error message
+        const match = error.error.match(/<pre>([^<]+)<\/pre>/);
+        if (match) {
+          errorMessage = match[1].split('<br>')[0];
+        } else {
+          errorMessage = error.error;
+        }
+      } else {
+        errorMessage = `Server error: ${error.status}`;
+      }
+    }
+
+    console.error('Error details:', {
+      message: errorMessage,
+      status: error.status,
+      error: error.error
+    });
+
+    return throwError(() => ({ message: errorMessage, originalError: error }));
+  }
+
+  getPasswords(): Observable<SavedPassword[]> {
+    return this.http.get<SavedPassword[]>(this.API_URL).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  savePassword(data: SavePasswordRequest): Observable<SavedPassword> {
+    return this.http.post<SavedPassword>(this.API_URL, data).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  deletePassword(id: string): Observable<void> {
+    return this.http.delete<void>(`${this.API_URL}/${id}`).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  updatePassword(id: string, data: SavePasswordRequest): Observable<SavedPassword> {
+    return this.http.put<SavedPassword>(`${this.API_URL}/${id}`, data).pipe(
+      catchError(this.handleError)
+    );
+  }
+}

src/app/services/theme.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private isDarkTheme = new BehaviorSubject<boolean>(false);
+  isDarkTheme$ = this.isDarkTheme.asObservable();
+
+  constructor() {
+    const storedTheme = this.getStoredTheme();
+    this.isDarkTheme.next(storedTheme);
+    this.applyTheme(storedTheme);
+  }
+
+  private getStoredTheme(): boolean {
+    const storedTheme = localStorage.getItem('darkTheme');
+    if (storedTheme !== null) {
+      return JSON.parse(storedTheme);
+    }
+    return false; // Default to light theme
+  }
+
+  toggleTheme(): void {
+    const newTheme = !this.isDarkTheme.value;
+    this.isDarkTheme.next(newTheme);
+    localStorage.setItem('darkTheme', JSON.stringify(newTheme));
+    this.applyTheme(newTheme);
+  }
+
+  private applyTheme(isDark: boolean): void {
+    if (isDark) {
+      document.body.classList.add('dark-theme');
+    } else {
+      document.body.classList.remove('dark-theme');
+    }
+  }
+} 

src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiUrl: 'http://172.104.233.196:3000/api'
+}; 

src/environments/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  apiUrl: 'http://172.104.233.196:3000/api',
+  encryptionKey: 'your-secret-key-12345'
+}; 

src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Password Saver</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch(err => console.error(err));

src/styles.scss

@@ -0,0 +1,424 @@
+/* You can add global styles to this file, and also import other style files */
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
+
+// Global styles
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  background-color: #f5f5f5;
+}
+
+body {
+  transition: background-color 0.3s ease;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+// Light theme styles (default)
+.mat-mdc-card {
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(63, 81, 181, 0.1) !important;
+  
+  .mat-mdc-card-title {
+    color: #3f51b5;
+  }
+
+  .mat-mdc-card-content {
+    color: rgba(0, 0, 0, 0.87);
+  }
+}
+
+.generated-password {
+  background-color: #f5f6ff !important;
+  color: #3f51b5 !important;
+  border: 1px solid rgba(63, 81, 181, 0.2) !important;
+  border-radius: 4px;
+  padding: 16px;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 1.1em;
+  letter-spacing: 1px;
+}
+
+.mat-mdc-slider {
+  .mdc-slider__track--active_fill {
+    border-color: #3f51b5 !important;
+    background-color: #3f51b5 !important;
+  }
+  
+  .mdc-slider__thumb-knob {
+    background-color: #3f51b5 !important;
+    border-color: #3f51b5 !important;
+  }
+}
+
+.mat-mdc-checkbox {
+  &.mat-primary {
+    .mdc-checkbox__background {
+      border-color: #3f51b5 !important;
+    }
+    
+    .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
+      background-color: #3f51b5 !important;
+      border-color: #3f51b5 !important;
+    }
+  }
+}
+
+.mat-mdc-raised-button.mat-primary {
+  background-color: #3f51b5;
+  color: white;
+}
+
+.mat-mdc-raised-button.mat-accent {
+  background-color: #ff4081;
+  color: white;
+}
+
+// Dark theme styles
+.dark-theme {
+  background-color: #303030;
+  color: #ffffff;
+
+  .mat-mdc-card {
+    background-color: #424242;
+    color: #ffffff;
+
+    .mat-mdc-card-title {
+      color: #ffffff;
+    }
+
+    .mat-mdc-card-content {
+      color: rgba(255, 255, 255, 0.87);
+    }
+  }
+
+  // Password Generator specific styles
+  .generated-password {
+    background-color: #505050 !important;
+    color: #ffffff !important;
+    border-color: rgba(255, 255, 255, 0.12) !important;
+  }
+
+  // Input field styles
+  .mat-mdc-text-field-wrapper {
+    background-color: #424242 !important;
+  }
+
+  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
+    background-color: #424242 !important;
+    
+    .mdc-line-ripple::before {
+      border-bottom-color: rgba(255, 255, 255, 0.42);
+    }
+    
+    .mdc-line-ripple::after {
+      border-bottom-color: #673ab7;
+    }
+    
+    .mdc-floating-label {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    
+    .mdc-text-field__input {
+      color: white !important;
+    }
+  }
+
+  // Slider styles
+  .mat-mdc-slider {
+    .mdc-slider__track--active_fill {
+      border-color: #673ab7 !important;
+      background-color: #673ab7 !important;
+    }
+    
+    .mdc-slider__thumb-knob {
+      background-color: #673ab7 !important;
+      border-color: #673ab7 !important;
+    }
+
+    .mdc-slider__value-indicator {
+      background-color: #673ab7 !important;
+      color: white !important;
+    }
+  }
+
+  // Checkbox styles
+  .mat-mdc-checkbox {
+    .mdc-checkbox__background {
+      border-color: rgba(255, 255, 255, 0.7) !important;
+    }
+    
+    .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
+      background-color: #673ab7 !important;
+      border-color: #673ab7 !important;
+    }
+
+    .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
+      color: white !important;
+    }
+
+    .mdc-form-field > label {
+      color: rgba(255, 255, 255, 0.87) !important;
+    }
+  }
+
+  // Button styles
+  .mat-mdc-icon-button {
+    color: rgba(255, 255, 255, 0.87) !important;
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .mat-mdc-card-subtitle {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .password-item {
+    background-color: #424242 !important;
+    
+    &:hover {
+      background-color: #505050 !important;
+    }
+
+    .password-info {
+      h3 {
+        color: #ffffff !important;
+      }
+
+      p {
+        color: rgba(255, 255, 255, 0.87) !important;
+
+        &.timestamp {
+          color: rgba(255, 255, 255, 0.7) !important;
+        }
+      }
+    }
+
+    .password-actions button {
+      color: rgba(255, 255, 255, 0.87);
+    }
+  }
+
+  .mat-mdc-form-field {
+    .mdc-text-field--outlined {
+      background-color: #424242;
+    }
+    
+    .mdc-text-field:not(.mdc-text-field--disabled) {
+      .mdc-floating-label,
+      .mdc-text-field__input {
+        color: rgba(255, 255, 255, 0.87);
+      }
+
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: rgba(255, 255, 255, 0.38);
+      }
+    }
+  }
+
+  .mat-divider {
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .mat-mdc-dialog-container {
+    background-color: #424242;
+    color: #ffffff;
+
+    .mat-mdc-dialog-surface {
+      background-color: #424242;
+      color: #ffffff;
+    }
+  }
+
+  .no-passwords {
+    color: rgba(255, 255, 255, 0.7) !important;
+    
+    mat-icon {
+      color: #673ab7 !important;
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #424242;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #666;
+    
+    &:hover {
+      background: #888;
+    }
+  }
+
+  .footer {
+    color: rgba(255, 255, 255, 0.7);
+    
+    a {
+      color: #ff4081;
+    }
+  }
+}
+
+// Container
+.container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+// Custom scrollbar
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+  &:hover {
+    background: #555;
+  }
+}
+
+// Snackbar styles
+.success-snackbar {
+  background: #43a047;
+  color: white;
+  
+  .mat-simple-snackbar-action {
+    color: white;
+  }
+}
+
+.error-snackbar {
+  background: #d32f2f;
+  color: white;
+  
+  .mat-simple-snackbar-action {
+    color: white;
+  }
+}
+
+// Dialog styles
+.confirm-dialog {
+  .mat-mdc-dialog-container {
+    border-radius: 12px;
+    padding: 24px;
+  }
+  
+  .mat-mdc-dialog-title {
+    margin: 0 0 20px;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  
+  .mat-mdc-dialog-content {
+    margin: 0 0 20px;
+    color: rgba(0, 0, 0, 0.6);
+    
+    .mat-icon {
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+  }
+  
+  .mat-mdc-dialog-actions {
+    margin-bottom: 0;
+    padding: 0;
+    min-height: 52px;
+    
+    button {
+      margin-left: 8px;
+      
+      .mat-icon {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+
+// Material overrides
+.mat-mdc-card {
+  margin: 1rem 0;
+  border-radius: 8px;
+  background-color: white;
+}
+
+.mat-mdc-form-field {
+  width: 100%;
+}
+
+.mat-mdc-snack-bar-container {
+  margin: 1rem !important;
+}
+
+// Utility classes
+.full-width {
+  width: 100%;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.mat-icon {
+  vertical-align: middle;
+}
+
+// Animations
+.fade-in {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Responsive
+@media (max-width: 600px) {
+  .container {
+    padding: 10px;
+  }
+
+  .mat-mdc-dialog-container {
+    padding: 16px !important;
+  }
+  
+  .mat-mdc-snack-bar-container {
+    margin: 8px !important;
+  }
+}
+
+// Footer styles
+.footer {
+  text-align: center;
+  padding: 20px;
+  margin-top: 20px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  
+  a {
+    color: #3f51b5;
+    text-decoration: none;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}