From 51e05d1a9ad7bc60d824949d57639c56dc4d0666 Mon Sep 17 00:00:00 2001
From: fe-dev <Dgerik2015@gmail.com>
Date: Tue, 14 Jun 2022 16:14:01 +0300
Subject: [PATCH] UI: Refactoring phone input and add to test sms dialog and
 contact

---
 .../admin/send-test-sms-dialog.component.html | 16 ++++------
 .../sms-auth-dialog.component.html            |  2 +-
 .../shared/components/contact.component.html  | 12 ++++----
 .../components/phone-input.component.html     |  2 +-
 .../components/phone-input.component.scss     |  1 -
 .../components/phone-input.component.ts       | 30 ++++++++++++++-----
 6 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index cc7b4d21f3..40cc60f730 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -30,17 +30,11 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="sendTestSmsDialogContent">
     <fieldset [disabled]="(isLoading$ | async)">
-      <mat-form-field class="mat-block">
-        <mat-label translate>admin.number-to</mat-label>
-        <input type="tel" required [pattern]="phoneNumberPattern" matInput formControlName="numberTo">
-        <mat-error *ngIf="sendTestSmsFormGroup.get('numberTo').hasError('required')">
-          {{ 'admin.number-to-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="sendTestSmsFormGroup.get('numberTo').hasError('pattern')">
-          {{ 'admin.phone-number-pattern' | translate }}
-        </mat-error>
-        <mat-hint innerHTML="{{ 'admin.phone-number-hint' | translate }}"></mat-hint>
-      </mat-form-field>
+      <tb-phone-input required
+                      formControlName="numberTo"
+                      [enableFlagsSelect]="false"
+                      [label]="'admin.number-to'">
+      </tb-phone-input>
       <mat-form-field class="mat-block">
         <mat-label translate>admin.sms-message</mat-label>
         <textarea required matInput rows="3" [maxLength]="1600" formControlName="message"></textarea>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index e216c22d3e..aace1d7152 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -36,7 +36,7 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template>
       <form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="15px">
           <tb-phone-input fxFlex
                           formControlName="phone"
                           [floatLabel]="'never'"
diff --git a/ui-ngx/src/app/shared/components/contact.component.html b/ui-ngx/src/app/shared/components/contact.component.html
index 1947669d4c..2776c88863 100644
--- a/ui-ngx/src/app/shared/components/contact.component.html
+++ b/ui-ngx/src/app/shared/components/contact.component.html
@@ -55,13 +55,11 @@
     <mat-label translate>contact.address2</mat-label>
     <input matInput formControlName="address2">
   </mat-form-field>
-  <mat-form-field class="mat-block">
-    <mat-label translate>contact.phone</mat-label>
-    <input matInput formControlName="phone">
-    <mat-error *ngIf="parentForm.get('phone').hasError('maxlength')">
-      {{ 'contact.phone-max-length' | translate }}
-    </mat-error>
-  </mat-form-field>
+  <tb-phone-input [required]="false"
+                  [label]="'contact.phone'"
+                  [enableFlagsSelect]="false"
+                  formControlName="phone">
+  </tb-phone-input>
   <mat-form-field class="mat-block">
     <mat-label translate>contact.email</mat-label>
     <input matInput formControlName="email">
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html
index c5b2ae7bc1..83db450d70 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.html
+++ b/ui-ngx/src/app/shared/components/phone-input.component.html
@@ -28,7 +28,7 @@
       </mat-select>
     </div>
     <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
-      <mat-label>{{ placeholder | translate }}</mat-label>
+      <mat-label>{{ label | translate }}</mat-label>
       <input
         formControlName="phoneNumber"
         type="tel"
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.scss b/ui-ngx/src/app/shared/components/phone-input.component.scss
index d8bd9df461..acca75f560 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.scss
+++ b/ui-ngx/src/app/shared/components/phone-input.component.scss
@@ -21,7 +21,6 @@
 
     .phone-input {
       width: 100%;
-      max-width: 290px;
     }
   }
 
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts
index 297c3c2e8a..47bdf8741c 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.ts
+++ b/ui-ngx/src/app/shared/components/phone-input.component.ts
@@ -55,13 +55,29 @@ import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-f
 })
 export class PhoneInputComponent implements OnInit, ControlValueAccessor, Validator {
 
-  @Input() disabled: boolean;
-  @Input() defaultCountry: CountryCode = 'US';
-  @Input() enableFlagsSelect = true;
-  @Input() required = true;
-  @Input() floatLabel: FloatLabelType = 'always';
-  @Input() appearance: MatFormFieldAppearance = 'legacy';
-  @Input() placeholder = 'phone-input.phone-input-label';
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  defaultCountry: CountryCode = 'US';
+
+  @Input()
+  enableFlagsSelect = true;
+
+  @Input()
+  required = true;
+
+  @Input()
+  floatLabel: FloatLabelType = 'auto';
+
+  @Input()
+  appearance: MatFormFieldAppearance = 'legacy';
+
+  @Input()
+  placeholder;
+
+  @Input()
+  label = 'phone-input.phone-input-label';
 
   allCountries: Array<Country> = this.countryCodeData.allCountries;
   phonePlaceholder: string;