At this point, you may be wondering why we need a Login dialog in our application. The answer is for application data security. In real life, all data access must be protected, and you are going to enable all kinds of security restrictions when you release your application into production. This is why we need to implement a login dialog and authenticate the session with the remote server.

Follow these steps to build a Login dialog:

1. Generate a login component scaffold by running the following command:

      ng g component login

2. In the src/app/app-routing.module.ts file, create a new Route with a /login URL that points to the Login Dialog component:

      // ...
      import { LoginComponent } from './login/login.component';

      const routes: Routes = [
        {
          path: 'login',
          component: LoginComponent
        }
      ];
      
      @NgModule({
        imports: [RouterModule.forRoot(routes)],
        exports: [RouterModule]
      })
      export class AppRoutingModule {}

We need to make a title area so that we can navigate to the default home page and so that the Login link navigates to our /login route.

3. Update the src/app/app.component.html file and replace the span elements with hyperlinks:

      <mat-toolbar color="primary">
        <a [routerLink]="'/'">Electron Chat</a>

        <span class="fill-space"></span>
  
        <a [routerLink]="'login'">Login</a>
      </mat-toolbar>

      <router-outlet></router-outlet>

4. Update the src/app/app.component.scss file by making some styling changes to make the hyperlinks look better on the blue background:

      .mat-toolbar {
        & > a {
          text-decoration: none;
          color: white;
        }
      }

5. Run the web application in the local web server once more with the ng serve --open command. Click the Login link to navigate to the Login Dialog component's implementation. By default, it should contain the text login works!:

6. Click on the title area to make sure you can navigate back to the home page. The home page should be blank for the time being. This is fine; we will add some content to it later.

Now that we have a placeholder for the Login dialog, let's build the traditional user interface. This interface will contain the username and password input fields, as well as a submit button.