h-usersite/angular/src/app/pages/login/login.component.ts

import {
  AfterViewInit,
  Component,
  EventEmitter,
  HostListener,
  OnInit
} from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { MessageService } from 'primeng/api';
import { CookiesService } from 'src/app/services/cookies.service';
import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit, AfterViewInit {
  public isShowNumber: boolean = true;
  public phoneForm = new FormGroup({
    name: new FormControl('', []),
    phone: new FormControl('', [Validators.required]),
  });
  public codeForm = new FormGroup({
    code: new FormControl('', [Validators.required]),
    code1: new FormControl('', [Validators.required]),
    code2: new FormControl('', [Validators.required]),
    code3: new FormControl('', [Validators.required]),
  });
  private inputIds = ['field', 'field1', 'field2', 'field3'];
  timeLeft: number = 0;

  constructor(
    private cookiesService: CookiesService,
    private router: Router,
    private jsonrpc: JsonrpcService,
    private messageService: MessageService,
    private _snackBar: MatSnackBar
  ) { }

  ngOnInit(): void { }

  ngAfterViewInit() {
    setTimeout(() => {
      this.inputFocusEmitter.emit(`#${this.inputIds[0]}`);
    }, 1000)
  }

  public inputFocusEmitter = new EventEmitter<string>();

  @HostListener('window:keyup', ['$event'])
  HandlKeyEvents(event: any) {
    if (!event.target.classList.contains('field')) return;
    const key = event.key.toLocaleLowerCase();
    let elementId = '';

    switch (key) {
      case 'backspace':
        elementId = event.target.id;
        event.target.value = '';
        const prevInputIndex = this.inputIds.indexOf(elementId) - 1;
        if (prevInputIndex >= 0) {
          this.inputFocusEmitter.emit(`#${this.inputIds[prevInputIndex]}`);
        }
        break;

      default:
        elementId = event.target.id;
        const index = this.inputIds.indexOf(elementId);
        const nextInputIndex = index + 1;
        if (event.target.value.length > 1) {
          event.target.value = event.target.value.slice(-1);

        }
        if (nextInputIndex > 0 && nextInputIndex <= this.inputIds.length) {
          this.inputFocusEmitter.emit(`#${this.inputIds[nextInputIndex]}`);
        }
        break;
    }
  }

  submitNumber() {
    const data = this.phoneForm.value;
    this.isShowNumber = false;
    if (this.timeLeft) {
      this.messageService.clear();
      this.messageService.add({
        severity: 'custom',
        summary: `Отправить повторно можно через ${this.timeLeft}с`,
      });
      return;
    }
    this.jsonrpc.rpc({
      method: 'sendVerifyByPhone',
      params: [data.phone]
    }, RpcService.authService, false).subscribe({
      next: (result) => {
        if (result.code !== 0) {
          this._snackBar.open('Произошла ошибка! Попробуйте позже', '', {
            duration: 3000
          })
        }
        if (result.code === 0) {
          this.timeLeft = 60;
          const interval = setInterval(() => {
            if (this.timeLeft > 0) {
              this.timeLeft--;
            } else {
              clearInterval(interval);
            }
          }, 1000)
        }
        this.isShowNumber = false;
      },
      error: (error) => {
        console.error('Error: ', error);

      }
    }
    );
    setTimeout(() => {
      this.inputFocusEmitter.emit(`#${this.inputIds[0]}`);
    }, 0)
  }

  submitCode() {
    const data = this.codeForm.value;
    this.jsonrpc.rpc({
      method: 'getTokenByPhone',
      params: [this.phoneForm.value.phone, Object.values(data).join('')]
    }, RpcService.authService, false).subscribe({
      next: (result) => {
        if (result.code === 0) {
          this.cookiesService.setCookie('token', result?.data?.token);
          this.router.navigate(['/'], {
            queryParams: {
              token: result?.data?.token
            },
          });
          // this.phoneConfirmed.emit(null);
        } else if (result.code === 230) {
          this._snackBar.open('Неверный код!', '', {
            duration: 3000
          })
          // this.errorConfirmCode = true;

        }
      },
      error: (error) => {
        console.error(error);

      }
    }
    );
  }

  backToPhoneForm() {
    this.codeForm.setValue({
      code: '',
      code1: '',
      code2: '',
      code3: ''
    })
    this.isShowNumber = true
  }
}