Hushian/Presentation/HushianWebApp/Components/Verification.razor


@using Common.Dtos.Verification
@using Common.Enums
@using HushianWebApp.Service
@inject VerificationService verificationService;
@inject NavigationManager navigation;

<div class="header-form">
    <span style="font-size: small;white-space: pre-line;">@Title</span>
</div>
@if (type == VerificationCodeType.ForgetPassword)
{
    <div style="justify-content: space-between;margin-top:5px;;margin-bottom:15px">
        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
               @bind="code1" @oninput="MoveNext"
               style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
               @ref="input1" />

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
               @bind="code2" @oninput="MoveNext"
               style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
               @ref="input2" />

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
               @bind="code3" @oninput="MoveNext"
               style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
               @ref="input3" />

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
               @bind="code4" @oninput="OnLastInput"
               style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
               @ref="input4" />
 </div>

    <div style="justify-content: space-between">
        <TextInput @bind-value=Value type="password" name="Value" style="text-align:center;margin-top: 10px;;margin-left: 10px" placeholder="کلمه عبور جدید" required="required" />
        <TextInput @bind-value=ReValue type="password" name="ReValue" style="text-align:center;margin-top: 10px;;margin-left: 10px" placeholder="تکرار کلمه عبور جدید" required="required" />

        <Button Loading=loading LoadingText="ارسال درخواست" @onclick=onClick Color="ButtonColor.Success" style="margin-top: 10px;;margin-left: 10px"> احراز </Button>

    </div>
}
else
{
    <div style="justify-content: space-between;margin-top:5px">

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
        @bind="code1" @oninput="MoveNext"
        style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
        @ref="input1" />

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
        @bind="code2" @oninput="MoveNext"
        style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
        @ref="input2" />

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
        @bind="code3" @oninput="MoveNext"
        style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
        @ref="input3" />

        <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
        @bind="code4" @oninput="OnLastInput"
        style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
        @ref="input4" />


    </div>
}
<div style="display: flex; justify-content: space-between">

    <Button Disabled=Disabledresendmsg @onclick=onClickresend Color="ButtonColor.Link" style="font-size: small;font-weight: normal;text-decoration: none;"> @resendmsg </Button>
</div>



@code {
    [Parameter]
    // PhoneNumberConfirmed
    public VerificationCodeType type { get; set; }
    [Parameter]
    public string sendValue { get; set; }
    [Parameter]
    public int? ID { get; set; }
    public string? code { get; set; }
    [Parameter] public string? Title { get; set; }
    [Inject] protected ToastService ToastService { get; set; } = default!;
    [Parameter] public EventCallback<VerificationCodeType> OnMultipleOfThree { get; set; }
    public string? Value { get; set; }
    public string? ReValue { get; set; }
    bool loading = false;
    string resendmsg = "ارسال مجدد";
    bool Disabledresendmsg = false;
    //-----------------
    private string code1, code2, code3, code4;

    private ElementReference input1, input2, input3, input4;
}
@functions {
    protected override async Task OnParametersSetAsync()
    {
        resendmsg = "در حال ارسال کد احراز ...";
        Disabledresendmsg = true;
        if (ID == 0)
            ID = await verificationService.FromUserName(sendValue, type);
        ToastService.Notify(new(ToastType.Info, $"کد احراز به کاربری '{sendValue}' ارسال شد"));

        resendmsg = "ارسال مجدد";
        Disabledresendmsg = false;

        await base.OnParametersSetAsync();
    }
    async Task onClickresend()
    {
        resendmsg = "در حال ارسال مجدد کد احراز ...";
        Disabledresendmsg = true;
        if (ID == 0)
            ID = await verificationService.FromUserName(sendValue, type);
        else
        {
            await verificationService.ReSendCode(ID.Value);
        }

        ToastService.Notify(new(ToastType.Info, $"کد احراز به کاربری '{sendValue}' ارسال شد"));

        resendmsg = "ارسال مجدد";
        Disabledresendmsg = false;
    }
    async Task onClick()
    {
        if (string.IsNullOrEmpty(code))
        {
            ToastService.Notify(new(ToastType.Warning, $"کد ارسالی را وارد کنید"));
            return;
        }

        if (type == VerificationCodeType.ForgetPassword)
        {
            if (string.IsNullOrEmpty(Value) || string.IsNullOrEmpty(ReValue))
            {
                ToastService.Notify(new(ToastType.Warning, $"کلمه عبور جدید را مشخص کنید"));
                return;
            }
            else
            {
                if (Value != ReValue)
                { ToastService.Notify(new(ToastType.Warning, $"کلمه عبور جدید و تکرار متفاوت هستند"));
                    return;}
            }



        }
        loading = true; 
        if (await verificationService.ConfirmedCode(new ConfirmedCodeDto()
            { code = code, codeType = type, Id = ID.Value, value = Value }))
        {
            ToastService.Notify(new(ToastType.Success, $"احراز با موفقیت انجام شد برای ادامه ورود کنید"));
            await OnMultipleOfThree.InvokeAsync(type);

        }
        loading = 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}";
            if(type==VerificationCodeType.PhoneNumberConfirmed)
            await onClick();
        }
    }

}