Merge pull request #16807 from abpframework/masum/password-directive

AngularUI: Password & CapsLock directive created

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -12,7 +12,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management/config
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
 import { FeatureManagementModule } from '@abp/ng.feature-management';
 import { AccountConfigModule } from '@abp/ng.account/config';
-import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account/account-layout';
+import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';

npm/ng-packs/packages/core/src/lib/directives/caps-lock.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[abpCapsLock]',
+})
+export class TrackCapsLockDirective {
+  @Output('abpCapsLock') capsLock = new EventEmitter<Boolean>();
+
+  @HostListener('window:keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent): void {
+    this.capsLock.emit(this.isCapsLockOpen(event));
+  }
+  @HostListener('window:keyup', ['$event'])
+  onKeyUp(event: KeyboardEvent): void {
+    this.capsLock.emit(this.isCapsLockOpen(event));
+  }
+
+  isCapsLockOpen(e): boolean {
+    var s = String.fromCharCode(e.which);
+    if (
+      (s.toUpperCase() === s && s.toLowerCase() !== s && e.shiftKey) ||
+      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey) ||
+      e.getModifierState('CapsLock')
+    ) {
+      return true;
+    }
+    return false;
+  }
+}

npm/ng-packs/packages/core/src/lib/directives/index.ts

@@ -6,3 +6,5 @@ export * from './init.directive';
 export * from './permission.directive';
 export * from './replaceable-template.directive';
 export * from './stop-propagation.directive';
+export * from './show-password.directive';
+export * from './caps-lock.directive';

npm/ng-packs/packages/core/src/lib/directives/show-password.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Input, inject } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[abpShowPassword]',
+})
+export class ShowPasswordDirective {
+  protected readonly elementRef = inject(ElementRef);
+
+  @Input() set abpShowPassword(visible: boolean) {
+    const element = this.elementRef.nativeElement as HTMLInputElement;
+    if (!element) return;
+
+    element.type = visible ? 'text' : 'password';
+  }
+}