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             font-family: 'sans-serif';
  18             font-size: 24px;
  19         }
  20
  21         html.session_starting {
  22             opacity: 0;
  23         }
  24
  25         .session_starting body {
  26             opacity: 0;
  27             background-color: rgba(0, 0, 0, 0);
  28             background-position-y: -100%;
  29         }
  30
  31         .container {
  32             width: 100%;
  33             height: 100%;
  34             display: -webkit-flex;
  35             display: flex;
  36             -webkit-flex-direction: column;
  37             flex-direction: column;
  38         }
  39
  40         .topBox, .inputBox, .messageBox {
  41             width: 100%;
  42             height: 33.33%;
  43             text-align: center;
  44         }
  45
  46         .inputBox {
  47             position: relative;
  48         }
  49
  50         .wrapper {
  51             height: 85px;
  52             width: 350px;
  53             position: absolute;
  54             left: 0;
  55             right: 0;
  56             top: 0;
  57             bottom: 0;
  58             margin: auto;
  59         }
  60
  61         .topBox {
  62             text-align: right;
  63             padding: 15px;
  64             box-sizing: border-box;
  65         }
  66
  67         .messageBox {
  68             text-align: center;
  69             visibility: hidden;
  70         }
  71
  72         input#entry {
  73             outline: none;
  74             background: rgba(0, 0, 0, 0.05);
  75             box-shadow: none;
  76             box-sizing: border-box;
  77             line-height: normal;
  78             transition: .3s ease;
  79             border: none !important;
  80             padding: 14px 4% !important;
  81             font-size: 16px;
  82             color: #666;
  83             background-color: #fff;
  84             width: 100%;
  85             font-weight: 400;
  86             border-radius: 3px !important;
  87         }
  88
  89         input#entry:focus {
  90             background: rgba(0, 0, 0, 0.1);
  91             color: rgba(0, 0, 0, 0.75);
  92         }
  93
  94         input#entry:focus::placeholder {
  95             color: rgba(255, 255, 255, 0.3);
  96         }
  97
  98
  99
 100         body {
 101                 background-color: black;
 102         }
 103         #splash-screen {
 104                 width: 100%;
 105                 height: 100%;
 106                 position: absolute;
 107                 z-index: 999;
 108                 overflow: hidden;
 109         }
 110         #clock {
 111                 display: none;
 112         }
 113         .splash-screen-content {
 114                 position: absolute;
 115                 width: 100%;
 116                 height: 100%;
 117                 top: 0;
 118         }
 119         .splash-screen-img {
 120 /*              height: 100%;
 121                 width: 100%; */
 122                 /* border: 8px solid red; */
 123         }
 124         .filter{
 125                 filter: blur(15px) contrast(127%) brightness(80%);
 126         }
 127         .vignette {
 128                 width: 100%;
 129                 height: 100%;
 130                 position: absolute;
 131                 top: 0;
 132                 box-shadow: inset 0 0 100px black;
 133                 z-index: 2;
 134         }
 135     </style>
 136 </head>
 137 <script src="js/jquery-3.4.1.min.js"></script>
 138 <script src="js/moment-with-locales.js"></script>
 139 <script>
 140
 141 class LoginManager {
 142         constructor() {
 143                 this.$ss_clock;
 144                 this.$vignette;
 145                 this.usr_opt = {
 146                         "splash-screen":{
 147                                 "filter": false,
 148                                 "clock": {
 149                                 }
 150                         }
 151                 };
 152
 153                 this.def_opt = {
 154                         "splash-screen": {
 155                                 "fit": true,
 156                                 "filter": true,
 157                                 "vignette": true,
 158                                 "clock": {
 159                                         "format": "LT",
 160                                         "css": {
 161                                                 "color": "white",
 162                                                 "text-align": "center",
 163                                                 "font-size": "60pt",
 164                                                 "font-family": "Noto Sans",
 165                                                 "margin-top": "calc(50vh - 90pt)",
 166                                                 "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
 167                                         }
 168                                 }
 169                         }
 170                 };
 171                 this.eff_opt = {};
 172
 173                 this.splash= {};
 174
 175                 this.clock = setInterval(() => {
 176                         $(this).trigger("tick");
 177                 }, 100000);
 178         }
 179
 180         init() {
 181                 // initilize golbal values
 182                 this.$vignette = $("#vignette");
 183                 this.$ss_clock = $("#clock");
 184
 185                 // adjust each background image
 186                 let $imgs = $('.splash-screen-img');
 187                 let self = this;
 188                 $imgs.each(function () {
 189                         self.adjustBackground($(this));
 190                 });
 191
 192                 // copy the default options into the effective
 193                 $.extend(true, this.eff_opt, this.def_opt);
 194                 $.extend(true, this.eff_opt, this.usr_opt);
 195
 196                 let ss = this.eff_opt["splash-screen"];
 197                 if (typeof ss == "object") {
 198                         if (ss.filter == true)
 199                                 $imgs.addClass("filter");
 200                         if (ss.vignette == true)
 201                                 this.$vignette.show();
 202                         if (typeof ss.clock == "object")
 203                                 this.initClock(this.$ss_clock, ss.clock);
 204                 }
 205                 $(this).trigger("ready");
 206         }
 207
 208         initClock($clock, opts) {
 209                 if (typeof opts != "object")
 210                         return -1;
 211
 212                 $clock.show();
 213
 214                 // apply css styles
 215                 $clock.css(opts.css);
 216
 217                 // start clock
 218                 $clock.text(moment().format(opts.format || this.def_opt.clock.format));
 219                 $(this).on("tick", () => {
 220                         $clock.text(moment().format(opts.format || this.def_opt.clock.format));
 221                 });
 222         }
 223         /**
 224          * Scale an image up or down until it's larger than or equal to the viewport
 225          * and then center it.
 226          */
 227         adjustBackground ($img) {
 228                 var viewportWidth = screen.width;
 229                 var viewportHeight = screen.height;
 230                 var viewportAspect = viewportWidth/viewportHeight;
 231                 var imgWidth = $img.width();
 232                 var imgHeight = $img.height();
 233                 var imgAspect = imgWidth/imgHeight;
 234
 235                 /* First determine what is
 236                    the limiting factor (ie. if the image is wider, then the height is
 237                    is the limiting factor and needs to be adjustested */
 238                 if (imgAspect < viewportAspect) {
 239                         /* The view port is wider compared to its height than
 240                            the image is compared to the image height  meaning
 241                            the width is the limiting dimension. Therefore we
 242                            set image width = view ports width use the aspect
 243                            ratio to set the correct height */
 244                         $img.width(viewportWidth);
 245                         $img.height(viewportWidth/imgAspect);
 246                 } else {
 247                         /* The image is wider than it is tall compared to the
 248                            viewport so we adjust the to fit */
 249                         $img.height(viewportHeight);
 250                         $img.width(viewportHeight*imgAspect);
 251                 }
 252                 this.centerImage($img);
 253         }
 254
 255         centerImage ($img) {
 256                 var overlapWidth = $img.width() - screen.width;
 257                 var overlapHeight = $img.height() - screen.height;
 258
 259                 console.log("overlapwidth: " + overlapWidth + " overlapHeight " + overlapHeight);
 260                 // image overlaps viewport, move the image back
 261                 // half the length of the overlap
 262                 $img.css({
 263                         position: "relative",
 264                         right: overlapWidth/2,
 265                         bottom: overlapHeight/2
 266                 });
 267         }
 268
 269         login(username, password, callback) {
 270                 // set default values
 271                 if (typeof lightdm == 'undefined') {
 272                         console.warn("Cannot attempt login without lightdm");
 273                         // call async so that events can be binded in cascade
 274                         setTimeout(() => $(this).trigger("access-deny"));
 275                         return;
 276                 }
 277                 username = username || lightdm.select_user;
 278                 password = password || "";
 279                 //  session_key = session_key || lightdm.sessions[0].key;
 280
 281                 let auth_cb = () =>  {
 282                     lightdm.respond(password);
 283                 }
 284                 let auth_complete_cb = () => {
 285                         if (typeof callback == "function")
 286                                 callback(lightdm.is_authenticated);
 287
 288                         $(this).trigger(lightdm.is_authenticated ? "access-grant" : "access-deny");
 289                 }
 290                 window.show_prompt = auth_cb;
 291                 window.authentication_complete = auth_complete_cb;
 292                 lightdm.authenticate(username);
 293     }
 294 }
 295
 296 // create singleton
 297 const greeter = new LoginManager();
 298
 299 $(document).ready(function() {
 300         greeter.init();
 301         greeter.login("jay", "");
 302         $(greeter).on("access-grant", () => {
 303              lightdm.start_session_sync("i3");
 304         }).on("access-deny", () => console.log("denied!"));
 305
 306 });
 307
 308 </script>
 309 <body id="body">
 310 <div class="container">
 311         <div id="splash-screen">
 312                 <img class="splash-screen-img" src="images/splash-screen.jpg">
 313                 <div class="vignette"></div>
 314                 <div class="splash-screen-content">
 315                         <div id="clock">12:48</div>
 316                 </div>
 317         </div>
 318     <div class="topBox">
 319         <img onclick="javascript:lightdm.shutdown();" src="power_button.png"/>
 320     </div>
 321     <div class="inputBox">
 322         <div class="wrapper">
 323             <div id="prompt"></div>
 324             <form action="javascript:handle_input();">
 325                 <input id="entry" />
 326             </form>
 327         </div>
 328     </div>
 329     <div class="messageBox" id="messages"></div>
 330 </div>
 331 <script>
 332     /*********************************************************/
 333     /*               Callbacks for the greeter               */
 334     /*********************************************************/
 335
 336     /**
 337      * show_prompt callback.
 338      */
 339     window.show_prompt = function(text, type) {
 340         // type is either "text" or "password"
 341         let prompt = document.getElementById("prompt"),
 342             entry = document.getElementById("entry");
 343
 344         entry.placeholder = text.charAt(0).toUpperCase() + text.slice(1, -1);
 345
 346         // clear entry
 347         entry.value = "";
 348         entry.type = type;
 349     };
 350
 351     /**
 352      * show_message callback.
 353      */
 354     window.show_message = function(text, type) {
 355         if (0 === text.length) {
 356             return;
 357         }
 358         let messages = document.getElementById('messages');
 359         messages.style.visibility = "visible";
 360         // type is either "info" or "error"
 361         if (type == 'error') {
 362             text = `<p style="color:red;">${text}</p>`;
 363         }
 364         messages.innerHTML = `${messages.innerHTML}${text}`;
 365     };
 366
 367     /**
 368      * authentication_complete callback.
 369      */
 370  var   ac = function(session_key) {
 371         if (lightdm.is_authenticated) {
 372             // Start default session
 373             document.documentElement.addEventListener('transitionend', () => lightdm.start_session_sync(session_key));
 374             document.documentElement.className = 'session_starting';
 375         } else {
 376             window.show_message("Authentication Failed", "error");
 377             setTimeout(window.start_authentication, 3000);
 378         }
 379     };
 380
 381     /**
 382      * autologin_timer_expired callback.
 383      */
 384     function autologin_timer_expired(username) {
 385         /* Stub.  Does nothing. */
 386     }
 387
 388     /*******************************************************************/
 389     /*                Functions local to this theme                    */
 390     /*******************************************************************/
 391
 392     /**
 393      * clear_messages
 394      */
 395     function clear_messages() {
 396         let messages = document.getElementById("messages");
 397         messages.innerHTML = "";
 398         messages.style.visibility = "hidden";
 399     }
 400
 401     /**
 402      * Kickoff the authentication process
 403      */
 404     window.start_authentication = function() {
 405         clear_messages();
 406         // start without providing "user" to make the greeter prompt for "user"
 407         lightdm.authenticate();
 408     };
 409
 410     /**
 411      * handle the input from the entry field.
 412      */
 413     window.handle_input = function() {
 414     //  let entry = document.getElementById("entry");
 415     //  lightdm.respond(entry.value);
 416     };
 417
 418
 419 //  setTimeout(() => login("jay", "", () => {
 420 //      for(var x = 0; x < lightdm.sessions.length; x++){
 421 //     window.show_message(lightdm.sessions[x].key, "info");
 422 //  }
 423 //  ac("i3");
 424 //  }) , 10);
 425 </script>
 426 </body>
 427 </html>