FrontOffice/src/FrontOffice.Main/Pages/Auth/Verify.razor

@attribute [Route(RouteConstants.Auth.Verify)]

<PageTitle>تأیید رمز پویا</PageTitle>

<MudStack AlignItems="AlignItems.Center">
    <MudCard Class="pa-6" Style="max-width:420px;width:100%;">
        <MudCardContent>
            <MudText Typo="Typo.h5" Class="mb-1" Align="Align.Center">کد ارسال‌شده را وارد کنید</MudText>
            @if (!string.IsNullOrWhiteSpace(_phoneNumber))
            {
                <MudText Typo="Typo.body2" Class="mb-4" Align="Align.Center">کد ارسال‌شده به @_phoneNumber را وارد نمایید.</MudText>
            }
            else
            {
                <MudText Typo="Typo.body2" Class="mb-4" Align="Align.Center">کد پیامک شده را وارد نمایید.</MudText>
            }

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

                <MudText Typo="Typo.caption" Align="Align.Center" Class="mb-1">
                    تلاش‌های باقی‌مانده: @_attemptsLeft
                </MudText>

                @if (_resendSeconds > 0)
                {
                    <MudText Typo="Typo.caption" Align="Align.Center" Class="mb-1">
                        امکان ارسال مجدد تا @_resendSeconds ثانیه دیگر فعال می‌شود.
                    </MudText>
                }

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

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

                <MudStack Spacing="2" Class="mt-2">
                    <MudButton Variant="Variant.Filled"
                               Color="Color.Primary"
                               OnClick="VerifyOtpAsync"
                               Disabled="_isBusy || IsVerificationLocked"
                               Loading="_isBusy"
                               FullWidth="true">
                        تأیید و ادامه
                    </MudButton>
                    <MudButton Variant="Variant.Text"
                               Color="Color.Secondary"
                               Disabled="_isBusy"
                               OnClick="ChangePhoneAsync">
                        تغییر شماره
                    </MudButton>
                </MudStack>

                <MudDivider Class="my-2" />

                <MudButton Variant="Variant.Text"
                           Color="Color.Primary"
                           Disabled="_isBusy || _resendSeconds > 0"
                           OnClick="ResendOtpAsync">
                    ارسال دوباره رمز
                </MudButton>
            </MudForm>
        </MudCardContent>
    </MudCard>
</MudStack>