KanbanCloneAngular/src/app/pages/login/login.component.html

<div class="login-container">
  <div class="login-card">
    <h1>{{ 'KanbanCloneAngular' }}</h1>
    <h2>Sign In</h2>

    <div class="error-message" *ngIf="errorMessage()">
      {{ errorMessage() }}
    </div>

    <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
      <div class="form-group">
        <label for="email">e-mail address</label>
        <input
          id="email"
          type="email"
          [(ngModel)]="email"
          name="email"
          placeholder="Enter your e-mail address"
          required
          autocomplete="username"
        />
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input
          id="password"
          type="password"
          [(ngModel)]="password"
          name="password"
          placeholder="Enter your password"
          required
          autocomplete="current-password"
        />
      </div>

      <button type="submit" class="btn-primary" [disabled]="isLoading() || !loginForm.form.valid">
        <span *ngIf="isLoading(); else loginText">Logging in...</span>
        <ng-template #loginText><span>Login</span></ng-template>
      </button>
    </form>

    <p class="register-link">or <a routerLink="/register">register here</a></p>
  </div>
</div>