fix: make private images visitable

frontend/src/app/app.module.ts

@@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { PageHomeComponent } from './page-home/page-home.component';
-import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { PageLoginComponent } from './page-login/page-login.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { PageSignupComponent } from './page-signup/page-signup.component';
@@ -14,6 +14,8 @@ import { ImagesComponent } from './images/images.component';
 import { ImageComponent } from './image/image.component';
 import { MessageComponent } from './message/message.component';
 import { PageImageComponent } from './page-image/page-image.component';
+import { SecurePipe } from './secure.pipe';
+import { AuthorizerInterceptor } from './authorizer.interceptor';
 
 @NgModule({
     declarations: [
@@ -26,7 +28,8 @@ import { PageImageComponent } from './page-image/page-image.component';
         ImagesComponent,
         ImageComponent,
         MessageComponent,
-        PageImageComponent
+        PageImageComponent,
+        SecurePipe
     ],
     imports: [
         BrowserModule,
@@ -34,7 +37,9 @@ import { PageImageComponent } from './page-image/page-image.component';
         ReactiveFormsModule,
         HttpClientModule,
     ],
-    providers: [],
+    providers: [
+        { provide: HTTP_INTERCEPTORS, useClass: AuthorizerInterceptor, multi: true }
+    ],
     bootstrap: [AppComponent]
 })
 export class AppModule { }

frontend/src/app/authorizer.interceptor.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import {
+    HttpRequest,
+    HttpHandler,
+    HttpEvent,
+    HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { UsersService } from './services/users.service';
+
+@Injectable({ providedIn: 'root' })
+export class AuthorizerInterceptor implements HttpInterceptor {
+    public intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+        const token = localStorage.getItem('token') ?? undefined;
+        if (token) request = request.clone({
+            setHeaders: {
+                Authorization: `Bearer ${token}`
+            }
+        });
+
+        return next.handle(request);
+    }
+}

frontend/src/app/image/image.component.html

@@ -1,5 +1,10 @@
 <div class="card" *ngIf="image && !deleted">
-    <img class="image"  [routerLink]="'/image/' + image.id" [src]="environment.apiURL + '/images/img/' + image.file">
+    <img *ngIf="image.visibility === 2"
+        class="image" [routerLink]="'/image/' + image.id"
+        [src]="(environment.apiURL + '/images/img/' + image.file) | secure | async">
+    <img *ngIf="image.visibility !== 2"
+        class="image" [routerLink]="'/image/' + image.id"
+        [src]="(environment.apiURL + '/images/img/' + image.file)">
     <h3 class="name">{{image.name}}</h3>
     <div class="stats">
         <span class="likes">

frontend/src/app/page-image/page-image.component.html

@@ -1,6 +1,9 @@
 <div class="container" *ngIf="image">
     <h3 class="name">{{image.name}}</h3>
-    <img class="image" [src]="environment.apiURL + '/images/img/' + image.file">
+    <img *ngIf="image.visibility === 2" class="image"
+        [src]="(environment.apiURL + '/images/img/' + image.file) | secure | async">
+    <img *ngIf="image.visibility !== 2" class="image"
+        [src]="(environment.apiURL + '/images/img/' + image.file)">
     
     <div class="stats">
         <span class="actions">

frontend/src/app/secure.pipe.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Observable, firstValueFrom } from 'rxjs';
+
+@Pipe({
+    name: 'secure'
+})
+export class SecurePipe implements PipeTransform {
+    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }
+
+    public async transform(url: string): Promise<SafeUrl> {
+        const res = await firstValueFrom(this.http.get(url, { responseType: 'blob' }));
+        return this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(res));
+    }
+
+}