Feat/1571 forgotten username display username

frontend/src/app/app-routing.module.ts

@@ -31,6 +31,7 @@ import { FirstLoginPageComponent } from '@features/first-login-page/first-login-
 import { ForgotYourPasswordComponent } from '@features/forgot-your-username-or-password/forgot-your-password/forgot-your-password.component';
 import { ForgotYourUsernameOrPasswordComponent } from '@features/forgot-your-username-or-password/forgot-your-username-or-password.component';
 import { ForgotYourUsernameComponent } from '@features/forgot-your-username-or-password/forgot-your-username/forgot-your-username.component';
+import { UsernameFoundComponent } from '@features/forgot-your-username-or-password/username-found/username-found.component';
 import { LoginComponent } from '@features/login/login.component';
 import { LogoutComponent } from '@features/logout/logout.component';
 import { MigratedUserTermsConditionsComponent } from '@features/migrated-user-terms-conditions/migrated-user-terms-conditions.component';
@@ -111,6 +112,11 @@ const routes: Routes = [
         component: SatisfactionSurveyComponent,
         data: { title: 'Satisfaction Survey' },
       },
+      {
+        path: 'username-found',
+        component: UsernameFoundComponent,
+        data: { title: 'Username Found' },
+      },
     ],
   },
   {

frontend/src/app/app.module.ts

@@ -97,6 +97,7 @@ import { SharedModule } from '@shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SentryErrorHandler } from './SentryErrorHandler.component';
+import { UsernameFoundComponent } from '@features/forgot-your-username-or-password/username-found/username-found.component';
 
 @NgModule({
   declarations: [
@@ -139,6 +140,7 @@ import { SentryErrorHandler } from './SentryErrorHandler.component';
     ParentWorkplaceAccounts,
     DeleteWorkplaceComponent,
     ForgotYourUsernameOrPasswordComponent,
+    UsernameFoundComponent,
     ForgotYourUsernameComponent,
     FindAccountComponent,
     FindUsernameComponent,

frontend/src/app/core/components/error/page-no-longer-available/page-no-longer-available.component.html

@@ -0,0 +1,7 @@
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds-from-desktop">
+    <h1 class="govuk-heading-xl">Page no longer available</h1>
+    <p>The page you are trying to view does not exist anymore.</p>
+    <p><a [routerLink]="['/login']" class="text-link">Return to the homepage</a></p>
+  </div>
+</div>

frontend/src/app/core/components/error/page-no-longer-available/page-no-longer-available.component.spec.ts

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/angular';
+import { RouterModule } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { PageNoLongerAvailableComponent } from './page-no-longer-available.component';
+
+describe('PageNoLongerAvailableComponent', () => {
+  const setup = async () => {
+    const setupTools = await render(PageNoLongerAvailableComponent, {
+      imports: [RouterModule, RouterTestingModule, HttpClientTestingModule],
+      declarations: [],
+      providers: [],
+      componentProperties: {},
+    });
+
+    const component = setupTools.fixture.componentInstance;
+
+    return { ...setupTools, component };
+  };
+
+  it('should create', async () => {
+    const { component } = await setup();
+
+    expect(component).toBeTruthy();
+  });
+
+  it('should show the page heading', async () => {
+    const { getByRole } = await setup();
+
+    expect(getByRole('heading', { name: 'Page no longer available' })).toBeTruthy();
+  });
+
+  it('should show a link to the homepage', async () => {
+    const { getByText } = await setup();
+
+    const linkText = getByText('Return to the homepage');
+
+    expect(linkText).toBeTruthy();
+    expect(linkText.getAttribute('href')).toEqual('/login');
+  });
+});

frontend/src/app/core/components/error/page-no-longer-available/page-no-longer-available.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-no-longer-available',
+  templateUrl: './page-no-longer-available.component.html',
+})
+export class PageNoLongerAvailableComponent {
+  constructor() {}
+}

frontend/src/app/features/forgot-your-username-or-password/username-found/username-found.component.html

@@ -0,0 +1,28 @@
+<ng-container *ngIf="isUsernameFound; else notAvailable">
+  <div
+    class="govuk-panel govuk-panel--gray govuk-util__align-left govuk-!-margin-top-1 govuk-!-padding-top-1 govuk-!-padding-bottom-5 govuk-!-padding-left-2 govuk-!-padding-right-0 panel"
+    data-testid="panel"
+  >
+    <h1 class="govuk-!-font-size-36 govuk-!-margin-top-4 govuk-!-margin-bottom-3">
+      <img
+        class="govuk-!-margin-right-1 govuk-util__vertical-align-top govuk-!-margin-right-2 green-tick-icon"
+        src="/assets/images/tick-icon.svg"
+        alt=""
+      />We’ve found your username
+    </h1>
+    <div class="govuk-!-font-size-19 govuk-!-margin-left-7">
+      Your username is
+      <div class="govuk-!-font-size-27 govuk-!-font-weight-bold govuk-!-margin-top-1">{{ username }}</div>
+    </div>
+  </div>
+
+  <div class="govuk-!-margin-top-8">
+    <button type="submit" class="govuk-button" data-module="govuk-button" (click)="backToSignInPage($event)">
+      Back to sign in
+    </button>
+  </div>
+</ng-container>
+
+<ng-template #notAvailable>
+  <app-page-no-longer-available data-testid="page-no-longer-available"></app-page-no-longer-available>
+</ng-template>

frontend/src/app/features/forgot-your-username-or-password/username-found/username-found.component.scss

@@ -0,0 +1,8 @@
+.panel {
+  width: 64%;
+}
+
+.green-tick-icon {
+  height: 28px;
+  vertical-align: baseline;
+}

frontend/src/app/features/forgot-your-username-or-password/username-found/username-found.component.spec.ts

@@ -0,0 +1,94 @@
+import { fireEvent, render, within } from '@testing-library/angular';
+import { UsernameFoundComponent } from './username-found.component';
+import { getTestBed } from '@angular/core/testing';
+import { Router, RouterModule } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { FindUsernameService } from '@core/services/find-username.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { PageNoLongerAvailableComponent } from '@core/components/error/page-no-longer-available/page-no-longer-available.component';
+
+describe('UsernameFoundComponent', () => {
+  const setup = async (overrides: any = {}) => {
+    const setupTools = await render(UsernameFoundComponent, {
+      imports: [RouterModule, RouterTestingModule, HttpClientTestingModule],
+      declarations: [PageNoLongerAvailableComponent],
+      providers: [
+        {
+          provide: FindUsernameService,
+          useValue: { usernameFound: overrides.username },
+        },
+      ],
+      componentProperties: {},
+    });
+
+    const component = setupTools.fixture.componentInstance;
+
+    const injector = getTestBed();
+    const router = injector.inject(Router) as Router;
+
+    const routerSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    return { ...setupTools, component, routerSpy };
+  };
+
+  it('should create UsernameFoundComponent', async () => {
+    const overrides = {
+      username: 'Bighitterhank1000',
+    };
+
+    const { component } = await setup(overrides);
+
+    expect(component).toBeTruthy();
+  });
+
+  it('should show the panel', async () => {
+    const overrides = {
+      username: 'Bighitterhank1000',
+    };
+
+    const { getByTestId } = await setup(overrides);
+
+    const panel = getByTestId('panel');
+
+    expect(panel).toBeTruthy();
+    expect(within(panel).getByText('We’ve found your username'));
+  });
+
+  it('should show the username', async () => {
+    const overrides = {
+      username: 'Bighitterhank1000',
+    };
+
+    const { getByTestId } = await setup(overrides);
+
+    const panel = getByTestId('panel');
+    expect(within(panel).getByText('Your username is'));
+    expect(within(panel).getByText('Bighitterhank1000'));
+  });
+
+  it('should go back to the sign in page when the button is clicked', async () => {
+    const overrides = {
+      username: 'Bighitterhank1000',
+    };
+
+    const { fixture, getByText, routerSpy } = await setup(overrides);
+
+    const buttonText = getByText('Back to sign in');
+    expect(buttonText).toBeTruthy();
+
+    fireEvent.click(buttonText);
+    fixture.detectChanges();
+
+    expect(routerSpy).toHaveBeenCalledWith(['/login']);
+  });
+
+  it('should show page no longer available if no username was found', async () => {
+    const overrides = {
+      username: null,
+    };
+
+    const { getByTestId } = await setup(overrides);
+
+    expect(getByTestId('page-no-longer-available')).toBeTruthy();
+  });
+});

frontend/src/app/features/forgot-your-username-or-password/username-found/username-found.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FindUsernameService } from '@core/services/find-username.service';
+
+@Component({
+  selector: 'app-username-found',
+  templateUrl: './username-found.component.html',
+  styleUrls: ['./username-found.component.scss'],
+})
+export class UsernameFoundComponent implements OnInit {
+  public username: string;
+  public isUsernameFound: boolean;
+
+  constructor(private router: Router, private findUsernameService: FindUsernameService) {}
+
+  ngOnInit(): void {
+    this.getUsernameFound();
+    this.isUsernameFound = this.username !== null ? true : false;
+  }
+
+  public getUsernameFound(): void {
+    this.username = this.findUsernameService.usernameFound;
+  }
+
+  public backToSignInPage(event: Event): void {
+    event.preventDefault();
+    this.router.navigate(['/login']);
+  }
+}