Password mask

[jasonlaw]

May I know how to add the password mask? I am using MudBlazor.

I have tried many ways but the password still rendered as text instead of password input type.

        formConfiguration = FormBuilder<LoginFormModel>
                               .Create()
                                    .AddEmailField(x => x.Email, label: "Email", placeholder: "Enter your email")
                                    .AddField(x => x.Password, field =>
                                    {
                                        field
                                        .WithLabel("Password")
                                        .Required("Password is required")
                                        .WithMinLength(8, $"Must be at least 8 characters")
                                        .WithPlaceholder("Enter your password")
                                        .WithInputType("password")
                                        .WithAttribute("InputType", "password")
                                        .WithAttribute("Mask", "*");
                                    })
                               .Build();

Besides, may I also know how to add a toggle icon inside the password textbox to show/hide the password?

Thanks in advance.

[jasonlaw]

After some more debugging, I found the text field is rendered from within the FormCraftComponent in the ForMudBlazor package.

I have tried to add the line to set the input type and it works. I am surprise because I would expect it should be rendered by MudBlazorTextFieldRenderer instead. Is this something expected or did I miss anything?

Btw, I also would expect there is a way extend the existing attributes to support for, eg, the Adornment, AdornmentIcon and etc...

private void RenderTextField(RenderTreeBuilder builder, IFieldConfiguration<TModel, object> field, string? value)
{
    builder.OpenComponent<MudTextField<string>>(0);
    AddCommonFieldAttributes(builder, field, 1);
    builder.AddAttribute(2, "Value", value);
    builder.AddAttribute(3, "ValueChanged",
        EventCallback.Factory.Create<string>(this,
            newValue => UpdateFieldValue(field.FieldName, newValue)));

    // Add Lines attribute for text area support
    if (field.AdditionalAttributes.TryGetValue("Lines", out var linesObj) && linesObj is int lines)
    {
        builder.AddAttribute(10, "Lines", lines);
    }

    // Add MaxLength attribute if present
    if (field.AdditionalAttributes.TryGetValue("MaxLength", out var maxLengthObj) && maxLengthObj is int maxLength)
    {
        builder.AddAttribute(11, "MaxLength", maxLength);
    }

    builder.AddAttribute(12, "Immediate", true);

    // Adding this line to set the input type
    if (field.InputType != null)
    {
        builder.AddAttribute(13, "InputType", FormCraftComponent<TModel>.GetInputType(field.InputType));
    }

    builder.CloseComponent();
}