feat(eua): Improved EUA preview

src/app/core/admin/end-user-agreement/eua.service.ts

@@ -34,6 +34,6 @@ export class EuaService extends AbstractEntityService<EndUserAgreement> {
 	}
 
 	publish(eua: EndUserAgreement): Observable<EndUserAgreement | null> {
-		return this.updateAction('publish', eua);
+		return this.updateAction('publish', eua, {});
 	}
 }

src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts

@@ -33,6 +33,10 @@ import {
 } from '../../../../common/table';
 import { EndUserAgreement } from '../../../auth';
 import { EuaService } from '../eua.service';
+import {
+	PreviewEuaModalComponent,
+	PreviewEuaModalData
+} from '../preview-eua-modal/preview-eua-modal.component';
 
 @Component({
 	templateUrl: './admin-list-euas.component.html',
@@ -163,8 +167,9 @@ export class AdminListEuasComponent implements OnInit {
 	/**
 	 * Opens a preview modal containing the text and title of this end user agreement.
 	 */
-	previewEndUserAgreement(endUserAgreement: EndUserAgreement) {
-		const { text, title } = endUserAgreement;
-		this.#dialogService.alert(title, text);
+	previewEndUserAgreement(eua: EndUserAgreement) {
+		this.#dialogService.open<unknown, PreviewEuaModalData>(PreviewEuaModalComponent, {
+			data: { eua }
+		});
 	}
 }

src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts

@@ -9,6 +9,10 @@ import { DialogService } from '../../../../common/dialog';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import { EndUserAgreement } from '../../../auth';
 import { EuaService } from '../eua.service';
+import {
+	PreviewEuaModalComponent,
+	PreviewEuaModalData
+} from '../preview-eua-modal/preview-eua-modal.component';
 
 @Component({
 	standalone: true,
@@ -44,6 +48,8 @@ export class ManageEuaComponent {
 	}
 
 	previewEua(): void {
-		this.#dialogService.alert(this.eua().title, this.eua().text);
+		this.#dialogService.open<unknown, PreviewEuaModalData>(PreviewEuaModalComponent, {
+			data: { eua: this.eua() }
+		});
 	}
 }

src/app/core/admin/end-user-agreement/preview-eua-modal/preview-eua-modal.component.html

@@ -0,0 +1,8 @@
+<asy-modal title="EUA Preview" (cancel)="close()" (ok)="close()">
+	<div class="card">
+		<div class="card-header">
+			<h2>{{ data.eua.title }}</h2>
+		</div>
+		<div class="card-body" [innerHtml]="data.eua.text"></div>
+	</div>
+</asy-modal>

src/app/core/admin/end-user-agreement/preview-eua-modal/preview-eua-modal.component.ts

@@ -0,0 +1,28 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { ModalComponent } from '../../../../common';
+import { DialogAction } from '../../../../common/dialog';
+import { EndUserAgreement } from '../../../auth';
+
+export type PreviewEuaModalData = {
+	eua: EndUserAgreement;
+};
+
+@Component({
+	selector: 'app-preview-eua-modal',
+	standalone: true,
+	imports: [FormsModule, ModalComponent],
+	templateUrl: './preview-eua-modal.component.html',
+	styleUrl: './preview-eua-modal.component.scss'
+})
+export class PreviewEuaModalComponent {
+	readonly #dialogRef = inject(DialogRef);
+
+	readonly data: PreviewEuaModalData = inject(DIALOG_DATA);
+
+	close() {
+		this.#dialogRef.close({ action: DialogAction.CANCEL });
+	}
+}

src/app/core/eua/user-eua.component.html

@@ -2,12 +2,12 @@
 	<div class="row g-0">
 		@if (eua$ | async; as eua) {
 			<div class="col-xl-8 offset-xl-2">
-				<h1>
+				<h2>
 					End User Agreement (EUA)<br />
 					@if (!alreadyAccepted()) {
 						<small> Please review and acknowledge the end user agreement </small>
 					}
-				</h1>
+				</h2>
 				<!-- Alert Notifications -->
 				<system-alert />
 				<form name="userForm" role="form" autocomplete="off">