<div class="login__wrapper">
  <div class="login__container">
    <div class="login__inner">
      <div class="login__top">
        <a class="login__logo" href="https://quickblox.com/">
          <img alt="QuickBlox" src="../../../assets/img/qb-logo.svg">
        </a>
        <h1>Quickblox Chat Sample</h1>
        <h3>Please enter Username and login</h3>
      </div>
      <form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="login__form" name="loginForm">
        <div [class.error]="!userLoginFocused" [class.filled]="loginModel.userLogin" class="login_form__row">
          <label for="userLogin">Login</label>
          <input [(ngModel)]="loginModel.userLogin" (ngModelChange)="onChange()" id="userLogin" name="userLogin"
                 pattern="{{ userLoginRegExString }}"
                 required
                 title="Field should contain alphanumeric characters only in a range 3 to 20. The first character must be a letter."
                 type="text">
        </div>
        <div [class.error]="!userNameFocused" [class.filled]="loginModel.userName" class="login_form__row">
          <label for="userName">Username</label>
          <input [(ngModel)]="loginModel.userName" (ngModelChange)="onChange()" id="userName" name="userName"
                 pattern="{{ userNameRegExString }}"
                 required
                 title="Field should contain alphanumeric characters only in a range 3 to 20. The first character must be a letter."
                 type="text">
        </div>
        <div class="login__button_wrap">
          <button [disabled]="!loginForm.valid" class="btn m-login__button j-login__button" name="login_submit"
                  type="submit"> LOGIN
          </button>
        </div>
      </form>
    </div>
    <div class="login__footer">
      <div class="footer__logo_wrap">
        <a class="footer__logo" href="https://quickblox.com/">
          <img alt="QuickBlox" src="../../../assets/img/qblogo-grey.svg">
        </a>
        <p>by QuickBlox</p>
      </div>
      <span class="footer__version">v. 2.12.1:1084</span>
    </div>
  </div>
</div>
