...

Presentation/HushianWebApp/Pages/FromUserSide/LoginComponent.razor

@@ -9,7 +9,7 @@
     <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">
@@ -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>
@@ -82,12 +102,15 @@
     //-----------------
     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))
+        if (await AuthService.Verificationlogin(ID, Code))
-           await OnMultipleOfThree.InvokeAsync();
+            await OnMultipleOfThree.InvokeAsync();
         visible = false;
     }
     private async Task MoveNext(ChangeEventArgs e)
@@ -171,44 +221,44 @@
         width: 100%;
     }
 
-    .form-container label {
+        .form-container label {
-        display: block;
+            display: block;
-        margin-bottom: 0.75rem;
+            margin-bottom: 0.75rem;
-        font-weight: 600;
+            font-weight: 600;
-        color: #495057;
+            color: #495057;
-    }
+        }
 
-    .form-container .d-flex {
+        .form-container .d-flex {
-        gap: 0.75rem;
+            gap: 0.75rem;
-        align-items: center;
+            align-items: center;
-    }
+        }
 
     .container-input {
         flex: 1;
     }
 
-    .container-input input {
+        .container-input input {
-        width: 100%;
+            width: 100%;
-        border: 2px solid #e9ecef;
+            border: 2px solid #e9ecef;
-        border-radius: 0.5rem;
+            border-radius: 0.5rem;
-        transition: border-color 0.2s ease;
+            transition: border-color 0.2s ease;
-    }
+        }
 
-    .container-input input:focus {
+            .container-input input:focus {
-        border-color: #0d6efd;
+                border-color: #0d6efd;
-        outline: none;
+                outline: none;
-        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+                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 {
+        .form-container input[type="text"]:focus {
-        border-color: #0d6efd;
+            border-color: #0d6efd;
-        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+            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 {
+        .verification-inputs input {
-        flex-shrink: 0;
+            flex-shrink: 0;
-        transition: all 0.2s ease;
+            transition: all 0.2s ease;
-    }
+        }
 
-    .verification-inputs input:focus {
+            .verification-inputs input:focus {
-        border-color: #0d6efd;
+                border-color: #0d6efd;
-        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+                box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
-        transform: scale(1.05);
+                transform: scale(1.05);
-    }
+            }
 </style>