Remove | secure | async

booklore-api/src/main/java/com/adityachandel/booklore/config/security/ImageCachingFilter.java

@@ -0,0 +1,26 @@
+package com.adityachandel.booklore.config.security;
+
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.springframework.stereotype.Component;
+import org.springframework.http.HttpHeaders;
+import org.springframework.web.filter.OncePerRequestFilter;
+
+import java.io.IOException;
+
+@Component
+public class ImageCachingFilter extends OncePerRequestFilter {
+
+    @Override
+    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
+
+        if (request.getRequestURI().startsWith("/api/v1/books") && request.getRequestURI().contains("/cover")) {
+            response.setHeader(HttpHeaders.CACHE_CONTROL, "public, max-age=3600");
+            response.setHeader(HttpHeaders.EXPIRES, String.valueOf(System.currentTimeMillis() + 3600000));
+        }
+
+        filterChain.doFilter(request, response);
+    }
+}

booklore-api/src/main/java/com/adityachandel/booklore/config/security/SecurityConfig.java

@@ -1,6 +1,7 @@
 package com.adityachandel.booklore.config.security;
 
 import lombok.AllArgsConstructor;
+import org.springframework.boot.web.servlet.FilterRegistrationBean;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
@@ -49,7 +50,7 @@ public class SecurityConfig {
     @Bean
     public CorsConfigurationSource corsConfigurationSource() {
         CorsConfiguration configuration = new CorsConfiguration();
-        configuration.setAllowedOrigins(List.of("http://localhost:4200")); // Allow frontend origin
+        configuration.setAllowedOrigins(List.of("http://localhost:4200"));
         configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
         configuration.setAllowedHeaders(List.of("Authorization", "Cache-Control", "Content-Type"));
         configuration.setExposedHeaders(List.of("Content-Disposition"));
@@ -59,4 +60,12 @@ public class SecurityConfig {
         source.registerCorsConfiguration("/**", configuration);
         return source;
     }
+
+    @Bean
+    public FilterRegistrationBean<ImageCachingFilter> loggingFilter() {
+        FilterRegistrationBean<ImageCachingFilter> registrationBean = new FilterRegistrationBean<>();
+        registrationBean.setFilter(new ImageCachingFilter());
+        registrationBean.addUrlPatterns("/api/v1/books/*/cover");
+        return registrationBean;
+    }
 }

booklore-ui/src/app/book/components/book-browser/book-card/book-card.component.ts

@@ -13,15 +13,14 @@ import {MetadataFetchOptionsComponent} from '../../../../metadata/metadata-optio
 import {MetadataRefreshType} from '../../../../metadata/model/request/metadata-refresh-type.enum';
 import {MetadataRefreshRequest} from '../../../../metadata/model/request/metadata-refresh-request.model';
 import {UrlHelperService} from '../../../../utilities/service/url-helper.service';
-import {AsyncPipe, NgIf} from '@angular/common';
-import {SecurePipe} from '../../../../secure-pipe';
+import {NgIf} from '@angular/common';
 import {UserService} from '../../../../user.service';
 
 @Component({
   selector: 'app-book-card',
   templateUrl: './book-card.component.html',
   styleUrls: ['./book-card.component.scss'],
-  imports: [Button, MenuModule, CheckboxModule, FormsModule, NgIf, SecurePipe, AsyncPipe],
+  imports: [Button, MenuModule, CheckboxModule, FormsModule, NgIf],
   standalone: true
 })
 export class BookCardComponent implements OnInit {

booklore-ui/src/app/book/components/book-browser/book-table/book-table.component.html

@@ -35,7 +35,7 @@
         <p-tableCheckbox [value]="book"></p-tableCheckbox>
       </td>
       <td (click)="openMetadataCenter(book.id)">
-        <img [attr.src]="urlHelper.getCoverUrl(metadata.bookId, metadata?.coverUpdatedOn) | secure | async" alt="Book Cover" class="size-7"/>
+        <img [attr.src]="urlHelper.getCoverUrl(metadata.bookId, metadata?.coverUpdatedOn)" alt="Book Cover" class="size-7"/>
       </td>
       <td class="min-w-[15rem] max-w-[20rem] overflow-hidden truncate">{{ metadata.title }}</td>
       <td class="min-w-[10rem] max-w-[13rem] overflow-hidden truncate">{{ getAuthorNames(metadata.authors) }}</td>

booklore-ui/src/app/book/components/book-browser/book-table/book-table.component.ts

@@ -1,13 +1,12 @@
 import {Component, EventEmitter, inject, Input, OnChanges, Output} from '@angular/core';
 import {TableModule} from 'primeng/table';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {NgIf} from '@angular/common';
 import {Rating} from 'primeng/rating';
 import {FormsModule} from '@angular/forms';
 import {Book} from '../../../model/book.model';
 import {SortOption} from '../../../model/sort.model';
 import {MetadataDialogService} from '../../../../metadata/service/metadata-dialog.service';
 import {UrlHelperService} from '../../../../utilities/service/url-helper.service';
-import {SecurePipe} from '../../../../secure-pipe';
 
 @Component({
   selector: 'app-book-table',
@@ -17,9 +16,7 @@ import {SecurePipe} from '../../../../secure-pipe';
     TableModule,
     NgIf,
     Rating,
-    FormsModule,
-    SecurePipe,
-    AsyncPipe
+    FormsModule
   ],
   styleUrl: './book-table.component.scss'
 })

booklore-ui/src/app/book/components/book-searcher/book-searcher.component.html

@@ -17,7 +17,7 @@
     <ng-container *ngIf="books.length > 0; else noResults">
       <div class="search-dropdown-item flex flex-col" *ngFor="let book of books" (click)="onBookClick(book)">
         <div class="flex flex-row w-full px-2">
-          <img [attr.src]="urlHelper.getCoverUrl(book.id, book.metadata?.coverUpdatedOn) | secure | async" alt="Book Cover" class="search-book-cover"/>
+          <img [attr.src]="urlHelper.getCoverUrl(book.id, book.metadata?.coverUpdatedOn)" alt="Book Cover" class="search-book-cover"/>
           <div class="search-book-details">
             <div class="flex items-center">
               <p class="search-book-name text-lg font-medium truncate">{{ book.metadata?.title | slice:0:70 }}</p>

booklore-ui/src/app/book/components/book-searcher/book-searcher.component.ts

@@ -6,11 +6,10 @@ import {FormsModule} from '@angular/forms';
 import {InputTextModule} from 'primeng/inputtext';
 import {BookService} from '../../service/book.service';
 import {Button} from 'primeng/button';
-import {AsyncPipe, NgForOf, NgIf, SlicePipe} from '@angular/common';
+import {NgForOf, NgIf, SlicePipe} from '@angular/common';
 import {MetadataDialogService} from '../../../metadata/service/metadata-dialog.service';
 import {Divider} from 'primeng/divider';
 import {UrlHelperService} from '../../../utilities/service/url-helper.service';
-import {SecurePipe} from '../../../secure-pipe';
 
 @Component({
   selector: 'app-book-searcher',
@@ -22,9 +21,7 @@ import {SecurePipe} from '../../../secure-pipe';
     NgIf,
     NgForOf,
     SlicePipe,
-    Divider,
-    AsyncPipe,
-    SecurePipe
+    Divider
   ],
   styleUrls: ['./book-searcher.component.scss'],
   standalone: true

booklore-ui/src/app/metadata/book-metadata-center/metadata-editor/metadata-editor.component.html

@@ -10,7 +10,7 @@
       <div class="flex flex-col items-center gap-2 relative">
 
         <img
-          [attr.src]="urlHelper.getCoverUrl(metadata.bookId, metadata?.coverUpdatedOn) | secure | async"
+          [attr.src]="urlHelper.getCoverUrl(metadata.bookId, metadata?.coverUpdatedOn)"
           alt="Image"
           width="250"
           [ngClass]="{ 'brightness-50': isUploading }"

booklore-ui/src/app/metadata/book-metadata-center/metadata-editor/metadata-editor.component.ts

@@ -14,7 +14,6 @@ import {FileUpload, FileUploadErrorEvent, FileUploadEvent} from 'primeng/fileupl
 import {HttpResponse} from '@angular/common/http';
 import {BookService} from '../../../book/service/book.service';
 import {ProgressSpinner} from 'primeng/progressspinner';
-import {SecurePipe} from '../../../secure-pipe';
 
 @Component({
   selector: 'app-metadata-editor',
@@ -32,8 +31,7 @@ import {SecurePipe} from '../../../secure-pipe';
     ReactiveFormsModule,
     FileUpload,
     ProgressSpinner,
-    NgClass,
-    SecurePipe
+    NgClass
   ]
 })
 export class MetadataEditorComponent implements OnInit {

booklore-ui/src/app/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.html

@@ -2,7 +2,7 @@
   <div class="book-metadata-container flex-shrink-0" *ngIf="metadata$ | async as metadata">
     <div class="flex flex-row w-full">
 
-      <img [attr.src]="urlHelper.getCoverUrl(metadata.bookId, metadata?.coverUpdatedOn) | secure | async"
+      <img [attr.src]="urlHelper.getCoverUrl(metadata.bookId, metadata?.coverUpdatedOn)"
            class="book-cover placeholder"
            alt="Cover of {{ metadata.title }}"
            loading="lazy"

booklore-ui/src/app/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.ts

@@ -10,14 +10,13 @@ import {Tag} from 'primeng/tag';
 import {BookMetadata} from '../../../book/model/book.model';
 import {Divider} from 'primeng/divider';
 import {UrlHelperService} from '../../../utilities/service/url-helper.service';
-import {SecurePipe} from '../../../secure-pipe';
 
 @Component({
   selector: 'app-metadata-viewer',
   standalone: true,
   templateUrl: './metadata-viewer.component.html',
   styleUrl: './metadata-viewer.component.scss',
-  imports: [Button, NgForOf, NgIf, AsyncPipe, Rating, FormsModule, Tag, Divider, SecurePipe]
+  imports: [Button, NgForOf, NgIf, AsyncPipe, Rating, FormsModule, Tag, Divider]
 })
 export class MetadataViewerComponent {