Auth Login Example

import { Component, DestroyRef, inject, signal } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { AuthService } from '../auth.service';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Router, RouterLink } from '@angular/router';

@Component({
  selector: 'app-login',
  imports: [
    MatCardModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    MatSnackBarModule,
    RouterLink,
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
  standalone: true,
})
export class LoginComponent {
  private readonly authService = inject(AuthService);
  private readonly snackBar = inject(MatSnackBar);
  private readonly destroyRef = inject(DestroyRef);
  private readonly router = inject(Router);

  email = signal('');
  password = signal('');

  signIn() {
    if (!this.email() || !this.password()) {
      this.snackBar.open('Please enter both email and password', 'Close', {
        duration: 3000,
      });
      return;
    }

    this.authService
      .signIn(this.email(), this.password())
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: () => {
          this.router.navigate(['/cases']);
        },
        error: (error: { message: string }) => this.handleError(error),
      });
  }

  private handleError(error: { message: string }) {
    this.snackBar.open('Login failed: ' + error.message, 'Close', {
      duration: 3000,
    });
  }
}

<mat-card class="login-card">
  <mat-card-header class="login-card-header">
    <mat-card-title class="login-card-title">Login</mat-card-title>
  </mat-card-header>
  <mat-card-content class="login-card-content">
    <mat-form-field>
      <mat-label>Email</mat-label>
      <input type="text" matInput required [(ngModel)]="email" />
    </mat-form-field>

    <mat-form-field>
      <mat-label>Password</mat-label>
      <input type="password" matInput required [(ngModel)]="password" />
    </mat-form-field>
  </mat-card-content>
  <mat-card-actions class="login-card-buttons">
    <button mat-raised-button color="primary" (click)="signIn()">Login</button>
    <button
      mat-raised-button
      color="secondary"
      [routerLink]="['/registration']"
    >
      Registration
    </button>
  </mat-card-actions>
</mat-card>