47 lines
1.4 KiB
Plaintext
47 lines
1.4 KiB
Plaintext
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
|
|
|
|
<div class="passcode-wrap" @attributes="InputAttributes">
|
|
<div class="passcode">
|
|
@for (var i = 1; i <= Length; i++)
|
|
{
|
|
<div class="dot @(Code.Length >= i ? "dot--filled" : null)"></div>
|
|
}
|
|
</div>
|
|
<div class="keypad">
|
|
@foreach (var key in Keys)
|
|
{
|
|
<button @onclick="@(e => KeyPress(key))" type="button" class="btn btn-secondary btn-lg" data-key="@key" disabled="@(key == 'C' && Code.Length == 0)">@key</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
static int Length = 6;
|
|
static char[] Keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0'];
|
|
private string Code { get; set; } = "";
|
|
|
|
public record PasscodeEntered(string Passcode);
|
|
|
|
[Parameter, EditorRequired]
|
|
public EventCallback<PasscodeEntered> OnPasscodeEntered { get; set; }
|
|
|
|
[Parameter(CaptureUnmatchedValues = true)]
|
|
public Dictionary<string, object>? InputAttributes { get; set; }
|
|
|
|
private async Task KeyPress(char key)
|
|
{
|
|
if (key == 'C')
|
|
{
|
|
if (Code.Length > 0)
|
|
Code = Code[..^1];
|
|
} else if (Code.Length < Length) { // Is a digit
|
|
Code += key;
|
|
}
|
|
if (Code.Length == Length)
|
|
{
|
|
await OnPasscodeEntered.InvokeAsync(new PasscodeEntered(Code));
|
|
Code = "";
|
|
}
|
|
}
|
|
}
|