<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Login to <%= title %> </title>

  <style>

      html, body {
          height: 100%;
          width: 100%;
          padding: 0;
          font-family: Roboto,Helvetica,Arial,sans-serif;
          font-size: 14px;
          line-height: 1.42857;
          color: #333;
          background-color: #e5e5e5;
          margin: 0;
      }

      .layout-root {
          display: flex;
          flex-direction: column;
          height: 100%;
          max-height: 100%;
          width: 100%;
      }

      *, ::after, ::before {
          box-sizing: border-box;
      }

      .layout-content {
          flex-grow: 1;
          overflow: auto;
      }

      .has-error {
          color: red;
      }

      .center {
          text-align: center;
      }

      .right {
          text-align: right;
      }

      .row {
          margin-right: -15px;
          margin-left: -15px;
      }

      .col-md-12 {
          width: 100%;
          float: left;
          position: relative;
          min-height: 1px;
          padding-right: 15px;
          padding-left: 15px;
      }

      .form-group {
          margin-bottom: 15px;
      }

      label {
          display: inline-block;
          max-width: 100%;
          margin-bottom: 5px;
          font-weight: 700;
      }

      .form-control {
          display: block;
          margin: 0;
          font-size: 14px;
          line-height: 1.42857;
          color: #555;
          width: 100%;
          height: 34px;
          padding: 6px 12px;
          background-color: #fff;
          background-image: none;
          border: 1px solid #ccc;
          border-radius: 2px;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
          transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      }

      .form-control:focus {
          border-color: #66afe9;
          outline: 0;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
      }

      h1 {
          font-size: 36px;
          font-weight: 500;
          line-height: 1.1;
          margin-top: 20px;
          margin-bottom: 10px;
      }

      small {
          font-size: 65%;
          font-weight: 400;
          line-height: 1;
          color: #777;
      }

      .card {
          display: flex;
          flex-direction: column;
          justify-content: center;
          background-color: white;
          padding: 20px;
          margin-top: 100px;
          max-width: 620px;
          position: relative;
          background-color: #fff;
          margin: 0 auto;
          box-shadow: 0 2px 5px rgba(0,0,0,.1);
      }

      .btn.pull-right {
          margin-left: 5px;
      }

      .pull-right {
          float: right !important;
      }

      .btn-primary {
          color: #fff;
          background-color: #2196f3;
          border-color: #2196f3;
      }

      .btn {
          display: inline-block;
          margin-bottom: 0;
          font-weight: 400;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          padding: 6px 12px;
          font-size: 14px;
          line-height: 1.42857;
          border-radius: 2px;
          user-select: none;
      }

      .btn-primary:hover {
          color: #fff;
          background-color: #0c7cd5;
          border-color: #0b76cc;
      }

      .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
          color: #fff;
          background-color: #0a68b4;
          border-color: #08528d;
      }

  </style>

</head>

<body>

<div class="layout-root">

  <div class="layout-content">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= icon %>"/>
          <br/>
          <h1><small>{{ login.loginTo }}</small> <%= title %></h1>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <h4 class="has-error" id="message"></h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <form name="loginForm" onsubmit="return onLogin(event)">
            <div class="form-group">
              <label class="control-label" for="inputUsername">{{ login.username }}</label>
              <input type="text" class="form-control" id="inputUsername" name="username" autofocus required>
            </div>
            <div class="form-group">
              <label class="control-label" for="inputPassword">{{ login.password }}</label>
              <input type="password" class="form-control" name="password" id="inputPassword" required>
            </div>
            <div class="form-group">
              <label class="control-label" for="inputTotpToken">{{ login.2faToken }}</label>
              <input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">
            </div>
            <button class="btn btn-primary btn-outline pull-right" type="submit" id="login">{{ login.signInAction }}</button>
          </form>
          <!-- <a ng-href="" class="hand" ng-click="showPasswordReset()">Reset password</a> -->
        </div>
      </div>
    </div>
  </div>

  <script>

      function onLogin(event) {
          event.preventDefault();

          var username = document.getElementById('inputUsername').value;
          var password = document.getElementById('inputPassword').value;
          var totpToken = document.getElementById('inputTotpToken').value;

          fetch('/login', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              redirect: 'manual',
              body: JSON.stringify({ username: username, password: password, totpToken: totpToken })
          }).then(function (response) {
              if (response.status === 401 || response.status === 403) {
                  document.getElementById('message').innerText = '{{ login.errorIncorrectCredentials }}';
                  return;
              }

              var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
              window.location.href = search.redirect || '/';
          });

         return false;
      }

  </script>

</body>
</html>
