diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md new file mode 100644 index 0000000000..64a3fc42ca --- /dev/null +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -0,0 +1,80 @@ +# Caps Lock Directive + +In password inputs, You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started + +`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component: + +**Importing to NgModule** +```ts +import { TrackCapsLockDirective } from '@abp/ng.core'; + +@NgModule({ + //... + declarations: [ + ..., + TestComponent + ], + imports: [ + ..., + TrackCapsLockDirective + ], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user. + +See an example usage: + +**NgModule Component usage** +```ts +@Component({ + selector: 'test-component', + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + capsLock = false; +} +``` + +**Standalone Component usage** +```ts +import { TrackCapsLockDirective } from '@abp/ng.core' + +@Component({ + selector: 'standalone-component', + standalone: true, + template: ` +
+ + + icon +
+ `, + imports: [TrackCapsLockDirective] +}) +export class StandaloneComponent{ + capsLock = false; +} +``` + +The `abpCapsLock` event has been added to the `` element. Press Caps Lock to activate the `TrackCapsLockDirective`. + +See the result: + +![Show Password directive](./images/CapsLockDirective1.png) + +To see Caps Lock icon press Caps Lock. + +![Show Password directive](./images/CapsLockDirective2.png) diff --git a/docs/en/UI/Angular/Show-Password-Directive.md b/docs/en/UI/Angular/Show-Password-Directive.md new file mode 100644 index 0000000000..c19c8073bd --- /dev/null +++ b/docs/en/UI/Angular/Show-Password-Directive.md @@ -0,0 +1,77 @@ +# Show Password Directive + +In password input, text can be shown easily via changing input type attribute to `text`. To make this even easier, you can use the `ShowPasswordDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started +`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component: + +**Importing to NgModule** +```ts +import { ShowPasswordDirective } from '@abp/ng.core'; + +@NgModule({ + //... + declarations: [ + ..., + TestComponent + ], + imports: [ + ..., + ShowPasswordDirective + ], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `ShowPasswordDirective` is very easy to use. The directive's selector is **`abpShowPassword`**. By adding the `abpShowPassword` attribute to an input element, you can activate the `ShowPasswordDirective` for the input element. + +See an example usage: + +**NgModule Component usage** +```ts +@Component({ + selector: 'test-component', + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + showPassword = false; +} +``` +**Standalone Component usage** +```ts +import { ShowPasswordDirective } from '@abp/ng.core'; +@Component({ + selector: 'standalone-component', + standalone: true, + template: ` +
+ + + icon +
+ `, + imports: [ShowPasswordDirective] +}) +export class StandaloneComponent{ + showPassword = false; +} +``` + +The `abpShowPassword` attribute has been added to the `` element. Click icon to activate the `ShowPasswordDirective`. + +See the result: + +![Show Password directive](./images/showPasswordDirective1.png) + +To see password input click icon. + +![Show Password directive](./images/showPasswordDirective2.png) diff --git a/docs/en/UI/Angular/images/CapsLockDirective1.png b/docs/en/UI/Angular/images/CapsLockDirective1.png new file mode 100644 index 0000000000..2f143d755f Binary files /dev/null and b/docs/en/UI/Angular/images/CapsLockDirective1.png differ diff --git a/docs/en/UI/Angular/images/CapsLockDirective2.png b/docs/en/UI/Angular/images/CapsLockDirective2.png new file mode 100644 index 0000000000..a46ad710f1 Binary files /dev/null and b/docs/en/UI/Angular/images/CapsLockDirective2.png differ diff --git a/docs/en/UI/Angular/images/showPasswordDirective1.png b/docs/en/UI/Angular/images/showPasswordDirective1.png new file mode 100644 index 0000000000..7b64be2b5f Binary files /dev/null and b/docs/en/UI/Angular/images/showPasswordDirective1.png differ diff --git a/docs/en/UI/Angular/images/showPasswordDirective2.png b/docs/en/UI/Angular/images/showPasswordDirective2.png new file mode 100644 index 0000000000..43199ffeaa Binary files /dev/null and b/docs/en/UI/Angular/images/showPasswordDirective2.png differ diff --git a/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts new file mode 100644 index 0000000000..3182dfa2dd --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts @@ -0,0 +1,57 @@ +import { Component, DebugElement } from '@angular/core' +import { ComponentFixture, TestBed } from '@angular/core/testing' +import { TrackCapsLockDirective } from '../directives'; +import { By } from '@angular/platform-browser'; + +@Component({ + standalone:true, + template: ` + + `, + imports:[TrackCapsLockDirective] +}) +class TestComponent { + capsLock:boolean = false +} + +describe('TrackCapsLockDirective',()=>{ + let fixture: ComponentFixture;; + let des : DebugElement[]; + + beforeEach(()=>{ + fixture = TestBed.configureTestingModule({ + imports: [ TestComponent ] + }).createComponent(TestComponent); + + fixture.detectChanges(); + + des = fixture.debugElement.queryAll(By.directive(TrackCapsLockDirective)); + }); + + test.each(['keydown','keyup'])('is %p works when press capslock and is emit status', (eventName) => { + const event = new KeyboardEvent(eventName, { + key: 'CapsLock', + modifierCapsLock: true + }); + window.dispatchEvent(event); + fixture.detectChanges(); + expect(fixture.componentInstance.capsLock).toBe(true) + }); + + test.each(['keydown','keyup'])('is %p detect the change capslock is emit status', (eventName) => { + const trueEvent = new KeyboardEvent(eventName, { + key: 'CapsLock', + modifierCapsLock: true + }); + window.dispatchEvent(trueEvent); + fixture.detectChanges(); + expect(fixture.componentInstance.capsLock).toBe(true) + const falseEvent = new KeyboardEvent(eventName, { + key: 'CapsLock', + modifierCapsLock: false + }); + window.dispatchEvent(falseEvent); + fixture.detectChanges(); + expect(fixture.componentInstance.capsLock).toBe(false) + }); + }); \ No newline at end of file diff --git a/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts new file mode 100644 index 0000000000..8babb472c4 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts @@ -0,0 +1,55 @@ +import { Component, DebugElement } from '@angular/core' +import { ComponentFixture, TestBed } from '@angular/core/testing' +import { ShowPasswordDirective } from '../directives'; +import { By } from '@angular/platform-browser'; + +@Component({ + standalone:true, + template: ` + + + + `, + imports:[ShowPasswordDirective] +}) +class TestComponent { + showPassword:boolean = false +} + +describe('ShowPasswordDirective',()=>{ + let fixture: ComponentFixture;; + let des : DebugElement[]; + let desAll : DebugElement[]; + let bareInput; + + beforeEach(()=>{ + fixture = TestBed.configureTestingModule({ + imports: [ TestComponent ] + }).createComponent(TestComponent) + + fixture.detectChanges(); + + des = fixture.debugElement.queryAll(By.directive(ShowPasswordDirective)); + + desAll = fixture.debugElement.queryAll(By.all()); + + bareInput = fixture.debugElement.query(By.css('input:not([abpShowPassword])')); + }) + + it('should have three input has ShowPasswordDirective elements', () => { + expect(des.length).toBe(3); + }); + + test.each([[0,'text'],[1,'password'],[2,'text'],[3,'password']])('%p. input type must be %p)', (index,inpType) => { + const inputType = desAll[index].nativeElement.type; + expect(inputType).toBe(inpType); + }); + + it('should have three input has ShowPasswordDirective elements', () => { + let input = des[2].nativeElement + expect(input.type).toBe('password') + fixture.componentInstance.showPassword = true + fixture.detectChanges() + expect(input.type).toBe('text') + }); + }); \ No newline at end of file