fix(preregistration): fixed breaks in registration (#665)

Author: nsemets

src/app/features/preprints/pages/preprint-details/preprint-details.component.html

@@ -1,4 +1,4 @@
-<div class="flex-column xl:mt-6 flex-1">
+<div class="flex flex-column xl:mt-6 flex-1">
   <section class="flex flex-column py-5 px-3 gap-4 md:py-6 md:px-4">
     <div class="flex flex-column justify-content-between md:flex-row">
       @if (isPreprintProviderLoading() || isPreprintLoading()) {
@@ -11,8 +11,13 @@
           class="flex flex-column gap-3 custom-light-hover dark-blue-link md:flex-row"
           [routerLink]="['/preprints', preprintProvider()?.id, 'discover']"
         >
-          <img class="fit-contain" alt="Provider Logo" height="36" [src]="preprintProvider()!.brand.heroLogoImageUrl" />
-          <h1>{{ preprint()!.title }}</h1>
+          <img
+            class="fit-contain"
+            alt="Provider Logo"
+            height="36"
+            [src]="preprintProvider()?.brand?.heroLogoImageUrl"
+          />
+          <h1>{{ preprint()?.title }}</h1>
         </a>
       }
 

src/app/shared/components/registration-blocks-data/registration-blocks-data.component.html

@@ -1,4 +1,4 @@
-@for (question of questions(); track question.responseKey) {
+@for (question of questions(); track question.id) {
   <div [class.mb-4]="!$last">
     <h4 class="mb-2" [class.text-lg]="isOverviewPage()">
       {{ question.displayText }}
@@ -11,7 +11,7 @@ <h4 class="mb-2" [class.text-lg]="isOverviewPage()">
     @if (reviewData()[question.responseKey!]) {
       @switch (question.fieldType) {
         @case (FieldType.Text) {
-          <p>{{ reviewData()[question.responseKey!] }}</p>
+          <p class="preserve-whitespace">{{ reviewData()[question.responseKey!] }}</p>
         }
         @case (FieldType.Checkbox) {
           @for (option of reviewData()[question.responseKey!]; track option) {
@@ -36,7 +36,7 @@ <h4 class="mb-2" [class.text-lg]="isOverviewPage()">
           }
         }
         @default {
-          <p>{{ reviewData()[question.responseKey!] }}</p>
+          <p class="preserve-whitespace">{{ reviewData()[question.responseKey!] }}</p>
         }
       }
     } @else {

src/app/shared/pipes/index.ts

@@ -5,5 +5,7 @@ export { FileSizePipe } from './file-size.pipe';
 export { FixSpecialCharPipe } from './fix-special-char.pipe';
 export { InterpolatePipe } from './interpolate.pipe';
 export { MonthYearPipe } from './month-year.pipe';
+export { SafeHtmlPipe } from './safe-html.pipe';
+export { SafeUrlPipe } from './safe-url.pipe';
 export { SortByDatePipe } from './sort-by-date.pipe';
 export { WrapFnPipe } from './wrap-fn.pipe';

src/app/shared/pipes/safe-html.pipe.ts

@@ -0,0 +1,13 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml',
+})
+export class SafeHtmlPipe implements PipeTransform {
+  private sanitizer = inject(DomSanitizer);
+
+  transform(value: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+}

src/app/shared/pipes/safe-url.pipe.ts

@@ -0,0 +1,13 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeUrl',
+})
+export class SafeUrlPipe implements PipeTransform {
+  private sanitizer = inject(DomSanitizer);
+
+  transform(url: string): SafeResourceUrl {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+}

src/styles/_common.scss

@@ -84,6 +84,10 @@
   word-break: break-word;
 }
 
+.preserve-whitespace {
+  white-space: pre-wrap;
+}
+
 // ------------------------- Universal custom hover state -------------------------
 
 .custom-dark-hover:hover:not(:disabled) {