Add frontend.
This commit is contained in:
44
.gitignore
vendored
44
.gitignore
vendored
@@ -38,3 +38,47 @@ build/
|
|||||||
**/.angular
|
**/.angular
|
||||||
|
|
||||||
**/pictures-folder
|
**/pictures-folder
|
||||||
|
|
||||||
|
|
||||||
|
# See http://help.github.com/ignore-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
|
||||||
16
frontend/.editorconfig
Normal file
16
frontend/.editorconfig
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# 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
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
||||||
42
frontend/.gitignore
vendored
Normal file
42
frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# See http://help.github.com/ignore-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
|
||||||
27
frontend/README.md
Normal file
27
frontend/README.md
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# CodikiNg
|
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.5.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||||
|
|
||||||
|
## Further help
|
||||||
|
|
||||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||||
103
frontend/angular.json
Normal file
103
frontend/angular.json
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"codiki-ng": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"style": "scss"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:application",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist/codiki-ng",
|
||||||
|
"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": "codiki-ng:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildTarget": "codiki-ng:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"buildTarget": "codiki-ng: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": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12615
frontend/package-lock.json
generated
Normal file
12615
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
frontend/package.json
Normal file
40
frontend/package.json
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"name": "codiki-ng",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve --port 4201 --proxy-config proxy.conf.json",
|
||||||
|
"build": "ng build",
|
||||||
|
"watch": "ng build --watch --configuration development",
|
||||||
|
"test": "ng test"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "^17.0.0",
|
||||||
|
"@angular/cdk": "^17.3.1",
|
||||||
|
"@angular/common": "^17.0.0",
|
||||||
|
"@angular/compiler": "^17.0.0",
|
||||||
|
"@angular/core": "^17.0.0",
|
||||||
|
"@angular/forms": "^17.0.0",
|
||||||
|
"@angular/material": "^17.3.1",
|
||||||
|
"@angular/platform-browser": "^17.0.0",
|
||||||
|
"@angular/platform-browser-dynamic": "^17.0.0",
|
||||||
|
"@angular/router": "^17.0.0",
|
||||||
|
"rxjs": "~7.8.0",
|
||||||
|
"tslib": "^2.3.0",
|
||||||
|
"zone.js": "~0.14.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "^17.0.5",
|
||||||
|
"@angular/cli": "^17.0.5",
|
||||||
|
"@angular/compiler-cli": "^17.0.0",
|
||||||
|
"@types/jasmine": "~5.1.0",
|
||||||
|
"jasmine-core": "~5.1.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.2.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
frontend/proxy.conf.json
Normal file
7
frontend/proxy.conf.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"/api": {
|
||||||
|
"target": "http://localhost:8987",
|
||||||
|
"secure": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
2
frontend/src/app/app.component.html
Normal file
2
frontend/src/app/app.component.html
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
<app-header></app-header>
|
||||||
|
<router-outlet></router-outlet>
|
||||||
8
frontend/src/app/app.component.scss
Normal file
8
frontend/src/app/app.component.scss
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
app-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
frontend/src/app/app.component.spec.ts
Normal file
29
frontend/src/app/app.component.spec.ts
Normal 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 'codiki-ng' title`, () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app.title).toEqual('codiki-ng');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render title', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.nativeElement as HTMLElement;
|
||||||
|
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, codiki-ng');
|
||||||
|
});
|
||||||
|
});
|
||||||
19
frontend/src/app/app.component.ts
Normal file
19
frontend/src/app/app.component.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
import { HeaderComponent } from './components/header/header.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
RouterOutlet,
|
||||||
|
HeaderComponent
|
||||||
|
],
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrl: './app.component.scss'
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
title = 'codiki-ng';
|
||||||
|
}
|
||||||
14
frontend/src/app/app.config.ts
Normal file
14
frontend/src/app/app.config.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { ApplicationConfig } from '@angular/core';
|
||||||
|
import { provideRouter } from '@angular/router';
|
||||||
|
|
||||||
|
import { routes } from './app.routes';
|
||||||
|
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||||
|
import { provideHttpClient } from '@angular/common/http';
|
||||||
|
|
||||||
|
export const appConfig: ApplicationConfig = {
|
||||||
|
providers: [
|
||||||
|
provideRouter(routes),
|
||||||
|
provideAnimationsAsync(),
|
||||||
|
provideHttpClient()
|
||||||
|
]
|
||||||
|
};
|
||||||
6
frontend/src/app/app.routes.ts
Normal file
6
frontend/src/app/app.routes.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { Routes } from '@angular/router';
|
||||||
|
|
||||||
|
export const routes: Routes = [
|
||||||
|
{ path: 'login', loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent) },
|
||||||
|
{ path: '**', loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent) }
|
||||||
|
];
|
||||||
16
frontend/src/app/components/header/header.component.html
Normal file
16
frontend/src/app/components/header/header.component.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<div>
|
||||||
|
<button type="button">
|
||||||
|
<mat-icon>menu</mat-icon>
|
||||||
|
</button>
|
||||||
|
<img src="assets/images/codiki.png" alt="logo"/>
|
||||||
|
<span class="title">Codiki</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input name="search-query" placeholder="Search something..." />
|
||||||
|
<button type="button">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a [routerLink]="['/login']">Login</a>
|
||||||
|
</div>
|
||||||
82
frontend/src/app/components/header/header.component.scss
Normal file
82
frontend/src/app/components/header/header.component.scss
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
$headerHeight: 3.5em;
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #3f51b5;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid black;
|
||||||
|
height: $headerHeight;
|
||||||
|
|
||||||
|
div {
|
||||||
|
border: 1px solid black;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
height: $headerHeight;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1em;
|
||||||
|
padding: 0 1em;
|
||||||
|
|
||||||
|
img {
|
||||||
|
$imageSize: 2em;
|
||||||
|
width: $imageSize;
|
||||||
|
height: $imageSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
flex: 1;
|
||||||
|
$borderRadiusValue: 10em;
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
width: 60%;
|
||||||
|
max-width: 50em;
|
||||||
|
border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
|
||||||
|
background-color: white;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
margin: .5em 0;
|
||||||
|
padding: .2em .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
|
||||||
|
background-color: white;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
margin: .5em 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 5em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
frontend/src/app/components/header/header.component.ts
Normal file
13
frontend/src/app/components/header/header.component.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-header',
|
||||||
|
standalone: true,
|
||||||
|
imports: [MatButtonModule, MatIconModule, RouterModule],
|
||||||
|
templateUrl: './header.component.html',
|
||||||
|
styleUrl: './header.component.scss',
|
||||||
|
})
|
||||||
|
export class HeaderComponent {}
|
||||||
4
frontend/src/app/core/model/FormError.ts
Normal file
4
frontend/src/app/core/model/FormError.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export interface FormError {
|
||||||
|
fieldName: string;
|
||||||
|
errorMessage: string;
|
||||||
|
}
|
||||||
7
frontend/src/app/core/model/User.ts
Normal file
7
frontend/src/app/core/model/User.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
pseudo: string;
|
||||||
|
photoId?: string;
|
||||||
|
roles: string[];
|
||||||
|
}
|
||||||
10
frontend/src/app/core/rest-services/model/login.model.ts
Normal file
10
frontend/src/app/core/rest-services/model/login.model.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export interface LoginRequest {
|
||||||
|
email?: string;
|
||||||
|
password?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoginResponse {
|
||||||
|
tokenType: string,
|
||||||
|
accessToken: string,
|
||||||
|
refreshToken: string
|
||||||
|
}
|
||||||
15
frontend/src/app/core/rest-services/user.rest-service.ts
Normal file
15
frontend/src/app/core/rest-services/user.rest-service.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { HttpClient } from "@angular/common/http";
|
||||||
|
import { Injectable, inject } from "@angular/core";
|
||||||
|
import { LoginRequest, LoginResponse } from "./model/login.model";
|
||||||
|
import { lastValueFrom } from "rxjs";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class UserRestService {
|
||||||
|
private httpClient = inject(HttpClient);
|
||||||
|
|
||||||
|
login(request: LoginRequest): Promise<LoginResponse> {
|
||||||
|
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
|
||||||
|
}
|
||||||
|
}
|
||||||
73
frontend/src/app/core/service/authentication.service.ts
Normal file
73
frontend/src/app/core/service/authentication.service.ts
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { Injectable } from "@angular/core";
|
||||||
|
import { User } from "../model/User";
|
||||||
|
|
||||||
|
const JWT_PARAM = 'jwt';
|
||||||
|
|
||||||
|
interface UserDetails {
|
||||||
|
sub: string;
|
||||||
|
exp: number;
|
||||||
|
email: string;
|
||||||
|
pseudo: string;
|
||||||
|
roles: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class AuthenticationService {
|
||||||
|
authenticate(token: string): void {
|
||||||
|
localStorage.setItem(JWT_PARAM, token);
|
||||||
|
}
|
||||||
|
|
||||||
|
unauthenticate(): void {
|
||||||
|
localStorage.removeItem(JWT_PARAM);
|
||||||
|
}
|
||||||
|
|
||||||
|
isAuthenticated(): boolean {
|
||||||
|
let result = false;
|
||||||
|
|
||||||
|
const userDetails = this.extractUserDetails();
|
||||||
|
|
||||||
|
if (userDetails) {
|
||||||
|
const authenticationExpiration = new Date(userDetails.exp * 1000);
|
||||||
|
result = authenticationExpiration > new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
private extractUserFromLocalStorage(): User | undefined {
|
||||||
|
let result: User | undefined = undefined;
|
||||||
|
|
||||||
|
const userDetails = this.extractUserDetails();
|
||||||
|
if (userDetails) {
|
||||||
|
const user = this.convertToUser(userDetails);
|
||||||
|
result = user;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
private extractUserDetails(): UserDetails | undefined {
|
||||||
|
let result: UserDetails | undefined = undefined;
|
||||||
|
|
||||||
|
const token = localStorage.getItem(JWT_PARAM);
|
||||||
|
|
||||||
|
const tokenParts = token?.split('.');
|
||||||
|
if (tokenParts?.length === 3 && tokenParts[1].length) {
|
||||||
|
const userDetails: UserDetails = JSON.parse(tokenParts[1]);
|
||||||
|
result = userDetails;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
private convertToUser(userDetails: UserDetails): User {
|
||||||
|
return {
|
||||||
|
id: userDetails.sub,
|
||||||
|
email: userDetails.email,
|
||||||
|
pseudo: userDetails.pseudo,
|
||||||
|
roles: userDetails.roles.split(',')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
5
frontend/src/app/core/utils/ObjectUtils.ts
Normal file
5
frontend/src/app/core/utils/ObjectUtils.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export function copy<T>(object: T): T {
|
||||||
|
return JSON.parse(
|
||||||
|
JSON.stringify(object)
|
||||||
|
);
|
||||||
|
}
|
||||||
1
frontend/src/app/pages/home/home.component.html
Normal file
1
frontend/src/app/pages/home/home.component.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<p>home works!</p>
|
||||||
0
frontend/src/app/pages/home/home.component.scss
Normal file
0
frontend/src/app/pages/home/home.component.scss
Normal file
23
frontend/src/app/pages/home/home.component.spec.ts
Normal file
23
frontend/src/app/pages/home/home.component.spec.ts
Normal file
@@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
12
frontend/src/app/pages/home/home.component.ts
Normal file
12
frontend/src/app/pages/home/home.component.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-home',
|
||||||
|
standalone: true,
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './home.component.html',
|
||||||
|
styleUrl: './home.component.scss'
|
||||||
|
})
|
||||||
|
export class HomeComponent {
|
||||||
|
|
||||||
|
}
|
||||||
16
frontend/src/app/pages/login/login.component.html
Normal file
16
frontend/src/app/pages/login/login.component.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
|
||||||
|
<h1>Login</h1>
|
||||||
|
<div>
|
||||||
|
<label for="email">
|
||||||
|
Email address
|
||||||
|
</label>
|
||||||
|
<input type="email" formControlName="email" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="password">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input type="password" formControlName="password" required />
|
||||||
|
</div>
|
||||||
|
<button type="submit">Send</button>
|
||||||
|
</form>
|
||||||
0
frontend/src/app/pages/login/login.component.scss
Normal file
0
frontend/src/app/pages/login/login.component.scss
Normal file
23
frontend/src/app/pages/login/login.component.spec.ts
Normal file
23
frontend/src/app/pages/login/login.component.spec.ts
Normal 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();
|
||||||
|
});
|
||||||
|
});
|
||||||
63
frontend/src/app/pages/login/login.component.ts
Normal file
63
frontend/src/app/pages/login/login.component.ts
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||||
|
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||||
|
import { Subscription, debounceTime, map } from 'rxjs';
|
||||||
|
import { LoginService } from './login.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-login',
|
||||||
|
standalone: true,
|
||||||
|
templateUrl: './login.component.html',
|
||||||
|
styleUrl: './login.component.scss',
|
||||||
|
imports: [ ReactiveFormsModule ],
|
||||||
|
providers: [LoginService, MatSnackBarModule]
|
||||||
|
})
|
||||||
|
export class LoginComponent implements OnInit, OnDestroy {
|
||||||
|
private loginService = inject(LoginService);
|
||||||
|
private formBuilder = inject(FormBuilder);
|
||||||
|
private subscriptions: Subscription[] = [];
|
||||||
|
emailValue: string | undefined;
|
||||||
|
loginForm: FormGroup = this.formBuilder.group({
|
||||||
|
email: new FormControl<string | undefined>('', [Validators.required, Validators.email]),
|
||||||
|
password: new FormControl<string | undefined>('', [Validators.required])
|
||||||
|
});
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
const emailSubscription = this.loginForm.controls['email'].valueChanges
|
||||||
|
.pipe(
|
||||||
|
debounceTime(300),
|
||||||
|
map(value => value?.length ? value as string : '')
|
||||||
|
)
|
||||||
|
.subscribe(email => {
|
||||||
|
this.loginService.editEmail(email);
|
||||||
|
});
|
||||||
|
this.subscriptions.push(emailSubscription);
|
||||||
|
|
||||||
|
const passwordSubscription = this.loginForm.controls['password'].valueChanges
|
||||||
|
.pipe(
|
||||||
|
debounceTime(300),
|
||||||
|
map(value => value?.length ? value as string : '')
|
||||||
|
)
|
||||||
|
.subscribe(password => {
|
||||||
|
this.loginService.editPassword(password);
|
||||||
|
});
|
||||||
|
this.subscriptions.push(passwordSubscription)
|
||||||
|
|
||||||
|
const stateSubscription = this.loginService.state$
|
||||||
|
.subscribe(state => {
|
||||||
|
this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false });
|
||||||
|
this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false });
|
||||||
|
});
|
||||||
|
this.subscriptions.push(stateSubscription);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
||||||
|
}
|
||||||
|
|
||||||
|
performLogin(): void {
|
||||||
|
if (this.loginForm.valid) {
|
||||||
|
this.loginService.performLogin();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
76
frontend/src/app/pages/login/login.service.ts
Normal file
76
frontend/src/app/pages/login/login.service.ts
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import { Injectable, inject } from "@angular/core";
|
||||||
|
import { BehaviorSubject, Observable } from "rxjs";
|
||||||
|
import { copy } from "../../core/utils/ObjectUtils";
|
||||||
|
import { FormError } from "../../core/model/FormError";
|
||||||
|
import { UserRestService } from "../../core/rest-services/user.rest-service";
|
||||||
|
import { LoginRequest } from "../../core/rest-services/model/login.model";
|
||||||
|
import { AuthenticationService } from "../../core/service/authentication.service";
|
||||||
|
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||||
|
import { Router } from "@angular/router";
|
||||||
|
|
||||||
|
export interface LoginState {
|
||||||
|
request: LoginRequest;
|
||||||
|
errors: FormError[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_STATE: LoginState = {
|
||||||
|
request: {
|
||||||
|
email: undefined,
|
||||||
|
password: undefined
|
||||||
|
},
|
||||||
|
errors: []
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class LoginService {
|
||||||
|
private stateSubject = new BehaviorSubject<LoginState>(copy(DEFAULT_STATE));
|
||||||
|
private userRestService = inject(UserRestService);
|
||||||
|
private authenticationService = inject(AuthenticationService);
|
||||||
|
private snackBar = inject(MatSnackBar);
|
||||||
|
private router = inject(Router);
|
||||||
|
|
||||||
|
get state$(): Observable<LoginState> {
|
||||||
|
return this.stateSubject.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
private get state(): LoginState {
|
||||||
|
return this.stateSubject.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
private save(newState: LoginState): void {
|
||||||
|
this.stateSubject.next(newState);
|
||||||
|
}
|
||||||
|
|
||||||
|
editEmail(newEmail: string): void {
|
||||||
|
const state = this.state;
|
||||||
|
|
||||||
|
state.request.email = newEmail;
|
||||||
|
|
||||||
|
this.save(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
editPassword(newPassword: string): void {
|
||||||
|
const state = this.state;
|
||||||
|
|
||||||
|
state.request.password = newPassword;
|
||||||
|
|
||||||
|
this.save(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
performLogin(): void {
|
||||||
|
const state = this.state;
|
||||||
|
|
||||||
|
// Check state is valid
|
||||||
|
|
||||||
|
this.userRestService.login(state.request)
|
||||||
|
.then(response => {
|
||||||
|
this.authenticationService.authenticate(response.accessToken);
|
||||||
|
this.snackBar.open('Authentication succeeded!', 'Close', { duration: 5000 });
|
||||||
|
this.router.navigate(['/home']);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(error)
|
||||||
|
this.snackBar.open('Authentication failed.', 'Close', { duration: 5000 });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
0
frontend/src/assets/.gitkeep
Normal file
0
frontend/src/assets/.gitkeep
Normal file
BIN
frontend/src/assets/images/codiki.png
Normal file
BIN
frontend/src/assets/images/codiki.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
frontend/src/assets/images/favicon.ico
Normal file
BIN
frontend/src/assets/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
frontend/src/favicon.ico
Normal file
BIN
frontend/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
15
frontend/src/index.html
Normal file
15
frontend/src/index.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CodikiNg</title>
|
||||||
|
<base href="/">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="assets/images/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 class="mat-typography">
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
frontend/src/main.ts
Normal file
6
frontend/src/main.ts
Normal 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));
|
||||||
4
frontend/src/styles.scss
Normal file
4
frontend/src/styles.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
|
html, body { height: 100%; }
|
||||||
|
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||||
14
frontend/tsconfig.app.json
Normal file
14
frontend/tsconfig.app.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/app",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"src/main.ts"
|
||||||
|
],
|
||||||
|
"include": [
|
||||||
|
"src/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
32
frontend/tsconfig.json
Normal file
32
frontend/tsconfig.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noPropertyAccessFromIndexSignature": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": false,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"importHelpers": true,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "ES2022",
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"dom"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"enableI18nLegacyMessageIdFormat": false,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"strictInputAccessModifiers": true,
|
||||||
|
"strictTemplates": true
|
||||||
|
}
|
||||||
|
}
|
||||||
14
frontend/tsconfig.spec.json
Normal file
14
frontend/tsconfig.spec.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.spec.ts",
|
||||||
|
"src/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user