This commit is contained in:
Daniel 2024-10-31 23:55:34 -04:00
parent e198adb60b
commit 38300f247a
22 changed files with 150 additions and 122 deletions

View file

@ -0,0 +1,3 @@
# Ignore artifacts:
build
coverage

1
client/admin/.prettierrc Normal file
View file

@ -0,0 +1 @@
{}

View file

@ -16,9 +16,7 @@
"outputPath": "dist/admin", "outputPath": "dist/admin",
"index": "src/index.html", "index": "src/index.html",
"browser": "src/main.ts", "browser": "src/main.ts",
"polyfills": [ "polyfills": ["zone.js"],
"zone.js"
],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"assets": [ "assets": [
{ {
@ -26,9 +24,7 @@
"input": "public" "input": "public"
} }
], ],
"styles": [ "styles": ["src/styles.css"],
"src/styles.css"
],
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -73,10 +69,7 @@
"test": { "test": {
"builder": "@angular-devkit/build-angular:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"polyfills": [ "polyfills": ["zone.js", "zone.js/testing"],
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"assets": [ "assets": [
{ {
@ -84,9 +77,7 @@
"input": "public" "input": "public"
} }
], ],
"styles": [ "styles": ["src/styles.css"],
"src/styles.css"
],
"scripts": [] "scripts": []
} }
} }

View file

@ -32,6 +32,7 @@
"karma-coverage": "~2.2.0", "karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0", "karma-jasmine-html-reporter": "~2.1.0",
"prettier": "3.3.3",
"tailwindcss": "^3.4.14", "tailwindcss": "^3.4.14",
"typescript": "~5.5.2" "typescript": "~5.5.2"
} }
@ -11137,6 +11138,22 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/prettier": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/proc-log": { "node_modules/proc-log": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",

View file

@ -34,6 +34,7 @@
"karma-coverage": "~2.2.0", "karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0", "karma-jasmine-html-reporter": "~2.1.0",
"prettier": "3.3.3",
"tailwindcss": "^3.4.14", "tailwindcss": "^3.4.14",
"typescript": "~5.5.2" "typescript": "~5.5.2"
} }

View file

@ -1,29 +1,36 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import {HttpClient, HttpResponse } from '@angular/common/http'; import { HttpClient, HttpResponse } from '@angular/common/http';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators'; import { tap } from 'rxjs/operators';
export class Jwt { export class Jwt {
constructor( constructor(public jwt: string) {}
public jwt: string,
) {}
} }
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class APIService { export class APIService {
constructor(private http: HttpClient, private _router: Router) { constructor(
private http: HttpClient,
private _router: Router,
) {}
} login(username: string, password: string): Observable<HttpResponse<Jwt>> {
return this.http
login(username: string, password: string): Observable<HttpResponse<Jwt>> { .post<Jwt>(
return this.http.post<Jwt>('/login', {username: username, password: password}, {observe: 'response'}).pipe(tap((event) => { '/login',
if (event.status == 200) { { username: username, password: password },
sessionStorage.setItem('jwt', event.body?.jwt.toString() ?? ''); { observe: 'response' },
this._router.navigateByUrl('/home'); )
} .pipe(
})); tap((event) => {
if (event.status == 200) {
sessionStorage.setItem('jwt', event.body?.jwt.toString() ?? '');
this._router.navigateByUrl('/home');
}
}),
);
} }
} }

View file

@ -6,7 +6,7 @@ import { RouterOutlet } from '@angular/router';
standalone: true, standalone: true,
imports: [RouterOutlet], imports: [RouterOutlet],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.css' styleUrl: './app.component.css',
}) })
export class AppComponent { export class AppComponent {
title = 'admin'; title = 'admin';

View file

@ -1,25 +1,35 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
import {HttpRequest, HttpHandlerFn, HttpEvent, withInterceptors} from '@angular/common/http'; import {
HttpRequest,
HttpHandlerFn,
HttpEvent,
withInterceptors,
} from '@angular/common/http';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { isDevMode } from '@angular/core'; import { isDevMode } from '@angular/core';
import { routes } from './app.routes'; import { routes } from './app.routes';
import {provideHttpClient} from '@angular/common/http'; import { provideHttpClient } from '@angular/common/http';
export function apiBaseInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> { export function apiBaseInterceptor(
req: HttpRequest<unknown>,
next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
let baseUrl: string; let baseUrl: string;
if (isDevMode()) { if (isDevMode()) {
baseUrl = "http://xenon:3050"; baseUrl = 'http://xenon:3050';
} else { } else {
baseUrl = ""; baseUrl = '';
} }
const apiReq = req.clone({ url: `${baseUrl}${req.url}` }); const apiReq = req.clone({ url: `${baseUrl}${req.url}` });
return next(apiReq); return next(apiReq);
} }
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(withInterceptors([apiBaseInterceptor]))] providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(withInterceptors([apiBaseInterceptor])),
],
}; };

View file

@ -1,13 +1,11 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import {HomeComponent} from './home/home.component'; import { LoginComponent } from './login/login.component';
import {LoginComponent} from './login/login.component'; import { AuthGuard } from './auth.guard';
import {AuthGuard} from './auth.guard';
export const routes: Routes = [ export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, canActivate:[AuthGuard]}, { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent }, { path: 'login', component: LoginComponent },
]; ];

View file

@ -5,7 +5,7 @@ import { authGuard } from './auth.guard';
describe('authGuard', () => { describe('authGuard', () => {
const executeGuard: CanActivateFn = (...guardParameters) => const executeGuard: CanActivateFn = (...guardParameters) =>
TestBed.runInInjectionContext(() => authGuard(...guardParameters)); TestBed.runInInjectionContext(() => authGuard(...guardParameters));
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({}); TestBed.configureTestingModule({});

View file

@ -1,9 +1,9 @@
import { CanActivateFn } from '@angular/router'; import { CanActivateFn } from '@angular/router';
export const AuthGuard: CanActivateFn = (route, state) => { export const AuthGuard: CanActivateFn = (route, state) => {
if (sessionStorage.getItem("jwt") == null) { if (sessionStorage.getItem('jwt') == null) {
return false; return false;
} else { } else {
return true; return true;
} }
} };

View file

@ -8,9 +8,8 @@ describe('HomeComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [HomeComponent] imports: [HomeComponent],
}) }).compileComponents();
.compileComponents();
fixture = TestBed.createComponent(HomeComponent); fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance; component = fixture.componentInstance;

View file

@ -5,8 +5,6 @@ import { Component } from '@angular/core';
standalone: true, standalone: true,
imports: [], imports: [],
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrl: './home.component.css' styleUrl: './home.component.css',
}) })
export class HomeComponent { export class HomeComponent {}
}

View file

@ -1,22 +1,34 @@
<div class="flex justify-center"> <div class="flex justify-center">
<div class="card w-96 bg-base-100 shadow-xl mt-20 mb-20"> <div class="card w-96 bg-base-100 shadow-xl mt-20 mb-20">
<div class="card-body"> <div class="card-body">
<div class="items-center mt-2"> <div class="items-center mt-2">
<label class="input input-bordered flex items-center gap-2 mb-2"> <label class="input input-bordered flex items-center gap-2 mb-2">
<input type="text" [(ngModel)]="username" class="grow" placeholder="login" /> <input
</label> type="text"
<label class="input input-bordered flex items-center gap-2 mb-2"> [(ngModel)]="username"
<input type="password" [(ngModel)]="password" class="grow" placeholder="password" /> class="grow"
</label> placeholder="login"
</div> />
<div class="card-actions justify-end"> </label>
<button (click)="onSubmit()" class="btn btn-primary w-full">Login</button> <label class="input input-bordered flex items-center gap-2 mb-2">
</div> <input
</div> type="password"
@if (failed) { [(ngModel)]="password"
<div role="alert" class="alert alert-error"> class="grow"
<span>Login Failed!</span> placeholder="password"
</div> />
} </label>
</div>
<div class="card-actions justify-end">
<button (click)="onSubmit()" class="btn btn-primary w-full">
Login
</button>
</div>
</div>
@if (failed) {
<div role="alert" class="alert alert-error">
<span>Login Failed!</span>
</div>
}
</div> </div>
</div> </div>

View file

@ -8,9 +8,8 @@ describe('LoginComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [LoginComponent] imports: [LoginComponent],
}) }).compileComponents();
.compileComponents();
fixture = TestBed.createComponent(LoginComponent); fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance; component = fixture.componentInstance;

View file

@ -1,7 +1,7 @@
import { Component, inject } from '@angular/core'; import { Component, inject } from '@angular/core';
import {FormsModule} from '@angular/forms'; import { FormsModule } from '@angular/forms';
import {APIService} from '../api.service'; import { APIService } from '../api.service';
import {catchError, of } from 'rxjs'; import { catchError, of } from 'rxjs';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
@ -9,7 +9,7 @@ import { Router } from '@angular/router';
standalone: true, standalone: true,
imports: [FormsModule], imports: [FormsModule],
templateUrl: './login.component.html', templateUrl: './login.component.html',
styleUrl: './login.component.css' styleUrl: './login.component.css',
}) })
export class LoginComponent { export class LoginComponent {
apiService: APIService = inject(APIService); apiService: APIService = inject(APIService);
@ -20,15 +20,20 @@ export class LoginComponent {
onSubmit() { onSubmit() {
this.failed = false; this.failed = false;
this.apiService.login(this.username, this.password).pipe(catchError(() => { this.apiService
this.failed = true; .login(this.username, this.password)
return of(null); .pipe(
})).subscribe((event) => { catchError(() => {
if (event?.status == 200) { this.failed = true;
this.router.navigateByUrl('/home') return of(null);
} else { }),
this.failed = true; )
} .subscribe((event) => {
}); if (event?.status == 200) {
this.router.navigateByUrl('/home');
} else {
this.failed = true;
}
});
} }
} }

View file

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme="dark"> <html lang="en" data-theme="dark">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Admin</title> <title>Admin</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

View file

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

View file

@ -1,9 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: ["./src/**/*.{html,ts}"],
"./src/**/*.{html,ts}",
],
theme: { theme: {
extend: {}, extend: {},
}, },
@ -17,4 +15,4 @@ module.exports = {
logs: true, logs: true,
rtl: false, rtl: false,
}, },
} };

View file

@ -6,10 +6,6 @@
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": []
}, },
"files": [ "files": ["src/main.ts"],
"src/main.ts" "include": ["src/**/*.d.ts"]
],
"include": [
"src/**/*.d.ts"
]
} }

View file

@ -19,10 +19,7 @@
"importHelpers": true, "importHelpers": true,
"target": "ES2022", "target": "ES2022",
"module": "ES2022", "module": "ES2022",
"lib": [ "lib": ["ES2022", "dom"]
"ES2022",
"dom"
]
}, },
"angularCompilerOptions": { "angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false, "enableI18nLegacyMessageIdFormat": false,

View file

@ -4,12 +4,7 @@
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/spec", "outDir": "./out-tsc/spec",
"types": [ "types": ["jasmine"]
"jasmine"
]
}, },
"include": [ "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
} }