<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <style type="text/css">
      td
      {
        font-size: 24px;
        vertical-align: middle;
      }

      input
      {
        font-size: 24px;
      }

      html
      {
        height: 100%;
      }

      body
      {
        background: linear-gradient(white, SlateGray);
      }

      .topBox
      {
        height: 490px;
      }

      .inputBox
      {
        width: 100%;
      }

      .messageBox
      {
        font-size: 24px;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
        visibility: hidden;
      }
    </style>

    <script type="text/javascript">

      /*********************************************************************/
      /*                Callbacks for lightdm-webkit-greeter               */
      /*********************************************************************/


      /*
       * show_prompt callback.
       */

      function show_prompt(text, type)
      {
        // type is either "text" or "password"
        prompt = document.getElementById("prompt");
        prompt.innerHTML = text;
        entry = document.getElementById("entry");
        entry.value = "";    // clear entry
        entry.type = type;
        entry.focus();
      }

      /*
       * show_message callback.
       */

      function show_message(text, type)
      {
        if (text.length == 0)
          return;
        messages = document.getElementById("messages");
        messages.style.visibility = "visible";
        // type is either "info" or "error"
        if (type == "error") {
          text = "<font color=\"red\">" + text + "</font>";
        }
        text = text + "<br>";
        messages.innerHTML = messages.innerHTML + text;
      }

      /*
       * authentication_complete callback.
       */

      function authentication_complete()
      {
        if (lightdm.is_authenticated) {
          lightdm.start_session_sync (); // Start default session
        } else {
          show_message ("Authentication Failed", "error");
          setTimeout (start_authentication, 3000);
        }
      }

      /*
       * autologin_timer_expired callback.
       */

      function autologin_timer_expired(username)
      {
        /* Stub.  Does nothing. */
      }

      /*********************************************************************/
      /*                Functions local to this greeter                    */
      /*********************************************************************/

      /*
       * clear_messages
       */

      function clear_messages()
      {
        messages = document.getElementById("messages");
        messages.innerHTML = "";
        messages.style.visibility = "hidden";
      }

      /*
       * Kickoff the authentication process
       */

      function start_authentication()
      {
        clear_messages();
        lightdm.authenticate();   // start with null userid, have pam prompt for userid.
      }

      /*
       * handle the input from the entry field.
       */

      function handle_input()
      {
        entry = document.getElementById("entry");
        lightdm.respond(entry.value);
      }
    </script>
  </head>

  <body>
    <img style="float: right;" onclick="javascript:lightdm.shutdown();" src="power_button.png" />
    <div class="topBox"></div>
    <div class="inputBox">
      <table id="input_table" width="100%">
        <tr>
          <td id="prompt" width="45%" align="right"></td>
          <td width="55%"><form action="javascript: handle_input()"><input id="entry"></form></td>
        </tr>
      </table>
    </div>
    <div class="messageBox" id="messages"></div>

    <script type="text/javascript">
      start_authentication();
    </script>
  </body>
</html>