FrontOffice/src/FrontOffice.Main/Shared/AuthDialog.razor

@if (InlineMode)
{
    @* Inline rendering without MudDialog wrapper *@
    <MudStack Spacing="2">
        <MudText Typo="Typo.h5" Align="Align.Center">@GetDialogTitle()</MudText>
        @PhoneOrVerifyContent()
    </MudStack>
}
else
{
    <MudDialog>
        <TitleContent>
            <MudText Typo="Typo.h4" Align="Align.Center">@GetDialogTitle()</MudText>
        </TitleContent>
        <DialogContent>
            @PhoneOrVerifyContent()
        </DialogContent>
        <DialogActions>
            @if (!HideCancelButton)
            {
                <MudButton Variant="Variant.Text"
                           OnClick="Cancel"
                           Disabled="_isBusy">لغو
                </MudButton>
            }
            @if (_currentStep == AuthStep.Phone)
            {
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           OnClick="SendOtpAsync"
                           Disabled="_isBusy"
                           FullWidth="true">
                    ارسال رمز پویا
                </MudButton>
            }
            else if (_currentStep == AuthStep.Verify)
            {
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           OnClick="VerifyOtpAsync"
                           Disabled="_isBusy || IsVerificationLocked"
                           FullWidth="true">
                    تأیید و ورود
                </MudButton>
            }
        </DialogActions>
    </MudDialog>
}

@code {

    private RenderFragment PhoneOrVerifyContent() => __builder =>
    {
        if (_currentStep == AuthStep.Phone)
        {
            // Phone Step
            __builder.OpenComponent(0, typeof(MudText));
            __builder.AddAttribute(1, "Typo", Typo.body2);
            __builder.AddAttribute(2, "Class", "mb-4");
            __builder.AddAttribute(3, "Align", Align.Center);
            __builder.AddContent(4, "لطفاً شماره موبایل خود را وارد کنید تا رمز پویا ارسال شود.");
            __builder.CloseComponent();

            <MudForm @ref="_phoneForm" Model="_phoneRequest" Validation="@(_phoneRequestValidator.ValidateValue)">
                <MudTextField @bind-Value="_phoneRequest.Mobile"
                              For="@(() => _phoneRequest.Mobile)"
                              Label="شماره موبایل"
                              InputType="InputType.Telephone"
                              InputMode="InputMode.tel"
                              Variant="Variant.Outlined"
                              Immediate="true"
                              Required="true"
                              RequiredError="وارد کردن شماره موبایل الزامی است."
                              HelperText="مثال: 09121234567"
                              Class="mb-2"/>

                @* @if (EnableCaptcha) *@
                @* { *@
                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="mt-2 mb-2">
                    <MudItem xs="7" md="12">
                        <MudTextField xs="4" Label="کد کپچا" Placeholder="کد نمایش داده شده" Immediate="true"
                                      Variant="Variant.Outlined" @bind-Value="_captchaInput" Required="true"
                                      RequiredError="لطفاً کد کپچا را وارد کنید."/>
                    </MudItem>
                    <MudItem xs="4" >
                        <MudPaper Elevation="1" Class="captcha-box d-flex align-center justify-center"
                                  Style="min-width:100px;min-height:48px;">
                            <MudText Typo="Typo.h5">@_captchaCode</MudText>
                        </MudPaper>
                    </MudItem>
                    <MudItem xs="1" >
                        <MudButton Variant="Variant.Text" Color="Color.Primary"
                                   StartIcon="@Icons.Material.Filled.Refresh" Disabled="_isBusy"
                                   OnClick="GenerateCaptcha">
                        </MudButton>
                    </MudItem>

                </MudStack>

                @* } *@
                @* *@
                <MudCheckBox T="bool" Required="true"
                             Label="شرایط و قوانین را می‌پذیرم"
                             RequiredError="برای ادامه باید شرایط و قوانین را بپذیرید."
                             Class="mb-1"/>

                @if (!string.IsNullOrWhiteSpace(_errorMessage))
                {
                    <MudAlert Severity="Severity.Error" Dense="true" Elevation="0"
                              Class="mb-2">@_errorMessage</MudAlert>
                }
            </MudForm>
        }
        else if (_currentStep == AuthStep.Verify)
        {
            // Verify Step
            <MudText Typo="Typo.body2" Class="mb-4" Align="Align.Center">رمز پویا شش رقمی ارسال ‌شده به @_phoneNumber را
                وارد کنید.
            </MudText>

            <MudForm @ref="_verifyForm" Model="_verifyRequest" Validation="@(_verifyRequestValidator.ValidateValue)">
                <MudTextField @bind-Value="_verifyRequest.Code"
                              For="@(() => _verifyRequest.Code)"
                              Label="رمز پویا"
                              InputType="InputType.Telephone"
                              InputMode="InputMode.tel"
                              Variant="Variant.Outlined"
                              Immediate="true"
                              Required="true"
                              RequiredError="وارد کردن رمز پویا الزامی است."
                              HelperText="کد ۶ رقمی"
                              Class="mb-2"
                              MaxLength="6"/>

                @if (!string.IsNullOrWhiteSpace(_errorMessage))
                {
                    <MudAlert Severity="Severity.Error" Dense="true" Elevation="0"
                              Class="mb-2">@(_errorMessage)</MudAlert>
                }
                @if (!string.IsNullOrWhiteSpace(_infoMessage))
                {
                    <MudAlert Severity="Severity.Success" Dense="true" Elevation="0"
                              Class="mb-2">@(_infoMessage)</MudAlert>
                }

                <MudStack Spacing="2">
                    <MudButton Variant="Variant.Text" Color="Color.Secondary" Disabled="_isBusy"
                               OnClick="ChangePhoneAsync">تغییر شماره
                    </MudButton>
                </MudStack>
                <MudDivider Class="my-2"/>
                @if (_resendRemaining > 0)
                {
                    <MudText Typo="Typo.body2" Align="Align.Center" Class="mud-text-secondary">امکان ارسال مجدد
                        تا @_resendRemaining ثانیه دیگر
                    </MudText>
                }
                else
                {
                    <MudButton Variant="Variant.Text" Color="Color.Primary" Disabled="_isBusy" OnClick="ResendOtpAsync">
                        ارسال مجدد رمز پویا
                    </MudButton>
                }
            </MudForm>
        }
    };

}