feat(auth): add password visibility toggle

[Bahati308]

Pull Request Title

feat(formulus): add password visibility toggle to login form

Type of Change

• Bug Fix
• New Feature / Enhancement
• Refactor / Code Cleanup
• Documentation Update
• Maintenance / Chore / Dependency Update
• CI/CD or Build System Update
• Security Fix
• Style / Formatting (no logic changes)
• Performance Improvement
• Test Addition / Update
• Revert
• Other (please specify):

---

Component(s) Affected

• formulus (React Native mobile app)
• formulus-formplayer (React web app)
• synkronus (Go backend server)
• synkronus-cli (Command-line utility)
• Documentation
• DevOps / CI/CD (CI/CD Documentation)
• Dependencies / Build System
• Other:

---

Related Issue(s)

Closes/Fixes/Resolves:

Related:

closes #34

Description

Summary

Add reusable PasswordInput component with eye icon toggle for show/hide password functionality in the login form and other password input fields.

Changes Made

• Created new PasswordInput component at formulus/src/components/common/PasswordInput.tsx with visibility toggle functionality
• Added eye icon button (MaterialCommunityIcons) that toggles between eye and eye-off icons
• Implemented accessibility support with screen reader labels ("Show password" / "Hide password")
• Updated SettingsScreen.tsx to use the new PasswordInput component instead of plain TextInput with secureTextEntry
• Exported PasswordInput and PasswordInputProps from formulus/src/components/common/index.ts
• Component follows Formulus design system (spacing, colors, sizing)

---

Rationale / Context

Problem:

Users cannot verify their password input while typing in the login form, which can lead to login errors and poor user experience. There was no way to toggle password visibility in password input fields.

Solution:

Created a reusable PasswordInput component that:

• Defaults to hidden password (secureTextEntry = true)
• Provides an eye icon button on the right side of the input field
• Toggles between visible and hidden states when tapped
• Uses appropriate icons (eye-open when visible, eye-closed when hidden)
• Maintains full accessibility support for screen readers
• Can be used anywhere password inputs are needed in the app

Alternatives Considered:

• Adding toggle directly to SettingsScreen only (rejected - not reusable)
• Using a separate button outside the input field (rejected - less intuitive UX)
• Third-party library (rejected - unnecessary dependency for simple feature)

---

Testing Instructions

Prerequisites

• React Native development environment set up
• iOS or Android device/emulator running
• App built and running

Steps to Test

1. Navigate to Settings screen in the Formulus app
2. Locate the Password input field in the login form
3. Verify the password field shows an eye icon on the right side
4. Type a password - verify it's hidden by default (shows dots/asterisks)
5. Tap the eye icon - verify password becomes visible (shows actual characters)
6. Tap the eye icon again - verify password becomes hidden again
7. Verify the icon changes between eye (when hidden) and eye-off (when visible)
8. Test with screen reader enabled - verify accessibility labels are announced correctly
9. Verify validation and form submission still work correctly
10. Test on both iOS and Android platforms

Expected Behavior

• Password field should be hidden by default
• Eye icon should be visible on the right side of the input
• Tapping the icon should toggle visibility
• Icon should reflect current state (eye when hidden, eye-off when visible)
• Screen reader should announce "Show password" or "Hide password" appropriately
• Form validation and submission should work as before

Test Coverage

• Unit tests added/updated
• Integration tests added/updated
• End-to-end tests added/updated
• Manually tested on device(s) / browser(s)
• Tested on multiple platforms (iOS/Android/Web)
• Tested with different data sets
• Not applicable

Test Results

Manually tested on iOS and Android. Component works as expected with proper icon toggling and accessibility support.

---

Breaking Changes

• This PR introduces breaking changes
• This PR does NOT introduce breaking changes

If breaking changes, please describe:

N/A

Migration Steps:

N/A

---

Documentation Updates

• Documentation has been updated
• Documentation update is not required
• Documentation update will follow in a separate PR

Files Updated:

N/A

New Documentation:

N/A

---

Screenshots / Videos

Before

Password input field with only secureTextEntry - no way to view password while typing.

After

Password input field with eye icon toggle button on the right side, allowing users to show/hide password.

Screen.Recording.2025-12-11.at.18.20.31.mov

---

Performance Impact

• Performance improvement
• No performance impact
• Performance regression (explain below)

Details:

No performance impact. Component uses standard React Native components and state management.

---

Security Considerations

• Security improvement
• Security fix
• No security impact

Details:

Password visibility toggle is a standard UX pattern. Password remains secure by default (hidden), and users can choose to reveal it temporarily. This does not change the underlying security of password storage or transmission.

---

Checklist

Code Quality

• Code follows project style guidelines
• Code is self-documenting with clear variable/function names
• Comments added for complex logic
• No hardcoded values or magic numbers
• Error handling is appropriate

Testing

• All existing tests pass
• New tests added for new functionality
• Tests updated for changed functionality
• Manual testing completed
• Edge cases considered and tested

Linting & Formatting

• Linting passes (npm run lint / go fmt / etc.)
• Code formatted according to project standards
• No console.log statements left in code
• No commented-out code blocks
• No unused imports or variables

Git & PR Standards

• PR title follows Conventional Commits format
• Commit messages follow Conventional Commits format
• Branch naming follows project conventions
• Branch is up to date with main (or target branch)
• No merge conflicts
• Commits are logically organized
• All relevant labels added

Documentation

• README updated (if applicable)
• Component-specific READMEs updated:
  • formulus/README.md
  • formulus-formplayer/README.md
  • synkronus/README.md
  • synkronus-cli/README.md
• Code comments added/updated
• API documentation updated (if applicable)
• RELEASE.md updated (if applicable)
• Migration guide added (for breaking changes)

Review Readiness

• PR description is complete and clear
• All sections above are filled out
• Follows Contributing Guide standards
• Follows Code of Conduct
• Ready for review

---

Additional Notes

• Component is designed to be reusable and can be integrated into any form that requires password input
• Uses existing react-native-vector-icons dependency (MaterialCommunityIcons) - no new dependencies added
• Component handles custom styling while maintaining proper icon positioning
• Full TypeScript support with proper type definitions

---

Reviewer Notes

Suggested Reviewers:

Priority:

• Low
• Medium
• High
• Critical

---

Related PRs

---

[IamLRBA]

Looks good @Bahati308
If possible, for the colors and other values like padding and weights you an use the tokens sine we have them up and running.
Otherwise this is a nice addition!

[Bahati308]

Looks good @Bahati308 If possible, for the colors and other values like padding and weights you an use the tokens sine we have them up and running. Otherwise this is a nice addition!

Thanks @IamLRBA , to keep the PR easy for review and specific, (for now we can solve the issue at hand).

[r0ssing]

Looks great! Thanks