@krozamdev/svelte-masked-password

A lightweight, customizable masked password input component for Svelte. This component allows you to securely mask password input fields and provides a customizable approach to controlling password visibility.

The InputMaskingPassword component is a password input field that includes masking functionality (hiding characters as the user types) and allows toggling to show or hide the password. It uses the @krozamdev/masked-password library to apply the masking and supports custom mask characters. The component also handles password input changes by passing the raw (unmasked) value via a callback function.

Compatible Packages

Features

• Masked Input: Mask the entered password with a configurable mask character.
• Password Toggle: Option to show or hide the password input.
• TypeScript Support: Written in TypeScript for better type safety.
• Easy Integration: Can be easily integrated into any Svelte form.
• Lightweight: Minimal JavaScript bundle size for better performance.
• Cross-browser Compatibility: Works across modern browsers.

Installation

To install the package, use either npm or yarn:

• npm

  npm install @krozamdev/svelte-masked-password

• yarn

  yarn add @krozamdev/svelte-masked-password

• pnpm

  pnpm add @krozamdev/svelte-masked-password

• bun

  bun add @krozamdev/svelte-masked-password

Usage

Here’s an example of how to use the masked password input component in your Svelte project:

<script lang="ts">
  import InputMaskingPassword from '@krozamdev/svelte-masked-password';
  
  let password = "";
  let showPassword = false;

  const handlePasswordChange = (newPassword: string) => {
    password = newPassword;
    console.log("Password changed: ", password);
  };

  const toggleShowPassword = () => {
    showPassword = !showPassword;
  };
</script>

<main>
  <button on:click={toggleShowPassword}>
    {showPassword ? "Hide Password" : "Show Password"}
  </button>

  <InputMaskingPassword
    onChangeEvent={handlePasswordChange}
    maskCharacter="•"
    showPassword={showPassword}
    placeholder="Enter your password"
  />
</main>

Props

| Prop | Type | Description | |------------------|-----------------------------------------|--------------------------------------------------------------------------------------------------| | onChangeEvent | (originalValue: string) | Callback that fires when the password value changes. | | maskCharacter | string | (Optional) The character used to mask the password. Defaults to •. | | showPassword | boolean | (Optional) Show or hide the password input. Defaults to false. | | ...props | InputHTMLAttributes<HTMLInputElement> | All other standard HTML input attributes are supported, such as placeholder, class, etc. |

Development

To build the project locally:

1. Clone the repository:

   git clone https://github.com/krozamdev/svelte-masked-password.git
   cd svelte-masked-password

2. Install dependencies:

   yarn install

3. Run the build:

   yarn build

This will create the build output in the dist directory.

Contributing

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/my-feature).
3. Commit your changes (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature/my-feature).
5. Create a new Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

For support, please email [email protected].