SFM-Broker/src/app/profile/user-profile/user-profile.component.html

<h5 *ngIf="canEditUser()" > <kendo-icon [name]="'ascx'" >  </kendo-icon> &nbsp; Login Related </h5>

<form *ngIf="canEditUser()" class="k-form" [formGroup]="UserForm" (submit)="save()">
  <ng-container >
    <fieldset class="k-form-fieldset">
      <kendo-formfield>
        <kendo-label [for]=login text="Unique Login id:  ">
          <kendo-loader *ngIf="UserForm.get('Login').status === 'PENDING'"
          [type]="'pulsing'"
          [themeColor]="'primary'"
          [size]="'medium'"
        ></kendo-loader>
        </kendo-label>
        <kendo-textbox #login kendoTextBox name="Login" formControlName="Login">
        </kendo-textbox>
        <kendo-formerror *ngIf="UserForm.get('Login').hasError('required')" >Login is required</kendo-formerror>
        <kendo-formerror *ngIf="UserForm.get('Login').hasError('loginAvailable')" >Login is used by someone else </kendo-formerror>
        <kendo-formerror *ngIf="UserForm.get('Login').hasError('email')" >Login should be email format</kendo-formerror>
      </kendo-formfield>
      <div class="vertical-spacer"></div>

      <kendo-formfield *ngIf="showAdmin ">
        <label class="k-label">Allow Login &nbsp;
          <input type="checkbox" name="enabled" kendoCheckBox  formControlName="Enabled"/>
        </label>
      </kendo-formfield>
      <div class="vertical-spacer"></div>

    </fieldset>
  </ng-container>
  <div class="k-form-buttons k-buttons-end" *ngIf="showSubmit()">
    <div>
      <button kendoButton class="k-button k-primary" type="submit" icon="save"
              > Modify Login</button>
    </div>
  </div>


</form>

<app-message-box #messageBox ></app-message-box>