Abp-input for date input #2547

9 Answer(s)

• 

  0

  yekalkan created 2 years ago

  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?

  Save Cancel
• 

  0

  balessi75 created 2 years ago

  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; }
      }
  }
  
  

  Save Cancel
• 

  0

  yekalkan created 2 years ago

  Support Team Fullstack Developer

  May it be related with the following code?

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

  Save Cancel
• 

  0

  balessi75 created 2 years ago

  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:

  Save Cancel
• 

  0

  yekalkan created 2 years ago

  Support Team Fullstack Developer

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

  Save Cancel
• 

  0

  balessi75 created 2 years ago

  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?

  Save Cancel
• 

  0

  yekalkan created 2 years ago

  Support Team Fullstack Developer

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

  Save Cancel
• 

  0

  balessi75 created 2 years ago

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

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

  Save Cancel
• 

  0

  yekalkan created 2 years ago

  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();
      }
  

  2. You can remove the attributes from DateOfBirth property.

  
          public DateTime DateOfBirth { get; set; }
  

  3. 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>
  

  Save Cancel