76 lines
2.6 KiB
Plaintext
76 lines
2.6 KiB
Plaintext
@*
|
|
EN: Dark-themed auth input with label, prefix icon, and action button (e.g., password toggle).
|
|
VI: Input xác thực dark theme với label, icon prefix, và action button (VD: toggle mật khẩu).
|
|
*@
|
|
|
|
<div class="auth-field">
|
|
@if (Label != null || ForgotPasswordLink != null)
|
|
{
|
|
<div class="auth-label-row">
|
|
@if (Label != null)
|
|
{
|
|
<label class="auth-label" for="@InputId">@Label</label>
|
|
}
|
|
@if (ForgotPasswordLink != null)
|
|
{
|
|
<a href="@ForgotPasswordLink" class="auth-label-link">@ForgotPasswordText</a>
|
|
}
|
|
</div>
|
|
}
|
|
<div class="auth-input-wrapper">
|
|
@if (PrefixIcon != null)
|
|
{
|
|
<span class="auth-input-icon">
|
|
<i data-lucide="@PrefixIcon"></i>
|
|
</span>
|
|
}
|
|
<input id="@InputId"
|
|
type="@_currentType"
|
|
class="auth-input @(PrefixIcon == null ? "auth-input--no-icon" : "")"
|
|
placeholder="@Placeholder"
|
|
value="@Value"
|
|
autocomplete="@AutoComplete"
|
|
@oninput="OnInput"
|
|
@onchange="OnChange" />
|
|
@if (InputType == "password")
|
|
{
|
|
<button type="button" class="auth-input-action" @onclick="TogglePassword" title="Toggle password visibility">
|
|
<i data-lucide="@(_showPassword ? "eye-off" : "eye")"></i>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private bool _showPassword = false;
|
|
private string _currentType => InputType == "password" && _showPassword ? "text" : InputType;
|
|
|
|
[Parameter] public string? Label { get; set; }
|
|
[Parameter] public string InputType { get; set; } = "text";
|
|
[Parameter] public string? Placeholder { get; set; }
|
|
[Parameter] public string? Value { get; set; }
|
|
[Parameter] public string? PrefixIcon { get; set; }
|
|
[Parameter] public string? InputId { get; set; }
|
|
[Parameter] public string? AutoComplete { get; set; }
|
|
[Parameter] public string? ForgotPasswordLink { get; set; }
|
|
[Parameter] public string ForgotPasswordText { get; set; } = "Quên mật khẩu?";
|
|
[Parameter] public EventCallback<ChangeEventArgs> ValueChanged { get; set; }
|
|
|
|
private async Task OnInput(ChangeEventArgs e)
|
|
{
|
|
Value = e.Value?.ToString();
|
|
await ValueChanged.InvokeAsync(e);
|
|
}
|
|
|
|
private async Task OnChange(ChangeEventArgs e)
|
|
{
|
|
Value = e.Value?.ToString();
|
|
await ValueChanged.InvokeAsync(e);
|
|
}
|
|
|
|
private void TogglePassword()
|
|
{
|
|
_showPassword = !_showPassword;
|
|
}
|
|
}
|