Feature Description

Password fields on the Register page and Account Settings (Security section) currently have no way to verify what has been typed. Adding a show/hide toggle (eye icon) would improve usability and reduce login/signup errors caused by mistyped passwords.

Feature Category

UI/UX Improvement

Problem Statement

Users cannot see what they are typing in password fields across two key areas:

1. Register page — Password and Confirm Password fields
2. Account Settings → Security section — Old Password, New Password, and Confirm New Password fields

This forces users to retype passwords blindly, leading to frustration especially when password requirements are strict (min 8 chars, uppercase, digit, special character).

Proposed Solution

Add an eye icon button as an end adornment to all password input fields that toggles between masked and visible text:

Files to update:

• packages/ui/src/ui-component/input/Input.jsx — add toggle support when inputParam.type === 'password' (covers Register page)
• packages/ui/src/views/account/index.jsx — add toggle to Old Password, New Password, and Confirm New Password fields (covers Account Settings)

The toggle should:

• Show an eye icon (hidden state) and eye-off icon (visible state)
• Use IconEye / IconEyeOff from @tabler/icons-react (already used in the codebase)
• Use IconButton + InputAdornment from MUI (already available)

Mockups or References

Current behavior: all password fields show only dots with no toggle option.

Expected behavior: an eye icon appears at the right end of each password field.
Clicking it reveals the password; clicking again hides it.

Reference: standard pattern used in most modern auth UIs (Gmail, GitHub, etc.)

Additional Context

This is a pure frontend change with no backend impact.
The @tabler/icons-react and MUI libraries needed are already dependencies in packages/ui.