serve frontend from go
This commit is contained in:
22
web/src/app/app.component.html
Normal file
22
web/src/app/app.component.html
Normal 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>
|
29
web/src/app/app.component.spec.ts
Normal file
29
web/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 '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');
|
||||
});
|
||||
});
|
32
web/src/app/app.component.ts
Normal file
32
web/src/app/app.component.ts
Normal 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
20
web/src/app/app.config.ts
Normal 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
29
web/src/app/app.routes.ts
Normal 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 },
|
||||
];
|
22
web/src/app/components/login/login.component.html
Normal file
22
web/src/app/components/login/login.component.html
Normal 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>
|
23
web/src/app/components/login/login.component.spec.ts
Normal file
23
web/src/app/components/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();
|
||||
});
|
||||
});
|
39
web/src/app/components/login/login.component.ts
Normal file
39
web/src/app/components/login/login.component.ts
Normal 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);
|
||||
}
|
||||
}
|
1
web/src/app/components/markdown/markdown.component.html
Normal file
1
web/src/app/components/markdown/markdown.component.html
Normal file
@ -0,0 +1 @@
|
||||
<div [innerHTML]="innerHTML"></div>
|
23
web/src/app/components/markdown/markdown.component.spec.ts
Normal file
23
web/src/app/components/markdown/markdown.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
22
web/src/app/components/markdown/markdown.component.ts
Normal file
22
web/src/app/components/markdown/markdown.component.ts
Normal 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();
|
||||
}
|
||||
}
|
9
web/src/app/components/modal/modal.component.html
Normal file
9
web/src/app/components/modal/modal.component.html
Normal 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>
|
23
web/src/app/components/modal/modal.component.spec.ts
Normal file
23
web/src/app/components/modal/modal.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
18
web/src/app/components/modal/modal.component.ts
Normal file
18
web/src/app/components/modal/modal.component.ts
Normal 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);
|
||||
}
|
||||
}
|
@ -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>
|
@ -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();
|
||||
});
|
||||
});
|
39
web/src/app/components/post-editor/post-editor.component.ts
Normal file
39
web/src/app/components/post-editor/post-editor.component.ts
Normal 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 }));
|
||||
}
|
||||
}
|
34
web/src/app/routes/dashboard/dashboard.component.html
Normal file
34
web/src/app/routes/dashboard/dashboard.component.html
Normal 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>
|
22
web/src/app/routes/dashboard/dashboard.component.spec.ts
Normal file
22
web/src/app/routes/dashboard/dashboard.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
20
web/src/app/routes/dashboard/dashboard.component.ts
Normal file
20
web/src/app/routes/dashboard/dashboard.component.ts
Normal 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);
|
||||
}
|
||||
}
|
11
web/src/app/routes/home/home.component.html
Normal file
11
web/src/app/routes/home/home.component.html
Normal 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>
|
23
web/src/app/routes/home/home.component.spec.ts
Normal file
23
web/src/app/routes/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();
|
||||
});
|
||||
});
|
14
web/src/app/routes/home/home.component.ts
Normal file
14
web/src/app/routes/home/home.component.ts
Normal 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();
|
||||
}
|
@ -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)" />
|
@ -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();
|
||||
});
|
||||
});
|
26
web/src/app/routes/post/create-post/create-post.component.ts
Normal file
26
web/src/app/routes/post/create-post/create-post.component.ts
Normal 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();
|
||||
}
|
||||
}
|
7
web/src/app/routes/post/post.component.html
Normal file
7
web/src/app/routes/post/post.component.html
Normal 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'"
|
||||
/>
|
23
web/src/app/routes/post/post.component.spec.ts
Normal file
23
web/src/app/routes/post/post.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
19
web/src/app/routes/post/post.component.ts
Normal file
19
web/src/app/routes/post/post.component.ts
Normal 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));
|
||||
}
|
||||
}
|
@ -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)" />
|
@ -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();
|
||||
});
|
||||
});
|
45
web/src/app/routes/post/update-post/update-post.component.ts
Normal file
45
web/src/app/routes/post/update-post/update-post.component.ts
Normal 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();
|
||||
}
|
||||
}
|
16
web/src/app/shared/guards/logged-in.guard.spec.ts
Normal file
16
web/src/app/shared/guards/logged-in.guard.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
13
web/src/app/shared/guards/logged-in.guard.ts
Normal file
13
web/src/app/shared/guards/logged-in.guard.ts
Normal 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;
|
||||
}
|
||||
}
|
16
web/src/app/shared/interceptors/auth.interceptor.spec.ts
Normal file
16
web/src/app/shared/interceptors/auth.interceptor.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
29
web/src/app/shared/interceptors/auth.interceptor.ts
Normal file
29
web/src/app/shared/interceptors/auth.interceptor.ts
Normal 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);
|
||||
}
|
||||
}
|
13
web/src/app/shared/interfaces/auth.ts
Normal file
13
web/src/app/shared/interfaces/auth.ts
Normal 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;
|
||||
}
|
10
web/src/app/shared/interfaces/post.ts
Normal file
10
web/src/app/shared/interfaces/post.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export interface Post {
|
||||
id: number;
|
||||
title: string;
|
||||
tldr: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface Comment {
|
||||
content: string;
|
||||
}
|
16
web/src/app/shared/services/auth.service.spec.ts
Normal file
16
web/src/app/shared/services/auth.service.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
113
web/src/app/shared/services/auth.service.ts
Normal file
113
web/src/app/shared/services/auth.service.ts
Normal 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);
|
||||
}
|
16
web/src/app/shared/services/posts.service.spec.ts
Normal file
16
web/src/app/shared/services/posts.service.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
62
web/src/app/shared/services/posts.service.ts
Normal file
62
web/src/app/shared/services/posts.service.ts
Normal 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)));
|
||||
});
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user