From 8bccd857ebd741ade07e3c5f82ea2e5de83ea56c Mon Sep 17 00:00:00 2001
From: fe-dev <Dgerik2015@gmail.com>
Date: Tue, 14 Jun 2022 12:06:46 +0300
Subject: [PATCH] UI: Add input placeholder

---
 .../authentication-dialog/sms-auth-dialog.component.html    | 6 +++++-
 ui-ngx/src/app/shared/components/phone-input.component.html | 4 ++--
 ui-ngx/src/app/shared/components/phone-input.component.ts   | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

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 bb547f56a3..e216c22d3e 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
@@ -37,7 +37,11 @@
       <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">
-          <tb-phone-input fxFlex formControlName="phone" [floatLabel]="'never'"></tb-phone-input>
+          <tb-phone-input fxFlex
+                          formControlName="phone"
+                          [floatLabel]="'never'"
+                          [placeholder]="'security.2fa.dialog.sms-step-label'">
+          </tb-phone-input>
           <button mat-raised-button
                   type="submit"
                   color="primary"
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 039f52a272..c5b2ae7bc1 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.html
+++ b/ui-ngx/src/app/shared/components/phone-input.component.html
@@ -28,12 +28,12 @@
       </mat-select>
     </div>
     <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
-      <mat-label translate>security.2fa.dialog.sms-step-label</mat-label>
+      <mat-label>{{ placeholder | translate }}</mat-label>
       <input
         formControlName="phoneNumber"
         type="tel"
         matInput
-        placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}"
+        placeholder="{{ placeholder | translate }}"
         [pattern]="phoneNumberPattern"
         (focus)="focus()"
         autocomplete="off"
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 f5fdf62f34..297c3c2e8a 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.ts
+++ b/ui-ngx/src/app/shared/components/phone-input.component.ts
@@ -61,6 +61,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   @Input() required = true;
   @Input() floatLabel: FloatLabelType = 'always';
   @Input() appearance: MatFormFieldAppearance = 'legacy';
+  @Input() placeholder = 'phone-input.phone-input-label';
 
   allCountries: Array<Country> = this.countryCodeData.allCountries;
   phonePlaceholder: string;