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 { 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('', [Validators.required]),
    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'];

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

  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;
    console.log(data);
    this.isShowNumber = false;
    this.jsonrpc.rpc({
      method: 'sendVerifyByPhone',
      params: [data.phone]
    }, RpcService.authService, false).subscribe({
        next: (result) => {
          if (result.code === -1) {
            this.messageService.add({
              severity: 'error',
              summary: 'Произошла ошибка, попробуйте позже!',
            });
          }
          // if (result.code === 0) {
          //   this.isCodeConfirm = true;
          //   this.timeLeft = 60;
          //   const interval = setInterval(() => {
          //     if(this.timeLeft > 0) {
          //       this.timeLeft--;
          //     } else {
          //       clearInterval(interval);
          //     }
          //   },1000)
          // }
          // this.loading = false;
          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 {
            // this.errorConfirmCode = true;
            
          }
        },
        error: (error) => {
          console.error(error);
          
        }
      }
    );
  }

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