problem with otp generation

Question

Register.cshtml

@page "/register"
@model FaceAdminWebApp.Pages.Auth.RegisterModel
@{ViewData["Title"] = "Register";}

<h5>NEW REGISTER</h5>

@if (Model.IsPhoneNumberPresent)

{
<form method="post" asp-page-handler="GenerateOtp">
    <input type="hidden" asp-for="LoginModel.Username" value="@Model.LoginPhoneNumber" />
    <input type="hidden" asp-for="LoginModel.CountryCode" value="@Model.CountryCode" />
    <div class="px-3 my-1 d-flex justify-center">
        <div>
            <label for="OTP">OTP</label>
            <input id="OTP" type="text" class="form-control" asp-for="LoginModel.Password" autocomplete="off" />
        </div>

        <button type="submit" class="btn btn-outline-primary btn-sm ml-4 mt-4" style="width: 150px;" disabled="@Model.OtpProcessing">
            @if (Model.OtpProcessing)
            {
                <div class="spinner-border spinner-border-sm" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <span>GENERATING</span>
            }
            else
            {
                <span>GENERATE OTP</span>
            }
        </button>
    </div>
</form>
}
else
{
<form method="post">
    <div class="px-3 my-1 d-flex justify-center">
        <div>
            <label for="CountryCode">Country Code</label>
            <select class="form-control" id="CountryCode" asp-for="LoginModel.CountryCode">
                <option value="+91">+91</option>
                <option value="+49">+49</option>
                <option value="+1">+1</option>
            </select>
            <label for="PhoneNumber">Phone Number</label>
            <input type="text" class="form-control" id="PhoneNumber" asp-for="LoginModel.Username">
        </div>
    </div>
    <form method="post" asp-page-handler="GenerateOtp">
        <div class="px-3 my-1 d-flex justify-center">
            <div>
               <label for="OTP">OTP</label>
               <input id="OTP" type="text" class="form-control" asp-for="LoginModel.Password" autocomplete="off" />
            </div>
            <button type="submit" class="btn btn-outline-primary btn-sm ml-4 mt-4" style="width: 150px;" disabled="@Model.OtpProcessing">
                @if (Model.OtpProcessing)
                {
                    <div class="spinner-border spinner-border-sm" role="status">
                       <span class="visually-hidden">Loading...</span>
                    </div>
                    <span>GENERATING</span>
                }
                else
                {
                    <span>GENERATE OTP</span>
                }
            </button>
        </div>
    </form>

    <div class="mt-6 d-flex justify-space-between align-center">
        <a asp-page="/Auth/Login" class="btn btn-secondary">Login</a>
        <button type="submit" class="btn btn-primary ml-4" disabled="@Model.Processing">
            @if (Model.Processing)
            {
                <div class="spinner-border spinner-border-sm" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <span>VALIDATING</span>
            }
            else
           {
                <span>VALIDATE</span>
            }
        </button>
    </div>
</form>
}



Register.cshtml.cs

powershell
using FaceAdminWebApp.Auth;
using FaceAdminWebApp.DTOs;
using FaceAdminWebApp.Services;
using FaceAdminWebApp.Utilities;
using FaceAdminWebApp.ViewModels;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace FaceAdminWebApp.Pages.Auth
{
public class RegisterModel : PageModel
{

    private readonly ILoginService _loginService;
    private readonly VacApiService _apiService;
    public RegisterModel(ILoginService loginService, VacApiService apiService)
    {
        _loginService = loginService;
        _apiService = apiService;
    }

    [BindProperty]
    public string LoginPhoneNumber { get; set; }
    [BindProperty]
    public string CountryCode { get; set; }
    [BindProperty]
    public OtpRegisterVm LoginModel { get; set; } = new OtpRegisterVm();
    public bool IsPhoneNumberPresent { get; set; }
    public bool IsPhoneNumberValidated { get; set; } = false;
    public bool OtpProcessing { get; set; }
    public bool Processing { get; set; }
    public async Task OnGet(string LoginPhoneNumber)
    {
        if (!string.IsNullOrEmpty(LoginPhoneNumber))
        {
            IsPhoneNumberPresent = true;
        }
    }

    public async Task<IActionResult> OnPostGenerateOtpAsync()
    {
        OtpProcessing = true;
        if (string.IsNullOrEmpty(LoginModel.Username))
        {
            Notify.Add(TempData, false, "", "Phone Number required");
            OtpProcessing = false;
            return Page();
        }
        else if (LoginModel.Username.Length < 10)
        {
            Notify.Add(TempData, false, "", "Enter valid Phone Number");
            OtpProcessing = false;
            return Page();
        }

        var dto = new PhoneNumberDto { PhoneNumber = LoginModel.CountryCode + LoginModel.Username };
        var response = await _apiService.GenerateRegisterOtp(dto);
        if (response.IsSuccess)
        {
            Notify.Add(TempData, true, "OTP Generated successfully", "");
        }
        else
        {
            Notify.Add(TempData, false, "", response.Message);
        }
        OtpProcessing = false;
        return RedirectToPage("/Auth/RegistrationForm");
    }

    public async Task OnValidPhoneNumberSubmit()
    {
        Processing = true;
        if (LoginModel.Username.Length < 10 || LoginModel.Password.Length != 6)
        {
            Notify.Add(TempData, false, $"Invalid Phone Number or OTP", ""); // Note: Empty string for details
            Processing = false;
            return;
        }

        var dto = new LoginDto { Username = LoginModel.CountryCode + LoginModel.Username, Password = LoginModel.Password };

        var response = await _apiService.ValidateRegisterOtp(dto);
        if (response.IsSuccess)
        {
            Notify.Add(TempData, true, $"Phone number validated", ""); // Note: Empty string for details
            IsPhoneNumberValidated = true;
        }
        else
        {
            Notify.Add(TempData, false, $"{response.Message}", ""); // Note: Empty string for details
        }

        Processing = false;
        //await InvokeAsync(StateHasChanged);
    }
}
}

This is my pages to generate otp. I am trying to register new user for generation of otp based on my condition. If number is empty, the form is displaying to enter new number after generating otp button clicked its triggering Model.IsNumberPresent block, but generate otp method is not working. And I want to receive otp to my mobile number. Let me what miskate I did.

Answer 1

The HTML has nested forms which is invalid HTML.