kishan

<preloader [show]="isLoaderShow"></preloader>
<div class="login-form">
  <div class="text-center mb-4">
    <img src="../../../../assets/images/logo.svg" class="img-fluid portal-logo" />
  </div>
  <div class="card-box">
    <h1 class="text-center mb-4">Login</h1>
    <form [formGroup]="form" (ngSubmit)="onLogin()" *ngIf="form">
      <div class="form-group">
        <label for="email">Email</label><span class="text-danger">*</span>
        <input type="text"
               id="email" name="EmailId"
               placeholder="Email"
               class="form-control"
               maxlength="{{emailMaxLength}}"
               formControlName="EmailId" autocomplete="off" />
        <div *ngIf="(formSubmitted || form.controls.EmailId.touched) && form.controls.EmailId.errors" class="f-error-msg">
          <div *ngIf="form.controls.EmailId.errors.email">Invalid email format</div>
          <div *ngIf="form.controls.EmailId.errors.required">Email is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="password">Password<span class="text-danger">*</span> <span tooltip="{{passwordCriteria}}" placement="top"><i class="fa fa-info-circle ms-1 text-primary" aria-hidden="true"></i></span></label>
        <div class="position-relative">
          <input type="password"
                 id="password" name="Password"
                 placeholder="Password"
                 class="form-control"
                 maxlength="{{passwordMaxLength}}"
                 formControlName="Password" showHidePassword autocomplete="off" />
        </div>
        <div *ngIf="(formSubmitted || form.controls.Password.touched) && form.controls.Password.errors" class="f-error-msg">
          <div *ngIf="form.controls.Password.errors.password">Password criteria doesn't match.</div>
          <div *ngIf="form.controls.Password.errors.required">Password is required</div>
        </div>
      </div>
      <div class="form-group" *ngIf="invalidLoginAttempts >= maxInvalidAttempts">
        <ngx-recaptcha2 #captchaElem
                        [siteKey]="'6Le6HM4UAAAAAAxLWSlsuOKXQH9yI5CAf7-VGr_g'"
                        [useGlobalDomain]="true"
                        formControlName="Recaptcha">
        </ngx-recaptcha2>
        <div *ngIf="(formSubmitted || form.controls.Recaptcha.touched) && form.controls.Recaptcha.errors" class="f-error-msg">
          <div *ngIf="form.controls.Recaptcha.errors.required">Captcha is required</div>
        </div>
      </div>
      <div class="text-end mb-3">
        <a routerLink="/forgot-password"
           class="text-dark cursor-pointer"><i class="fa fa-lock"></i> Forgot your password?</a>
      </div>
      <button id="Login"
              type="submit"
              [ngClass]="{'btn-success':form.valid,'btn-subdued':form.invalid}"
              class="btn w-100">
        Login
      </button>
      <div class="row pt-3">
        <div class="col-6 text-start"><a class="text-dark cursor-pointer" routerLink="/service-signup"><i class="fa fa-sign-in"></i> Sign up</a></div>
      </div>
    </form>
  </div>
  <div class="text-center mt-3"><p class="mb-0">©2020 Arcora Foundation.</p></div>
</div>
<ng-template #defaultAccountSelectionModal>
  <div class="modal-header">
    <h1 class="modal-title">
      Select account for login
    </h1>
    <button (click)="closeDefaultAccountSelectionPopup()"
            aria-label="Close"
            class="close fa fa-close custom-button-track-event"
            id="close-btn"
            type="button"></button>
  </div>
  <form [formGroup]="multipleAccountForm" *ngIf="multipleAccountForm" (ngSubmit)="onSubmit()">
    <div class="modal-body">
      <div class="row">
        <div class="col-sm-12 form-group">
          Multiple accounts have been found. please select one for login.
        </div>
        <div class="col-sm-12 form-group">
          <select class="custom-select"
                  (change)="onChangeAccount($event)"
                  formControlName="AccountId">
            <option value=null>Select account</option>
            <option [value]="account.AccountId" *ngFor="let account of accountList">{{account.AccountName}}</option>
          </select>
          <div *ngIf="(multipleAccountFormSubmitted || multipleAccountForm?.controls.AccountId.touched) && multipleAccountForm?.controls.AccountId.errors" class="f-error-msg">
            <div *ngIf="multipleAccountForm?.controls.AccountId.errors.required">Please select account.</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="modal-footer flex-column flex-sm-row">
        <button id="save-form" type="button"
                [ngClass]="{'btn-success':multipleAccountForm.valid,'btn-subdued':multipleAccountForm.invalid}"
                class="btn save-btn btn-simple me-2" (click)="onSubmit(false)">
          <i class="fa fa-sign-in"></i> Login as admin
        </button>
        <button id="save-form" type="button"
                [ngClass]="{'btn-success':multipleAccountForm.valid,'btn-subdued':multipleAccountForm.invalid && multipleAccountForm.dirty ,'not-allowed':!hasBothPermission}"
                class="btn save-btn btn-simple" [disabled]="!hasBothPermission" (click)="onSubmit(true)">
          <i class="fa fa-sign-in"></i> Login as user
        </button>
      </div>
    </div>
  </form>
</ng-template>