Merge pull request #3044 from DSpace/backport-3028-to-dspace-7_x

[Port dspace-7_x] Add HTML support on system-wide alert (Fixes #3019)

src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html

@@ -2,26 +2,20 @@
     <div class="rounded-0 alert alert-warning w100 m-0 px-1">
         <div class="container">
             <span class="font-weight-bold">
-        <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
-            {{'system-wide-alert-banner.countdown.prefix' | translate }}
-        </span>
-            <span *ngIf="(countDownDays|async) > 0">
-            {{'system-wide-alert-banner.countdown.days' | translate: {
-                days: countDownDays|async
-            } }}
-        </span>
-            <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 ">
-            {{'system-wide-alert-banner.countdown.hours' | translate: {
-                hours: countDownHours| async
-            } }}
-        </span>
-            <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
-            {{'system-wide-alert-banner.countdown.minutes' | translate: {
-                minutes: countDownMinutes|async
-            } }}
-        </span>
+                <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
+                    {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
+                </span>
+                <span *ngIf="(countDownDays|async) > 0">
+                    {{ 'system-wide-alert-banner.countdown.days' | translate: { days: countDownDays|async } }}
+                </span>
+                <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 ">
+                    {{ 'system-wide-alert-banner.countdown.hours' | translate: { hours: countDownHours| async } }}
+                </span>
+                <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
+                    {{ 'system-wide-alert-banner.countdown.minutes' | translate: { minutes: countDownMinutes|async } }}
+                </span>
             </span>
-            <span>{{(systemWideAlert$ |async)?.message}}</span>
+            <span [innerHTML]="(systemWideAlert$ |async)?.message"></span>
         </div>
     </div>
-</div>
+</div>

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html

@@ -5,23 +5,22 @@
             <div class="row mb-2">
                 <div class="col">
                     <ui-switch [checkedLabel]="'system-wide-alert.form.label.active' | translate"
-                               [uncheckedLabel]="'system-wide-alert.form.label.inactive' | translate"
-                               [checked]="formActive.value"
-                               (change)="setActive($event)"></ui-switch>
+                        [uncheckedLabel]="'system-wide-alert.form.label.inactive' | translate"
+                        [checked]="formActive.value" (change)="setActive($event)"></ui-switch>
                 </div>
             </div>
             <div class="row">
                 <div class="col">
                     <label for="formMessage">{{ 'system-wide-alert.form.label.message' | translate }}</label>
                     <textarea id="formMessage" rows="5"
-                              [className]="(formMessage.invalid) && (formMessage.dirty || formMessage.touched) ? 'form-control is-invalid' :'form-control'"
-                              formControlName="formMessage">
+                        [className]="(formMessage.invalid) && (formMessage.dirty || formMessage.touched) ? 'form-control is-invalid' :'form-control'"
+                        formControlName="formMessage">
                 </textarea>
                     <div *ngIf="formMessage.invalid && (formMessage.dirty || formMessage.touched)"
-                         class="invalid-feedback show-feedback">
-                <span *ngIf="formMessage.errors">
-                {{ 'system-wide-alert.form.error.message' | translate }}
-            </span>
+                        class="invalid-feedback show-feedback">
+                        <span *ngIf="formMessage.errors">
+                            {{ 'system-wide-alert.form.error.message' | translate }}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -29,10 +28,8 @@
     </div>
     <div class="row">
         <div class="col mb-2 d-flex align-items-end">
-            <ui-switch size="small"
-                       [ariaLabel]="'system-wide-alert.form.label.countdownTo.enable' | translate"
-                       [checked]="counterEnabled$ |async"
-                       (change)="setCounterEnabled($event)"></ui-switch>
+            <ui-switch size="small" [ariaLabel]="'system-wide-alert.form.label.countdownTo.enable' | translate"
+                [checked]="counterEnabled$ |async" (change)="setCounterEnabled($event)"></ui-switch>
             <span class="ml-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
         </div>
     </div>
@@ -40,18 +37,10 @@
         <div class="row">
             <div class="col-sm-12 col-md-6">
                 <div class="input-group">
-                    <input
-                            class="form-control"
-                            placeholder="yyyy-mm-dd"
-                            name="dp"
-                            [(ngModel)]="date"
-                            [minDate]="minDate"
-                            ngbDatepicker
-                            #d="ngbDatepicker"
-                            (ngModelChange)="updatePreviewTime()"
-                    />
+                    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date"
+                        [minDate]="minDate" ngbDatepicker #d="ngbDatepicker" (ngModelChange)="updatePreviewTime()" />
                     <button [attr.aria-label]="'system-wide-alert-form.select-date-by-calendar' | translate"
-                            (click)="d.toggle()" class="btn btn-outline-secondary fas fa-calendar" type="button">
+                        (click)="d.toggle()" class="btn btn-outline-secondary fas fa-calendar" type="button">
                     </button>
                 </div>
             </div>
@@ -68,49 +57,38 @@
         </div>
     </div>
     <div class="mb-2">
-        <span class="text-muted"> {{'system-wide-alert.form.label.countdownTo.hint' | translate}}</span>
+        <span class="text-muted">{{ 'system-wide-alert.form.label.countdownTo.hint' | translate }}</span>
     </div>
-
-
     <div *ngIf="formMessage.value">
         <div class="row">
             <div class="col">
-                <label>{{ 'system-wide-alert.form.label.preview' | translate }}</label>
+                <label>{{ 'system-wide-alert.form.label.preview' | translate}}</label>
             </div>
         </div>
         <div class="rounded-0 alert alert-warning">
             <span class="font-weight-bold">
-        <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
-            {{'system-wide-alert-banner.countdown.prefix' | translate }}
-        </span>
-            <span *ngIf="previewDays > 0">
-            {{'system-wide-alert-banner.countdown.days' | translate: {
-                days: previewDays
-            } }}
-        </span>
-            <span *ngIf="previewDays > 0 || previewHours > 0 ">
-            {{'system-wide-alert-banner.countdown.hours' | translate: {
-                hours: previewHours
-            } }}
-        </span>
-            <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
-            {{'system-wide-alert-banner.countdown.minutes' | translate: {
-                minutes: previewMinutes
-            } }}
-        </span>
+                <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
+                    {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
+                </span>
+                <span *ngIf="previewDays > 0">
+                    {{ 'system-wide-alert-banner.countdown.days' | translate: { days: previewDays } }}
+                </span>
+                <span *ngIf="previewDays > 0 || previewHours > 0 ">
+                    {{ 'system-wide-alert-banner.countdown.hours' | translate: { hours: previewHours } }}
+                </span>
+                <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
+                    {{ 'system-wide-alert-banner.countdown.minutes' | translate: { minutes: previewMinutes } }}
+                </span>
             </span>
-            <span>{{formMessage.value}}</span>
+            <span [innerHTML]="formMessage.value"></span>
         </div>
     </div>
-
     <div class="btn-row float-right space-children-mr mt-2">
-        <button (click)="back()"
-                class="btn btn-outline-secondary"><i
-                class="fas fa-arrow-left"></i> {{'system-wide-alert.form.cancel' | translate}}</button>
-        <button class="btn btn-primary" [disabled]="alertForm.invalid"
-                (click)="save()">
-            <i class="fa fa-save"></i> {{ 'system-wide-alert.form.save' | translate}}
+        <button (click)="back()" class="btn btn-outline-secondary">
+            <i class="fas fa-arrow-left"></i> {{ 'system-wide-alert.form.cancel' | translate }}
+        </button>
+        <button class="btn btn-primary" [disabled]="alertForm.invalid" (click)="save()">
+            <i class="fa fa-save"></i> {{ 'system-wide-alert.form.save' | translate }}
         </button>
     </div>
-
-</div>
+</div>