Marking external links.

src/Squidex/app/features/api/api-area.component.html

@@ -14,7 +14,7 @@
                 </a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="/api/content/{{appsState.appName}}/docs" target="_blank" rel="noopener">
+                <a class="nav-link" href="/api/content/{{appsState.appName}}/docs" sqxExternalLink>
                     Swagger
                 </a>
             </li>

src/Squidex/app/features/apps/pages/apps-page.component.html

@@ -52,7 +52,7 @@
             <div class="card-text">
                 <div>Start with our ready to use blog.</div>
                 <div>
-                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Blog" (click)="$event.stopPropagation()" target="_blank" rel="noopener">C#</a>
+                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Blog" (click)="$event.stopPropagation()" sqxExternalLink>C#</a>
                 </div>
             </div>
         </div>
@@ -69,7 +69,7 @@
             <div class="card-text">
                 <div>Create your profile page.</div>
                 <div>
-                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Profile" (click)="$event.stopPropagation()" target="_blank" rel="noopener">C#</a>
+                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Profile" (click)="$event.stopPropagation()" sqxExternalLink>C#</a>
                 </div>
             </div>
         </div>
@@ -86,7 +86,7 @@
             <div class="card-text">
                 <div>Create app for Squidex Identity.</div>
                 <div>
-                    <a href="https://github.com/Squidex/squidex-identity" (click)="$event.stopPropagation()" target="_blank" rel="noopener">Project</a>
+                    <a href="https://github.com/Squidex/squidex-identity" (click)="$event.stopPropagation()" sqxExternalLink>Project</a>
                 </div>
             </div>
         </div>

src/Squidex/app/features/apps/pages/onboarding-dialog.component.html

@@ -125,18 +125,18 @@
                 <h1>Awesome, now you know the basics!</h1>
 
                 <p>
-                    But that's not all of the support we can provide. <br />You can go to <a href="https://docs.squidex.io/" target="_blank" rel="noopener">https://docs.squidex.io/</a> to read more.
+                    But that's not all of the support we can provide. <br />You can go to <a href="https://docs.squidex.io/" sqxExternalLink>https://docs.squidex.io/></a> to read more.
                 </p>
                 <p>
                     Do you want to join our community?
                 </p>
 
                 <div>
-                    <a class="btn btn-success" href="https://support.squidex.io" target="_blank" rel="noopener">
+                    <a class="btn btn-success" href="https://support.squidex.io" sqxExternalLink>
                         Join our Forum
                     </a> &nbsp;
 
-                    <a class="btn btn-success" href="https://github.com/squidex/squidex" target="_blank" rel="noopener">
+                    <a class="btn btn-success" href="https://github.com/squidex/squidex" sqxExternalLink>
                         Join us on Github
                     </a>
                 </div>

src/Squidex/app/features/dashboard/pages/dashboard-page.component.html

@@ -26,13 +26,13 @@
                     </div>
                 </a>
 
-                <a class="card card-href" href="/api/docs" target="_blank" rel="noopener">
+                <a class="card card-href" href="/api/docs" sqxExternalLink="noicon">
                     <div class="card-body">
                         <div class="card-image">
                             <img src="/images/dashboard-api.png" />
                         </div>
 
-                        <h4 class="card-title">API Documentation</h4>
+                        <h4 class="card-title">API Documentation <i class="icon-external-link"></i></h4>
 
                         <div class="card-text">
                             Swagger compatible documentation for app management.
@@ -40,13 +40,13 @@
                     </div>
                 </a>
 
-                <a class="card card-href" href="https://support.squidex.io" target="_blank" rel="noopener">
+                <a class="card card-href" href="https://support.squidex.io" sqxExternalLink="noicon">
                     <div class="card-body">
                         <div class="card-image">
                             <img src="/images/dashboard-feedback.png" />
                         </div>
 
-                        <h4 class="card-title">Feedback & Support</h4>
+                        <h4 class="card-title">Feedback & Support <i class="icon-external-link"></i></h4>
 
                         <div class="card-text">
                             Provide feedback and request features to help us to improve Squidex.
@@ -54,13 +54,13 @@
                     </div>
                 </a>
 
-                <a class="card card-href" href="https://github.com/squidex/squidex" target="_blank" rel="noopener">
+                <a class="card card-href" href="https://github.com/squidex/squidex" sqxExternalLink="noicon">
                     <div class="card-body">
                         <div class="card-image">
                             <img src="/images/dashboard-github.png" />
                         </div>
 
-                        <h4 class="card-title">Github</h4>
+                        <h4 class="card-title">Github <i class="icon-external-link"></i></h4>
 
                         <div class="card-text">
                             Get the source code from Github and report bugs or ask for support.

src/Squidex/app/features/rules/pages/rules/actions/medium-action.component.html

@@ -8,7 +8,7 @@
             <input type="text" class="form-control" id="accessToken" formControlName="accessToken" />
 
             <small class="form-text text-muted">
-                The self issued access token. Can be created under <a target="_blank" rel="noopener" href="https://medium.com/me/settings">https://medium.com/me/settings</a>.
+                The self issued access token. Can be created under <a href="https://medium.com/me/settings" sqxExternalLink>https://medium.com/me/settings</a>.
             </small>
         </div>
     </div>
@@ -89,7 +89,7 @@
             <input type="text" class="form-control" id="publicationId" formControlName="publicationId" />
 
             <small class="form-text text-muted">
-                Optional publication id. Go to <a href="https://medium.com/[PUBLICATION]>?format=json" target="_blank" rel="noopener">https://medium.com/[PUBLICATION]?format=json</a> to fetch the id.
+                Optional publication id. Go to <a href="https://medium.com/[PUBLICATION]>?format=json" sqxExternalLink>https://medium.com/[PUBLICATION]?format=json</a> to fetch the id.
             </small>
         </div>
     </div>

src/Squidex/app/features/rules/pages/rules/rule-element.component.html

@@ -25,7 +25,7 @@
             </div>
 
             <div class="large-link" *ngIf="element.readMore">
-                <a [href]="element.readMore" (click)="$event.stopPropagation()" target="_blank" rel="noopener">Read More</a>
+                <a [href]="element.readMore" (click)="$event.stopPropagation()" sqxExternalLink>Read More</a>
             </div>
         </div>
     </div>

src/Squidex/app/features/rules/pages/rules/rules-page.component.html

@@ -89,7 +89,7 @@
         </a>
 
         <sqx-onboarding-tooltip helpId="help" [for]="helpLink" position="leftTop" after="180000">
-            Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank" rel="noopener">https://docs.squidex.io</a> for the full documentation.
+            Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" sqxExternalLink>https://docs.squidex.io</a> for the full documentation.
         </sqx-onboarding-tooltip>
     </ng-container>
 </sqx-panel>

src/Squidex/app/features/settings/pages/backups/backups-page.component.html

@@ -73,8 +73,8 @@
                             <div *ngIf="backup.stopped && !backup.isFailed">
                                 Download:
 
-                                <a href="{{backup | sqxBackupDownloadUrl}}" target="_blank" rel="noopener">
+                                <a href="{{backup | sqxBackupDownloadUrl}}" sqxExternalLink="noicon">
-                                    Ready
+                                    Ready <i class="icon-external-link"></i>
                                 </a>
                             </div>
                         </div>

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -111,7 +111,7 @@
             <h3>Using the command line interface (CLI)</h3>
     
             <div class="help-section">
-                Download the CLI here: <a href="https://github.com/Squidex/squidex-samples/releases" target="_blank">CLI Releases (Linux, OS X, Windows)</a>
+                Download the CLI here: <a href="https://github.com/Squidex/squidex-samples/releases" sqxExternalLink>CLI Releases (Linux, OS X, Windows)</a>
             </div>
     
             <div class="help-section">
@@ -129,7 +129,7 @@
             <h3>Using the C# Client Library</h3>
 
             <div class="help-section">
-                Get the nuget library from <a href="https://www.nuget.org/packages/Squidex.ClientLibrary/" target="_blank">nuget.org</a>
+                Get the nuget library from <a href="https://www.nuget.org/packages/Squidex.ClientLibrary/" sqxExternalLink>nuget.org</a>
             </div>
     
             <div class="help-section">

src/Squidex/app/features/settings/pages/plans/plans-page.component.html

@@ -72,7 +72,7 @@
                 </div>
 
                 <div *ngIf="plansState.hasPortal | async" class="billing-portal-link">
-                    Go to <a target="_blank" rel="noopener" href="{{portalUrl}}">Billing Portal</a> for payment history and subscription overview.
+                    Go to <a [href]="portalUrl" sqxExternalLink="noicon">Billing Portal</a> for payment history and subscription overview.
                 </div>
             </ng-container>
         </ng-container>

src/Squidex/app/framework/angular/external-link.directive.ts

@@ -0,0 +1,36 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[sqxExternalLink]'
+})
+export class ExternalLinkDirective implements AfterViewInit {
+    @Input('sqxExternalLink')
+    public type?: string;
+
+    constructor(
+        private readonly element: ElementRef<Element>,
+        private readonly renderer: Renderer2
+    ) {
+    }
+
+    public ngAfterViewInit() {
+        this.renderer.setAttribute(this.element.nativeElement, 'target', '_blank');
+        this.renderer.setAttribute(this.element.nativeElement, 'rel', 'noopener');
+
+        if (this.type !== 'noicon') {
+            const icon = this.renderer.createElement('i');
+
+            this.renderer.addClass(icon, 'icon-external-link');
+            this.renderer.addClass(icon, 'ml-1');
+
+            this.renderer.appendChild(this.element.nativeElement, icon);
+        }
+    }
+}

src/Squidex/app/framework/declarations.ts

@@ -49,6 +49,7 @@ export * from './angular/pipes/numbers.pipes';
 export * from './angular/routers/can-deactivate.guard';
 export * from './angular/routers/parent-link.directive';
 
+export * from './angular/external-link.directive';
 export * from './angular/hover-background.directive';
 export * from './angular/ignore-scrollbar.directive';
 export * from './angular/image-source.directive';

src/Squidex/app/framework/module.ts

@@ -21,6 +21,7 @@ import {
     ConfirmClickDirective,
     ControlErrorsComponent,
     CopyDirective,
+    ExternalLinkDirective,
     DarkenPipe,
     DatePipe,
     DateTimeEditorComponent,
@@ -105,6 +106,7 @@ import {
         DialogRendererComponent,
         DisplayNamePipe,
         DurationPipe,
+        ExternalLinkDirective,
         FileDropDirective,
         FileSizePipe,
         FocusOnInitDirective,
@@ -166,6 +168,7 @@ import {
         DialogRendererComponent,
         DisplayNamePipe,
         DurationPipe,
+        ExternalLinkDirective,
         FileDropDirective,
         FileSizePipe,
         FocusOnInitDirective,

src/Squidex/app/shared/components/asset.component.html

@@ -17,7 +17,7 @@
                     <div class="overlay-background"></div>
                     
                     <div class="overlay-menu">
-                        <a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank" rel="noopener" (click)="$event.stopPropagation()">
+                        <a class="file-download" [href]="asset | sqxAssetUrl" sqxExternalLink="noicon" (click)="$event.stopPropagation()">
                             <i class="icon-download"></i>
                         </a>
         
@@ -115,7 +115,7 @@
                 <img class="user-picture" [attr.title]="asset.lastModifiedBy | sqxUserNameRef" [attr.src]="asset.lastModifiedBy | sqxUserPictureRef" />
             </div>
             <div class="col col-actions text-right">
-                <a class="btn btn-text-secondary" [attr.href]="asset | sqxAssetUrl" target="_blank" rel="noopener" (click)="$event.stopPropagation()">
+                <a class="btn btn-text-secondary" [href]="asset | sqxAssetUrl" sqxExternalLink="noicon" (click)="$event.stopPropagation()">
                     <i class="icon-download"></i>
                 </a>
             </div>

src/Squidex/app/shared/components/search-form.component.html

@@ -70,7 +70,7 @@
         </div>
 
         <div class="link">
-            Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" target="_blank" rel="noopener">Documentation</a>.
+            Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>.
         </div>
     </div>
 </div>

src/Squidex/app/shell/pages/internal/internal-area.component.html

@@ -22,7 +22,7 @@
     <router-outlet></router-outlet>
 </div>
 
-<a class="support-button row no-gutters" href="https://support.squidex.io" target="_blank" rel="noopener">
+<a class="support-button row no-gutters" href="https://support.squidex.io" sqxExternalLink="noicon">
     <div class="col-auto support-icon">
         <i class="icon-support"></i>
     </div>