This commit is contained in:
mmrbnjd
2025-10-03 23:30:50 +03:30
parent 4e31d34164
commit ba3bffd9eb
8 changed files with 156 additions and 137 deletions

View File

@@ -45,38 +45,17 @@
<div class="d-flex justify-content-center">
<div class="verification-inputs" style="display: flex; gap: 8px; direction: ltr;">
<input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
@bind="code1" @oninput="MoveNext"
style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
@ref="input1" autoFocus />
<input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
@bind="code2" @oninput="MoveNext"
style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
@ref="input2" />
<input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
@bind="code3" @oninput="MoveNext"
style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
@ref="input3" />
<input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
@bind="code4" @oninput="OnLastInput"
style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
@ref="input4" />
</div>
<input class="cus-input" maxlength='4' @bind-value="Code" @bind-value:event="oninput"/>
</div>
<Button Color="ButtonColor.Link"
Disabled="@isButtonDisabled"
@onclick="async () =>
Disabled="@isButtonDisabled"
@onclick="async () =>
{
await verificationService.ReSendCode(ID);
await verifiTimer();
}"
Style="padding: 6px 16px; font-size: 14px; background-color: #f8f9fa; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;margin-bottom: -10px;">
Style="padding: 6px 16px; font-size: 14px; background-color: #f8f9fa; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;margin-bottom: -10px;">
<span>ارسال مجدد</span>
@@ -98,9 +77,16 @@
[Parameter] public EventCallback OnMultipleOfThree { get; set; }
public string Username { get; set; }
public int ID { get; set; } = 0;
public string Code { get; set; } = string.Empty;
private string _code = string.Empty;
public string Code { get { return _code; } set
{
_code=value;
if (value.Length == 4)
ver().ConfigureAwait(true);
} }
//-----------------
private string code1, code2, code3, code4;
// private string code1, code2, code3, code4;
private ElementReference input1, input2, input3, input4;
string validateStyleUser = "";
private bool isButtonDisabled = true;
@@ -161,35 +147,35 @@
await OnMultipleOfThree.InvokeAsync();
visible = false;
}
private async Task MoveNext(ChangeEventArgs e)
{
if (e.Value?.ToString()?.Length == 1)
{
if (input1.Context == null) return;
// private async Task MoveNext(ChangeEventArgs e)
// {
// if (e.Value?.ToString()?.Length == 1)
// {
// if (input1.Context == null) return;
if (string.IsNullOrEmpty(code1))
await input2.FocusAsync();
else if (string.IsNullOrEmpty(code2))
await input3.FocusAsync();
else if (string.IsNullOrEmpty(code3))
await input4.FocusAsync();
else if (string.IsNullOrEmpty(code4))
{
Code = $"{code1}{code2}{code3}{code4}";
}
}
}
private async Task OnLastInput(ChangeEventArgs e)
{
code4 = e.Value?.ToString();
// if (string.IsNullOrEmpty(code1))
// await input2.FocusAsync();
// else if (string.IsNullOrEmpty(code2))
// await input3.FocusAsync();
// else if (string.IsNullOrEmpty(code3))
// await input4.FocusAsync();
// else if (string.IsNullOrEmpty(code4))
// {
// Code = $"{code1}{code2}{code3}{code4}";
// }
// }
// }
// private async Task OnLastInput(ChangeEventArgs e)
// {
// code4 = e.Value?.ToString();
if (!string.IsNullOrEmpty(code4) && code4.Length == 1)
{
Code = $"{code1}{code2}{code3}{code4}";
// if (!string.IsNullOrEmpty(code4) && code4.Length == 1)
// {
// Code = $"{code1}{code2}{code3}{code4}";
await ver();
}
}
// await ver();
// }
// }
}
<script>
function formatPhoneNumber(input) {
@@ -281,4 +267,22 @@
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
transform: scale(1.05);
}
.cus-input {
direction:ltr;
display: block;
margin: 2em auto;
border: none;
padding: 0;
width: 6ch;
background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/ 5.5ch 2px no-repeat;
font: 5ch droid sans mono, consolas, monospace;
letter-spacing: 0.5ch;
}
input:focus {
outline: none;
color: dodgerblue;
}
</style>