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

View file

@ -32,6 +32,7 @@
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"prettier": "3.3.3",
"tailwindcss": "^3.4.14",
"typescript": "~5.5.2"
}
@ -11137,6 +11138,22 @@
"dev": true,
"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": {
"version": "4.2.0",
"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-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"prettier": "3.3.3",
"tailwindcss": "^3.4.14",
"typescript": "~5.5.2"
}

View file

@ -5,25 +5,32 @@ import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
export class Jwt {
constructor(
public jwt: string,
) {}
constructor(public jwt: string) {}
}
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
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.post<Jwt>('/login', {username: username, password: password}, {observe: 'response'}).pipe(tap((event) => {
return this.http
.post<Jwt>(
'/login',
{ username: username, password: password },
{ observe: 'response' },
)
.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,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'admin';

View file

@ -1,25 +1,35 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
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 { isDevMode } from '@angular/core';
import { routes } from './app.routes';
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;
if (isDevMode()) {
baseUrl = "http://xenon:3050";
baseUrl = 'http://xenon:3050';
} else {
baseUrl = "";
baseUrl = '';
}
const apiReq = req.clone({ url: `${baseUrl}${req.url}` });
return next(apiReq);
}
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,11 +1,9 @@
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },

View file

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

View file

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

View file

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

View file

@ -3,14 +3,26 @@
<div class="card-body">
<div class="items-center mt-2">
<label class="input input-bordered flex items-center gap-2 mb-2">
<input type="text" [(ngModel)]="username" class="grow" placeholder="login" />
<input
type="text"
[(ngModel)]="username"
class="grow"
placeholder="login"
/>
</label>
<label class="input input-bordered flex items-center gap-2 mb-2">
<input type="password" [(ngModel)]="password" class="grow" placeholder="password" />
<input
type="password"
[(ngModel)]="password"
class="grow"
placeholder="password"
/>
</label>
</div>
<div class="card-actions justify-end">
<button (click)="onSubmit()" class="btn btn-primary w-full">Login</button>
<button (click)="onSubmit()" class="btn btn-primary w-full">
Login
</button>
</div>
</div>
@if (failed) {

View file

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

View file

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

View file

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

View file

@ -2,5 +2,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));
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);

View file

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

View file

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

View file

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

View file

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