From 4a89698dc4804a425504a48a00176fa6065752d9 Mon Sep 17 00:00:00 2001
From: topchetoeu <36534413+TopchetoEU@users.noreply.github.com>
Date: Sat, 1 Jul 2023 00:07:11 +0300
Subject: [PATCH] fix: make private images visitable

---
 frontend/src/app/app.module.ts                | 11 ++++++---
 frontend/src/app/authorizer.interceptor.ts    | 23 +++++++++++++++++++
 frontend/src/app/image/image.component.html   |  7 +++++-
 .../app/page-image/page-image.component.html  |  5 +++-
 frontend/src/app/secure.pipe.ts               | 17 ++++++++++++++
 5 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/authorizer.interceptor.ts
 create mode 100644 frontend/src/app/secure.pipe.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f0f3070..c98f792 100644
--- a/frontend/src/app/app.module.ts
+++ b/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 { }
diff --git a/frontend/src/app/authorizer.interceptor.ts b/frontend/src/app/authorizer.interceptor.ts
new file mode 100644
index 0000000..208914a
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/frontend/src/app/image/image.component.html b/frontend/src/app/image/image.component.html
index 1053136..487575b 100644
--- a/frontend/src/app/image/image.component.html
+++ b/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">
diff --git a/frontend/src/app/page-image/page-image.component.html b/frontend/src/app/page-image/page-image.component.html
index 0592004..45ca540 100644
--- a/frontend/src/app/page-image/page-image.component.html
+++ b/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">
diff --git a/frontend/src/app/secure.pipe.ts b/frontend/src/app/secure.pipe.ts
new file mode 100644
index 0000000..4637a48
--- /dev/null
+++ b/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));
+    }
+
+}