We need at least two additional Material modules in order to implement a basic Login form, that is, the Input and Button component modules. Let's look at how we can add them:

1. Update the src/app/app.module.ts file so that it contains the following code:

      import { MatButtonModule } from '@angular/material/button';
      import { MatInputModule } from '@angular/material/input';

      @NgModule({
        declarations: [AppComponent, LoginComponent],
        imports: [
          // ...
          MatInputModule,
          MatButtonModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule {}

2. Replace the contents of the src/app/login/login.component.html file with the following code:

      <div class="login-form-container">
        <div class="login-form">
          <h1>Login</h1>

          <mat-form-field class="login-field">
            <input #loginField matInput placeholder="Username" 
               autocomplete="off" />
          </mat-form-field>

          <mat-form-field class="login-field">
            <input #passwordField type="password" matInput 
                placeholder="Password" />
          </mat-form-field>
      
          <div class="login-actions">
            <button mat-raised-button>Login</button>
          </div>
        </div>
      </div>

In the preceding code, we are declaring a heading with the Login text. We have also provided two input fields and a button to perform authentication.

Next, we need to provide styling for the login form. Let's have the form centered horizontally. The Login button should be on the right-hand side of the screen. Let's get started:

1. Update the src/app/login/login.component.scss file so that it contains the following code:

      .login-form-container {
        display: flex;
      
        .login-form {
          margin: auto;
          min-width: 150px;
          max-width: 500px;
          width: 100%;

          .login-field {
            width: 100%;
          }

          .login-actions {
            text-align: right;
          }
        }
      }

2. Run or restart the web server and check out the /login route.
3. The application should now look as follows:

We need to provide at least basic validation and error handling for the dialog.