Feature: Show/Hide Password Toggle in Formulus

[Bahati308]

Component

• formulus (React Native mobile app)

• formulus-formplayer (React web app)

• synkronus (Go backend server)

• synkronus-cli (Command-line utility)

• Documentation

• Other (please specify)

Feature Description

Add the ability to show/hide password text in password input fields within Formulus(Particularly login). Users should be able to toggle password visibility using an eye icon button or similar control within the password input field.

Problem Statement

Currently, when users enter passwords in Formulus forms, the text is hidden by default (as expected for security), but there is no way for users to temporarily reveal the password to verify what they've typed. This can lead to:

1. User frustration when entering complex passwords, especially on mobile devices where typing errors are more common
2. Increased likelihood of password entry errors that may not be discovered until form submission
3. Poor user experience compared to standard mobile app password input patterns
4. Accessibility issues for users who need to verify their password input

Proposed Solution

1. Add a toggle button (eye icon) to the right side of password input fields in Formulus
2. When the eye icon is tapped, toggle between showing the password as plain text and hiding it with dots/asterisks
3. The default state should be "hidden" (secure)
4. The icon should visually indicate the current state (e.g., eye-open when password is visible, eye-closed when password is hidden)
5. This should work for all password input fields defined in form schemas (fields with format: "password" or type: "string" with password-related properties)

Alternatives Considered

1. Always show password: Not secure and goes against security best practices
2. Show password on long-press: Less discoverable and may not be intuitive for all users
3. Separate "show password" checkbox: Takes up additional UI space and is less elegant than an inline toggle
4. Auto-reveal on focus: Could be distracting and may reveal passwords unintentionally

Additional Context

• This is a standard UX pattern in modern mobile applications (iOS, Android, React Native apps)
• Many popular apps (banking, social media, productivity) implement this feature
• The implementation should follow React Native best practices and be consistent with Formulus's existing design system
• Consider accessibility: the toggle button should be properly labeled for screen readers
• The feature should work seamlessly with existing form validation and submission flows