feat: add angular (#447)
* feat: add angular base files * feat: add angular login components * feat: add login and register components logic * feat: add pages components * feat: enable dependabot for angular * feat: add components
This commit is contained in:
@@ -4,6 +4,10 @@ updates:
|
||||
directory: "/client"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/angular"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
- package-ecosystem: "maven"
|
||||
directory: "/server"
|
||||
schedule:
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -0,0 +1,59 @@
|
||||
# Angular
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.9.
|
||||
|
||||
## 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.
|
||||
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"angular": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/angular",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environment/environment.ts",
|
||||
"with": "src/environment/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "angular:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "angular:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": "f3df3ed6-26ee-4bf2-a36d-31ede8ebd2d0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
# Angular commands
|
||||
|
||||
## Create the Services
|
||||
|
||||
```sh
|
||||
ng generate service services/api
|
||||
ng generate service services/auth
|
||||
```
|
||||
|
||||
## Create the components
|
||||
|
||||
```sh
|
||||
ng generate component components/login --standalone
|
||||
ng generate component components/register --standalone
|
||||
ng generate component components/home --standalone
|
||||
ng generate component components/landing --standalone
|
||||
ng generate component components/emailConfirmation --standalone
|
||||
ng generate component components/passwordReset --standalone
|
||||
ng generate component components/finishPasswordReset --standalone
|
||||
ng generate component components/tasksManagement --standalone
|
||||
ng generate component components/notesManagement --standalone
|
||||
```
|
||||
Generated
+14818
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "angular",
|
||||
"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/common": "^19.2.0",
|
||||
"@angular/compiler": "^19.2.0",
|
||||
"@angular/core": "^19.2.0",
|
||||
"@angular/forms": "^19.2.0",
|
||||
"@angular/platform-browser": "^19.2.0",
|
||||
"@angular/platform-browser-dynamic": "^19.2.0",
|
||||
"@angular/router": "^19.2.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^19.2.9",
|
||||
"@angular/cli": "^19.2.9",
|
||||
"@angular/compiler-cli": "^19.2.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.6.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"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1 @@
|
||||
<router-outlet />
|
||||
@@ -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 'angular' title`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('angular');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.css'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'angular';
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { authGuard } from './guards/auth.guard';
|
||||
|
||||
export const routes: Routes = [
|
||||
/*
|
||||
* Not signed routes
|
||||
*/
|
||||
{
|
||||
path: '',
|
||||
pathMatch: 'full',
|
||||
loadComponent: () => import('./components/landing/landing.component').then(c => c.LandingComponent)
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
loadComponent: () => import('./components/login/login.component').then(c => c.LoginComponent)
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
loadComponent: () => import('./components/register/register.component').then(c => c.RegisterComponent)
|
||||
},
|
||||
{
|
||||
path: 'email-confirmation',
|
||||
loadComponent: () => import('./components/email-confirmation/email-confirmation.component').then(c => c.EmailConfirmationComponent)
|
||||
},
|
||||
{
|
||||
path: 'reset-password',
|
||||
loadComponent: () => import('./components/password-reset/password-reset.component').then(c => c.PasswordResetComponent)
|
||||
},
|
||||
{
|
||||
path: 'finish-password-reset',
|
||||
loadComponent: () => import('./components/finish-password-reset/finish-password-reset.component').then(c => c.FinishPasswordResetComponent)
|
||||
},
|
||||
|
||||
/*
|
||||
* Signed routes
|
||||
*/
|
||||
{
|
||||
path: 'home',
|
||||
loadComponent: () => import('./components/home/home.component').then(c => c.HomeComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'about',
|
||||
loadComponent: () => import('./components/about/about.component').then(c => c.AboutComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'tasks',
|
||||
loadComponent: () => import('./components/tasks/tasks.component').then(c => c.TasksComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{ path: 'tasks-management/new',
|
||||
loadComponent: () => import('./components/tasks-management/tasks-management.component').then(c => c.TasksManagementComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{ path: 'tasks-management/edit/:id',
|
||||
loadComponent: () => import('./components/tasks-management/tasks-management.component').then(c => c.TasksManagementComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'notes',
|
||||
loadComponent: () => import('./components/notes/notes.component').then(c => c.NotesComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'notes-management/new',
|
||||
loadComponent: () => import('./components/notes-management/notes-management.component').then(c => c.NotesManagementComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{ path: 'notes-management/edit/:id',
|
||||
loadComponent: () => import('./components/notes-management/notes-management.component').then(c => c.NotesManagementComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'account',
|
||||
loadComponent: () => import('./components/account/account.component').then(c => c.AccountComponent),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
|
||||
{ path: '**', redirectTo: 'login' }
|
||||
];
|
||||
@@ -0,0 +1,10 @@
|
||||
<nav>
|
||||
<a routerLink="/home">Home</a> |
|
||||
<a routerLink="/tasks">Tasks</a> |
|
||||
<a routerLink="/notes">Notes</a> |
|
||||
<a routerLink="/account">My Account</a> |
|
||||
<a routerLink="/about">About</a> |
|
||||
<a href="javascript:void(0)">Logout</a>
|
||||
</nav>
|
||||
|
||||
<p>about works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AboutComponent } from './about.component';
|
||||
|
||||
describe('AboutComponent', () => {
|
||||
let component: AboutComponent;
|
||||
let fixture: ComponentFixture<AboutComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AboutComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AboutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-about',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
templateUrl: './about.component.html',
|
||||
styleUrl: './about.component.css'
|
||||
})
|
||||
export class AboutComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<nav>
|
||||
<a routerLink="/home">Home</a> |
|
||||
<a routerLink="/tasks">Tasks</a> |
|
||||
<a routerLink="/notes">Notes</a> |
|
||||
<a routerLink="/account">My Account</a> |
|
||||
<a routerLink="/about">About</a> |
|
||||
<a href="javascript:void(0)">Logout</a>
|
||||
</nav>
|
||||
|
||||
<p>account works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AccountComponent } from './account.component';
|
||||
|
||||
describe('AccountComponent', () => {
|
||||
let component: AccountComponent;
|
||||
let fixture: ComponentFixture<AccountComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AccountComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AccountComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-account',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
templateUrl: './account.component.html',
|
||||
styleUrl: './account.component.css'
|
||||
})
|
||||
export class AccountComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>email-confirmation works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EmailConfirmationComponent } from './email-confirmation.component';
|
||||
|
||||
describe('EmailConfirmationComponent', () => {
|
||||
let component: EmailConfirmationComponent;
|
||||
let fixture: ComponentFixture<EmailConfirmationComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [EmailConfirmationComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(EmailConfirmationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-email-confirmation',
|
||||
imports: [],
|
||||
templateUrl: './email-confirmation.component.html',
|
||||
styleUrl: './email-confirmation.component.css'
|
||||
})
|
||||
export class EmailConfirmationComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>finish-password-reset works!</p>
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FinishPasswordResetComponent } from './finish-password-reset.component';
|
||||
|
||||
describe('FinishPasswordResetComponent', () => {
|
||||
let component: FinishPasswordResetComponent;
|
||||
let fixture: ComponentFixture<FinishPasswordResetComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [FinishPasswordResetComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(FinishPasswordResetComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-finish-password-reset',
|
||||
imports: [],
|
||||
templateUrl: './finish-password-reset.component.html',
|
||||
styleUrl: './finish-password-reset.component.css'
|
||||
})
|
||||
export class FinishPasswordResetComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
<nav>
|
||||
<a routerLink="/home">Home</a> |
|
||||
<a routerLink="/tasks">Tasks</a> |
|
||||
<a routerLink="/notes">Notes</a> |
|
||||
<a routerLink="/account">My Account</a> |
|
||||
<a routerLink="/about">About</a> |
|
||||
<a href="javascript:void(0)" (click)="doLogout($event)">Logout</a>
|
||||
</nav>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Hello, User</h1>
|
||||
<p>Welcome to TaskNote! Get ready to complete your pending tasks</p>
|
||||
<h2>Start Your Day, Be</h2>
|
||||
<h3>Productive</h3>
|
||||
|
||||
<a routerLink="/tasks/new">New task</a> | <a routerLink="#">New note</a>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<form>
|
||||
<label>Search task</label><br>
|
||||
<input type="text" placeholder="Search tasks & notes"/>
|
||||
</form>
|
||||
|
||||
<br>
|
||||
|
||||
<div *ngIf="loading">Loading tasks...</div>
|
||||
<div *ngIf="error" class="error">{{ error }}</div>
|
||||
|
||||
<button type="button" (click)="loadHighPriorityTasks()">
|
||||
High Priority
|
||||
</button>
|
||||
|
||||
<button type="button">
|
||||
All tasks
|
||||
</button>
|
||||
|
||||
<ng-container *ngFor="let tag of tags">
|
||||
|
||||
<button type="button">
|
||||
{{ tag }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<button type="button">
|
||||
Clear results
|
||||
</button>
|
||||
|
||||
<p>Tasks summary:</p>
|
||||
<ul>
|
||||
<li>Total Notes: 8</li>
|
||||
<li>Pending Tasks: 13</li>
|
||||
<li>Completed Tasks: 14</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [HomeComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { NgForOf, NgIf } from '@angular/common';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
standalone: true,
|
||||
imports: [RouterLink, NgIf, NgForOf],
|
||||
templateUrl: './home.component.html',
|
||||
styleUrl: './home.component.css'
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
|
||||
tags: string[] = [];
|
||||
loading = true;
|
||||
error: string | null = null;
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
private authService: AuthService,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.apiService.getHomeTags().subscribe({
|
||||
next: (tagList) => {
|
||||
this.tags = tagList;
|
||||
this.loading = false;
|
||||
},
|
||||
error: (err) => {
|
||||
this.error = `Failed to load tasks: ${JSON.stringify(err)}`;
|
||||
this.loading = false;
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadHighPriorityTasks(): void {
|
||||
console.log('loadHighPriorityTasks');
|
||||
}
|
||||
|
||||
doLogout(e: Event): void {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.authService.logout();
|
||||
this.router.navigate(['/login']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<h1>Welcome to TaskNote</h1>
|
||||
<h2>Your best friend to keep up with notes and tasks!</h2>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<a routerLink="/login">Login</a>
|
||||
</div>
|
||||
<div>
|
||||
<a routerLink="/Register">Register</a>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LandingComponent } from './landing.component';
|
||||
|
||||
describe('LandingComponent', () => {
|
||||
let component: LandingComponent;
|
||||
let fixture: ComponentFixture<LandingComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [LandingComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(LandingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
imports: [RouterLink],
|
||||
templateUrl: './landing.component.html',
|
||||
styleUrl: './landing.component.css'
|
||||
})
|
||||
export class LandingComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<h1>Login</h1>
|
||||
|
||||
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
|
||||
<label for="email">Email</label><br>
|
||||
<input type="email" formControlName="email" required /><br>
|
||||
<div *ngIf="loginForm.controls.email.invalid && loginForm.controls.email.touched" class="error">
|
||||
Please enter a valid email.
|
||||
</div>
|
||||
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" formControlName="password" required /><br>
|
||||
<div *ngIf="loginForm.controls.password.invalid && loginForm.controls.password.touched" class="error">
|
||||
Password must be at least 6 characters.
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<input type="submit" value="Login" [disabled]="loginForm.invalid">
|
||||
<div *ngIf="errorMessage" class="error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p>
|
||||
Don't have an account yet?
|
||||
<a routerLink="/register">Create account</a>
|
||||
</p>
|
||||
<div>
|
||||
<a routerLink="/">Back to home</a>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<a routerLink="/reset-password">Forgot your password?</a>
|
||||
</div>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { LoginCredentials } from '../../models/credentials';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
interface LoginForm {
|
||||
email: FormControl<string>;
|
||||
password: FormControl<string>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
CommonModule,
|
||||
RouterLink
|
||||
],
|
||||
templateUrl: './login.component.html',
|
||||
styleUrl: './login.component.css',
|
||||
})
|
||||
export class LoginComponent {
|
||||
|
||||
loginForm: FormGroup<LoginForm>;
|
||||
errorMessage: string | null = null;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private apiService: ApiService,
|
||||
private router: Router
|
||||
) {
|
||||
this.loginForm = this.fb.group<LoginForm>({
|
||||
email: this.fb.control('', { validators: [Validators.required, Validators.email], nonNullable: true }),
|
||||
password: this.fb.control('', { validators: [Validators.required, Validators.minLength(6)], nonNullable: true })
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
if (this.loginForm.invalid) return;
|
||||
|
||||
this.errorMessage = null;
|
||||
|
||||
const credentials: LoginCredentials = this.loginForm.value as LoginCredentials;
|
||||
|
||||
this.apiService.login(credentials).subscribe({
|
||||
next: (response) => {
|
||||
localStorage.setItem('token', response.token);
|
||||
this.router.navigate(['/home']);
|
||||
},
|
||||
error: (error) => {
|
||||
console.log(error);
|
||||
console.log(typeof(error));
|
||||
|
||||
let errorMsg = error.error.errorMessage;
|
||||
if (error.error.fields && error.error.fields.length > 0) {
|
||||
errorMsg += " " + error.error.fields[0].fieldName + " " + error.error.fields[0].fieldMessage;
|
||||
}
|
||||
this.errorMessage = errorMsg;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>notes-management works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotesManagementComponent } from './notes-management.component';
|
||||
|
||||
describe('NotesManagementComponent', () => {
|
||||
let component: NotesManagementComponent;
|
||||
let fixture: ComponentFixture<NotesManagementComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [NotesManagementComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(NotesManagementComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notes-management',
|
||||
imports: [],
|
||||
templateUrl: './notes-management.component.html',
|
||||
styleUrl: './notes-management.component.css'
|
||||
})
|
||||
export class NotesManagementComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<nav>
|
||||
<a routerLink="/home">Home</a> |
|
||||
<a routerLink="/tasks">Tasks</a> |
|
||||
<a routerLink="/notes">Notes</a> |
|
||||
<a routerLink="/account">My Account</a> |
|
||||
<a routerLink="/about">About</a> |
|
||||
<a href="javascript:void(0)">Logout</a>
|
||||
</nav>
|
||||
|
||||
<p>notes works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotesComponent } from './notes.component';
|
||||
|
||||
describe('NotesComponent', () => {
|
||||
let component: NotesComponent;
|
||||
let fixture: ComponentFixture<NotesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [NotesComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(NotesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notes',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
templateUrl: './notes.component.html',
|
||||
styleUrl: './notes.component.css'
|
||||
})
|
||||
export class NotesComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>password-reset works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PasswordResetComponent } from './password-reset.component';
|
||||
|
||||
describe('PasswordResetComponent', () => {
|
||||
let component: PasswordResetComponent;
|
||||
let fixture: ComponentFixture<PasswordResetComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PasswordResetComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PasswordResetComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-password-reset',
|
||||
imports: [],
|
||||
templateUrl: './password-reset.component.html',
|
||||
styleUrl: './password-reset.component.css'
|
||||
})
|
||||
export class PasswordResetComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<h1>Register</h1>
|
||||
|
||||
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
|
||||
<label for="email">Email</label><br>
|
||||
<input type="email" formControlName="email" required /><br>
|
||||
<div *ngIf="registerForm.controls.email.invalid && registerForm.controls.email.touched" class="error">
|
||||
Please enter a valid email.
|
||||
</div>
|
||||
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" formControlName="password" required /><br>
|
||||
<div *ngIf="registerForm.controls.password.invalid && registerForm.controls.password.touched" class="error">
|
||||
Password must be at least 6 characters.
|
||||
</div>
|
||||
|
||||
<label for="password">Repeat password</label><br>
|
||||
<input type="password" formControlName="passwordAgain" required /><br>
|
||||
<div *ngIf="registerForm.controls.passwordAgain.invalid && registerForm.controls.passwordAgain.touched" class="error">
|
||||
Password must be at least 6 characters.
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<input type="submit" value="Create account" [disabled]="registerForm.invalid">
|
||||
<div *ngIf="errorMessage" class="error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p>
|
||||
Already have an account?
|
||||
<a routerLink="/login">Login</a>
|
||||
</p>
|
||||
<div>
|
||||
<a routerLink="/">Back to home</a>
|
||||
</div>
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { RegisterCredentials } from '../../models/credentials';
|
||||
|
||||
interface RegisterForm {
|
||||
email: FormControl<string>;
|
||||
password: FormControl<string>;
|
||||
passwordAgain: FormControl<string>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-register',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
CommonModule,
|
||||
RouterLink
|
||||
],
|
||||
templateUrl: './register.component.html',
|
||||
styleUrl: './register.component.css'
|
||||
})
|
||||
export class RegisterComponent {
|
||||
registerForm: FormGroup<RegisterForm>;
|
||||
errorMessage: string | null = null;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private apiService: ApiService,
|
||||
private router: Router
|
||||
) {
|
||||
this.registerForm = this.fb.group<RegisterForm>({
|
||||
email: this.fb.control('', { validators: [Validators.required, Validators.email], nonNullable: true }),
|
||||
password: this.fb.control('', { validators: [Validators.required, Validators.minLength(6)], nonNullable: true }),
|
||||
passwordAgain: this.fb.control('', { validators: [Validators.required, Validators.minLength(6)], nonNullable: true })
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
if (this.registerForm.invalid) return;
|
||||
|
||||
this.errorMessage = null;
|
||||
|
||||
const credentials: RegisterCredentials = this.registerForm.value as RegisterCredentials;
|
||||
|
||||
this.apiService.register(credentials).subscribe({
|
||||
next: (response) => {
|
||||
if (response) {
|
||||
localStorage.setItem('token', response.token);
|
||||
}
|
||||
this.router.navigate(['/home']);
|
||||
},
|
||||
error: (error) => {
|
||||
console.log(error);
|
||||
console.log(typeof(error));
|
||||
|
||||
let errorMsg = error.error.errorMessage;
|
||||
if (error.error.fields && error.error.fields.length > 0) {
|
||||
errorMsg += " " + error.error.fields[0].fieldName + " " + error.error.fields[0].fieldMessage;
|
||||
}
|
||||
this.errorMessage = errorMsg;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>tasks-management works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TasksManagementComponent } from './tasks-management.component';
|
||||
|
||||
describe('TasksManagementComponent', () => {
|
||||
let component: TasksManagementComponent;
|
||||
let fixture: ComponentFixture<TasksManagementComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TasksManagementComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TasksManagementComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tasks-management',
|
||||
imports: [],
|
||||
templateUrl: './tasks-management.component.html',
|
||||
styleUrl: './tasks-management.component.css'
|
||||
})
|
||||
export class TasksManagementComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<nav>
|
||||
<a routerLink="/home">Home</a> |
|
||||
<a routerLink="/tasks">Tasks</a> |
|
||||
<a routerLink="/notes">Notes</a> |
|
||||
<a routerLink="/account">My Account</a> |
|
||||
<a routerLink="/about">About</a> |
|
||||
<a href="javascript:void(0)">Logout</a>
|
||||
</nav>
|
||||
|
||||
<p>tasks works!</p>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TasksComponent } from './tasks.component';
|
||||
|
||||
describe('TasksComponent', () => {
|
||||
let component: TasksComponent;
|
||||
let fixture: ComponentFixture<TasksComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TasksComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TasksComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tasks',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
templateUrl: './tasks.component.html',
|
||||
styleUrl: './tasks.component.css'
|
||||
})
|
||||
export class TasksComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export const environment = {
|
||||
apiUrl: 'http://prod-localhost:8080/api',
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export const environment = {
|
||||
apiUrl: 'http://localhost:8585',
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { CanActivateFn } from '@angular/router';
|
||||
import { AuthService } from '../services/auth.service';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
export const authGuard: CanActivateFn = (route, state) => {
|
||||
const auth = inject(AuthService);
|
||||
const router = inject(Router);
|
||||
|
||||
if (auth.isAuthenticated()) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Redirect to login if not authenticated
|
||||
return router.createUrlTree(['/login']);
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { HttpInterceptorFn } from '@angular/common/http';
|
||||
|
||||
export const authInterceptor: HttpInterceptorFn = (req, next) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
const cloned = req.clone({
|
||||
setHeaders: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
return next(cloned);
|
||||
}
|
||||
|
||||
return next(req);
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export interface LoginCredentials {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface RegisterCredentials {
|
||||
email: string;
|
||||
password: string;
|
||||
passwordAgain: string;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ApiService } from './api.service';
|
||||
|
||||
describe('ApiService', () => {
|
||||
let service: ApiService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ApiService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { LoginCredentials, RegisterCredentials } from '../models/credentials';
|
||||
import { environment } from '../environments/environment';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ApiService {
|
||||
|
||||
private baseUrl = environment.apiUrl;
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
login(credentials: LoginCredentials): Observable<any> {
|
||||
return this.http.post(`${this.baseUrl}/auth/sign-in`, credentials);
|
||||
}
|
||||
|
||||
register(credentials: RegisterCredentials): Observable<any> {
|
||||
return this.http.put(`${this.baseUrl}/auth/sign-up`, credentials);
|
||||
}
|
||||
|
||||
refreshToken(refreshToken: string): Observable<any> {
|
||||
return this.http.post(`${this.baseUrl}/auth/refresh-token`, { refreshToken });
|
||||
}
|
||||
|
||||
getHomeTags(): Observable<string[]> {
|
||||
return this.http.get<string[]>(`${this.baseUrl}/rest/home/tasks/tags`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class AuthService {
|
||||
private getToken(): string | null {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
isAuthenticated(): boolean {
|
||||
const token = this.getToken();
|
||||
if (!token) return false;
|
||||
|
||||
try {
|
||||
const tokenPayload = JSON.parse(atob(token.split('.')[1]));
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return tokenPayload.exp && tokenPayload.exp > now;
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
localStorage.removeItem('token');
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Angular</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { routes } from './app/app.routes';
|
||||
import { authInterceptor } from './app/interceptors/auth.interceptor';
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
provideRouter(routes),
|
||||
provideHttpClient(
|
||||
withInterceptors([authInterceptor])
|
||||
)
|
||||
]
|
||||
}).catch((err) => console.error(err));
|
||||
@@ -0,0 +1 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
+1
-1
@@ -29,7 +29,7 @@ services:
|
||||
POSTGRES_USER: tasknoteuser
|
||||
POSTGRES_PASSWORD: default
|
||||
POSTGRES_PORT: 5432
|
||||
CORS_ALLOWED_ORIGINS: http://localhost:5000
|
||||
CORS_ALLOWED_ORIGINS: http://localhost:4200
|
||||
SERVER_SERVLET_CONTEXT_PATH: /
|
||||
SECURITY_KEY: ${SECURITY_KEY}
|
||||
MAILGUN_APIKEY: ${MAILGUN_APIKEY}
|
||||
|
||||
Reference in New Issue
Block a user