Auth Registration Example

import { Component, DestroyRef, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButton } from '@angular/material/button';
import {
  MatCard,
  MatCardActions,
  MatCardContent,
  MatCardHeader,
  MatCardTitle,
} from '@angular/material/card';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { Router, RouterLink } from '@angular/router';
import { AuthService } from '../auth.service';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-registration',
  imports: [
    MatCard,
    MatCardHeader,
    MatCardTitle,
    MatCardContent,
    MatButton,
    MatFormField,
    MatInput,
    MatLabel,
    MatCardActions,
    MatSnackBarModule,
    FormsModule,
    RouterLink,
  ],
  templateUrl: './registration.component.html',
  styleUrl: './registration.component.scss',
  standalone: true,
})
export class RegistrationComponent {
  private readonly authService = inject(AuthService);
  private readonly snackBar = inject(MatSnackBar);
  private readonly router = inject(Router);
  private readonly destroyRef = inject(DestroyRef);

  email = signal<string>('');
  password = signal<string>('');
  passwordCheck = signal<string>('');

  signUp() {
    const emailValue = this.email();
    const passwordValue = this.password();
    const passwordCheckValue = this.passwordCheck();

    if (!emailValue || !passwordValue || !passwordCheckValue) {
      this.snackBar.open('All fields are required', 'Close', {
        duration: 3000,
      });
      return;
    }

    if (passwordValue !== passwordCheckValue) {
      this.snackBar.open('Passwords do not match', 'Close', { duration: 3000 });
      return;
    }

    this.authService
      .signUp(emailValue, passwordValue)
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: () => {
          this.snackBar.open('Registration successful!', 'Close', {
            duration: 3000,
          });
          this.router.navigate(['/login']);
        },
        error: (error: { message: string }) => {
          this.snackBar.open('Registration failed: ' + error.message, 'Close', {
            duration: 3000,
          });
        },
      });
  }
}

<mat-card class="registration-card">
  <mat-card-header class="registration-card-header">
    <mat-card-title>Registration</mat-card-title>
  </mat-card-header>
  <mat-card-content class="registration-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-form-field>
      <mat-label>Password Check</mat-label>
      <input type="password" matInput required [(ngModel)]="passwordCheck" />
    </mat-form-field>
  </mat-card-content>
  <mat-card-actions class="registration-card-buttons">
    <button mat-raised-button color="primary" (click)="signUp()">
      Register
    </button>
    <button mat-raised-button color="secondary" [routerLink]="['/login']">
      Back
    </button>
  </mat-card-actions>
</mat-card>