Updated user interface

src/app/pages/error/error.component.html

@@ -12,7 +12,9 @@
   <h1 class="title">
     <uds-translate>An error has occurred</uds-translate>
   </h1>
-  <p class="description" [innerHTML]="this.error | safeHtml">
+  
+  <p class="description">
+    <span *ngFor="let error of this.error" [innerHTML]="error"></span>
   </p>
 
   <a mat-raised-button color="warn" routerLink="/"><uds-translate>Return</uds-translate></a>

src/app/pages/error/error.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-declare var django: any;
-declare var udsData: any;
+declare const django: any;
+declare const udsData: any;
 
 @Component({
   selector: 'uds-error',
   templateUrl: './error.component.html',
-  styleUrls: ['./error.component.css']
+  styleUrls: ['./error.component.css'],
 })
 export class ErrorComponent implements OnInit {
-  error = '';
+  error: string[] = [''];
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
     this.getError();
@@ -21,13 +21,19 @@ export class ErrorComponent implements OnInit {
   getError(): void {
     const id = this.route.snapshot.paramMap.get('id');
     try {
-      this.error = new TextDecoder().decode(Uint8Array.from(<any>window.atob(id), c => (<any>c).charCodeAt(c))).replace('\n', '<br/>');
+      const errText = new TextDecoder()
+        .decode(
+          Uint8Array.from(window.atob(id), (c) => (c as any).charCodeAt(c))
+        )
+        .replace('<', '&lt;')
+        .replace('>', '&gt;');
+      // Split error text in lines
+      this.error = errText.split('\n');
       console.log(this.error);
       udsData.error = this.error;
     } catch (e) {
       console.log(e);
-      this.error = django.gettext('Invalid error string');
+      this.error = [django.gettext('Invalid error string')];
     }
   }
-
 }