dev #14384 Правка ошибок отображения WPA КофеЛайк: fix sms enter code in safari

angular/src/app/directives/focus-next-input.directive.ts

@@ -9,7 +9,9 @@ export class FocusNextInputDirective {
   constructor(private renderer: Renderer2) { }
 
   ngOnInit() {
-    // TODO: don't need to listen all events
+    // TODO:
+		// 1: don't need to listen all events
+		// 2: not working in safari
     this.eventEmitter.subscribe(elementId => {
       try {
         const element = this.renderer.selectRootElement(elementId)

angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.ts

@@ -15,7 +15,7 @@ export class SocialMediaButtonsComponent implements OnInit {
   public links: ISocialMediaLink[] = [
     {
       label: 'Инстаграм',
-      url: 'https://www.instagram.com/',
+      url: 'https://instagram.com/coffeelike_com?igshid=MzRlODBiNWFlZA==',
       imgUrl: '/assets/social-media-icons/instagram.svg'
     },
     {

angular/src/app/presentation-options/default-option/pages/login/login.component.html

@@ -55,7 +55,6 @@
           type="tel"
           placeholder="•"
           #field
-          [appFocusNextInput]="inputFocusEmitter"
           formControlName="code"
           maxlength="1"
       /></label>
@@ -66,7 +65,6 @@
           type="tel"
           placeholder="•"
           #field1
-          [appFocusNextInput]="inputFocusEmitter"
           formControlName="code1"
           maxlength="1"
       /></label>
@@ -77,7 +75,6 @@
           type="tel"
           placeholder="•"
           #field2
-          [appFocusNextInput]="inputFocusEmitter"
           formControlName="code2"
           maxlength="1"
       /></label>
@@ -88,7 +85,6 @@
           type="tel"
           placeholder="•"
           #field3
-          [appFocusNextInput]="inputFocusEmitter"
           formControlName="code3"
           maxlength="1"
       /></label>

angular/src/app/presentation-options/default-option/pages/login/login.component.ts

@@ -1,9 +1,11 @@
 import {
   AfterViewInit,
   Component,
+  ElementRef,
   EventEmitter,
   HostListener,
   OnInit,
+  ViewChild,
 } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -39,17 +41,17 @@ export class LoginComponent implements OnInit, AfterViewInit {
     private messageService: MessageService,
     private _snackBar: MatSnackBar,
     private jsonRpcService: JsonrpcService
-  ) {}
+  ) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   ngAfterViewInit() {
-    setTimeout(() => {
-      this.inputFocusEmitter.emit(`#${this.inputIds[0]}`);
-    }, 1000);
   }
-	
-  public inputFocusEmitter = new EventEmitter<string>();
+
+  @ViewChild('field', { static: false }) field!: ElementRef;
+  @ViewChild('field1', { static: false }) field1!: ElementRef;
+  @ViewChild('field2', { static: false }) field2!: ElementRef;
+  @ViewChild('field3', { static: false }) field3!: ElementRef;
 
   @HostListener('window:keydown', ['$event'])
   HandlKeyEvents(event: any) {
@@ -63,23 +65,48 @@ export class LoginComponent implements OnInit, AfterViewInit {
         event.target.value = '';
         const prevInputIndex = this.inputIds.indexOf(elementId) - 1;
         if (prevInputIndex >= 0) {
-          this.inputFocusEmitter.emit(`#${this.inputIds[prevInputIndex]}`);
+          // this.inputFocusEmitter.emit(`#${this.inputIds[prevInputIndex]}`);
+          this.focusFieldByIndex(prevInputIndex);
         }
         break;
 
       default:
-        elementId = event.target.id;				
+        elementId = event.target.id;
         const index = this.inputIds.indexOf(elementId);
         const nextInputIndex = index + 1;
-        event.target.value = event.key;
-        
+        event.target.value = key;
+
         if (nextInputIndex > 0 && nextInputIndex <= this.inputIds.length) {
-          this.inputFocusEmitter.emit(`#${this.inputIds[nextInputIndex]}`);
+          // this.inputFocusEmitter.emit(`#${this.inputIds[nextInputIndex]}`);
+          this.focusFieldByIndex(nextInputIndex);
         }
+        if (nextInputIndex == this.inputIds.length) {
+          this.field3!.nativeElement.blur();
+        }
+
         break;
     }
   }
 
+  focusFieldByIndex(i: number) {
+    setTimeout(() => {
+      switch (i) {
+        case 0:
+          this.field.nativeElement.focus();
+          break;
+        case 1:
+          this.field1.nativeElement.focus();
+          break;
+        case 2:
+          this.field2.nativeElement.focus();
+          break;
+        case 3:
+          this.field3.nativeElement.focus();
+          break;
+      }
+    }, 0);
+  }
+
   submitNumber() {
     const data = this.phoneForm.value;
     this.isShowNumber = false;
@@ -123,7 +150,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
         },
       });
     setTimeout(() => {
-      this.inputFocusEmitter.emit(`#${this.inputIds[0]}`);
+      this.field.nativeElement.focus();
     }, 0);
   }
 
@@ -164,7 +191,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
               },
               error: (err) => {
                 console.error(err);
-                
+
               }
             })
             // this.phoneConfirmed.emit(null);