<!DOCTYPE html>
<html>
  <head>
    <base href="/sso/">
    <link rel="stylesheet" href="/sso/css/login.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="shortcut icon" type="image/png" href="/sso/img/favicon.ico">
    <title>Sign In - Lingotek</title>
  </head>
  <body>
    <div class="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path fill="#A65430" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
      </svg>
      <span class="message">Invalid username or password</span>
    </div>
    <div class="mask">
      <div class="panel">
        <form class="sso-form" method="post">
          <div class="panel-header">
            <img src="/sso/img/logo.png">
          </div>
          <div class="panel-body">
            <label>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path fill="#555" d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
              </svg>
              <input type="text" name="username" placeholder="Username" autofocus="" autocomplete="off">
            </label>
            <small class="helper-text"><em>Typically your email address</em></small>
            <label style="margin:16px 16px 16px 0px">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M0 0h24v24H0z" fill="none"/>
                <path fill="#555" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
              </svg>
              <input type="password" name="password" placeholder="Password">
            </label>
            <button class="button" type="submit">Sign in</button>
          </div>
          <div class="panel-footer"><a href="/sso/reset-password" target="_self">Forgot your password?</a></div>
        </form>
      </div>
    </div>
    <script>
      var showAlert = function(message) {
        var alert = document.querySelector('.alert');
        alert.classList.add('visible');
        alert.querySelector('.message').textContent = message;
        setTimeout(function(){
          alert.classList.remove('visible');
          alert.querySelector('.message').textContent = '';
        }, 10000)
      }
      if(window.location.href.indexOf('login_failure') != -1) {
        setTimeout(function() {showAlert('Invalid username or password')}, 100);
      }
      else if(window.location.href.indexOf('user_disabled') != -1) {
        setTimeout(function () { showAlert('This user account has been disabled. Please contact your administrator.') }, 100);
      }
      if ("serviceWorker" in navigator) {
          navigator.serviceWorker
            .register("main.worker.js")
            .then(function (registration) {
              // Registration was successful
              var mainWorker = registration.active;
            })
            .catch(function (err) {
              // registration failed :(
              console.log("ServiceWorker registration failed: ", err);
            });
        }
    </script>
    <!-- <script src="/sso/js/compress.min.js"></script> -->
  </body>
</html>