diff --git a/src/app/shared/external-link/external-link.directive.spec.ts b/src/app/shared/external-link/external-link.directive.spec.ts
new file mode 100644
index 0000000000..316b524cc9
--- /dev/null
+++ b/src/app/shared/external-link/external-link.directive.spec.ts
@@ -0,0 +1,166 @@
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { cleanStylesFromDOM } from '@testing/clean-up-helper';
+
+import { ExternalLinkDirective } from './external-link.directive';
+
+@Component({
+ template: `Link External
+
+
+ Link External Dynamic
+
+
+ Link Internal
+
+
+ Link Internal Dynamic
+
+
+ Link without href`
+})
+class TestExernalLinkComponent {
+ hostname = location.hostname;
+ dynamicInternalLink = this.hostname + '#anchor';
+ dynamicExternalLink = 'https://coryrylan.com/blog/managing-external-links-safely-in-angular';
+
+ doSomething() {
+ console.log('Clicked on link without href');
+ }
+}
+
+describe('ExternalLinkDirective', () => {
+ let component: TestExernalLinkComponent;
+ let fixture: ComponentFixture;
+
+ let aDes: DebugElement[];
+ let bareADes: DebugElement[];
+
+ const expectedExternalLink = 'https://coryrylan.com/blog/managing-external-links-safely-in-angular';
+ const expectedNewExternalLink = 'https://anton-webern.ch/';
+ const expectedInternalLink = '#anchor';
+ const expectedRelAttr = 'noopener noreferrer';
+ const expectedTargetAttr = '_blank';
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestExernalLinkComponent, ExternalLinkDirective]
+ });
+
+ fixture = TestBed.createComponent(TestExernalLinkComponent);
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ afterAll(() => {
+ cleanStylesFromDOM();
+ });
+
+ it('should have 4 anchor elements with href attributes', () => {
+ // all elements with an attached ExternalLinkDirective (a[href])
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+
+ expect(aDes.length).toBe(4, 'should be 4');
+ });
+
+ it('should have 1 anchor element without href attributes', () => {
+ bareADes = fixture.debugElement.queryAll(By.css('a:not([href])'));
+
+ expect(bareADes.length).toBe(1, 'should be 1');
+ });
+
+ it('should apply [href|target|rel] values to 1st anchor element (external)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[0].nativeElement;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedExternalLink, `should be ${expectedExternalLink}`);
+
+ expect(aEl.rel).toBeTruthy();
+ expect(aEl.rel).toBe(expectedRelAttr, `should be ${expectedRelAttr}`);
+
+ expect(aEl.target).toBeTruthy();
+ expect(aEl.target).toBe(expectedTargetAttr, `should be ${expectedTargetAttr}`);
+
+ expect(aEl.innerText).toBe('Link External', 'should be "Link External"');
+ });
+
+ it('should apply [href|target|rel] values to 2nd anchor element (dynamic external)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[1].nativeElement;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedExternalLink, `should be ${expectedExternalLink}`);
+
+ expect(aEl.rel).toBeTruthy();
+ expect(aEl.rel).toBe(expectedRelAttr, `should be ${expectedRelAttr}`);
+
+ expect(aEl.target).toBeTruthy();
+ expect(aEl.target).toBe(expectedTargetAttr, `should be ${expectedTargetAttr}`);
+
+ expect(aEl.innerText).toBe('Link External Dynamic', 'should be "Link External Dynamic"');
+ });
+
+ it('should not apply [target|rel] values to 3rd anchor element (internal)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[2].nativeElement;
+
+ const expectedHref = aEl.baseURI + aEl.hostname + expectedInternalLink;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedHref, `should be ${expectedHref}`);
+
+ expect(aEl.rel).not.toBeTruthy('should be empty string');
+ expect(aEl.target).not.toBeTruthy('should be empty string');
+
+ expect(aEl.innerText).toBe('Link Internal', 'should be "Link Internal"');
+ });
+
+ it('should not apply [target|rel] values to 4th anchor element (dynamic internal)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[3].nativeElement;
+
+ const expectedHref = aEl.baseURI + aEl.hostname + expectedInternalLink;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedHref, `should be ${expectedHref}`);
+
+ expect(aEl.rel).not.toBeTruthy('should be empty string');
+ expect(aEl.target).not.toBeTruthy('should be empty string');
+
+ expect(aEl.innerText).toBe('Link Internal Dynamic', 'should be "Link Internal Dynamic"');
+ });
+
+ it('should not apply [href|target|rel] values to bare anchor', () => {
+ bareADes = fixture.debugElement.queryAll(By.css('a:not([href])'));
+
+ expect(bareADes[0].properties.href).not.toBeTruthy('should be empty string');
+ expect(bareADes[0].properties.target).not.toBeTruthy('should be empty string');
+ expect(bareADes[0].properties.rel).not.toBeTruthy('should be empty string');
+ expect(bareADes[0].properties.innerText).toBe('Link without href', 'should be "Link without href"');
+ });
+
+ it('should reflect input change for [href] values', () => {
+ component.dynamicExternalLink = expectedNewExternalLink;
+
+ // apply changes
+ fixture.detectChanges();
+
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[1].nativeElement;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedNewExternalLink, `should be ${expectedNewExternalLink}`);
+
+ expect(aEl.rel).toBeTruthy();
+ expect(aEl.rel).toBe(expectedRelAttr, `should be ${expectedRelAttr}`);
+
+ expect(aEl.target).toBeTruthy();
+ expect(aEl.target).toBe(expectedTargetAttr, `should be ${expectedTargetAttr}`);
+
+ expect(aEl.innerText).toBe('Link External Dynamic', 'should be "Link External Dynamic"');
+ });
+});
diff --git a/src/app/shared/external-link/external-link.directive.ts b/src/app/shared/external-link/external-link.directive.ts
new file mode 100644
index 0000000000..af429f1c94
--- /dev/null
+++ b/src/app/shared/external-link/external-link.directive.ts
@@ -0,0 +1,77 @@
+import { Directive, HostBinding, Inject, Input, OnChanges, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * The external link directive.
+ *
+ * It catches links with href attributes and
+ * adds specific attributes if href has an external target.
+ */
+@Directive({
+ // tslint:disable-next-line:directive-selector
+ selector: 'a[href]'
+})
+export class ExternalLinkDirective implements OnChanges {
+ /**
+ * HostBinding: hrefAttr.
+ *
+ * It binds to a link's href attribute.
+ */
+ @HostBinding('attr.href') hrefAttr = '';
+
+ /**
+ * HostBinding: targetAttr.
+ *
+ * It binds to a link's target attribute.
+ */
+ @HostBinding('attr.target') targetAttr = '';
+
+ /**
+ * HostBinding: relAttr.
+ *
+ * It binds to a link's rel attribute.
+ */
+ @HostBinding('attr.rel') relAttr = '';
+
+ /**
+ * Input variable: href.
+ *
+ * It keeps the href value of a link.
+ */
+ @Input() href: string;
+
+ /**
+ * Constructor of the ExternalLinkDirective.
+ *
+ * It declares and injects a private instance of the Angular PLATFORM_ID.
+ *
+ * @param {PLATFORM_ID} platformId Instance of the Angular PLATFORM_ID.
+ */
+ constructor(@Inject(PLATFORM_ID) private platformId: string) {}
+
+ /**
+ * Angular life cycle hook: ngOnChanges.
+ *
+ * It checks for changes of the given input.
+ */
+ ngOnChanges() {
+ this.hrefAttr = this.href;
+
+ if (this.isExternalLink()) {
+ this.targetAttr = '_blank';
+ this.relAttr = 'noopener noreferrer';
+ }
+ }
+
+ /**
+ * Private method: isExternalLink.
+ *
+ * It detects if the app is running in the browser
+ * and if value of href attribute is included in location.hostname.
+ *
+ * @returns {boolean} Sets the isExternalLink flag.
+ */
+ private isExternalLink(): boolean {
+ return isPlatformBrowser(this.platformId) && !this.href.includes(location.hostname);
+ }
+}
diff --git a/src/app/shared/modal/modal.component.ts b/src/app/shared/modal/modal.component.ts
index fc50692d60..054fb35c8d 100644
--- a/src/app/shared/modal/modal.component.ts
+++ b/src/app/shared/modal/modal.component.ts
@@ -39,10 +39,10 @@ const MODALCONTENTSNIPPETS = {
hintEditionGraph:
'\n' +
' Hinweise zur Nutzung:
\n' +
- ' RDF Triples: Das Resource Description Framework (RDF) stellt grundlegende syntaktische und semantische Elemente zur Beschreibung digitaler Repräsentationen von Objekten (Ressourcen) zur Verfügung. Dabei folgt es einer dreigliedrigen Struktur der Form <SUBJEKT> <PRÄDIKAT> <OBJEKT>, die auch als Triple bezeichnet wird. Eine Menge solcher Triples kann als (gerichteter) Graph verstanden und visualisiert werden. Unter dem Punkt RDF Triples sind die für die vorliegende Graph-Visualisierung zugrundeliegenden RDF-Daten einsehbar und interaktiv lokal bearbeitbar. (Achtung: Änderungen werden von der AWG-APP nicht gespeichert und sollten bei Bedarf lokal gesichert werden.) Weiterführende Informationen zu RDF finden sich unter: https://www.w3.org/RDF/.
\n' +
- ' SPARQL Abfrage: Die SPARQL Protocol And RDF Query Language (SPARQL) stellt u.a. eine Abfragesprache für graph-basierte Datensätze bereit. Sie ermöglicht komplexe Abfragen und Manipulationen von in RDF dargestellten und strukturierten Daten. Dabei wird nach dem Prinzip des graph pattern matching der RDF-Graph nach einer angefragten Triple-Folge durchsucht. Unter dem Punkt SPARQL Abfrage lassen sich die Suchanfragen interaktiv anpassen. Einige Beispielabfragen sind bereits in einem Auswahl-Dropdown-Menü vorformuliert. Weiterführende Informationen zu SPARQL finden sich unter: https://www.w3.org/TR/sparql11-query/.
\n' +
+ ' RDF Triples: Das Resource Description Framework (RDF) stellt grundlegende syntaktische und semantische Elemente zur Beschreibung digitaler Repräsentationen von Objekten (Ressourcen) zur Verfügung. Dabei folgt es einer dreigliedrigen Struktur der Form <SUBJEKT> <PRÄDIKAT> <OBJEKT>, die auch als Triple bezeichnet wird. Eine Menge solcher Triples kann als (gerichteter) Graph verstanden und visualisiert werden. Unter dem Punkt RDF Triples sind die für die vorliegende Graph-Visualisierung zugrundeliegenden RDF-Daten einsehbar und interaktiv lokal bearbeitbar. (Achtung: Änderungen werden von der AWG-APP nicht gespeichert und sollten bei Bedarf lokal gesichert werden.) Weiterführende Informationen zu RDF finden sich unter: https://www.w3.org/RDF/.
\n' +
+ ' SPARQL Abfrage: Die SPARQL Protocol And RDF Query Language (SPARQL) stellt u.a. eine Abfragesprache für graph-basierte Datensätze bereit. Sie ermöglicht komplexe Abfragen und Manipulationen von in RDF dargestellten und strukturierten Daten. Dabei wird nach dem Prinzip des graph pattern matching der RDF-Graph nach einer angefragten Triple-Folge durchsucht. Unter dem Punkt SPARQL Abfrage lassen sich die Suchanfragen interaktiv anpassen. Einige Beispielabfragen sind bereits in einem Auswahl-Dropdown-Menü vorformuliert. Weiterführende Informationen zu SPARQL finden sich unter: https://www.w3.org/TR/sparql11-query/.
\n' +
'\n' +
- ' Resultat: Der durch die SPARQL Abfrage über die RDF Triples zurückgelieferte Datensatz wird unter dem Punkt Resultat als dynamisches Graph-Netzwerk aus bezeichneten Knoten und Kanten mit Hilfe der JavaScript-Bibliothek d3.js visualisiert. Die Darstellung ist zoom- und verschiebbar, die Position einzelner Knoten lässt sich ebenfalls durch "Ziehen" mit der Maus verändern. Die Anzahl der angezeigten Triples lässt sich je nach Größe des Ergebnis-Datensatzes über ein Auswahl-Dropdown-Menü filtern; in der Voreinstellung findet eine Beschränkung auf 50 Triples statt.
\n' +
+ ' Resultat: Der durch die SPARQL Abfrage über die RDF Triples zurückgelieferte Datensatz wird unter dem Punkt Resultat als dynamisches Graph-Netzwerk aus bezeichneten Knoten und Kanten mit Hilfe der JavaScript-Bibliothek d3.js visualisiert. Die Darstellung ist zoom- und verschiebbar, die Position einzelner Knoten lässt sich ebenfalls durch "Ziehen" mit der Maus verändern. Die Anzahl der angezeigten Triples lässt sich je nach Größe des Ergebnis-Datensatzes über ein Auswahl-Dropdown-Menü filtern; in der Voreinstellung findet eine Beschränkung auf 50 Triples statt.
\n' +
'
'
};
diff --git a/src/app/shared/open-street-map/open-street-map.component.html b/src/app/shared/open-street-map/open-street-map.component.html
index 5e53f7e327..60e403587f 100644
--- a/src/app/shared/open-street-map/open-street-map.component.html
+++ b/src/app/shared/open-street-map/open-street-map.component.html
@@ -9,6 +9,6 @@
diff --git a/src/app/shared/open-street-map/open-street-map.component.spec.ts b/src/app/shared/open-street-map/open-street-map.component.spec.ts
index 76682ac93d..453e2bfb20 100644
--- a/src/app/shared/open-street-map/open-street-map.component.spec.ts
+++ b/src/app/shared/open-street-map/open-street-map.component.spec.ts
@@ -6,6 +6,7 @@ import { cleanStylesFromDOM } from '@testing/clean-up-helper';
import { getAndExpectDebugElementByCss } from '@testing/expect-helper';
import { OpenStreetMapComponent } from './open-street-map.component';
+import { AppConfig } from '@awg-app/app.config';
describe('OpenStreetMapComponent (DONE)', () => {
let component: OpenStreetMapComponent;
@@ -18,7 +19,7 @@ describe('OpenStreetMapComponent (DONE)', () => {
let expectedUnsafeOsmEmbedUrl: string;
let expectedUnsafeOsmLinkUrl: string;
let expectedOsmEmbedUrl: SafeResourceUrl;
- let expectedOsmLinkUrl: SafeResourceUrl;
+ let expectedOsmLinkUrl: string;
let expectedOsmLinkLabel: string;
let expectedOsmIFrameSettings: { width; height; scrolling };
@@ -46,14 +47,12 @@ describe('OpenStreetMapComponent (DONE)', () => {
};
// unsafe link values for open streets map
- expectedUnsafeOsmEmbedUrl =
- 'https://www.openstreetmap.org/export/embed.html?bbox=7.582175731658936%2C47.55789611508066%2C7.586840093135835%2C47.56003739001212&layer=mapnik&marker=47.55896585846639%2C7.584506571292877';
- expectedUnsafeOsmLinkUrl =
- 'https://www.openstreetmap.org/?mlat=47.55897&mlon=7.58451#map=19/47.55897/7.58451';
+ expectedUnsafeOsmEmbedUrl = AppConfig.UNSAFE_OSM_EMBED_URL;
+ expectedUnsafeOsmLinkUrl = AppConfig.UNSAFE_OSM_LINK_URL;
// bypass the unsafe values
expectedOsmEmbedUrl = domSanitizer.bypassSecurityTrustResourceUrl(expectedUnsafeOsmEmbedUrl);
- expectedOsmLinkUrl = domSanitizer.bypassSecurityTrustResourceUrl(expectedUnsafeOsmLinkUrl);
+ expectedOsmLinkUrl = domSanitizer.sanitize(SecurityContext.URL, expectedUnsafeOsmLinkUrl);
});
afterAll(() => {
@@ -142,7 +141,7 @@ describe('OpenStreetMapComponent (DONE)', () => {
const linkEl = linkDes[0].nativeElement;
// sanitize the bypassed value
- const sanitizedLinkUrl = domSanitizer.sanitize(SecurityContext.RESOURCE_URL, expectedOsmLinkUrl);
+ const sanitizedLinkUrl = expectedOsmLinkUrl;
// check for the href attribute to contain the sanitized SafeResourceUrl
expect(linkEl.href).toBeDefined();
expect(linkEl.href).toBe(sanitizedLinkUrl, `should be ${sanitizedLinkUrl}`);
diff --git a/src/app/shared/open-street-map/open-street-map.component.ts b/src/app/shared/open-street-map/open-street-map.component.ts
index 8272713210..f94ff2fecb 100644
--- a/src/app/shared/open-street-map/open-street-map.component.ts
+++ b/src/app/shared/open-street-map/open-street-map.component.ts
@@ -28,7 +28,7 @@ export class OpenStreetMapComponent {
* It keeps the sanitized link to the OSM page.
*/
@Input()
- osmLinkUrl: SafeResourceUrl;
+ osmLinkUrl: string;
/**
* Public variable: osmLinkLabel.
diff --git a/src/app/shared/shared-ngbootstrap.module.ts b/src/app/shared/shared-ngbootstrap.module.ts
new file mode 100644
index 0000000000..782d41052d
--- /dev/null
+++ b/src/app/shared/shared-ngbootstrap.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import {
+ NgbAccordionModule,
+ NgbButtonsModule,
+ NgbCollapseModule,
+ NgbDropdownModule,
+ NgbModalModule,
+ NgbNavModule,
+ NgbPaginationModule,
+ NgbTooltipModule
+} from '@ng-bootstrap/ng-bootstrap';
+
+@NgModule({
+ imports: [
+ NgbAccordionModule,
+ NgbButtonsModule,
+ NgbCollapseModule,
+ NgbDropdownModule,
+ NgbModalModule,
+ NgbNavModule,
+ NgbPaginationModule,
+ NgbTooltipModule
+ ],
+ exports: [
+ NgbAccordionModule,
+ NgbButtonsModule,
+ NgbCollapseModule,
+ NgbDropdownModule,
+ NgbModalModule,
+ NgbNavModule,
+ NgbPaginationModule,
+ NgbTooltipModule
+ ]
+})
+export class SharedNgbootstrapModule {}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 6ad3a6c2e1..fb628e0275 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -8,18 +8,9 @@ import { RouterModule } from '@angular/router';
import { CompileHtmlModule } from './compile-html';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- NgbAccordionModule,
- NgbButtonsModule,
- NgbCollapseModule,
- NgbDropdownModule,
- NgbModalModule,
- NgbNavModule,
- NgbPaginationModule,
- NgbTooltipModule
-} from '@ng-bootstrap/ng-bootstrap';
import { NgxGalleryModule } from '@kolkov/ngx-gallery';
import { NgxJsonViewerModule } from 'ngx-json-viewer';
+import { SharedNgbootstrapModule } from '@awg-shared/shared-ngbootstrap.module';
//
// shared components
@@ -31,6 +22,10 @@ import { OpenStreetMapComponent } from './open-street-map/open-street-map.compon
import { RouterLinkButtonGroupComponent } from './router-link-button-group/router-link-button-group.component';
import { TwelveToneSpinnerComponent } from './twelve-tone-spinner/twelve-tone-spinner.component';
+//
+// shared directives
+import { ExternalLinkDirective } from './external-link/external-link.directive';
+
//
// shared pipes
import { OrderByPipe } from './order-by/order-by.pipe';
@@ -49,16 +44,9 @@ import { OrderByPipe } from './order-by/order-by.pipe';
CompileHtmlModule,
CodemirrorModule,
FontAwesomeModule,
- NgbAccordionModule,
- NgbButtonsModule,
- NgbCollapseModule,
- NgbDropdownModule,
- NgbModalModule,
- NgbNavModule,
- NgbPaginationModule,
- NgbTooltipModule,
NgxGalleryModule,
- NgxJsonViewerModule
+ NgxJsonViewerModule,
+ SharedNgbootstrapModule
],
declarations: [
AddressComponent,
@@ -68,6 +56,7 @@ import { OrderByPipe } from './order-by/order-by.pipe';
OpenStreetMapComponent,
RouterLinkButtonGroupComponent,
TwelveToneSpinnerComponent,
+ ExternalLinkDirective,
OrderByPipe
],
exports: [
@@ -78,16 +67,9 @@ import { OrderByPipe } from './order-by/order-by.pipe';
RouterModule,
CompileHtmlModule,
FontAwesomeModule,
- NgbAccordionModule,
- NgbButtonsModule,
- NgbCollapseModule,
- NgbDropdownModule,
- NgbModalModule,
- NgbNavModule,
- NgbPaginationModule,
- NgbTooltipModule,
NgxGalleryModule,
NgxJsonViewerModule,
+ SharedNgbootstrapModule,
AddressComponent,
HeadingComponent,
@@ -96,6 +78,7 @@ import { OrderByPipe } from './order-by/order-by.pipe';
OpenStreetMapComponent,
RouterLinkButtonGroupComponent,
TwelveToneSpinnerComponent,
+ ExternalLinkDirective,
OrderByPipe
]
})
diff --git a/src/app/side-info/contact-info/contact-info.component.spec.ts b/src/app/side-info/contact-info/contact-info.component.spec.ts
index b563eacdfa..f74707f938 100644
--- a/src/app/side-info/contact-info/contact-info.component.spec.ts
+++ b/src/app/side-info/contact-info/contact-info.component.spec.ts
@@ -1,14 +1,21 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, Input } from '@angular/core';
+import { Component, DebugElement, Input, SecurityContext } from '@angular/core';
import { BrowserModule, DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { cleanStylesFromDOM } from '@testing/clean-up-helper';
-import { getAndExpectDebugElementByCss, getAndExpectDebugElementByDirective } from '@testing/expect-helper';
+import Spy = jasmine.Spy;
-import { Meta, MetaContact, MetaPage, MetaSectionTypes, MetaStructure } from '@awg-core/core-models';
+import { cleanStylesFromDOM } from '@testing/clean-up-helper';
+import {
+ expectSpyCall,
+ getAndExpectDebugElementByCss,
+ getAndExpectDebugElementByDirective
+} from '@testing/expect-helper';
+
+import { AppConfig } from '@awg-app/app.config';
+import { MetaContact, MetaPage, MetaSectionTypes } from '@awg-core/core-models';
import { METADATA } from '@awg-core/mock-data';
-import { CoreService } from '@awg-core/services';
+import { CoreService } from '@awg-core/services';
import { ContactInfoComponent } from './contact-info.component';
// mock address component
@@ -26,7 +33,7 @@ class OpenStreetMapStubComponent {
@Input()
osmEmbedUrl: SafeResourceUrl;
@Input()
- osmLinkUrl: SafeResourceUrl;
+ osmLinkUrl: string;
}
describe('ContactInfoComponent (DONE)', () => {
@@ -35,6 +42,9 @@ describe('ContactInfoComponent (DONE)', () => {
let compDe: DebugElement;
let compEl;
+ let provideMetaDataSpy: Spy;
+ let sanitizeSpy: Spy;
+
let domSanitizer: DomSanitizer;
let mockCoreService: Partial;
@@ -45,7 +55,7 @@ describe('ContactInfoComponent (DONE)', () => {
let expectedUnsafeOsmEmbedUrl: string;
let expectedUnsafeOsmLinkUrl: string;
let expectedOsmEmbedUrl: SafeResourceUrl;
- let expectedOsmLinkUrl: SafeResourceUrl;
+ let expectedOsmLinkUrl: string;
const expectedContactInfoHeader = 'Kontakt';
@@ -73,20 +83,18 @@ describe('ContactInfoComponent (DONE)', () => {
expectedContactMetaData = METADATA[MetaSectionTypes.contact];
// unsafe link values for open streets map
- expectedUnsafeOsmEmbedUrl =
- 'https://www.openstreetmap.org/export/embed.html?bbox=7.582175731658936%2C47.55789611508066%2C7.586840093135835%2C47.56003739001212&layer=mapnik&marker=47.55896585846639%2C7.584506571292877';
- expectedUnsafeOsmLinkUrl =
- 'https://www.openstreetmap.org/?mlat=47.55897&mlon=7.58451#map=19/47.55897/7.58451';
+ expectedUnsafeOsmEmbedUrl = AppConfig.UNSAFE_OSM_EMBED_URL;
+ expectedUnsafeOsmLinkUrl = AppConfig.UNSAFE_OSM_LINK_URL;
// bypass the unsafe values
expectedOsmEmbedUrl = domSanitizer.bypassSecurityTrustResourceUrl(expectedUnsafeOsmEmbedUrl);
- expectedOsmLinkUrl = domSanitizer.bypassSecurityTrustResourceUrl(expectedUnsafeOsmLinkUrl);
+ expectedOsmLinkUrl = domSanitizer.sanitize(SecurityContext.URL, expectedUnsafeOsmLinkUrl);
// spies on component functions
// `.and.callThrough` will track the spy down the nested describes, see
// https://jasmine.github.io/2.0/introduction.html#section-Spies:_%3Ccode%3Eand.callThrough%3C/code%3E
- spyOn(component, 'provideMetaData').and.callThrough();
- spyOn(component, 'sanitizeUrls').and.callThrough();
+ provideMetaDataSpy = spyOn(component, 'provideMetaData').and.callThrough();
+ sanitizeSpy = spyOn(component, 'sanitizeUrls').and.callThrough();
});
afterAll(() => {
@@ -117,13 +125,13 @@ describe('ContactInfoComponent (DONE)', () => {
describe('#provideMetaData', () => {
it('... should not have been called', () => {
- expect(component.provideMetaData).not.toHaveBeenCalled();
+ expectSpyCall(provideMetaDataSpy, 0);
});
});
describe('#sanitizeUrls', () => {
it('... should not have been called', () => {
- expect(component.sanitizeUrls).not.toHaveBeenCalled();
+ expectSpyCall(sanitizeSpy, 0);
});
});
@@ -188,7 +196,7 @@ describe('ContactInfoComponent (DONE)', () => {
describe('#provideMetaData', () => {
it('... should have been called', () => {
- expect(component.provideMetaData).toHaveBeenCalled();
+ expectSpyCall(provideMetaDataSpy, 1);
});
it('... should return pageMetaData', () => {
@@ -204,7 +212,7 @@ describe('ContactInfoComponent (DONE)', () => {
describe('#sanitizeUrls', () => {
it('... should have been called', () => {
- expect(component.sanitizeUrls).toHaveBeenCalled();
+ expectSpyCall(sanitizeSpy, 1);
});
it('... should return osmEmbedUrl', () => {
diff --git a/src/app/side-info/contact-info/contact-info.component.ts b/src/app/side-info/contact-info/contact-info.component.ts
index 71d1b91bff..be33c69b86 100644
--- a/src/app/side-info/contact-info/contact-info.component.ts
+++ b/src/app/side-info/contact-info/contact-info.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { AppConfig } from '@awg-app/app.config';
@@ -40,46 +40,18 @@ export class ContactInfoComponent implements OnInit {
pageMetaData: MetaPage;
/**
- * Private variable: _osmEmbedUrl.
+ * Public variable: osmEmbedUrl.
*
* It keeps the sanitized link to embed the OSM map.
*/
- private _osmEmbedUrl: SafeResourceUrl;
+ osmEmbedUrl: SafeResourceUrl;
/**
- * Private variable: _osmLinkUrl.
+ * Public variable: osmLinkUrl.
*
* It keeps the sanitized link to the OSM page.
*/
- private _osmLinkUrl: SafeResourceUrl;
-
- /**
- * Getter for the sanitized OSM embed link.
- */
- get osmEmbedUrl() {
- return this._osmEmbedUrl;
- }
-
- /**
- * Setter for the sanitized OSM embed link.
- */
- set osmEmbedUrl(url: SafeResourceUrl) {
- this._osmEmbedUrl = url;
- }
-
- /**
- * Getter for the sanitized OSM external link.
- */
- get osmLinkUrl() {
- return this._osmLinkUrl;
- }
-
- /**
- * Setter for the sanitized OSM external link.
- */
- set osmLinkUrl(url: SafeResourceUrl) {
- this._osmLinkUrl = url;
- }
+ osmLinkUrl: string;
/**
* Constructor of the ContactInfoComponent.
@@ -117,16 +89,15 @@ export class ContactInfoComponent implements OnInit {
}
/**
- * Public method: sanitizeUrls.
+ * Private method: sanitizeUrls.
*
- * It sanitizes the URLs and links
- * for the OpenStreetMap
+ * It sanitizes the URLs and links for the OpenStreetMap
* using the Angular DomSanitizer.
*
* @returns {void} Sanitizes the URLs.
*/
- sanitizeUrls(): void {
+ private sanitizeUrls(): void {
this.osmEmbedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(AppConfig.UNSAFE_OSM_EMBED_URL);
- this.osmLinkUrl = this.sanitizer.bypassSecurityTrustResourceUrl(AppConfig.UNSAFE_OSM_LINK_URL);
+ this.osmLinkUrl = this.sanitizer.sanitize(SecurityContext.URL, AppConfig.UNSAFE_OSM_LINK_URL);
}
}
diff --git a/src/app/side-info/structure-info/structure-info.component.html b/src/app/side-info/structure-info/structure-info.component.html
index 4fb5a015a4..14b3008bac 100644
--- a/src/app/side-info/structure-info/structure-info.component.html
+++ b/src/app/side-info/structure-info/structure-info.component.html
@@ -6,9 +6,7 @@
Konzept/Grafik:
- {{
- (structureMetaData?.authors)[0].name
- }}
+ {{ (structureMetaData?.authors)[0].name }}
◇
diff --git a/src/app/views/contact-view/contact-view.component.html b/src/app/views/contact-view/contact-view.component.html
index d376ad0d09..4abb0d0786 100644
--- a/src/app/views/contact-view/contact-view.component.html
+++ b/src/app/views/contact-view/contact-view.component.html
@@ -11,9 +11,8 @@
Website:
{{ pageMetaData.awgProjectName }}. Projekt-Website:
-
- {{ pageMetaData?.awgProjectUrl }} , abgerufen am {{ today | date: dateFormat }} {{ pageMetaData?.awgProjectUrl }}
';
const geoLink =
- '' +
- geoIcon +
- '';
+ '';
- wikiLink =
- '' +
- wikiIcon +
- '';
+ wikiLink = '
- Prototyp AWG-Online-Edition
-
+