search

acronis / ui-component-library

The Acronis UI Component Library is a UI component library for Web applications based on Vue.js v3
https://acronis.github.io/ui-component-library/
MIT License
20 stars 11 forks source link

Password component #139

Open leonid opened 1 month ago

leonid commented 1 month ago

A Password component is a UI element that allows users to input and manage passwords securely. Here are the key features a Password component should have:

  1. Masking: Display input characters as dots or asterisks to hide the password.
  2. Show/Hide Toggle: Option to toggle between showing and hiding the password.
  3. Customizable Styling: Support for custom styles and CSS classes to match the application's design.
  4. Validation: Support for password validation rules (e.g., minimum length, special characters).
  5. Strength Indicator: Visual indicator to show the strength of the entered password.
  6. Placeholder Text: Support for placeholder text to guide users on what to input.
  7. Disabled State: Option to disable the password input, preventing user interaction.
  8. Read-Only State: Option to make the password input read-only, allowing users to view but not edit the content.
  9. Events: Emit events for user interactions such as input, focus, blur, and change.
  10. Accessibility: Ensure the component is accessible with proper ARIA attributes and keyboard support.
  11. Label Association: Ability to associate a label with the password input for better accessibility.
  12. Default Value: Option to set a default value for the password input.
  13. Auto-Focus: Automatically focus the password input when the component is rendered.
  14. Error Indication: Visual indication of errors or validation issues.
  15. Theming: Support for different themes to match the application's design system.
  16. Auto-Complete: Option to enable or disable auto-completion of passwords.
  17. Password Generator: Option to generate a random secure password.
  18. Copy to Clipboard: Option to copy the entered password to the clipboard.
  19. Tooltip: Option to include tooltips for additional information or guidance.
  20. Inline Styles: Support for inline styles to apply specific styles directly to the password input.

Design

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=2983-20344

To be implemented