docs/docs-web/src/main/webapp/src/partial/docs/login.html

<style>
  /* No navbar in login screen */
  .navbar {
    display: none;
  }

  /* Absolute positionned footer on top of the login background */
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
  }

  @media screen and (min-width: 768px) {
    .footer {
      width: 50%;
    }
  }

  /* Smaller links everywhere on login */
  a {
    font-size: 90%;
    color: #666;
  }
</style>
<div class="row vertical-center">
  <div class="col-sm-6 col-xs-12 login-box">
    <div class="row">
      <div class="col-lg-offset-4 col-lg-4 col-xs-offset-1 col-xs-10">
        <img src="img/title.png" class="img-responsive" />

        <form>
          <div class="form-group">
            <label class="sr-only" for="inputUsername">{{ 'login.username' | translate }}</label>
            <input class="form-control" type="text" id="inputUsername" name="username"
                   ng-attr-placeholder="{{ 'login.username' | translate }}" ng-model="user.username" />
          </div>

          <div class="form-group">
            <label class="sr-only" for="inputPassword">{{ 'login.password' | translate }}</label>
            <input class="form-control" type="password" id="inputPassword" name="password"
                   ng-attr-placeholder="{{ 'login.password' | translate }}" ng-model="user.password" />
          </div>

          <span class="help-block" ng-if="codeRequired">
            {{ 'login.validation_code_required' | translate }}
            <span class="fas fa-question-circle" title="{{ 'login.validation_code_title' | translate }}"></span>
          </span>
          <div class="form-group" ng-if="codeRequired">
            <label class="sr-only" for="inputCode">{{ 'login.validation_code' | translate }}</label>
            <input class="form-control" type="text" id="inputCode" name="code"
                   ng-attr-placeholder="{{ 'login.validation_code' | translate }}" ng-model="user.code" />
          </div>

          <div class="checkbox text-muted">
            <label>
              <input type="checkbox" ng-model="user.remember" name="remember" /> {{ 'login.remember_me' | translate }}
            </label>
          </div>

          <div class="row">
            <div class="col-md-6">
              <button type="submit" class="btn btn-primary" ng-click="login()">
                <span class="fas fa-check"></span> {{ 'login.submit' | translate }}
              </button>
            </div>

            <div class="col-md-6 text-right btn-password-lost">
              <div class="well-sm">
                <a href ng-click="openPasswordLost()">{{ 'login.password_lost_btn' | translate }}</a>
              </div>
            </div>
          </div>

          <p class="text-center" ng-if="app.guest_login">&nbsp;</p>

          <button type="submit" class="btn btn-default btn-block" ng-if="app.guest_login" ng-click="loginAsGuest()">
            <span class="fas fa-user"></span> {{ 'login.login_as_guest' | translate }}
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="login-img-container col-sm-6 hidden-xs"></div>
</div>