OnSive.MudPasswordInput 1.0.0-rc.1

Password Strength Component for Blazor using MudBlazor

This Blazor component provides a password input field with real-time strength validation using MudBlazor. The strength is visually represented by four colored bars and a textual description. Additionally, it provides guidelines for creating a strong password.

Roadmap for 1.0.0

• Bar count and text in dependency to total score #2
• Color dynamically by range between 0 and total score #1
• Custom colors #1
• More translations → open for suggestions #3
• Custom password rules 1.0.0-rc.1
• Colored bars for password strength 1.0.0-rc.1
• Show password button 1.0.0-rc.1
• Score system for password strength 1.0.0-rc.1

Features

• Password input with strength validation
• Strength represented by four bars (red to green)
• Visibility toggle for password field
• Checklist for improving password security
• Localization
  • english
  • german

See images on GitLab

Installation

1. Install the MudBlazor package via NuGet:

   dotnet add package OnSive.MudPasswordInput --version 1.0.0-rc.1
   

2. Add the stylesheet

   <link href="_content/OnSive.MudPasswordInput/OnSive.MudPasswordInput.css" rel="stylesheet"/>
   

3. Add MudBlazor (official MudBlazor installation guide)
4. Add the namespace to the _Imports.razor files

   @using OnSive.MudPasswordInput
   

Usage

Include the component in your Blazor page:

<MudPasswordInput @bind-Password="_password"
                  Checks="_checks"/>

@code{
    private string _password = "";

    private IEnumerable<PasswordRule> _checks =
    [
        PasswordRule.AtLeastXCharacters(6),
        PasswordRule.IncludeUppercase(), 
        PasswordRule.IncludeNumbers(), 
        PasswordRule.IncludeSpecialCharacters(),
        new PasswordRule()
        {
            Check = x => false,
            Description = "Foo Bar"
        }
    ];
}

[Parameter] public string Label { get; set; } = Localized.Password; // Sets the field label
[Parameter] public bool ShowDetails { get; set; } = true; // Sets weather the password strength checklist is visible or not
[Parameter] public string Password { get; set; } // The two-way bindable password
[Parameter] public Variant Variant { get; set; } // Default MudBlazor field variant parameter
[Parameter, EditorRequired] public IEnumerable<PasswordRule> Checks { get; set; } // The list of password strenth checks

Password Strength Criteria

Predefined:

• At least X characters
• Includes uppercase letters
• Includes numbers
• Uses special characters

Custom

Add your own

new PasswordRule()
{
    Description = "My description", // Can be localized like you do normally
    Func<string, bool> Check = x => FooBar(x) == true; // Your custom check logic
    int Score { get; set; } = 1; // Optional: Set the score for this check to influence the total password strenth more
}

License

This project is licensed under the MIT License.

Contribution

Feel free to submit issues and pull requests to improve the component.

Author

Developed by Hille (OnSive.net)

Third Party

• MudBlazor v8.0.0 [MIT]
• Aigamo.ResXGenerator v4.2.0 [MIT]