serve frontend from go

This commit is contained in:
u80864958
2025-05-05 10:00:50 +02:00
parent a06444c4df
commit 73a62b63ae
88 changed files with 76 additions and 36 deletions

View File

@ -0,0 +1,22 @@
<header
class="flex flex-row justify-between items-center px-5 bg-gray-300 h-16 w-full drop-shadow-xl/5"
>
<a routerLink="/">
<h1 class="text-2xl">My Blog</h1>
</a>
<nav class="flex gap-5">
<a routerLink="/dashboard" *ngIf="loggedIn()">posts</a>
<button *ngIf="!loggedIn()" (click)="toggleLogin()">login</button>
<button *ngIf="loggedIn()" (click)="logOut()">logout</button>
</nav>
</header>
<app-modal [open]="loginOpen" (openChange)="loginOpen = $event">
<app-login />
</app-modal>
<main
class="w-screen h-full max-h-full px-5 pb-5 sm:px-20 xl:px-44 3xl:px-96 pt-5 overflow-y-scroll"
>
<router-outlet />
</main>

View File

@ -0,0 +1,29 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have the 'frontend' title`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('frontend');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
});
});

View File

@ -0,0 +1,32 @@
import { Component, computed, effect, inject } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { ModalComponent } from './components/modal/modal.component';
import { LoginComponent } from './components/login/login.component';
import { AuthService } from './shared/services/auth.service';
import { NgIf } from '@angular/common';
@Component({
selector: 'app-root',
imports: [RouterOutlet, RouterLink, ModalComponent, LoginComponent, NgIf],
templateUrl: './app.component.html',
})
export class AppComponent {
private auth = inject(AuthService);
loginOpen: boolean = false;
loggedIn = computed(() => this.auth.jwt() !== null);
constructor() {
effect(() => {
if (this.auth.jwt()) {
this.loginOpen = false;
}
});
}
toggleLogin() {
this.loginOpen = !this.loginOpen;
}
logOut() {
this.auth.logout();
}
}

20
web/src/app/app.config.ts Normal file
View File

@ -0,0 +1,20 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app.routes';
import {
HTTP_INTERCEPTORS,
provideHttpClient,
withInterceptors,
withInterceptorsFromDi,
} from '@angular/common/http';
import { AuthInterceptor } from './shared/interceptors/auth.interceptor';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes, withComponentInputBinding()),
provideHttpClient(withInterceptorsFromDi()),
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
};

29
web/src/app/app.routes.ts Normal file
View File

@ -0,0 +1,29 @@
import { Routes } from '@angular/router';
import { HomeComponent } from './routes/home/home.component';
import { PostComponent } from './routes/post/post.component';
import { DashboardComponent } from './routes/dashboard/dashboard.component';
import { LoggedInGuard } from './shared/guards/logged-in.guard';
import { PostEditorComponent } from './components/post-editor/post-editor.component';
import { CreatePostComponent } from './routes/post/create-post/create-post.component';
import { UpdatePostComponent } from './routes/post/update-post/update-post.component';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'post',
children: [
{ path: 'new', component: CreatePostComponent },
{ path: ':id/edit', component: UpdatePostComponent },
{
path: ':id',
component: PostComponent,
},
],
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [LoggedInGuard],
},
{ path: 'tst', component: PostEditorComponent },
];

View File

@ -0,0 +1,22 @@
<form [formGroup]="form" (ngSubmit)="submit()" class="grid grid-cols-3 gap-5">
<label>Name:</label>
<input
type="text"
formControlName="name"
class="p-1 border-2 rounded-md col-span-2"
/>
<label>Password:</label>
<input
type="password"
formControlName="password"
required
class="p-1 border-2 rounded-md col-span-2"
/>
<button
type="submit"
required
class="bg-blue-300 p-2 rounded-md drop-shadow-md hover:drop-shadow-xl active:bg-blue-600"
>
Login
</button>
</form>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [LoginComponent]
})
.compileComponents();
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,39 @@
import { Component, inject } from '@angular/core';
import {
FormGroup,
Validators,
ReactiveFormsModule,
FormControl,
} from '@angular/forms';
import { AuthService } from '../../shared/services/auth.service';
import { User } from '../../shared/interfaces/auth';
@Component({
selector: 'app-login',
imports: [ReactiveFormsModule],
templateUrl: './login.component.html',
})
export class LoginComponent {
private auth = inject(AuthService);
form = new FormGroup({
name: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required]),
});
get name() {
return this.form.controls.name;
}
get password() {
return this.form.controls.password;
}
submit() {
if (this.form.invalid) {
return;
}
const user: User = {
name: this.form.controls.name.value!,
password: this.form.controls.password.value!,
};
this.auth.login(user);
}
}

View File

@ -0,0 +1 @@
<div [innerHTML]="innerHTML"></div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MarkdownComponent } from './markdown.component';
describe('MarkdownComponent', () => {
let component: MarkdownComponent;
let fixture: ComponentFixture<MarkdownComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MarkdownComponent]
})
.compileComponents();
fixture = TestBed.createComponent(MarkdownComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,22 @@
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import DOMPurify from 'dompurify';
import { marked } from 'marked';
@Component({
selector: 'app-markdown',
imports: [],
standalone: true,
templateUrl: './markdown.component.html',
})
export class MarkdownComponent implements OnChanges {
@Input() markdown: string = '';
innerHTML: string = '';
async parseMD() {
this.innerHTML = DOMPurify.sanitize(await marked.parse(this.markdown));
}
ngOnChanges(): void {
this.parseMD();
}
}

View File

@ -0,0 +1,9 @@
<div
*ngIf="open === true"
class="fixed flex top-0 justify-center items-center w-screen h-screen z-50 backdrop-blur-md bg-black/25"
>
<div class="p-10 bg-white drop-shadow-md rounded-md">
<button (click)="toggleOpen()" class="absolute top-0 right-1 p-3">X</button>
<ng-content></ng-content>
</div>
</div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ModalComponent } from './modal.component';
describe('ModalComponent', () => {
let component: ModalComponent;
let fixture: ComponentFixture<ModalComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ModalComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,18 @@
import { NgIf } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-modal',
imports: [NgIf],
standalone: true,
templateUrl: './modal.component.html',
})
export class ModalComponent {
@Input() open: boolean = false;
@Output() openChange = new EventEmitter<boolean>();
toggleOpen() {
this.open = !this.open;
this.openChange.emit(this.open);
}
}

View File

@ -0,0 +1,30 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div class="grid grid-cols-3">
<label>Title:</label>
<input
type="text"
[ngModel]="data().title"
(ngModelChange)="title = $event"
class="p-1 border-2 rounded-md col-span-2"
/>
</div>
<p class="text-3xl">{{ data().title }}</p>
<div class="grid grid-cols-3">
<label>TL;DR;</label>
<input
type="text"
[ngModel]="data().tldr"
(ngModelChange)="tldr = $event"
class="p-1 border-2 rounded-md col-span-2"
/>
</div>
<p class="mb-5 italic text-sm">TL;DR; {{ data().tldr }}</p>
<textarea
[ngModel]="data().content"
(ngModelChange)="content = $event"
class="border-2 rounded-md p-1"
rows="20"
></textarea>
<app-markdown [markdown]="data().content" />
</div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PostEditorComponent } from './post-editor.component';
describe('PostEditorComponent', () => {
let component: PostEditorComponent;
let fixture: ComponentFixture<PostEditorComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PostEditorComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PostEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,39 @@
import {
Component,
effect,
EventEmitter,
Input,
Output,
signal,
} from '@angular/core';
import { MarkdownComponent } from '../markdown/markdown.component';
import { FormsModule } from '@angular/forms';
import { Post } from '../../shared/interfaces/post';
@Component({
selector: 'app-post-editor',
imports: [MarkdownComponent, FormsModule],
standalone: true,
templateUrl: './post-editor.component.html',
})
export class PostEditorComponent {
@Input('post') data = signal<Post>({
id: 0,
title: '',
tldr: '',
content: '',
});
@Output('postChange') dataChange = new EventEmitter<Post>();
set title(val: string) {
this.data.update((d) => ({ ...d, title: val }));
}
set tldr(val: string) {
this.data.update((d) => ({ ...d, tldr: val }));
}
set content(val: string) {
this.data.update((d) => ({ ...d, content: val }));
}
}

View File

@ -0,0 +1,34 @@
<!-- <app-post-editor /> -->
<div class="flex items-center justify-between">
<h2 class="text-2xl">Posts Overview</h2>
<a
routerLink="/post/new"
class="bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors"
>
New
</a>
</div>
<section class="grid grid-cols-1 gap-5 m-5">
<article
*ngFor="let post of posts()"
class="p-5 grid grid-cols-5 grid-rows-3 items-start rounded-s bg-white drop-shadow-md hover:drop-shadow-lg"
>
<h3 class="text-xl col-span-4">{{ post.title }}</h3>
<p class="col-start-1 col-span-4 row-start-2 row-span-2">
<strong>TL;DR; </strong>{{ post.tldr }}
</p>
<a
[routerLink]="`/post/${post.id}/edit`"
class="col-start-5 row-start-1 bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors text-center"
>
Edit
</a>
<button
(click)="delete(post.id)"
class="col-start-5 row-start-3 bg-orange-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-orange-600 transition-colors"
>
Delete
</button>
</article>
</section>

View File

@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('AdminComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [DashboardComponent],
}).compileComponents();
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,20 @@
import { Component, effect, inject } from '@angular/core';
import { PostEditorComponent } from '../../components/post-editor/post-editor.component';
import { NgFor } from '@angular/common';
import { PostsService } from '../../shared/services/posts.service';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-admin',
imports: [NgFor, RouterLink],
standalone: true,
templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
private postsService = inject(PostsService);
posts = this.postsService.getPosts();
delete(id: number) {
this.postsService.deletePost(id);
}
}

View File

@ -0,0 +1,11 @@
<p>Welcome to by little blog:</p>
<section class="grid gap-5 sm:grid-cols-2 2xl:grid-cols-3">
<button
*ngFor="let post of posts()"
class="p-5 flex flex-col items-start rounded-s bg-white drop-shadow-md hover:drop-shadow-xl"
[routerLink]="`/post/${post.id}`"
>
<h2 class="text-xl">{{ post.title }}</h2>
<p><strong>TL;DR; </strong>{{ post.tldr }}</p>
</button>
</section>

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

View File

@ -0,0 +1,14 @@
import { Component, inject, OnInit, Signal } from '@angular/core';
import { PostsService } from '../../shared/services/posts.service';
import { NgForOf } from '@angular/common';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-home',
imports: [NgForOf, RouterLink],
standalone: true,
templateUrl: './home.component.html',
})
export class HomeComponent {
posts = inject(PostsService).getPosts();
}

View File

@ -0,0 +1,10 @@
<div class="flex items-center justify-between mb-5">
<h1 class="text-3xl">Create a new Post</h1>
<button
class="bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors"
(click)="publish()"
>
Publish
</button>
</div>
<app-post-editor [post]="post" (postChange)="post.set($event)" />

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreatePostComponent } from './create-post.component';
describe('CreatePostComponent', () => {
let component: CreatePostComponent;
let fixture: ComponentFixture<CreatePostComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CreatePostComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CreatePostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,26 @@
import { Component, effect, inject, signal } from '@angular/core';
import { PostEditorComponent } from '../../../components/post-editor/post-editor.component';
import { Post } from '../../../shared/interfaces/post';
import { PostsService } from '../../../shared/services/posts.service';
import { Location } from '@angular/common';
@Component({
selector: 'app-create-post',
imports: [PostEditorComponent],
templateUrl: './create-post.component.html',
})
export class CreatePostComponent {
private postsService = inject(PostsService);
private location = inject(Location);
post = signal<Post>({
id: 0,
title: '',
tldr: '',
content: '',
});
publish() {
this.postsService.createPost(this.post());
this.location.back();
}
}

View File

@ -0,0 +1,7 @@
<h2 class="text-3xl">{{ post()?.title }}</h2>
<p class="mb-5 italic text-sm">TL;DR; {{ post()?.tldr }}</p>
<app-markdown
class="todo"
[markdown]="post()?.content || 'this post is empty'"
/>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PostComponent } from './post.component';
describe('PostComponent', () => {
let component: PostComponent;
let fixture: ComponentFixture<PostComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PostComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,19 @@
import { Component, inject, Input } from '@angular/core';
import { PostsService } from '../../shared/services/posts.service';
import { JsonPipe, NgIf } from '@angular/common';
import { MarkdownComponent } from '../../components/markdown/markdown.component';
@Component({
selector: 'app-post',
imports: [MarkdownComponent],
standalone: true,
templateUrl: './post.component.html',
})
export class PostComponent {
@Input() id!: string;
private postsService = inject(PostsService);
get post() {
return this.postsService.getPost(parseInt(this.id));
}
}

View File

@ -0,0 +1,10 @@
<div class="flex items-center justify-between mb-5">
<h1 class="text-3xl">Update a Post</h1>
<button
class="bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors"
(click)="save()"
>
save
</button>
</div>
<app-post-editor [post]="post" (postChange)="post.set($event)" />

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UpdatePostComponent } from './update-post.component';
describe('UpdatePostComponent', () => {
let component: UpdatePostComponent;
let fixture: ComponentFixture<UpdatePostComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UpdatePostComponent]
})
.compileComponents();
fixture = TestBed.createComponent(UpdatePostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,45 @@
import {
Component,
effect,
Input,
OnInit,
signal,
WritableSignal,
} from '@angular/core';
import { PostsService } from '../../../shared/services/posts.service';
import { inject } from '@angular/core';
import { Post } from '../../../shared/interfaces/post';
import { Location } from '@angular/common';
import { PostEditorComponent } from '../../../components/post-editor/post-editor.component';
@Component({
selector: 'app-update-post',
imports: [PostEditorComponent],
templateUrl: './update-post.component.html',
})
export class UpdatePostComponent implements OnInit {
@Input() id!: string;
private postsService = inject(PostsService);
private location = inject(Location);
post: WritableSignal<Post> = signal({
id: 0,
title: '',
tldr: '',
content: '',
});
ngOnInit(): void {
const p = this.postsService.getPost(parseInt(this.id))();
if (p == undefined) {
this.location.back();
return;
}
this.post.set(p);
}
save() {
this.postsService.updatePost(this.post());
this.location.back();
}
}

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { LoggedInGuard } from './logged-in.guard';
describe('LoggedInGuard', () => {
let guard: LoggedInGuard;
beforeEach(() => {
TestBed.configureTestingModule({});
guard = TestBed.inject(LoggedInGuard);
});
it('should be created', () => {
expect(guard).toBeTruthy();
});
});

View File

@ -0,0 +1,13 @@
import { inject, Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from '../services/auth.service';
@Injectable({
providedIn: 'root',
})
export class LoggedInGuard implements CanActivate {
private auth = inject(AuthService);
canActivate(): boolean {
return this.auth.jwt() !== null;
}
}

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { AuthInterceptor } from './auth.interceptor';
describe('AuthInterceptor', () => {
beforeEach(() => TestBed.configureTestingModule({
providers: [
AuthInterceptor
]
}));
it('should be created', () => {
const interceptor: AuthInterceptor = TestBed.inject(AuthInterceptor);
expect(interceptor).toBeTruthy();
});
});

View File

@ -0,0 +1,29 @@
import { inject, Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
private jwt = inject(AuthService).jwt;
intercept(
req: HttpRequest<unknown>,
next: HttpHandler,
): Observable<HttpEvent<unknown>> {
const token = this.jwt();
if (!token) {
return next.handle(req);
}
const reqWithAuth = req.clone({
headers: req.headers.set('Authorization', `Bearer ${token}`),
});
return next.handle(reqWithAuth);
}
}

View File

@ -0,0 +1,13 @@
export interface User {
name: string;
password: string;
}
export interface LoginResponse {
token: string;
}
export interface Claims {
exp: number;
uid: number;
rl: string;
sub: string;
}

View File

@ -0,0 +1,10 @@
export interface Post {
id: number;
title: string;
tldr: string;
content: string;
}
export interface Comment {
content: string;
}

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
describe('AuthService', () => {
let service: AuthService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(AuthService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

View File

@ -0,0 +1,113 @@
import { HttpClient } from '@angular/common/http';
import {
effect,
inject,
Injectable,
signal,
WritableSignal,
} from '@angular/core';
import { LoginResponse, User, Claims } from '../interfaces/auth';
import { environment } from '../../../environments/environment';
const JWT_KEY = 'token';
@Injectable({
providedIn: 'root',
})
export class AuthService {
private http = inject(HttpClient);
jwt: WritableSignal<string | null> = signal(null);
claims: WritableSignal<Claims | null> = signal(null);
timeout: any | null = null;
constructor() {
// read from localStorage
const token = window.localStorage.getItem(JWT_KEY);
if (token) {
this.jwt.set(token);
}
// update claims
effect(() => {
const token = this.jwt();
if (!token) {
this.claims.set(null);
return;
}
this.claims.set(parseJwt(token));
});
// set localStorage when this.jwt changes
effect(() => {
const token = this.jwt();
if (token) {
window.localStorage.setItem(JWT_KEY, token);
return;
}
window.localStorage.removeItem(JWT_KEY);
});
// if token expired -> set this.jwt to null
effect(() => {
const token = this.jwt();
if (!token) {
return;
}
const remainingMilli =
extractExpiration(token).valueOf() - new Date().valueOf();
// if expired set to null
if (remainingMilli < 0) {
this.clearTimeout();
this.jwt.set(null);
return;
}
this.clearTimeout();
this.timeout = setTimeout(() => {
this.jwt.set(null);
}, remainingMilli);
});
}
login(user: User) {
this.http
.post<LoginResponse>(`${environment.apiRoot}/login`, user)
.subscribe((res) => this.jwt.set(res.token));
}
logout() {
this.http.delete(`${environment.apiRoot}/logout`).subscribe(() => {
this.jwt.set(null);
});
}
private clearTimeout() {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
}
}
// https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library
function parseJwt(token: string): Claims {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(
window
.atob(base64)
.split('')
.map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
})
.join(''),
);
return JSON.parse(jsonPayload);
}
function extractExpiration(token: string): Date {
const jwt = parseJwt(token);
return new Date(jwt.exp * 1000);
}

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { PostsService } from './posts.service';
describe('PostsService', () => {
let service: PostsService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(PostsService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

View File

@ -0,0 +1,62 @@
import { HttpClient } from '@angular/common/http';
import {
computed,
inject,
Injectable,
Signal,
signal,
WritableSignal,
} from '@angular/core';
import { Post } from '../interfaces/post';
import { environment } from '../../../environments/environment';
@Injectable({
providedIn: 'root',
})
export class PostsService {
private http = inject(HttpClient);
private posts: WritableSignal<Map<number, Post>> = signal(new Map());
constructor() {
this.updatePosts(); // Pull posts immediately when the service is instantiated
}
updatePosts() {
this.http
.get<Post[]>(`${environment.apiRoot}/posts`)
.subscribe((res) => this.posts.set(new Map(res.map((p) => [p.id, p]))));
}
getPosts(): Signal<Post[]> {
return computed(() =>
Array.from(this.posts().values()).sort((a, b) => b.id - a.id),
);
}
getPost(id: number): Signal<Post | undefined> {
return computed(() => this.posts().get(id));
}
deletePost(id: number) {
this.http.delete(`${environment.apiRoot}/posts/${id}`).subscribe(() => {
this.posts.update((p) => {
p.delete(id);
return new Map(p);
});
});
}
createPost(post: Post) {
this.http
.post<Post>(`${environment.apiRoot}/posts`, post)
.subscribe((res) => {
this.posts.update((p) => new Map(p.set(res.id, res)));
});
}
updatePost(post: Post) {
this.http
.put<Post>(`${environment.apiRoot}/posts`, post)
.subscribe((res) => {
this.posts.update((p) => new Map(p.set(res.id, res)));
});
}
}