index.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <link rel="stylesheet" href="css/materialize.min.css">
   5     <style>
   6         #splash-screen {
   7                 width: 100%;
   8                 height: 100%;
   9                 position: absolute;
  10                 z-index: 999;
  11                 overflow: hidden;
  12         }
  13         .clock {
  14                 display: none;
  15         }
  16         #splash-screen-content {
  17                 position: absolute;
  18                 width: 100%;
  19                 height: 100%;
  20                 top: 0;
  21         }
  22         .splash-screen-img {
  23 /*              height: 100%;
  24                 width: 100%; */
  25                 /* border: 8px solid red; */
  26         }
  27         .filter{
  28                 filter: blur(15px) contrast(127%) brightness(80%);
  29         }
  30         .vignette {
  31                 width: 100%;
  32                 height: 100%;
  33                 position: absolute;
  34                 top: 0;
  35                 box-shadow: inset 0 0 100px black;
  36                 z-index: 2;
  37         }
  38          body {
  39                       display: flex;
  40                            min-height: 100vh;
  41                                 flex-direction: column;
  42               background-color: white;
  43                                  }
  44           main {
  45                        flex: 1 0 auto;
  46     }
  47
  48     div#console {
  49       z-index: 9999;
  50       position: absolute;
  51       top: 4px;
  52     }
  53     div#console .terminal {
  54       overflow-y: scroll;
  55       background-color: rgba(0,0,0,0.8);
  56       font-size: 14pt;
  57       color: white;
  58       height: 30vh;
  59       width: 85vw;
  60       resize: both;
  61     }
  62     div#console .terminal text {
  63       display: block;
  64       padding: 0;
  65       margin: 0;
  66     }
  67
  68     </style>
  69 </head>
  70 <script src="js/jquery-3.4.1.min.js"></script>
  71 <script src="js/moment-with-locales.js"></script>
  72 <script src="js/jquery-ui.min.js"></script>
  73 <script src="js/materialize.min.js"></script>
  74 <!-- <script src="js/lightdm-sample.js"></script> -->
  75 <script src="js/theme.js"></script>
  76
  77 <body>
  78                 <!-- Debug Console -->
  79     <div id="console" class="row">
  80         <div class="col">
  81           <div class="switch">
  82             <label>
  83               <input type="checkbox" checked="true">
  84               <span class="lever"></span>
  85               Auto
  86             </label>
  87           </div>
  88         </div>
  89         <div class="col">
  90           <div class="terminal"></div>
  91         </div>
  92     </div>
  93 <!-- End Debug Console -->
  94
  95   <div id="splash-screen">
  96     <!--TODO autogenerate this content -->
  97     <img class="splash-screen-img" src="images/splash-screen.jpg">
  98     <div class="vignette"></div>
  99     <div id="splash-screen-content">
 100       <!--Content will be generated here -->
 101     </div>
 102   </div>
 103
 104   <header></header>
 105         <main>
 106                 <div class="container">
 107       <div class="row" style="margin-top: 35vh;"></div>
 108                         <div class="row ">
 109                                 <!-- User Select -->
 110                                 <div class="row">
 111                                         <div class="input-field col s4 offset-s4">
 112                                                 <select id="selectUser"></select>
 113                                                 <label>User</label>
 114                                         </div>
 115                                 </div>
 116
 117                                 <!-- Password field -->
 118                                 <div class="row">
 119                                         <div class="input-field col s4 offset-s4">
 120                                                 <input id="inputPassword" type="password" class="validate">
 121                                                 <label for="inputPassword">Password</label>
 122                                         </div>
 123                                 </div>
 124         <!-- End Password field -->
 125
 126       </div>
 127                 </div>
 128
 129
 130         </main>
 131
 132
 133   <footer class="">
 134
 135     <div class="row">
 136
 137       <!-- Window Manager Select -->
 138       <div class="input-field col s2 offset-s1">
 139         <select id="selectSession"></select>
 140         <label>Select Session</label>
 141       </div>
 142       <!-- End Window Manager Select -->
 143
 144       <!-- Power Button -->
 145       <div class="col offset-s8">
 146           <img class="right" src="images/power.svg" width="40px" height="40px">
 147       </div>
 148       <!-- End Power Button -->
 149
 150     </div>
 151   </footer>
 152 <script>
 153
 154
 155
 156 // create singleton
 157 const greeter = new LoginManager();
 158
 159 // called after greeter and lightdm are initialized
 160 $(greeter).ready(function() {
 161   let $user = $("#selectUser");
 162   let $session = $("#selectSession");
 163   let $password = $("#inputPassword");
 164
 165   greeter.fillUserSelect($user);
 166   greeter.fillSessionSelect($session);
 167
 168   // $("#debug").text(JSON.stringify(greeter.lightdm,null, 2));
 169   $password.keypress((e) => {
 170     let username = $user.children("option:selected").val();
 171     let pass = $password.val();
 172
 173     /* attempt authentication, 'grant' event will be emitted on sucecss
 174     and 'deny' will be emitted on failure */
 175     if (e.keyCode == 13)
 176         greeter.auth(username, pass);
 177   });
 178
 179   // when the user is authenticated do transitions and login
 180         $(greeter).on("grant", () => {
 181     let session_key = $session.children("option:selected").val();
 182     greeter.login(session_key);
 183         })
 184   .on("deny", () => {
 185     // inform the user that the credentials are invalid
 186     $password.addClass("invalid");
 187   });
 188
 189         $(greeter.splash).on("active", function() {
 190                 $(".active-appear").fadeIn();
 191         }).on("inactive", function() {
 192                 $(".active-appear").fadeOut();
 193         });
 194 });
 195
 196
 197 </script>
 198 <script>
 199   /*
 200          * Define this fuction so lightdm doesnt crash, gets resassigned
 201    * in login manager
 202          */
 203         window.authentication_complete = function() {
 204
 205         };
 206
 207
 208 </script>
 209 </body>
 210 </html>