SensoFarm/BlazorPages/Pages/Login/Login.razor

@page "/login"
@using BootStrapComponents
@using Components
@using Models.Identity
@layout LayoutWithoutMenu


<img src="/assets/images/logo.png" class="@BT.CenterBlock m-2" style="max-width:30%;" />

<style>
    div.login-fields-container {
        margin-top: 5vh;
        border-radius: 2em;
        border-top: solid 0.2em orange;
        height: 90vh;
        padding: 1em;
    }
</style>
<div class="@BT.Background(ColorType.white) login-fields-container">
    <EditForm Model="@OtpLoginModel" OnValidSubmit="Submit">
        <DataAnotationsValidator />


        <p class="@BT.CenterBlock @BT.TextAlign(TextAlignment.center) h4" style="margin-top:2vh">
            ورود / ثبت نام
        </p>
        <p class="@(BT.TextAlign(TextAlignment.center)) @BT.TextColor(ColorType.secondary) @BT.MarginTop(5) h6">
            @if (!WaitForOtp)
            {
                <span>
                    لطفا شماره همراه خود را وارد کنید.
                </span>
            }
            else
            {
                <span>
                    لطفا کد تائید پیامک شده را وارد کنید.
                </span>
            }
        </p>
        @if (!WaitForOtp)
        {
            <span>
                <input placeholder="تلفن همراه" @bind="OtpLoginModel.Username" class="@BT.Input @BT.MarginTop(5)" type="tel">

            </span>
        }
        else
        {
            <span>
                <input placeholder="کد تائید" @bind="LoginModel.Password" class="@BT.Input @BT.MarginTop(5)" type="number">
            </span>
        }

        <p class="h6  @BT.TextAlign(TextAlignment.center)" style="font-size:2vh;margin-top:5vh;">
            ورود شما به معنای پذیرش
            <a href="/login">
                شرایط حق‌تو و قوانین حریم خصوصی
            </a>
            است
        </p>
        <button type="submit" class="@BT.Button(ColorType.primary)  @BT.CenterBlock" style="margin-top:5vh">
            ورود
        </button>

        <div class="@BT.Row  @BT.TextAlign(TextAlignment.center)" style="margin-top:12vh">
            <hr class="@BT.TextColor(ColorType.warning)" />
            <p>
                © تمامی حقوق برای حقتو محفوظ میباشد
            </p>
            <br />
            <p>
                ورژن 1.1
            </p>
        </div>
    </EditForm>
</div>




<style>
    .form {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
    }

    .form-control {
        margin: 5px 5px;
    }
</style>
@code {
    private bool WaitForOtpMode { get; set; } = true;
    protected OTPLoginModel OtpLoginModel { get; set; } = new();
    protected bool WaitForOtp { set; get; } = false;
    public async void Submit()
    {
        if (WaitForOtp)
            await RequestLogin();
        else
            await RequestVerificationCode();
    }
    protected async Task RequestVerificationCode()
    {
        var response = await _userUtils.SendVerificationRequest(OtpLoginModel);
        if (response.IsSuccessStatusCode)
            WaitForOtp = true;
        StateHasChanged();
    }
    protected LoginModel LoginModel { get; set; } = new();


    protected async Task RequestLogin()
    {
        LoginModel.Username = OtpLoginModel.Username;
        var response = await _userUtils.LoginWithPasswordRequest(LoginModel);
        if (response.IsSuccessStatusCode)
        {
            var result = await response.Content.ReadFromJsonAsync<Models.Identity.PlainToken>();
            await LocalStorage.SetItemAsync(Statics.LoginTokenKey, result.AccessToken);
            NavManager.NavigateTo("/dashboard");

        }
    }

}