<div class="input-group">
    <input @oninput="OnInput" type="@GetInputType()" placeholder="@Placeholder" class="form-control" />
    <span class="input-group-text" @onclick="Toggle" style="cursor: pointer;">
        @if (shouldShow)
        {
            <i class="far fa-eye-slash"></i>
        }
        else
        {
            <i class="far fa-eye"></i>
        }
    </span>
</div>


@code {
    [Parameter]
    public string Value { get; set; }
    [Parameter]
    public string Placeholder { get; set; }
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private bool shouldShow = false;

    private string GetInputType()
    {
        return shouldShow ? "text" : "password";
    }

    private void Toggle()
    {
        shouldShow = !shouldShow;
    }

    private async Task OnInput(ChangeEventArgs args)
    {
        Value = (string)args.Value;
        await ValueChanged.InvokeAsync(Value);
    }
}