From 62724a0c2be6eaeec1eafab719646be1c7e1afb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= <cipchk@qq.com>
Date: Mon, 5 Nov 2018 15:26:37 +0800
Subject: [PATCH] feat(module:theme): add url pipe (#254)

---
 packages/theme/public_api.ts                  |  2 +
 packages/theme/src/pipes/html/index.en-US.md  |  7 ----
 packages/theme/src/pipes/html/index.zh-CN.md  |  7 ----
 .../pipes/{html => safe}/html.pipe.spec.ts    |  0
 .../src/pipes/{html => safe}/html.pipe.ts     |  0
 packages/theme/src/pipes/safe/index.en-US.md  | 21 ++++++++++
 packages/theme/src/pipes/safe/index.zh-CN.md  | 21 ++++++++++
 .../theme/src/pipes/safe/url.pipe.spec.ts     | 38 +++++++++++++++++++
 packages/theme/src/pipes/safe/url.pipe.ts     | 11 ++++++
 packages/theme/src/theme.module.ts            |  5 ++-
 10 files changed, 96 insertions(+), 16 deletions(-)
 delete mode 100644 packages/theme/src/pipes/html/index.en-US.md
 delete mode 100644 packages/theme/src/pipes/html/index.zh-CN.md
 rename packages/theme/src/pipes/{html => safe}/html.pipe.spec.ts (100%)
 rename packages/theme/src/pipes/{html => safe}/html.pipe.ts (100%)
 create mode 100644 packages/theme/src/pipes/safe/index.en-US.md
 create mode 100644 packages/theme/src/pipes/safe/index.zh-CN.md
 create mode 100644 packages/theme/src/pipes/safe/url.pipe.spec.ts
 create mode 100644 packages/theme/src/pipes/safe/url.pipe.ts

diff --git a/packages/theme/public_api.ts b/packages/theme/public_api.ts
index 975305ec8..1b726c650 100644
--- a/packages/theme/public_api.ts
+++ b/packages/theme/public_api.ts
@@ -18,6 +18,8 @@ export { DatePipe } from './src/pipes/date/date.pipe';
 export { CNCurrencyPipe } from './src/pipes/currency/cn-currency.pipe';
 export { KeysPipe } from './src/pipes/keys/keys.pipe';
 export { YNPipe } from './src/pipes/yn/yn.pipe';
+export { HTMLPipe } from './src/pipes/safe/html.pipe';
+export { URLPipe } from './src/pipes/safe/url.pipe';
 export { AlainThemeConfig } from './src/theme.config';
 export { AlainThemeModule } from './src/theme.module';
 export { VERSION } from './src/version';
diff --git a/packages/theme/src/pipes/html/index.en-US.md b/packages/theme/src/pipes/html/index.en-US.md
deleted file mode 100644
index dfc498529..000000000
--- a/packages/theme/src/pipes/html/index.en-US.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-order: 1
-title: html-Safe HTML
-type: Pipe
----
-
-Simplify the use of `bypassSecurityTrustHtml`.
diff --git a/packages/theme/src/pipes/html/index.zh-CN.md b/packages/theme/src/pipes/html/index.zh-CN.md
deleted file mode 100644
index c8d469ff0..000000000
--- a/packages/theme/src/pipes/html/index.zh-CN.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-order: 1
-title: html-安全HTML
-type: Pipe
----
-
-简化 `bypassSecurityTrustHtml` 的使用。
diff --git a/packages/theme/src/pipes/html/html.pipe.spec.ts b/packages/theme/src/pipes/safe/html.pipe.spec.ts
similarity index 100%
rename from packages/theme/src/pipes/html/html.pipe.spec.ts
rename to packages/theme/src/pipes/safe/html.pipe.spec.ts
diff --git a/packages/theme/src/pipes/html/html.pipe.ts b/packages/theme/src/pipes/safe/html.pipe.ts
similarity index 100%
rename from packages/theme/src/pipes/html/html.pipe.ts
rename to packages/theme/src/pipes/safe/html.pipe.ts
diff --git a/packages/theme/src/pipes/safe/index.en-US.md b/packages/theme/src/pipes/safe/index.en-US.md
new file mode 100644
index 000000000..f043e300f
--- /dev/null
+++ b/packages/theme/src/pipes/safe/index.en-US.md
@@ -0,0 +1,21 @@
+---
+order: 1
+title: safe-XSS
+type: Pipe
+---
+
+## html
+
+Simplify the use of `bypassSecurityTrustHtml`.
+
+```html
+<div [innerHTML]="content | html"></div>
+```
+
+## url
+
+Simplify the use of `bypassSecurityTrustUrl`.
+
+```html
+<a [href]="file_url | url" target="_blank"></a>
+```
diff --git a/packages/theme/src/pipes/safe/index.zh-CN.md b/packages/theme/src/pipes/safe/index.zh-CN.md
new file mode 100644
index 000000000..2e80a3654
--- /dev/null
+++ b/packages/theme/src/pipes/safe/index.zh-CN.md
@@ -0,0 +1,21 @@
+---
+order: 1
+title: safe-XSS
+type: Pipe
+---
+
+## html
+
+简化 `bypassSecurityTrustHtml` 的使用。
+
+```html
+<div [innerHTML]="content | html"></div>
+```
+
+## url
+
+简化 `bypassSecurityTrustUrl` 的使用。
+
+```html
+<a [href]="file_url | url" target="_blank"></a>
+```
diff --git a/packages/theme/src/pipes/safe/url.pipe.spec.ts b/packages/theme/src/pipes/safe/url.pipe.spec.ts
new file mode 100644
index 000000000..4b0d9b5d7
--- /dev/null
+++ b/packages/theme/src/pipes/safe/url.pipe.spec.ts
@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { AlainThemeModule } from '../../theme.module';
+
+describe('Pipe: url', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AlainThemeModule.forRoot()],
+      declarations: [TestComponent],
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  [
+    { value: '', result: `` },
+    { value: 'https://ng-alain.com', result: `https://ng-alain.com` },
+  ].forEach((item: any) => {
+    it(`${item.value.toString()} muse be ${item.result}`, () => {
+      fixture.componentInstance.value = item.value;
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.css('#result'))
+        .nativeElement as HTMLElement;
+      expect(el.attributes.getNamedItem('href').textContent).toBe(item.result);
+    });
+  });
+});
+
+@Component({
+  template: `<a id="result" [href]="value | url"></a>`,
+})
+class TestComponent {
+  value = '';
+}
diff --git a/packages/theme/src/pipes/safe/url.pipe.ts b/packages/theme/src/pipes/safe/url.pipe.ts
new file mode 100644
index 000000000..01cd57398
--- /dev/null
+++ b/packages/theme/src/pipes/safe/url.pipe.ts
@@ -0,0 +1,11 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'url' })
+export class URLPipe implements PipeTransform {
+  constructor(private dom: DomSanitizer) {}
+
+  transform(url: string): string {
+    return url ? this.dom.bypassSecurityTrustUrl(url) as any : '';
+  }
+}
diff --git a/packages/theme/src/theme.module.ts b/packages/theme/src/theme.module.ts
index d163801dc..1db2c0362 100644
--- a/packages/theme/src/theme.module.ts
+++ b/packages/theme/src/theme.module.ts
@@ -23,8 +23,9 @@ import { CNCurrencyPipe } from './pipes/currency/cn-currency.pipe';
 import { KeysPipe } from './pipes/keys/keys.pipe';
 import { YNPipe } from './pipes/yn/yn.pipe';
 import { I18nPipe } from './services/i18n/i18n.pipe';
-import { HTMLPipe } from './pipes/html/html.pipe';
-const PIPES = [DatePipe, CNCurrencyPipe, KeysPipe, YNPipe, I18nPipe, HTMLPipe];
+import { HTMLPipe } from './pipes/safe/html.pipe';
+import { URLPipe } from './pipes/safe/url.pipe';
+const PIPES = [DatePipe, CNCurrencyPipe, KeysPipe, YNPipe, I18nPipe, HTMLPipe, URLPipe];
 
 // #endregion