m3mo/PasGen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Mehmet Oezdag 2025-03-29 15:05:01 +01:00
commit bb4b8001ba
53 changed files with 17250 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.editorconfig Normal file
View File

@ -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

42
.gitignore vendored Normal file
View File

@ -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

4
.vscode/extensions.json vendored Normal file
View File

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

20
.vscode/launch.json vendored Normal file
View File

@ -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"
}
]
}

42
.vscode/tasks.json vendored Normal file
View File

@ -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"
}
}
}
}
]
}

59
README.md Normal file
View File

@ -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.

103
angular.json Normal file
View File

@ -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": []
}
}
}
}
}
}

14597
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

45
package.json Normal file
View File

@ -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"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

2
src/app/app.component.html Normal file
View File

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

0
src/app/app.component.scss Normal file
View File

29
src/app/app.component.spec.ts Normal file
View File

@ -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');
});
});

15
src/app/app.component.ts Normal file
View File

@ -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';
}

31
src/app/app.config.ts Normal file
View File

@ -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'
}
}
]
};

34
src/app/app.routes.ts Normal file
View File

@ -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'
}
];

24
src/app/components/header/header.component.html Normal file
View File

@ -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>

20
src/app/components/header/header.component.scss Normal file
View File

@ -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;
}

23
src/app/components/header/header.component.spec.ts Normal file
View File

@ -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();
});
});

43
src/app/components/header/header.component.ts Normal file
View File

@ -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(['/']);
}
}

47
src/app/components/login/login.component.html Normal file
View File

@ -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>

30
src/app/components/login/login.component.scss Normal file
View File

@ -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;
}

23
src/app/components/login/login.component.spec.ts Normal file
View File

@ -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();
});
});

79
src/app/components/login/login.component.ts Normal file
View File

@ -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 });
}
);
}
}
}

68
src/app/components/password-generator/password-generator.component.html Normal file
View File

@ -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>

60
src/app/components/password-generator/password-generator.component.scss Normal file
View File

@ -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;
}
}
}

23
src/app/components/password-generator/password-generator.component.spec.ts Normal file
View File

@ -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();
});
});

223
src/app/components/password-generator/password-generator.component.ts Normal file
View File

@ -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']
});
}
});
}
});
}
}

97
src/app/components/password-list/password-list.component.html Normal file
View File

@ -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>

225
src/app/components/password-list/password-list.component.scss Normal file
View File

@ -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;
}
}
}

23
src/app/components/password-list/password-list.component.spec.ts Normal file
View File

@ -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();
});
});

159
src/app/components/password-list/password-list.component.ts Normal file
View File

@ -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();
}
}

64
src/app/components/register/register.component.html Normal file
View File

@ -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>

43
src/app/components/register/register.component.scss Normal file
View File

@ -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%);
}
}

23
src/app/components/register/register.component.spec.ts Normal file
View File

@ -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();
});
});

88
src/app/components/register/register.component.ts Normal file
View File

@ -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;
}
});
}
}
}

28
src/app/guards/auth.guard.ts Normal file
View File

@ -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;
})
);
}
}

38
src/app/interceptors/auth.interceptor.ts Normal file
View File

@ -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);
})
);
};

16
src/app/services/auth.service.spec.ts Normal file
View File

@ -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();
});
});

70
src/app/services/auth.service.ts Normal file
View File

@ -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);
}
}

16
src/app/services/database.service.spec.ts Normal file
View File

@ -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();
});
});

9
src/app/services/database.service.ts Normal file
View File

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

16
src/app/services/password.service.spec.ts Normal file
View File

@ -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();
});
});

82
src/app/services/password.service.ts Normal file
View File

@ -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)
);
}
}

39
src/app/services/theme.service.ts Normal file
View File

@ -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');
}
}
}

4
src/environments/environment.prod.ts Normal file
View File

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

5
src/environments/environment.ts Normal file
View File

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

15
src/index.html Normal file
View File

@ -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>

6
src/main.ts Normal file
View File

@ -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));

424
src/styles.scss Normal file
View File

@ -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;
}
}
}

15
tsconfig.app.json Normal file
View File

@ -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"
]
}

27
tsconfig.json Normal file
View File

@ -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
}
}

15
tsconfig.spec.json Normal file
View File

@ -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"
]
}