UI: add phone input with country flags for sms authenticator

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html

@@ -37,20 +37,7 @@
       <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">
-          <mat-form-field  fxFlex class="mat-block input-container" floatLabel="always" hideRequiredMarker>
-            <mat-label></mat-label>
-            <input type="tel" required
-                   [pattern]="phoneNumberPattern"
-                   matInput formControlName="phone"
-                   placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}">
-            <mat-error *ngIf="smsConfigForm.get('phone').hasError('required')">
-              {{ 'admin.number-to-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="smsConfigForm.get('phone').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 fxFlex formControlName="phone" [floatLabel]="'never'"></tb-phone-input>
           <button mat-raised-button
                   type="submit"
                   color="primary"

ui-ngx/src/app/shared/components/phone-input.component.html

@@ -27,7 +27,7 @@
         </mat-option>
       </mat-select>
     </div>
-    <mat-form-field class="phone-input" [floatLabel]="showLabel">
+    <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
       <mat-label translate>phone-input.phone-input-label</mat-label>
       <input
         formControlName="phoneNumber"
@@ -38,15 +38,13 @@
         (focus)="focus()"
         autocomplete="off"
         [required]="required">
+      <mat-hint innerHTML="{{ 'phone-input.phone-input-hint' | translate: {phoneNumber: phonePlaceholder} }}"></mat-hint>
       <mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('required')">
         {{ 'phone-input.phone-input-required' | translate }}
       </mat-error>
       <mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('invalidPhoneNumber')">
         {{ 'phone-input.phone-input-validation' | translate }}
       </mat-error>
-      <mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('pattern')">
-        {{ 'phone-input.phone-input-pattern' | translate }}
-      </mat-error>
     </mat-form-field>
   </div>
 </form>

ui-ngx/src/app/shared/components/phone-input.component.scss

@@ -21,6 +21,7 @@
 
     .phone-input {
       width: 100%;
+      max-width: 290px;
     }
   }
 

ui-ngx/src/app/shared/components/phone-input.component.ts

@@ -33,6 +33,7 @@ import examples from 'libphonenumber-js/examples.mobile.json';
 import { CountryCode, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js';
 import { phoneNumberPattern } from '@shared/models/settings.models';
 import { Subscription } from 'rxjs';
+import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field/form-field';
 
 @Component({
   selector: 'tb-phone-input',
@@ -58,15 +59,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   @Input() defaultCountry: CountryCode = 'US';
   @Input() enableFlagsSelect = true;
   @Input() required = true;
-
-  private floatLabel = 'always';
-  get showLabel(): string {
-    return this.floatLabel;
-  }
-  @Input()
-  set showLabel(value) {
-    this.floatLabel = value ? 'always' : 'never';
-  }
+  @Input() floatLabel: FloatLabelType = 'always';
+  @Input() appearance: MatFormFieldAppearance = 'legacy';
 
   allCountries: Array<Country> = [];
   phonePlaceholder: string;
@@ -134,6 +128,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 
   focus() {
     const phoneNumber = this.phoneFormGroup.get('phoneNumber');
+    this.phoneFormGroup.markAsPristine();
+    this.phoneFormGroup.markAsUntouched();
     if (!phoneNumber.value) {
       phoneNumber.patchValue(this.countryCallingCode);
     }
@@ -220,7 +216,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 
   private updateModel() {
     const phoneNumber = this.phoneFormGroup.get('phoneNumber');
-    if (phoneNumber.valid && this.modelValue !== phoneNumber.value) {
+    if (phoneNumber.valid && phoneNumber.value) {
       this.modelValue = phoneNumber.value;
       this.propagateChange(this.modelValue);
     } else {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4435,7 +4435,8 @@
         "phone-input-label": "Phone number",
         "phone-input-required": "Phone number is required",
         "phone-input-validation": "Phone number is invalid or not possible",
-        "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}"
+        "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}",
+        "phone-input-hint": "Phone Number in E.164 format, ex. {{phoneNumber}}"
     },
     "custom": {
         "widget-action": {