...
This commit is contained in:
mmrbnjd
@@ -9,9 +9,9 @@
|
||||
<div class="form-container">
|
||||
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@visible" />
|
||||
|
||||
@if (ID==0)
|
||||
@if (ID == 0)
|
||||
{
|
||||
|
||||
|
||||
<label for="user-name" class="block mb-2 text-slate-600 font-bold">
|
||||
شماره همراه / نام کاربری
|
||||
</label>
|
||||
@@ -37,7 +37,8 @@
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
else{
|
||||
else
|
||||
{
|
||||
<label for="user-name" class="block mb-2 text-slate-600 font-bold">
|
||||
جهت احراز کد ارسال شده را وارد کنید
|
||||
</label>
|
||||
@@ -68,6 +69,25 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Button Color="ButtonColor.Link"
|
||||
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;">
|
||||
|
||||
<span>ارسال مجدد</span>
|
||||
|
||||
@if (countdown > 0)
|
||||
{
|
||||
<span style="color: #dc3545; font-weight: bold;">(@countdown)</span>
|
||||
}
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,16 +98,19 @@
|
||||
[Parameter] public EventCallback OnMultipleOfThree { get; set; }
|
||||
public string Username { get; set; }
|
||||
public int ID { get; set; } = 0;
|
||||
public string Code { get; set; } = string.Empty;
|
||||
public string Code { get; set; } = string.Empty;
|
||||
//-----------------
|
||||
private string code1, code2, code3, code4;
|
||||
private ElementReference input1, input2, input3, input4;
|
||||
string validateStyleUser="";
|
||||
string validateStyleUser = "";
|
||||
private bool isButtonDisabled = true;
|
||||
private int countdown = 60;
|
||||
private System.Timers.Timer? timer;
|
||||
}
|
||||
@functions{
|
||||
@functions {
|
||||
async Task Login()
|
||||
{
|
||||
if (Username.Replace("-","").CheckMobile())
|
||||
if (Username.Replace("-", "").CheckMobile())
|
||||
{
|
||||
visible = true;
|
||||
ID = await AuthService.login(new Common.Models.Auth.UserSide.AuthRequestFromUserSide()
|
||||
@@ -95,20 +118,47 @@
|
||||
Mobile = Username.Replace("-", "")
|
||||
});
|
||||
validateStyleUser = "";
|
||||
|
||||
await verifiTimer();
|
||||
visible = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
validateStyleUser =" border: 2px solid red; border-radius: 4px;";
|
||||
validateStyleUser = " border: 2px solid red; border-radius: 4px;";
|
||||
}
|
||||
|
||||
}
|
||||
async Task verifiTimer()
|
||||
{
|
||||
//----------
|
||||
isButtonDisabled = true;
|
||||
countdown = 60;
|
||||
timer = new System.Timers.Timer(1000); // هر 1 ثانیه
|
||||
timer.Elapsed += OnTimerElapsed;
|
||||
timer.AutoReset = true;
|
||||
timer.Enabled = true;
|
||||
//----------
|
||||
}
|
||||
private void OnTimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
|
||||
{
|
||||
if (countdown > 0)
|
||||
{
|
||||
countdown--;
|
||||
InvokeAsync(StateHasChanged); // بروزرسانی UI
|
||||
}
|
||||
|
||||
if (countdown == 0)
|
||||
{
|
||||
isButtonDisabled = false;
|
||||
timer?.Stop();
|
||||
timer?.Dispose();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
}
|
||||
async Task ver()
|
||||
{
|
||||
visible = true;
|
||||
if(await AuthService.Verificationlogin(ID, Code))
|
||||
await OnMultipleOfThree.InvokeAsync();
|
||||
if (await AuthService.Verificationlogin(ID, Code))
|
||||
await OnMultipleOfThree.InvokeAsync();
|
||||
visible = false;
|
||||
}
|
||||
private async Task MoveNext(ChangeEventArgs e)
|
||||
@@ -136,7 +186,7 @@
|
||||
if (!string.IsNullOrEmpty(code4) && code4.Length == 1)
|
||||
{
|
||||
Code = $"{code1}{code2}{code3}{code4}";
|
||||
|
||||
|
||||
await ver();
|
||||
}
|
||||
}
|
||||
@@ -171,44 +221,44 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-container label {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
.form-container label {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.form-container .d-flex {
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
.form-container .d-flex {
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.container-input input {
|
||||
width: 100%;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 0.5rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.container-input input {
|
||||
width: 100%;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 0.5rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.container-input input:focus {
|
||||
border-color: #0d6efd;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
.container-input input:focus {
|
||||
border-color: #0d6efd;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.form-container input[type="text"] {
|
||||
margin: 0 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-container input[type="text"]:focus {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
.form-container input[type="text"]:focus {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.875rem;
|
||||
@@ -221,14 +271,14 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.verification-inputs input {
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.verification-inputs input {
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.verification-inputs input:focus {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.verification-inputs input:focus {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user