How to replace ForgotPasswordComponent in ABP Angular UI

ForgotPasswordComponent-Replacement.md

1. Run the following command to create a new component called ForgotPasswordComponent:

yarn ng generate component forgot-password --inlineStyle

2. Open the generated forgot-password.component.ts file in src/app/forgot-password and replace content with following:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AccountService } from '@volo/abp.ng.account';
import { finalize } from 'rxjs/operators';
const { required, email } = Validators;

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
})
export class ForgotPasswordComponent {
  form: FormGroup;

  inProgress: boolean;

  isEmailSent = false;

  constructor(private fb: FormBuilder, private accountService: AccountService) {
    this.form = this.fb.group({
      email: ['', [required, email]],
    });
  }

  onSubmit() {
    if (this.form.invalid) return;

    this.inProgress = true;

    this.accountService
      .sendPasswordResetCode({ email: this.form.get('email').value, appName: 'Angular' })
      .pipe(finalize(() => (this.inProgress = false)))
      .subscribe(() => {
        this.isEmailSent = true;
      });
  }
}

3. Open the generated forgot-password.component.html file in src/app/forgot-password and replace content with following:

<form
  *ngIf="!isEmailSent; else emailSentTemplate"
  [formGroup]="form"
  (ngSubmit)="onSubmit()"
  validateOnSubmit
>
  <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
  <div class="form-group">
    <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
    ><span> * </span>
    <input type="email" id="input-email-address" class="form-control" formControlName="email" />
  </div>
  <abp-button
    class="d-block"
    buttonClass="mt-2 mb-3 btn btn-primary btn-block"
    [loading]="inProgress"
    buttonType="submit"
    [disabled]="form?.invalid"
  >
    {{ 'AbpAccount::Submit' | abpLocalization }}
  </abp-button>
  <a routerLink="/account/login"
    ><i class="fa fa-long-arrow-left mr-1"></i>{{ 'AbpAccount::Login' | abpLocalization }}</a
  >
</form>

<ng-template #emailSentTemplate>
  <p>
    {{ 'AbpAccount::PasswordResetMailSentMessage' | abpLocalization }}
  </p>

  <a routerLink="/account/login">
    <button class="d-block mt-2 mb-3 btn btn-primary btn-block">
      <i class="fa fa-long-arrow-left mr-1"></i>
      {{ 'AbpAccount::BackToLogin' | abpLocalization }}
    </button>
  </a>
</ng-template>

4. Open app.component.ts in src/app folder and modify as shown below:

import { AddReplaceableComponent } from '@abp/ng.core'; // added this line
import { Component } from '@angular/core';
import { Store } from '@ngxs/store'; // added this line
import { eAccountComponents } from '@volo/abp.ng.account'; // added this line
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component'; // added this line

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private store: Store) { // injected Store
  // added below
    this.store.dispatch(
      new AddReplaceableComponent({
        component: ForgotPasswordComponent,
        key: eAccountComponents.ForgotPassword,
      })
    );
  }
}