Open Closed

Abp-input for date input #2547


User avatar
0
balessi75 created

Abp Commercial 5.1.3

We have a requirement to override the Register.cshtml page by adding a DateOfBirth input field. It is defined as follows..

The field works as expected, except for the fact that it's value is cleared on post when when the Register App Service returns a user friendly exception and the user friendly error is shown at the top of the register dialog. All other input fields retain their value.

Is there something simple I'm missing here? Any work arounds to get the input to retain it's selected date when posting with validation errors?


9 Answer(s)
  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Hi @balessi75,

    Can you share the full content of Register.cshtml & Register.cshtml.cs files?

    Also, what does the error/exception say?

  • User Avatar
    0
    balessi75 created

    Hi @balessi75,

    Can you share the full content of Register.cshtml & Register.cshtml.cs files?

    Also, what does the error/exception say?

    Hi @yekalkan,

    The user friendly message is our message from an overriden AccountAppService RegisterAsync method call.

    Here is the Rgister.cshtml:

    @page
    @using Microsoft.AspNetCore.Mvc.Localization
    @using Volo.Abp.Account.Localization
    @using Volo.Abp.Account.Public.Web.Security.Recaptcha
    @using Volo.Abp.Account.Security.Recaptcha
    @using Volo.Abp.Account.Settings
    @using Volo.Abp.Settings
    @using Volo.Abp.BlazoriseUI.Components
    @model FM.Timepiece.Blazor.Pages.Account.TimepieceRegisterModel
    @*@model Volo.Abp.Account.Public.Web.Pages.Account.RegisterModel*@
    @inject IHtmlLocalizer<AccountResource> L
    @inject Volo.Abp.AspNetCore.Mvc.UI.Layout.IPageLayout PageLayout
    @inject ISettingProvider SettingProvider
    @{
        PageLayout.Content.Title = L["Register"].Value;
        var reCaptchaVersion = await SettingProvider.GetAsync<int>(AccountSettingNames.Captcha.Version);
    }
    
    
    @section scripts
    {
        @if (Model.UseCaptcha)
        {
            if (reCaptchaVersion == 3)
            {
                <recaptcha-script-v3/>
                <recaptcha-script-v3-js action="register" callback="(function(){$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)})"/>
            }
            else
            {
                <recaptcha-script-v2/>
            }
        }
    
    
    }
    
    <div class="account-module-form">
        <form method="post">
    
            @if (Model.UseCaptcha)
            {
                <input type="hidden" name="@RecaptchaValidatorBase.RecaptchaResponseKey" id="@RecaptchaValidatorBase.RecaptchaResponseKey"/>
            }
     
            
            @if (!Model.IsExternalLogin)
            {
                  <abp-row>
                    <abp-column size="_6">
                        <abp-input asp-for="Input.UserName" label="User Name" auto-focus="true"/>
                    </abp-column>
                    <abp-column size="_6">
                         <abp-input asp-for="Input.Password" label="Password"/>
                    </abp-column>     
                </abp-row>  
              
            }
            
            <abp-row>
                <abp-column size="_6">
                    <abp-input asp-for="Input.EmailAddress" label="Email Address"/> 
                </abp-column>
                <abp-column size="_6">
                    <abp-input asp-for="Input.EmployeeId" label="Employee Id"/> 
                </abp-column>
            </abp-row>
       
             <abp-row>
                <abp-column size="_6">
                      <abp-input asp-for="Input.FirstName" label="First Name"/>
                </abp-column>
                <abp-column size="_6">
                      <abp-input asp-for="Input.LastName" label="Last Name"/>
                </abp-column>
            </abp-row>
    
            <abp-row>
                <abp-column size="_6">
                      <abp-input asp-for="Input.ZipCode" label="Zip Code"/>
                </abp-column>
                <abp-column size="_6">
    
                
                   <abp-input asp-for="Input.DateOfBirth" label="Date Of Birth"/>
                     
                </abp-column>
            </abp-row>
    
    
            @if (reCaptchaVersion == 2)
            {
                <recaptcha-div-v2 callback="(function(){$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)})" />
            }
    
            <div class="d-grid gap-2">
                <abp-button button-type="Primary" type="submit" class="mt-2 mb-3">@L["Register"]</abp-button>
            </div>
            @L["AlreadyRegistered"] <a href="@Url.Page("./Login", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["Login"]</a>
        </form>
    </div>
    

    And register.chtml.cs

    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Security.Claims;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Authentication;
    using Microsoft.AspNetCore.Identity;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Logging;
    using Microsoft.Extensions.Options;
    using Owl.reCAPTCHA;
    using Volo.Abp.Account.Public.Web.Security.Recaptcha;
    using Volo.Abp.Account.Settings;
    using Volo.Abp.Auditing;
    using Volo.Abp.Identity;
    using Volo.Abp.Identity.Settings;
    using Volo.Abp.Security.Claims;
    using Volo.Abp.Settings;
    using Volo.Abp.Uow;
    using Volo.Abp.Validation;
    using IdentityUser = Volo.Abp.Identity.IdentityUser;
    using Volo.Abp.Account.Public.Web.Pages.Account;
    using Volo.Abp;
    using Volo.Abp.Account;
    using FM.Timepiece.Identity;
    using System;
    using FM.Timepiece.Account;
    using Volo.Abp.Data;
    using FM.Timepiece.Employees;
    
    //namespace Volo.Abp.Account.Public.Web.Pages.Account;
    namespace FM.Timepiece.Blazor.Pages.Account;
    
    public class TimepieceRegisterModel : AccountPageModel
    {
        [BindProperty(SupportsGet = true)]
        public string ReturnUrl { get; set; }
    
        [BindProperty(SupportsGet = true)]
        public string ReturnUrlHash { get; set; }
    
        [BindProperty]
        public PostInput Input { get; set; }
    
        [BindProperty(SupportsGet = true)]
        public bool IsExternalLogin { get; set; }
    
        [BindProperty(SupportsGet = true)]
        public string ExternalLoginAuthSchema { get; set; }
    
        public bool UseCaptcha { get; set; }
    
        public virtual async Task<IActionResult> OnGetAsync()
        {
            await CheckSelfRegistrationAsync();
            await TrySetEmailAsync();
            await SetUseCaptchaAsync();
    
            return Page();
        }
    
        [UnitOfWork] //TODO: Will be removed when we implement action filter
        public virtual async Task<IActionResult> OnPostAsync()
        {
            try
            {
                await CheckSelfRegistrationAsync();
                await SetUseCaptchaAsync();
    
                IdentityUser user;
                if (IsExternalLogin)
                {
                    var externalLoginInfo = await SignInManager.GetExternalLoginInfoAsync();
                    if (externalLoginInfo == null)
                    {
                        Logger.LogWarning("External login info is not available");
                        return RedirectToPage("./Login");
                    }
    
                    user = await RegisterExternalUserAsync(externalLoginInfo, Input.EmailAddress);
                }
                else
                {
                    user = await RegisterLocalUserAsync();
                }
    
                //
                //Timepiece override to always require a confirmed email during the registration process for security reasons
                //
    
                //if (await SettingProvider.IsTrueAsync(IdentitySettingNames.SignIn.RequireConfirmedEmail) && !user.EmailConfirmed ||
                //    await SettingProvider.IsTrueAsync(IdentitySettingNames.SignIn.RequireConfirmedPhoneNumber) && !user.PhoneNumberConfirmed)
                //{
                    await StoreConfirmUser(user);
    
                    return RedirectToPage("./ConfirmUser", new {
                        returnUrl = ReturnUrl,
                        returnUrlHash = ReturnUrlHash
                    });
               // }
    
                //await SignInManager.SignInAsync(user, isPersistent: true);
    
                //return Redirect(ReturnUrl ?? "/"); //TODO: How to ensure safety? IdentityServer requires it however it should be checked somehow!
            }
            catch (BusinessException e)
            {
                Alerts.Danger(GetLocalizeExceptionMessage(e));
    
                Input.DateOfBirth = DateTime.Now;
                return Page();
            }
        }
    
        protected virtual async Task<IdentityUser> RegisterLocalUserAsync()
        {
            ValidateModel();
    
            var captchaResponse = string.Empty;
            if (UseCaptcha)
            {
                captchaResponse = HttpContext.Request.Form[RecaptchaValidatorBase.RecaptchaResponseKey];
            }
    
            var registerDto = new RegisterDto
            {
                AppName = "MVC",
                EmailAddress = Input.EmailAddress,
                Password = Input.Password,
                UserName = Input.UserName,
                ReturnUrl = ReturnUrl,
                ReturnUrlHash = ReturnUrlHash,
                CaptchaResponse = captchaResponse
            };
            registerDto.SetProperty(EmployeeConsts.EmployeeId, Input.EmployeeId);
            registerDto.SetProperty(EmployeeConsts.FirstName, Input.FirstName);
            registerDto.SetProperty(EmployeeConsts.LastName, Input.LastName);
            registerDto.SetProperty(EmployeeConsts.ZipCode, Input.ZipCode);
            registerDto.SetProperty(EmployeeConsts.DateOfBirth, Input.DateOfBirth);
    
            var userDto = await AccountAppService.RegisterAsync(registerDto);
    
            return await UserManager.GetByIdAsync(userDto.Id);
        }
    
        protected virtual async Task<IdentityUser> RegisterExternalUserAsync(ExternalLoginInfo externalLoginInfo, string emailAddress)
        {
            await IdentityOptions.SetAsync();
    
            var user = new IdentityUser(GuidGenerator.Create(), emailAddress, emailAddress, CurrentTenant.Id);
    
            (await UserManager.CreateAsync(user)).CheckErrors();
            (await UserManager.AddDefaultRolesAsync(user)).CheckErrors();
    
            if (!user.EmailConfirmed)
            {
                await AccountAppService.SendEmailConfirmationTokenAsync(
                    new SendEmailConfirmationTokenDto
                    {
                        AppName = "MVC",
                        UserId = user.Id,
                        ReturnUrl = ReturnUrl,
                        ReturnUrlHash = ReturnUrlHash
                    }
                );
            }
    
            var userLoginAlreadyExists = user.Logins.Any(x =>
                x.TenantId == user.TenantId &&
                x.LoginProvider == externalLoginInfo.LoginProvider &&
                x.ProviderKey == externalLoginInfo.ProviderKey);
    
            if (!userLoginAlreadyExists)
            {
                user.AddLogin(new UserLoginInfo(
                        externalLoginInfo.LoginProvider,
                        externalLoginInfo.ProviderKey,
                        externalLoginInfo.ProviderDisplayName
                    )
                );
    
                (await UserManager.UpdateAsync(user)).CheckErrors();
            }
    
            return user;
        }
    
        protected virtual async Task CheckSelfRegistrationAsync()
        {
            if (!await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled) ||
                !await SettingProvider.IsTrueAsync(AccountSettingNames.EnableLocalLogin))
            {
                throw new UserFriendlyException(L["SelfRegistrationDisabledMessage"]);
            }
        }
    
        protected virtual async Task SetUseCaptchaAsync()
        {
            UseCaptcha = !IsExternalLogin && await SettingProvider.IsTrueAsync(AccountSettingNames.Captcha.UseCaptchaOnRegistration);
            if (UseCaptcha)
            {
                var reCaptchaVersion = await SettingProvider.GetAsync<int>(AccountSettingNames.Captcha.Version);
                await ReCaptchaOptions.SetAsync(reCaptchaVersion == 3 ? reCAPTCHAConsts.V3 : reCAPTCHAConsts.V2);
            }
        }
    
        protected virtual async Task StoreConfirmUser(IdentityUser user)
        {
            var identity = new ClaimsIdentity(ConfirmUserModel.ConfirmUserScheme);
            identity.AddClaim(new Claim(AbpClaimTypes.UserId, user.Id.ToString()));
            if (user.TenantId.HasValue)
            {
                identity.AddClaim(new Claim(AbpClaimTypes.TenantId, user.TenantId.ToString()));
            }
            await HttpContext.SignInAsync(ConfirmUserModel.ConfirmUserScheme, new ClaimsPrincipal(identity));
        }
    
        private async Task TrySetEmailAsync()
        {
            if (IsExternalLogin)
            {
                var externalLoginInfo = await SignInManager.GetExternalLoginInfoAsync();
                if (externalLoginInfo == null)
                {
                    return;
                }
    
                if (!externalLoginInfo.Principal.Identities.Any())
                {
                    return;
                }
    
                var identity = externalLoginInfo.Principal.Identities.First();
                var emailClaim = identity.FindFirst(ClaimTypes.Email);
    
                if (emailClaim == null)
                {
                    return;
                }
    
                Input = new PostInput { EmailAddress = emailClaim.Value };
            }
        }
    
        public class PostInput
        {
            [Required]
            [DynamicStringLength(typeof(IdentityUserConsts), nameof(IdentityUserConsts.MaxUserNameLength))]
            public string UserName { get; set; }
    
            [Required]
            [EmailAddress]
            [DynamicStringLength(typeof(IdentityUserConsts), nameof(IdentityUserConsts.MaxEmailLength))]
            public string EmailAddress { get; set; }
    
            [Required]
            [DynamicStringLength(typeof(IdentityUserConsts), nameof(IdentityUserConsts.MaxPasswordLength))]
            [DataType(DataType.Password)]
            [DisableAuditing]
            public string Password { get; set; }
    
            //Added for Timepiece employee verification
    
            [Required(ErrorMessage = "Employee Id is required")]
            public int EmployeeId { get; set; }
    
            [Required(ErrorMessage = "First Name Name is required")]
            [DynamicStringLength(typeof(IdentityUserConsts), nameof(IdentityUserConsts.MaxNameLength))]
            public string FirstName { get; set; }
    
            [Required(ErrorMessage = "Last Name is required")]
            [DynamicStringLength(typeof(IdentityUserConsts), nameof(IdentityUserConsts.MaxSurnameLength))]
            public string LastName { get; set; }
    
            [Required(ErrorMessage = "Zip Code is required")]
            [RegularExpression(@"(^\d{5}$)|(^\d{9}$)|(^\d{5}-\d{4}$)", ErrorMessage = "Invalid Zip Code")]
            [DynamicStringLength(typeof(UserConsts), nameof(UserConsts.MaxZipCodeLength))]
            public string ZipCode { get; set; }
    
            [Required(ErrorMessage = "Date Of Birth is required")]
            [DataType(DataType.Date)]
            [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
            public DateTime DateOfBirth { get; set; }
        }
    }
    
    
  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    May it be related with the following code?

              Input.DateOfBirth = DateTime.Now;
              return Page();
    
  • User Avatar
    0
    balessi75 created

    May it be related with the following code?

              Input.DateOfBirth = DateTime.Now; 
              return Page(); 
    

    Hi @yekalkan, Unfortunately not. I had the assignment to DateTime.Now in there just for debugging purposes. When that assignment is removed, the date input still has it's value cleared when RegisterAsync returns a user friendly exception.

    Before register button press:

    After register button press:

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Does this issue occur when you use a simple <input type='date' .../> instead of <abp-input... />?

  • User Avatar
    0
    balessi75 created

    Does this issue occur when you use a simple <input type='date' .../> instead of <abp-input... />?

    Interesting...

    Yes it does also occur with a simple <input type='date' .../> and it also occurs with @Html.EditorFor(model => model.Input.DateOfBirth)

    Any thoughts?

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Could you spot where exactly input.DateOfBirth lose its value?

  • User Avatar
    0
    balessi75 created

    Could you spot where exactly input.DateOfBirth lose its value?

    input.DateOfBirth never looses it's value, but the input UI is cleared.

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    I reproduced the issue. It doesn't seem to be related with ABP framework or our product but here is the solution:

    1. Initialize the input in OnGetAsync and set Input.DateOfBirth = DateTime.Today.
        public virtual async Task<IActionResult> OnGetAsync()
        {
            Input = new PostInput();
            
            await CheckSelfRegistrationAsync();
            await TrySetEmailAsync();
            await SetUseCaptchaAsync();
    
            Input.DateOfBirth = DateTime.Today;
            
            return Page();
        }
    
    1. You can remove the attributes from DateOfBirth property.
    
            public DateTime DateOfBirth { get; set; }
    
    1. Create the element this way:
            <div class="mb-3">
            
                <label class="form-label" for="Input_DateOfBirth">DateOfBirth</label>
                
                <input type="date" id="Input_DateOfBirth" name="Input.DateOfBirth" value="@Model.Input.DateOfBirth.ToString("yyyy-MM-dd")" class="form-control ">
                
            </div>
    
Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19