How to Customize the ResetPassword Page for Angular #10552

4 Answer(s)

• 

  0

  AI-Bot created 6 months ago

  Support Team ABP Agent

  • In an ABP Angular (auth-server separated / OAuth2 code flow) application, the Reset Password UI is served by the Auth Server’s Account Module, not by the Angular UI. So you don’t customize it in Angular; you customize the Auth Server page (Razor Page) and add your link there.
  • To keep all existing functionality and only add a “Forgot password?” link, override the Account Module’s ResetPassword page in your AuthServer project:

  1. Find the original ResetPassword page source in the ABP Account module (copy it into your solution; keep everything as-is).
  2. In your AuthServer project, create this folder structure and file:
     • Pages/Account/ResetPassword.cshtml
  3. Paste the original content, then add a link to Forgot Password in the markup, e.g. (place it wherever you want in the page, typically under the form/buttons):

  <a asp-page="./ForgotPassword" class="btn btn-link px-0">
      @L["ForgotPassword"]
  </a>
  

  That’s all—since you’re only adding a link, the existing reset-password flow remains unchanged.

  • If your emails/links should point to the Angular host correctly, ensure the Angular URL mappings are configured in the AuthServer:

  Configure<AppUrlOptions>(options =>
  {
      options.Applications["Angular"].RootUrl = configuration["App:AngularUrl"];
      options.Applications["Angular"].Urls[AccountUrlNames.PasswordReset] = "account/reset-password";
      options.Applications["Angular"].Urls[AccountUrlNames.EmailConfirmation] = "account/email-confirmation";
  });
  

  Links (checked):

  • https://abp.io/docs/latest/ui/angular/component-replacement
  • https://abp.io/docs/latest/modules/account
  • https://abp.io/support/questions/7608

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 6 months ago

  Support Team Fullstack Developer

  Hi,

  The Reset Password page is served by the Auth Server (MVC), not the Angular UI. So you need to customize it in your Auth Server project.

  You can override the ResetPassword.cshtml page by creating the same file in your Auth Server project under Pages/Account/ResetPassword.cshtml:

  @page
  @inject IHtmlLocalizer<AccountResource> L
  @inject IHtmlLocalizer<IdentityResource> LI
  @using Microsoft.AspNetCore.Mvc.Localization
  @using Volo.Abp.Account.Localization
  @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Zxcvbn
  @using Volo.Abp.Identity.Localization
  @model Volo.Abp.Account.Public.Web.Pages.Account.ResetPasswordModel
  @inject Volo.Abp.AspNetCore.Mvc.UI.Layout.IPageLayout PageLayout
  @{
      PageLayout.Content.Title = L["ResetPassword"].Value;
  }
  
  @if (!Model.LocalLoginDisabled)
  {
      @if (Model.InvalidToken)
      {
          <div class="alert alert-danger">
              @LI["Volo.Abp.Identity:InvalidToken"]
          </div>
          <a asp-page="./ForgotPassword" class="btn btn-link px-0">@L["ForgotPassword"]</a>
      }
      else
      {
          @section scripts
          {
              <abp-script-bundle name="@typeof(Volo.Abp.Account.Public.Web.Pages.Account.ResetPasswordModel).FullName">
                  <abp-script type="@typeof(ZxcvbnScriptContributor)"/>
                  <abp-script src="/Pages/Account/PasswordComplexityIndicator.js"/>
                  <abp-script src="/Pages/Account/ResetPassword.js"/>
              </abp-script-bundle>
          }
          
          <div class="account-module-form">
              <form method="post">
                  <p>@L["ResetPassword_Information"]</p>
  
                  <abp-input asp-for="UserId"/>
                  <abp-input asp-for="ResetToken"/>
                  <abp-input asp-for="Password"/>
                  <abp-input asp-for="ConfirmPassword"/>
  
                  <a abp-button="Secondary" asp-page="./Login" asp-route-returnUrl="@Model.NormalizeReturnUrl">@L["Cancel"]</a>
                  <abp-button type="submit" button-type="Primary" text="@L["Submit"].Value"/>
              </form>
              <div class="mt-3">
                  <a asp-page="./ForgotPassword" class="btn btn-link px-0">@L["ForgotPassword"]</a>
              </div>
          </div>
      }
  }
  

  This adds a "Forgot Password" link in two places:

  • When the reset token is invalid, so the user can request a new one.
  • Below the reset password form, as a general navigation option.

  You can adjust the placement based on your preference. No code-behind file is needed since the default ResetPasswordModel already handles everything.

  See also: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-guide#overriding-a-razor-page

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  sserestyen created 6 months ago

  Hi,

  Thanks for providing these details.

  Thanks.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 6 months ago

  Support Team Fullstack Developer

  : )

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel