support passwork peaking

klippa-app · Jul 19, 2024 · 98adaa3 · 98adaa3
1 parent eb59430
commit 98adaa3
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -11,6 +11,13 @@
 				<klp-form-error error="async"></klp-form-error>
 			</klp-form-element>
 
+			<klp-form-element caption="Password" spaceDistribution="34-66" direction="vertical">
+				<klp-form-text-input type="password" formControlName="name" [clearable]="true" [passwordPeakIcon]="peakIcon">
+				</klp-form-text-input>
+				<ng-template #peakIcon>E</ng-template>
+				<klp-form-error error="async"></klp-form-error>
+			</klp-form-element>
+
 			<klp-form-element caption="Name aap noot mies" spaceDistribution="30-70" direction="horizontal">
 				<klp-form-text-input formControlName="name2" [clearable]="true">
 				</klp-form-text-input>

diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.22.2",
+  "version": "14.22.3",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.html
@@ -3,7 +3,7 @@
 		<i class="ti-search" *ngIf="icon === 'search'"></i>
 	</ng-container>
 	<input
-		[type]="type"
+		[type]="getType()"
 		[(ngModel)]="innerValue"
 		[ngClass]="{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}"
 		(input)="setInnerValueAndNotify($event.target.value)"
@@ -15,5 +15,8 @@
 	<div class="tail">
 		<ng-container [ngTemplateOutlet]="getTailTpl()"></ng-container>
 		<div class="clearIcon" *ngIf="clearable && innerValue?.length > 0" (click)="resetToNull()">×</div>
+		<button class="peakBtn" (click)="togglePeakPassword()" *ngIf="passwordPeakIcon && type === 'password'">
+			<ng-container [ngTemplateOutlet]="passwordPeakIcon"></ng-container>
+		</button>
 	</div>
 </div>
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.scss
@@ -56,6 +56,13 @@ input {
 	}
 }
 
+.peakBtn {
+	border: none;
+	background: transparent;
+	height: 100%;
+	padding: 0;
+}
+
 .showErrors {
 	border-color: $default-warning;
 }
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, TemplateRef} from '@angular/core';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
 import {ValueAccessorBase} from '../value-accessor-base/value-accessor-base.component';
 
@@ -9,11 +9,25 @@ import {ValueAccessorBase} from '../value-accessor-base/value-accessor-base.comp
 	providers: [{provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true}],
 })
 export class TextInputComponent extends ValueAccessorBase<string> {
+	private isPeakingPassword = false;
+
 	@Input() placeholder: string;
 	@Input() type: 'text' | 'password' = 'text';
 	@Input() clearable = false;
 	@Input() icon: 'search';
 	@Input() hasBorderLeft = true;
 	@Input() hasBorderRight = true;
+	@Input() passwordPeakIcon: TemplateRef<any>;
 	@Output() onBlur = new EventEmitter<void>();
+
+	public togglePeakPassword(): void {
+		this.isPeakingPassword = !this.isPeakingPassword;
+	}
+
+	public getType(): 'text' | 'password' {
+		if (this.type === 'text') {
+			return 'text';
+		}
+		return this.isPeakingPassword ? 'text' : 'password';
+	}
 }