Skip to main content

Design settings

Overview​

Design settings control visual customization options for the password reset forms. Currently, the plugin includes one design setting: the password visibility toggle (eye icon).

Access design settings at Settings > Frontend Reset Password > Design tab.

Password visibility toggle​

Enable Eye Toggle​

Setting: somfrp_enable_eye_toggle

Purpose: Show/hide an eye icon button that lets users toggle password visibility in the new password field.

Default: Enabled (checked)

Location: Appears next to the password input field on the password reset form (Stage 2)

Behavior:

  • Enabled: Eye icon button appears next to password field
  • Disabled: No eye icon, password field remains masked

How the eye toggle works​

When enabled, users see an eye icon button next to the password input field. Clicking the icon toggles between two states:

Hidden (default):

  • Password appears as dots (••••••••)
  • Eye icon shows "closed eye" or "eye with slash"
  • Input type: password

Visible:

  • Password appears as plain text
  • Eye icon shows "open eye"
  • Input type: text

This feature helps users verify they've typed their password correctly without needing to retype it in a confirmation field.

User experience benefits​

Reduces errors: Users can verify their password is typed correctly before submitting

Improves accessibility: Users with dyslexia or typing difficulties can check their input

Increases confidence: Users feel more confident they've entered the correct password

Mobile-friendly: Particularly helpful on mobile devices where typing is more error-prone

Security considerations​

Is it secure? Yes. The eye toggle is a client-side UI feature that doesn't affect password security:

  • Password is still transmitted securely (HTTPS)
  • Password is still hashed before storage
  • Password is never exposed to server logs
  • Only the user can see their own password on their own screen

Privacy concern: Someone looking over the user's shoulder could see the password when visible. This is why the default state is hidden, and users must actively click to reveal.

Implementation details​

The eye toggle is implemented using JavaScript in the password reset form template:

Template: templates/lost_password_reset_form.php

JavaScript: Lines 155-177 handle the toggle functionality

HTML structure:

<div class="password-input-wrapper">
  <input type="password" id="pass1" name="pass1" />
  <button type="button" class="toggle-password" aria-label="Show password">
    <span class="eye-icon">👁️</span>
  </button>
</div>

Toggle logic:

toggleButton.addEventListener('click', function() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    toggleButton.setAttribute('aria-label', 'Hide password');
  } else {
    passwordInput.type = 'password';
    toggleButton.setAttribute('aria-label', 'Show password');
  }
});

Styling the eye toggle​

The eye toggle includes default styles, but you can customize its appearance using CSS:

Button class: .toggle-password Icon class: .eye-icon Wrapper class: .password-input-wrapper

Example custom CSS:

/* Change eye icon color */
.toggle-password {
  color: #0073aa;
}

/* Change eye icon on hover */
.toggle-password:hover {
  color: #005177;
}

/* Position eye icon */
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

Add custom CSS to your theme's stylesheet or use the WordPress Customizer's Additional CSS section.

Accessibility​

The eye toggle is designed with accessibility in mind:

ARIA labels: Button includes aria-label that changes based on state ("Show password" / "Hide password")

Keyboard accessible: Button can be activated with Enter or Space key

Screen reader friendly: Screen readers announce the button's purpose and state

Focus visible: Button shows focus indicator for keyboard navigation

Browser compatibility​

The eye toggle works in all modern browsers:

  • Chrome/Edge (Chromium): ✓
  • Firefox: ✓
  • Safari: ✓
  • Mobile browsers: ✓
  • Internet Explorer 11: ✓ (with polyfills)

The feature degrades gracefully—if JavaScript is disabled, the password field works normally without the toggle.

Disabling the eye toggle​

To disable the eye toggle:

  1. Navigate to Settings > Frontend Reset Password > Design
  2. Uncheck Enable Eye Toggle
  3. Click Save Changes

The eye icon will no longer appear on the password reset form.

When to disable:

  • Your organization's security policy prohibits password visibility toggles
  • You prefer users to use the confirm password field for verification
  • You want a simpler, more traditional password input experience

Confirm password field​

The password reset form includes both a password field and a confirm password field. The eye toggle only affects the first password field (where users enter their new password).

Both fields are required: Users must enter the same password in both fields for the form to submit successfully.

Validation: Server-side validation ensures both passwords match before allowing the password change.

Future design settings​

The design settings section is designed to accommodate additional visual customization options in future plugin updates. Potential future settings might include:

  • Custom color schemes
  • Form layout options
  • Button styling
  • Typography controls
  • Animation preferences

Check for new design settings in future plugin releases.

Testing design settings​

After configuring design settings:

  1. Log out of WordPress (or use incognito mode)
  2. Navigate to your password reset page
  3. Request a password reset for a test account
  4. Click the reset link in the email
  5. Verify the eye toggle appears (if enabled) or doesn't appear (if disabled)
  6. Click the eye toggle to verify it shows/hides the password
  7. Test keyboard navigation to the eye toggle button
  8. Test with a screen reader if possible

Troubleshooting​

Eye toggle doesn't appear​

Problem: Eye icon button is missing from password field.

Causes:

  • Setting is disabled in Design settings
  • JavaScript error preventing toggle from rendering
  • Theme CSS hiding the button

Solution: Verify setting is enabled. Check browser console for JavaScript errors. Inspect element to see if button exists but is hidden by CSS.

Eye toggle doesn't work​

Problem: Clicking eye icon doesn't show/hide password.

Causes:

  • JavaScript error preventing toggle functionality
  • Conflicting JavaScript from theme or plugin

Solution: Check browser console for errors. Disable other plugins temporarily to identify conflicts.

Eye toggle styling conflicts with theme​

Problem: Eye icon appears in wrong position or has broken styling.

Causes:

  • Theme CSS conflicts with plugin styles
  • Theme uses different input field structure

Solution: Add custom CSS to fix positioning. Consider creating a template override for complete control.

What's next​