PasswordField Component

The PasswordField component in goobs-frontend is a specialized input field designed for secure password entry. It provides a user-friendly interface with a toggle to show/hide the password and various styling options.

Importing the Component

To use the PasswordField component in your project, import it from the goobs-frontend package:

import { PasswordField } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the PasswordField component:

import React from 'react';
import { PasswordField } from 'goobs-frontend';

const PasswordFieldExample: React.FC = () => {
  return (
    <PasswordField
      label="Enter Password"
    />
  );
};

export default PasswordFieldExample;

Props

The PasswordField component accepts the following props:

• backgroundcolor: string (optional) - Background color of the input field.
• outlinecolor: string (optional) - Color of the input field outline.
• fontcolor: string (optional) - Color of the text inside the input field.
• label: string (optional, default: 'Password') - Label for the input field.

Additionally, it supports all standard Material-UI TextField props except for type.

Features

1. Password Visibility Toggle: Includes a button to toggle between showing and hiding the password.
2. Customizable Styling: Supports custom colors for background, outline, and font.
3. Secure Input: Masks the password by default for security.
4. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

Styling

You can customize the appearance of the PasswordField component using the provided props. Here's an example with custom styling:

import React from 'react';
import { PasswordField } from 'goobs-frontend';

const StyledPasswordFieldExample: React.FC = () => {
  return (
    <PasswordField
      label="Custom Styled Password"
      backgroundcolor="#f0f0f0"
      outlinecolor="#3f51b5"
      fontcolor="#333"
    />
  );
};

export default StyledPasswordFieldExample;

Advanced Usage

With Form Validation

You can use the PasswordField component within a form with validation:

import React, { useState } from 'react';
import { PasswordField } from 'goobs-frontend';

const ValidatedPasswordFieldExample: React.FC = () => {
  const [password, setPassword] = useState('');
  const [error, setError] = useState<string | null>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newPassword = event.target.value;
    setPassword(newPassword);
    
    if (newPassword.length < 8) {
      setError('Password must be at least 8 characters long');
    } else if (!/\d/.test(newPassword)) {
      setError('Password must contain at least one number');
    } else if (!/[A-Z]/.test(newPassword)) {
      setError('Password must contain at least one uppercase letter');
    } else {
      setError(null);
    }
  };

  return (
    <PasswordField
      label="Enter a strong password"
      value={password}
      onChange={handleChange}
      error={!!error}
      helperText={error}
    />
  );
};

export default ValidatedPasswordFieldExample;

With Custom Icon

While the component uses a default eye icon for toggling password visibility, you can customize this by passing a custom icon component:

import React from 'react';
import { PasswordField } from 'goobs-frontend';
import { Visibility, VisibilityOff } from '@mui/icons-material';

const CustomIconPasswordFieldExample: React.FC = () => {
  return (
    <PasswordField
      label="Password with custom icon"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            {passwordVisible ? <Visibility /> : <VisibilityOff />}
          </InputAdornment>
        ),
      }}
    />
  );
};

export default CustomIconPasswordFieldExample;

Accessibility

The PasswordField component is designed with accessibility in mind:

• It uses proper labeling to describe the input field's purpose.
• The password visibility toggle is keyboard accessible.
• It supports screen readers for announcing the current input mode (password visible or hidden).

To further enhance accessibility:

1. Provide clear instructions for password requirements.
2. Ensure error messages are descriptive and helpful.
3. Consider adding ARIA live regions for dynamic feedback on password strength.

Best Practices

1. Clear Labels: Use descriptive labels to indicate the purpose of the password field.
2. Password Requirements: Clearly communicate password requirements to users.
3. Error Handling: Provide clear error messages for invalid inputs.
4. Security Considerations: Avoid storing or transmitting passwords in plain text.
5. Confirmation Fields: For important operations, consider using a password confirmation field.

Performance Considerations

The PasswordField component is generally lightweight, but keep in mind:

• Implement client-side password strength checking efficiently to avoid UI lag.
• For forms with multiple PasswordField components, consider implementing lazy validation.

Troubleshooting

1. Visibility Toggle Not Working: Ensure you haven't overridden the default InputProps in a way that removes the toggle functionality.
2. Styling Issues: Check the specificity of your CSS if custom styles are not applying correctly.
3. Validation Problems: Verify that your custom validation logic is functioning as expected and not interfering with the component's built-in behavior.

By leveraging these features and following the best practices, you can effectively use the PasswordField component in your goobs-frontend projects to create secure and user-friendly password input interfaces.