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

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

    @if (errorMessage()) {
      <div class="error-message">
        {{ 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">
        @if (isLoading()) {
          <span>Logging in...</span>
        } @else {
          <span>Login</span>
        }
      </button>
    </form>
  </div>
</div>