Merge pull request #15084 from abpframework/Issue-12591

Add hide show button to password field

npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts

@@ -12,7 +12,7 @@ export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany<IdentityUserD
     validators: () => [Validators.required, Validators.maxLength(256)],
   },
   {
-    type: ePropType.Password,
+    type: ePropType.PasswordInputGroup,
     name: 'password',
     displayName: 'AbpIdentity::Password',
     id: 'password',

npm/ng-packs/packages/tenant-management/src/lib/defaults/default-tenants-form-props.ts

@@ -21,7 +21,7 @@ export const DEFAULT_TENANTS_CREATE_FORM_PROPS = FormProp.createMany<
     validators: () => [Validators.required, Validators.maxLength(256), Validators.email],
   },
   {
-    type: ePropType.Password,
+    type: ePropType.PasswordInputGroup,
     name: 'adminPassword',
     displayName: 'AbpTenantManagement::DisplayName:AdminPassword',
     id: 'admin-password',

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -138,6 +138,21 @@
         class="form-control"
       ></textarea>
     </ng-template>
+
+    <ng-template ngSwitchCase="passwordinputgroup">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <abp-password
+        *abpReplaceableTemplate="{
+          componentKey: passwordKey,
+          inputs: {
+            inputId: { value: prop.id },
+            formControlName: { value: prop.name }
+          }
+        }"
+        [inputId]="prop.id"
+        [formControlName]="prop.name"
+      ></abp-password>
+    </ng-template>
   </div>
 </ng-container>
 

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -32,6 +32,7 @@ import { FormProp } from '../../models/form-props';
 import { PropData } from '../../models/props';
 import { selfFactory } from '../../utils/factory.util';
 import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
+import { eThemeSharedComponents } from '../../enums/components';
 
 @Component({
   selector: 'abp-extensible-form-prop',
@@ -70,6 +71,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   typeaheadModel: any;
 
+  passwordKey = eThemeSharedComponents.PasswordComponent;
+
   private readonly form: UntypedFormGroup;
 
   disabledFn = (data: PropData) => false;
@@ -161,6 +164,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
         return 'time';
       case ePropType.Typeahead:
         return 'typeahead';
+      case ePropType.PasswordInputGroup:
+        return 'passwordinputgroup';
       default:
         return prop.options ? 'select' : 'input';
     }
@@ -179,6 +184,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
         return 'email';
       case ePropType.Password:
         return 'password';
+      case ePropType.PasswordInputGroup:
+        return 'passwordinputgroup';
       default:
         return 'hidden';
     }

npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/components.ts

@@ -0,0 +1,3 @@
+export const enum eThemeSharedComponents {
+  PasswordComponent = 'ThemeShared.Extensions.PasswordComponent',
+}

npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts

@@ -8,6 +8,7 @@ export const enum ePropType {
   MultiSelect = 'multiselect',
   Number = 'number',
   Password = 'password',
+  PasswordInputGroup = 'passwordinputgroup',
   String = 'string',
   Text = 'text',
   Time = 'time',

npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts

@@ -11,6 +11,7 @@ export * from './lib/constants/extra-properties';
 export * from './lib/directives/disabled.directive';
 export * from './lib/directives/prop-data.directive';
 export * from './lib/enums/props.enum';
+export * from './lib/enums/components';
 export {
   ActionCallback,
   ActionList,

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -10,3 +10,4 @@ export * from './modal/modal-ref.service';
 export * from './modal/modal.component';
 export * from './toast-container/toast-container.component';
 export * from './toast/toast.component';
+export * from './password/password.component';

npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html

@@ -0,0 +1,19 @@
+<div class="input-group" validationTarget>
+  <input
+    [type]="fieldTextType ? 'text' : 'password'"
+    class="form-control"
+    [id]="inputId"
+    [(ngModel)]="value"
+  />
+
+  <button class="btn btn-secondary" type="button">
+    <i
+      class="fa"
+      [ngClass]="{
+        'fa-eye-slash': !fieldTextType,
+        'fa-eye': fieldTextType
+      }"
+      (click)="toggleFieldTextType()"
+    ></i>
+  </button>
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts

@@ -0,0 +1,28 @@
+import { Component, forwardRef, Injector, Input } from '@angular/core';
+import { AbstractNgModelComponent } from '@abp/ng.core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'abp-password',
+  templateUrl: `password.component.html`,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PasswordComponent),
+      multi: true,
+    },
+  ],
+})
+export class PasswordComponent extends AbstractNgModelComponent {
+  @Input() inputId!: string;
+  @Input() formControlName!: string;
+  fieldTextType: boolean;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  toggleFieldTextType() {
+    this.fieldTextType = !this.fieldTextType;
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -32,9 +32,10 @@ import { RootParams } from './models/common';
 import { NG_BOOTSTRAP_CONFIG_PROVIDERS } from './providers';
 import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
-import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
+import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
+import { PasswordComponent } from './components/password/password.component';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -46,6 +47,7 @@ const declarationsWithExports = [
   ModalComponent,
   ToastComponent,
   ToastContainerComponent,
+  PasswordComponent,
   NgxDatatableDefaultDirective,
   NgxDatatableListDirective,
   LoadingDirective,
@@ -61,7 +63,7 @@ const declarationsWithExports = [
     EllipsisModule,
   ],
   declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
-  exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
+  exports: [NgxDatatableModule, EllipsisModule, NgxValidateCoreModule, ...declarationsWithExports],
   providers: [DatePipe],
 })
 export class BaseThemeSharedModule {}