index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   2 <html>
   3 <head>
   4     <style>
   5         html, body {
   6             width: 100%;
   7             height: 100%;
   8             overflow: hidden;
   9             opacity: 1;
  10             margin: 0;
  11             background-color: #ffffff;
  12             transition: opacity 2s, background-color 2s, background-position 2s;
  13             transition-timing-function: ease-in;
  14         }
  15
  16         body {
  17             background: linear-gradient(transparent, SlateGray);
  18             background-color: #ffffff;
  19             font-family: 'sans-serif';
  20             font-size: 24px;
  21         }
  22
  23         html.session_starting {
  24             opacity: 0;
  25         }
  26
  27         .session_starting body {
  28             opacity: 0;
  29             background-color: rgba(0, 0, 0, 0);
  30             background-position-y: -100%;
  31         }
  32
  33         .container {
  34             width: 100%;
  35             height: 100%;
  36             display: -webkit-flex;
  37             display: flex;
  38             -webkit-flex-direction: column;
  39             flex-direction: column;
  40         }
  41
  42         .topBox, .inputBox, .messageBox {
  43             width: 100%;
  44             height: 33.33%;
  45             text-align: center;
  46         }
  47
  48         .inputBox {
  49             position: relative;
  50         }
  51
  52         .wrapper {
  53             height: 85px;
  54             width: 350px;
  55             position: absolute;
  56             left: 0;
  57             right: 0;
  58             top: 0;
  59             bottom: 0;
  60             margin: auto;
  61         }
  62
  63         .topBox {
  64             text-align: right;
  65             padding: 15px;
  66             box-sizing: border-box;
  67         }
  68
  69         .messageBox {
  70             text-align: center;
  71             visibility: hidden;
  72         }
  73
  74         input#entry {
  75             outline: none;
  76             background: rgba(0, 0, 0, 0.05);
  77             box-shadow: none;
  78             box-sizing: border-box;
  79             line-height: normal;
  80             transition: .3s ease;
  81             border: none !important;
  82             padding: 14px 4% !important;
  83             font-size: 16px;
  84             color: #666;
  85             background-color: #fff;
  86             width: 100%;
  87             font-weight: 400;
  88             border-radius: 3px !important;
  89         }
  90
  91         input#entry:focus {
  92             background: rgba(0, 0, 0, 0.1);
  93             color: rgba(0, 0, 0, 0.75);
  94         }
  95
  96         input#entry:focus::placeholder {
  97             color: rgba(255, 255, 255, 0.3);
  98         }
  99         #splash-screen {
 100                 width: 100%;
 101                 height: 100%;
 102                 position: absolute;
 103                 z-index: 999;
 104         }
 105         #clock {
 106                 margin-top: 200pt;
 107                 color: white;
 108                 text-align: center;
 109                 font-size: 60pt;
 110                 font-family: "Noto Sans";
 111         }
 112         .splash-screen-text {
 113                 position: relative;
 114                 top: -100%;
 115         }
 116         .splash-screen-img {
 117                 min-height: 100%;
 118                 min-width: 100%;
 119         }
 120         .blur {
 121                 filter: blur(1px);
 122         }
 123         .vignette {
 124                 width: 100%;
 125                 height: 100%;
 126                 box-shadow: inset 0 0 100px black;
 127         }
 128     </style>
 129 </head>
 130 <script src="js/jquery-3.4.1.min.js"></script>
 131 <script>
 132 var adjustBackground = function() {
 133         // if the image is larger than the screen center it
 134         // if the image is too small, perseve the aspect ratio and scale up
 135         // once both the height and the width are large enough, center the image
 136 }
 137 </script>
 138 <body id="body">
 139 <div class="container">
 140         <div id="splash-screen">
 141                 <div class="vignette">
 142                         <img class="splash-screen-img blur" src="images/splash-screen.jpg">
 143                 </div>
 144                 <div class="splash-screen-text">
 145                         <div id="clock">12:48</div>
 146                 </div>
 147         </div>
 148     <div class="topBox">
 149         <img onclick="javascript:lightdm.shutdown();" src="power_button.png"/>
 150     </div>
 151     <div class="inputBox">
 152         <div class="wrapper">
 153             <div id="prompt"></div>
 154             <form action="javascript:handle_input();">
 155                 <input id="entry" />
 156             </form>
 157         </div>
 158     </div>
 159     <div class="messageBox" id="messages"></div>
 160 </div>
 161 <script>
 162     /*********************************************************/
 163     /*               Callbacks for the greeter               */
 164     /*********************************************************/
 165
 166     /**
 167      * show_prompt callback.
 168      */
 169     window.show_prompt = function(text, type) {
 170         // type is either "text" or "password"
 171         let prompt = document.getElementById("prompt"),
 172             entry = document.getElementById("entry");
 173
 174         entry.placeholder = text.charAt(0).toUpperCase() + text.slice(1, -1);
 175
 176         // clear entry
 177         entry.value = "";
 178         entry.type = type;
 179     };
 180
 181     /**
 182      * show_message callback.
 183      */
 184     window.show_message = function(text, type) {
 185         if (0 === text.length) {
 186             return;
 187         }
 188         let messages = document.getElementById('messages');
 189         messages.style.visibility = "visible";
 190         // type is either "info" or "error"
 191         if (type == 'error') {
 192             text = `<p style="color:red;">${text}</p>`;
 193         }
 194         messages.innerHTML = `${messages.innerHTML}${text}`;
 195     };
 196
 197     /**
 198      * authentication_complete callback.
 199      */
 200  var   ac = function(session_key) {
 201         if (lightdm.is_authenticated) {
 202             // Start default session
 203             document.documentElement.addEventListener('transitionend', () => lightdm.start_session_sync(session_key));
 204             document.documentElement.className = 'session_starting';
 205         } else {
 206             window.show_message("Authentication Failed", "error");
 207             setTimeout(window.start_authentication, 3000);
 208         }
 209     };
 210
 211     /**
 212      * autologin_timer_expired callback.
 213      */
 214     function autologin_timer_expired(username) {
 215         /* Stub.  Does nothing. */
 216     }
 217
 218     /*******************************************************************/
 219     /*                Functions local to this theme                    */
 220     /*******************************************************************/
 221
 222     /**
 223      * clear_messages
 224      */
 225     function clear_messages() {
 226         let messages = document.getElementById("messages");
 227         messages.innerHTML = "";
 228         messages.style.visibility = "hidden";
 229     }
 230
 231     /**
 232      * Kickoff the authentication process
 233      */
 234     window.start_authentication = function() {
 235         clear_messages();
 236         // start without providing "user" to make the greeter prompt for "user"
 237         lightdm.authenticate();
 238     };
 239
 240     /**
 241      * handle the input from the entry field.
 242      */
 243     window.handle_input = function() {
 244     //  let entry = document.getElementById("entry");
 245     //  lightdm.respond(entry.value);
 246     };
 247
 248     function login(username, password, callback) {
 249         // set default values
 250         username = username || lightdm.select_user;
 251         password = password || "";
 252         //  session_key = session_key || lightdm.sessions[0].key;
 253
 254        var auth_cb = function() {
 255             lightdm.respond(password);
 256         }
 257        var auth_complete_cb = function() {
 258             if (typeof callback == "function")
 259                 callback(lightdm.is_authenticated);
 260         }
 261         window.show_prompt = auth_cb;
 262         window.authentication_complete = auth_complete_cb;
 263
 264
 265         lightdm.authenticate(username);
 266
 267
 268     }
 269
 270     //TODO: make sure that lightdm is not referenced until pages has finished loading
 271     setTimeout(() => login("jay", "", () => {
 272         for(var x = 0; x < lightdm.sessions.length; x++){
 273        window.show_message(lightdm.sessions[x].key, "info");
 274     }
 275     ac("i3");
 276     }) , 10);
 277 </script>
 278 </body>
 279 </html>