psp_panel/src/app/modules/auth/pages/login/login.component.ts

import { AuthService } from '@/core';
import { IAuthResponse, LoginCredentials, TRoles } from '@/core/models';
import { ToastService } from '@/core/services/toast.service';
import { UikitFieldComponent } from '@/uikit/uikit-field.component';
import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, Input, Output, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Button } from 'primeng/button';
import { ImageModule } from 'primeng/image';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { InputText } from 'primeng/inputtext';
import { Password } from 'primeng/password';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { RadioButtonModule } from 'primeng/radiobutton';
// import { CENTRAL_AUTH_ROLES } from '../../constants/central-auth-roles.const';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  imports: [
    CommonModule,
    ReactiveFormsModule,
    Button,
    Password,
    InputText,
    ImageModule,
    ProgressSpinnerModule,
    RadioButtonModule,
    InputGroupModule,
    InputGroupAddonModule,
    UikitFieldComponent,
  ],
})
export class LoginComponent {
  @Input() redirectUrl!: string;
  @Input() loginApiUrl!: string;
  @Input() defaultRole?: TRoles;

  @Output() onSuccessfullySubmit = new EventEmitter<IAuthResponse>();
  @Output() onToSignup = new EventEmitter<void>();

  private readonly authService = inject(AuthService);
  private readonly router = inject(Router);
  private readonly fb = inject(FormBuilder);
  private readonly toastService = inject(ToastService);

  readonly isLoading = computed(() => this.authService.isLoading());
  readonly errorMessage = signal<string>('');
  readonly hidePassword = signal<boolean>(true);
  // readonly isCaptchaExpired = this.captchaService.captchaIsExpired;
  // readonly isCaptchaLoading = this.captchaService.loading;
  // readonly captchaImageSrc = this.captchaService.captchaImageSrc;
  // readonly centralAuthRoles = CENTRAL_AUTH_ROLES;

  readonly loginForm = this.fb.group({
    username: ['', [Validators.required]],
    password: ['', [Validators.required]],
    rememberMe: [false],
    // captcha: ['', [Validators.required]],
    // role: [this.defaultRole, [Validators.required]],
  });

  ngOnInit() {
    // this.captchaService.requestNewCaptcha();
  }

  togglePasswordVisibility(): void {
    this.hidePassword.set(!this.hidePassword());
  }

  // resetCaptcha(): void {
  //   this.fb.control('captcha').setValue('');
  //   this.captchaService.renewCaptcha();
  // }

  // onRefreshCaptcha(): void {
  //   this.resetCaptcha();
  // }
  // onRefreshCaptchaImage(): void {
  //   this.resetCaptcha();
  //   // document
  //   //   .getElementById('captchaImage')
  //   //   ?.setAttribute('src', this.captchaService.captchaImageSrc()! + `&${new Date().getTime()}`);
  // }

  toSignup() {
    this.onToSignup.emit();
  }

  submit(): void {
    this.loginForm.markAllAsTouched();
    if (this.loginForm.invalid) return;
    // if (!this.captchaService.captchaId()) {
    //   this.toastService.error({ text: 'مقدار کپچا را وارد کنید' });
    // }
    const credentials: LoginCredentials = this.loginForm.value as LoginCredentials;

    this.authService.login(credentials).subscribe({
      next: (data) => {
        this.errorMessage.set('');
        if (this.redirectUrl) {
          this.router.navigateByUrl(this.redirectUrl.replace(/\/[^/]*$/, ''));
        } else {
          this.onSuccessfullySubmit.emit(data);
        }
      },
      error: (error) => {
        // this.resetCaptcha();
        this.errorMessage.set('نام کاربری یا رمز عبور اشتباه است');
        console.error('Login failed:', error);
      },
    });
  }
}