popup-login.html

<div class="modal fade" id="loginPopup" tabindex="-1" role="dialog" aria-labelledby="loginPopupLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginPopupLabel">Login to the server</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="container-fluid">
        <div class="row" id="loginForm">
          <div class="col-sm-9 col-md-7 col-lg-12">
            <div class="main-card mb-3 card">
              <div class="card-body">
                <div class="form-signin">
                  <div class="form-label-group">
                    <input type="email" id="inputUserName" class="form-control" placeholder="User Name" required
                           autofocus>
                    <label for="inputUserName">User Name</label>
                  </div>

                  <div class="form-label-group">
                    <input type="password" id="inputUserPassword" class="form-control" placeholder="Password"
                           required>
                    <label for="inputUserPassword">Password</label>
                  </div>

                  <button onclick="login()" class="btn btn-lg btn-primary btn-block" type="submit"> Sign in
                    <img id="loginSpinner" class="ui-loading" src="/images/color-spin-small.svg" style="display: none;">
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>