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 class="cus-input" maxlength='4' @bind-value="code" @bind-value:event="oninput" />
    </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 class="cus-input" maxlength='4' @bind-value="code" @bind-value:event="oninput" />

    </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; }
    private string? _code = string.Empty;
    public string? code
    {
        get { return _code; }
        set
        {
            _code = value;
            if (value.Length == 4)
                onClick().ConfigureAwait(true);

        }
    }
    [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(code) && code.Length == 4)
    //     {
    //       //  code = $"{code1}{code2}{code3}{code4}";
    //         if (type == VerificationCodeType.PhoneNumberConfirmed)
    //             await onClick();
    //     }
    // }

}

<style>
    .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>