Request-a-copy: Error handling (review feedback)

* New accessExpired flag can be checked along with
  acceptRequest, so expired or not-granted links
  will show an error and draw 'normal' download links
  instead of doing a hard 4xx redirect
* Old ItemWithSupplementaryData component removed
* Notifications moved to sub-component of item page
  and display a warning on valid access token, or a
  danger alert if expired or not-granted, with an
  appropriate error message
* Date formatted in messages as yyyy-MM-dd

Author: kshepherd

src/app/core/auth/access-token.resolver.ts

@@ -4,11 +4,15 @@ import {
   Router,
 } from '@angular/router';
 import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import {
+  map,
+  tap,
+} from 'rxjs/operators';
 
 import { getForbiddenRoute } from '../../app-routing-paths';
 import { hasValue } from '../../shared/empty.util';
 import { ItemRequestDataService } from '../data/item-request-data.service';
+import { RemoteData } from '../data/remote-data';
 import { redirectOn4xx } from '../shared/authorized.operators';
 import { ItemRequest } from '../shared/item-request.model';
 import {
@@ -43,6 +47,7 @@ export const accessTokenResolver: ResolveFn<ItemRequest> = (
     getFirstCompletedRemoteData(),
     // Handle authorization errors, not found errors and forbidden errors as normal
     redirectOn4xx(router, authService),
+    map((rd: RemoteData<ItemRequest>) => rd),
     // Get payload of the item request
     getFirstSucceededRemoteDataPayload(),
     tap(request => {

src/app/core/shared/item-request.model.ts

@@ -91,6 +91,8 @@ export class ItemRequest implements CacheableObject {
   @autoserialize
   accessExpiry: string;
 
+  @autoserialize
+  accessExpired: boolean;
   /**
    * The {@link HALLink}s for this ItemRequest
    */

src/app/core/shared/item-with-supplementary-data.model.ts

@@ -6,6 +6,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   BehaviorSubject,
@@ -25,7 +26,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
 import { Item } from '../../core/shared/item.model';
-import { ItemWithSupplementaryData } from '../../core/shared/item-with-supplementary-data.model';
+import { ItemRequest } from '../../core/shared/item-request.model';
 import { MediaViewerItem } from '../../core/shared/media-viewer-item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { hasValue } from '../../shared/empty.util';
@@ -71,9 +72,12 @@ export class MediaViewerComponent implements OnDestroy, OnInit {
 
   subs: Subscription[] = [];
 
+  itemRequest: ItemRequest;
+
   constructor(
     protected bitstreamDataService: BitstreamDataService,
     protected changeDetectorRef: ChangeDetectorRef,
+    protected route: ActivatedRoute,
   ) {
   }
 
@@ -85,6 +89,7 @@ export class MediaViewerComponent implements OnDestroy, OnInit {
    * This method loads all the Bitstreams and Thumbnails and converts it to {@link MediaViewerItem}s
    */
   ngOnInit(): void {
+    this.itemRequest = this.route.snapshot.data.itemRequest;
     const types: string[] = [
       ...(this.mediaOptions.image ? ['image'] : []),
       ...(this.mediaOptions.video ? ['audio', 'video'] : []),
@@ -170,9 +175,10 @@ export class MediaViewerComponent implements OnDestroy, OnInit {
    * Get access token, if this is accessed via a Request-a-Copy link
    */
   get accessToken() {
-    if (this.item instanceof ItemWithSupplementaryData && hasValue(this.item.itemRequest)) {
-      return this.item.itemRequest.accessToken;
+    if (hasValue(this.itemRequest) && this.itemRequest.accessToken && !this.itemRequest.accessExpired) {
+      return this.itemRequest.accessToken;
     }
     return null;
   }
+
 }

src/app/item-page/media-viewer/media-viewer.component.ts

@@ -0,0 +1,25 @@
+<ng-container *ngVar="(itemRequest$ | async) as itemRequest">
+  @if (hasValue(itemRequest)) {
+    @if (!itemRequest.acceptRequest) {
+      <!-- The request has NOT been accepted, display an error -->
+      <div class="alert alert-danger wb-100 mb-2">
+        <p><span role="img" class="request-a-copy-access-error-icon" [attr.aria-label]="'bitstream-request-a-copy.access-by-token.alt-text' | translate"><i class="fa-solid fa-lock"></i></span>{{'bitstream-request-a-copy.access-by-token.not-granted' | translate}}</p>
+        <p>{{'bitstream-request-a-copy.access-by-token.re-request' | translate}}</p>
+      </div>
+    } @else if (itemRequest.accessExpired) {
+      <!-- The request is accepted, but the access period has expired, display an error -->
+      <div class="alert alert-danger wb-100 mb-2">
+        <p><span role="img" class="request-a-copy-access-error-icon" [attr.aria-label]="'bitstream-request-a-copy.access-by-token.alt-text' | translate"><i class="fa-solid fa-lock"></i></span>{{'bitstream-request-a-copy.access-by-token.expired' | translate}} {{ formatDate(itemRequest.accessExpiry) }}</p>
+        <p>{{'bitstream-request-a-copy.access-by-token.re-request' | translate}}</p>
+      </div>
+    } @else {
+      <div class="alert alert-warning wb-100 mb-2">
+        <p><span role="img" class="request-a-copy-access-icon" [attr.aria-label]="'bitstream-request-a-copy.access-by-token.alt-text' | translate"><i class="fa-solid fa-lock-open"></i></span>{{'bitstream-request-a-copy.access-by-token.warning' | translate}}</p>
+        <!-- Only show the expiry date if it's not null, and doesn't start with the "FOREVER" year -->
+        @if (hasValue(itemRequest.accessExpiry) && !itemRequest.accessExpiry.startsWith('+294276')) {
+          <p>{{ 'bitstream-request-a-copy.access-by-token.expiry-label' | translate }} {{ formatDate(itemRequest.accessExpiry) }}</p>
+        }
+      </div>
+    }
+  }
+</ng-container>

src/app/item-page/simple/access-by-token-notification/access-by-token-notification.component.html

@@ -0,0 +1,7 @@
+.request-a-copy-access-icon {
+  margin-right: 4px;
+  color: var(--bs-success);
+}
+.request-a-copy-access-error-icon {
+  margin-right: 4px;
+}

src/app/item-page/simple/access-by-token-notification/access-by-token-notification.component.scss

@@ -0,0 +1,56 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ItemRequest } from '../../../core/shared/item-request.model';
+import {
+  dateToString,
+  stringToNgbDateStruct,
+} from '../../../shared/date.util';
+import {
+  hasValue,
+  isNotEmpty,
+} from '../../../shared/empty.util';
+import { VarDirective } from '../../../shared/utils/var.directive';
+
+@Component({
+  selector: 'ds-access-by-token-notification',
+  templateUrl: './access-by-token-notification.component.html',
+  styleUrls: ['./access-by-token-notification.component.scss'],
+  imports: [
+    AsyncPipe,
+    TranslateModule,
+    VarDirective,
+  ],
+  standalone: true,
+})
+export class AccessByTokenNotificationComponent implements OnInit {
+
+  itemRequest$: Observable<ItemRequest>;
+  protected readonly hasValue = hasValue;
+
+  constructor(protected route: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    this.itemRequest$ = this.route.data.pipe(
+      map((data) => data.itemRequest as ItemRequest),
+    );
+  }
+
+  /**
+   * Returns a date in simplified format (YYYY-MM-DD).
+   *
+   * @param date
+   * @return a string with formatted date
+   */
+  formatDate(date: string): string {
+    return isNotEmpty(date) ? dateToString(stringToNgbDateStruct(date)) : '';
+  }
+}

src/app/item-page/simple/access-by-token-notification/access-by-token-notification.component.spec.ts

@@ -3,18 +3,9 @@
     <div class="item-page" @fadeInOut>
       @if (itemRD?.payload; as item) {
         <div>
-          <ng-container *ngVar="(itemRequest$ | async) as itemRequest">
-            @if (hasValue(itemRequest)) {
-              <div class="alert alert-warning wb-100 mb-2">
-                <p><span role="img" class="request-a-copy-access-icon" [attr.aria-label]="'bitstream-request-a-copy.access-by-token.alt-text' | translate"><i class="fa-solid fa-lock-open"></i></span>{{'bitstream-request-a-copy.access-by-token.warning' | translate}}</p>
-                <!-- Only show the expiry date if it's not null, and doesn't start with the "FOREVER" year -->
-                @if (hasValue(itemRequest.accessExpiry) && !itemRequest.accessExpiry.startsWith('+294276')) {
-                  <p>{{ 'bitstream-request-a-copy.access-by-token.expiry-label' | translate }} {{ itemRequest.accessExpiry }}</p>
-                }
-              </div>
-            }
-          </ng-container>
+
           <ds-item-alerts [item]="item"></ds-item-alerts>
+          <ds-access-by-token-notification></ds-access-by-token-notification>
           <ds-qa-event-notification [item]="item"></ds-qa-event-notification>
           <ds-notify-requests-status [itemUuid]="item.uuid"></ds-notify-requests-status>
           <ds-item-versions-notice [item]="item"></ds-item-versions-notice>

src/app/item-page/simple/access-by-token-notification/access-by-token-notification.component.ts

@@ -4,7 +4,4 @@
     max-width: none;
   }
 }
-.request-a-copy-access-icon {
-  margin-right: 4px;
-  color: #26a269;
-}
+