Fixed #1286 - hideIcon and showIcon for Password

primefaces · May 21, 2021 · e562d95 · e562d95
1 parent 93c57ca
commit e562d95
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
@@ -13,6 +13,8 @@ declare class Password extends Vue {
     toggleMask?: boolean;
     inputStyle?: any;
     inputClass?: string;
+    hideIcon?: string;
+    showIcon?: string;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'focus', event: Event): this;
     $emit(eventName: 'blur', event: Event): this;

diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
@@ -61,6 +61,14 @@ export default {
             type: Boolean,
             default: false
         },
+        hideIcon: {
+            type: String,
+            default: 'pi pi-eye-slash'
+        },
+        showIcon: {
+            type: String,
+            default: 'pi pi-eye'
+        },
         inputClass: null,
         inputStyle: null,
         styles: null,
@@ -256,7 +264,7 @@ export default {
             }];
         },
         toggleIconClass() {
-            return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
+            return this.unmasked ? this.hideIcon : this.showIcon;
         },
         strengthClass() {
             return `p-password-strength ${this.meter ? this.meter.strength : ''}`;

diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
@@ -142,6 +142,18 @@ import Password from 'primevue/password';
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Style class of the input field.</td>
+                            </tr>
+                            <tr>
+                                <td>hideIcon</td>
+                                <td>string</td>
+                                <td>pi pi-eye-slash</td>
+                                <td>Icon to hide displaying the password as plain text.</td>
+                            </tr>
+                            <tr>
+                                <td>showIcon</td>
+                                <td>string</td>
+                                <td>pi pi-eye</td>
+                                <td>Icon to show displaying the password as plain text.</td>
                             </tr>
 						</tbody>
 					</table>