288 lines
8.3 KiB
Plaintext
288 lines
8.3 KiB
Plaintext
@using Common.Validation
|
|
@using HushianWebApp.Service
|
|
@inject AuthService AuthService
|
|
@inject VerificationService verificationService;
|
|
<div class="login-form">
|
|
<div class="text-center mb-4">
|
|
<span class="badge bg-info p-2 rounded-pill">نیاز برای ارتباط با کارشناسان وارد شود</span>
|
|
</div>
|
|
<div class="form-container">
|
|
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@visible" />
|
|
|
|
@if (ID == 0)
|
|
{
|
|
|
|
<label for="user-name" class="block mb-2 text-slate-600 font-bold">
|
|
شماره همراه / نام کاربری
|
|
</label>
|
|
<div class="d-flex">
|
|
|
|
<div class="container-input" style="width:150px;margin-left:5px">
|
|
<input type="text"
|
|
id="user-name"
|
|
maxlength="13"
|
|
style="text-align:center;height:30px;@validateStyleUser"
|
|
title="شماره همراه را وارد کنید. مثل 0911-966-0045"
|
|
class="input-form input_vk_1"
|
|
required
|
|
data-val="true"
|
|
data-val-required="شماره همراه را وارد کنید."
|
|
name="Username"
|
|
oninput="formatPhoneNumber(this)"
|
|
@bind-value=Username>
|
|
</div>
|
|
<Button disabled="visible" Color="ButtonColor.Primary" Type="ButtonType.Submit" @onclick="Login" class="btn-primary"
|
|
style="text-align:center;height:30px">
|
|
ورود
|
|
</Button>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<label for="user-name" class="block mb-2 text-slate-600 font-bold">
|
|
جهت احراز کد ارسال شده را وارد کنید
|
|
</label>
|
|
|
|
<div class="d-flex justify-content-center">
|
|
|
|
<input class="cus-input" maxlength='4' @bind-value="Code" @bind-value:event="oninput"/>
|
|
|
|
</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>
|
|
|
|
|
|
@code {
|
|
private bool visible = false;
|
|
[Parameter] public EventCallback OnMultipleOfThree { get; set; }
|
|
public string Username { get; set; }
|
|
public int ID { get; set; } = 0;
|
|
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 ElementReference input1, input2, input3, input4;
|
|
string validateStyleUser = "";
|
|
private bool isButtonDisabled = true;
|
|
private int countdown = 60;
|
|
private System.Timers.Timer? timer;
|
|
}
|
|
@functions {
|
|
async Task Login()
|
|
{
|
|
if (Username.Replace("-", "").CheckMobile())
|
|
{
|
|
visible = true;
|
|
ID = await AuthService.login(new Common.Models.Auth.UserSide.AuthRequestFromUserSide()
|
|
{
|
|
Mobile = Username.Replace("-", "")
|
|
});
|
|
validateStyleUser = "";
|
|
await verifiTimer();
|
|
visible = false;
|
|
}
|
|
else
|
|
{
|
|
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();
|
|
visible = false;
|
|
}
|
|
// 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(code4) && code4.Length == 1)
|
|
// {
|
|
// Code = $"{code1}{code2}{code3}{code4}";
|
|
|
|
// await ver();
|
|
// }
|
|
// }
|
|
}
|
|
<script>
|
|
function formatPhoneNumber(input) {
|
|
let value = input.value.replace(/\D/g, ''); // فقط عدد
|
|
if (value.length > 11) value = value.slice(0, 11); // حداکثر 11 رقم
|
|
|
|
let formatted = '';
|
|
if (value.length >= 4) {
|
|
formatted += value.slice(0, 4) + '-';
|
|
if (value.length >= 7) {
|
|
formatted += value.slice(4, 7) + '-';
|
|
formatted += value.slice(7);
|
|
} else {
|
|
formatted += value.slice(4);
|
|
}
|
|
} else {
|
|
formatted = value;
|
|
}
|
|
|
|
input.value = formatted;
|
|
}
|
|
</script>
|
|
<style>
|
|
.login-form {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-container label {
|
|
display: block;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.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: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);
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.verification-inputs {
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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> |