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     background: -webkit-radial-gradient(center, ellipse cover, #4fc3f7 10%, #01579b 100%);
  13         }
  14
  15   #splashscreen * {
  16     overflow: hidden;
  17   }
  18         .clock {
  19                 display: none;
  20         }
  21         #splash-screen-content {
  22                 position: absolute;
  23                 width: 100%;
  24                 height: 100%;
  25                 top: 0;
  26         }
  27         .SplashScreen-screen-img {
  28
  29 /*              height: 100%;
  30                 width: 100%; */
  31                 /* border: 8px solid red; */
  32         }
  33         .filter{
  34                 filter: blur(4px) contrast(110%) brightness(80%);
  35         }
  36         .vignette {
  37                 width: 100%;
  38                 height: 100%;
  39                 position: absolute;
  40                 top: 0;
  41                 box-shadow: inset 0 0 100px black;
  42                 z-index: 2;
  43     display: none;
  44         }
  45   /* CSS animations for smoother response, delays have to be hardcoded */
  46   .move-up {
  47     animation-name: move-up;
  48     animation-duration: 500ms;
  49   }
  50   @keyframes move-up {
  51     from {top: 0;}
  52     to {top: -100%}
  53   }
  54
  55   .move-up {
  56     animation-name: move-up;
  57     /* animation-timing-function: ease-in-out; */
  58     animation-duration: 700ms; /* has to be hardcoded */
  59   }
  60   @keyframes move-up {
  61     from {top: 0;}
  62     to {top: -100%}
  63   }
  64   .move-down {
  65     animation-name: move-down;
  66     /* animation-timing-function: ease-in; */
  67     animation-duration: 700ms;
  68   }
  69   @keyframes move-down {
  70     from {top: -100%;}
  71     to {top: 0}
  72   }
  73
  74  body {
  75           display: flex;
  76     min-height: 100vh;
  77     flex-direction: column;
  78     background-color: #37474f;
  79     background: -webkit-radial-gradient(center, ellipse cover, #455a64 10%, #263238 100%);
  80     color: white;
  81     overflow: hidden;
  82  }
  83   main {
  84           flex: 1 0 auto;
  85   }
  86   input {
  87     color: white;
  88   }
  89   .caret {
  90     fill: grey !important;
  91   }
  92   .power-button {
  93     fill: white;
  94   }
  95   .power-button:hover {
  96     fill: #01579b;
  97   }
  98   .power-button:active {
  99     fill: #4dd0e1;
 100   }
 101
 102   div#console {
 103     z-index: 9999;
 104     position: absolute;
 105     top: 10px;
 106   }
 107   div#console .terminal {
 108     overflow-y: scroll;
 109     background-color: rgba(0,0,0,0.8);
 110     font-size: 14pt;
 111     color: white;
 112     height: 30vh;
 113     width: 85vw;
 114     resize: both;
 115   }
 116   div#console .terminal text {
 117     display: block;
 118     padding: 0;
 119     margin: 0;
 120   }
 121   .welcome-text {
 122     font-size: 3vh;
 123     font-weight: lighter;
 124   }
 125
 126   </style>
 127 </head>
 128 <script src="js/jquery-3.4.1.min.js"></script>
 129 <script src="js/moment-with-locales.js"></script>
 130 <script src="js/jquery-ui.min.js"></script>
 131 <script src="js/materialize.min.js"></script>
 132 <!-- <script src="js/lightdm-sample.js"></script> -->
 133 <!--  Load Plugins -->
 134 <script src="js/splashscreen.js"></script>
 135 <!-- Load main theme -->
 136 <script src="js/theme.js"></script>
 137
 138 <body>
 139   <div id="splash-screen">
 140     <!--TODO autogenerate this content -->
 141     <img class="splash-screen-img" src="images/splash-screen.jpg">
 142     <div class="vignette"></div>
 143     <div id="splash-screen-content">
 144       <!--Content will be generated here -->
 145     </div>
 146   </div>
 147
 148   <header></header>
 149         <main>
 150                 <div class="container">
 151
 152       <div class="row" style="margin-top: 15vh;"></div>
 153
 154
 155       <div class="row">
 156         <div style="width: 100%; text-align: center"  class="col s12">
 157           <img class="" src="images/archlinux-logo.svg">
 158         </div>
 159       </div>
 160       <div class="row" style="margin-top: 10vh;"></div>
 161       <div class="row">
 162         <div class="col s12" style="text-align: center">
 163           <h1 class="welcome-text">Welcome back</h1>
 164         </div>
 165       </div>
 166
 167       <!-- <div class="row" style="margin-top: 10vh;"></div> -->
 168                         <div class="row ">
 169                                 <!-- User Select -->
 170                                 <div class="row">
 171                                         <div class="input-field col s4 offset-s4">
 172                                                 <select id="selectUser"></select>
 173                                                 <label>User</label>
 174                                         </div>
 175                                 </div>
 176
 177                                 <!-- Password field -->
 178                                 <div class="row">
 179                                         <div class="input-field col s4 offset-s4">
 180                                                 <input id="inputPassword" type="password">
 181                                                 <label for="inputPassword">Password</label>
 182                                         </div>
 183                                 </div>
 184         <!-- End Password field -->
 185
 186       </div>
 187                 </div>
 188
 189
 190         </main>
 191
 192
 193   <footer class="">
 194
 195     <div class="row">
 196
 197       <!-- Window Manager Select -->
 198       <div class="input-field col s2 offset-s1">
 199         <select id="selectSession"></select>
 200         <label>Select Session</label>
 201       </div>
 202       <!-- End Window Manager Select -->
 203
 204       <div class="col right">
 205           <div class="row">
 206             <!-- Hibernate Button -->
 207             <div  id="buttonHibernate" class="col S4">
 208               <svg viewBox="0 0 297.613 297.613" width="40px" height="40px" class="power-button">
 209                 <g>
 210                   <path d="M148.807,50.869c-4.971,0-9,4.029-9,9v46.438c0,4.971,4.029,9,9,9s9-4.029,9-9V59.869
 211                     C157.807,54.898,153.777,50.869,148.807,50.869z"/>
 212                   <path d="M178.859,127.754c2.303,0,4.606-0.879,6.364-2.636L212.17,98.17c3.515-3.515,3.515-9.213,0-12.728
 213                   c-3.515-3.515-9.213-3.515-12.728,0l-26.948,26.948c-3.515,3.515-3.515,9.213,0,12.728
 214                   C174.252,126.875,176.556,127.754,178.859,127.754z"/>
 215                   <path d="M237.744,139.807h-46.438c-4.971,0-9,4.029-9,9s4.029,9,9,9h46.438c4.971,0,9-4.029,9-9S242.715,139.807,237.744,139.807z"
 216                   />
 217                   <path d="M185.22,172.493c-3.515-3.515-9.213-3.515-12.728,0c-3.515,3.515-3.515,9.213,0,12.728l26.95,26.95
 218                   c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636c3.515-3.515,3.515-9.213,0-12.728L185.22,172.493z"/>
 219                   <path d="M148.807,182.307c-4.971,0-9,4.029-9,9v46.438c0,4.971,4.029,9,9,9s9-4.029,9-9v-46.438
 220                   C157.807,186.336,153.777,182.307,148.807,182.307z"/>
 221                   <path d="M112.391,172.495l-26.948,26.948c-3.515,3.515-3.515,9.213,0,12.728c1.757,1.757,4.061,2.636,6.364,2.636
 222                   s4.606-0.879,6.364-2.636l26.948-26.948c3.515-3.515,3.515-9.213,0-12.728C121.604,168.98,115.905,168.98,112.391,172.495z"/>
 223                   <path d="M115.307,148.807c0-4.971-4.029-9-9-9H59.869c-4.971,0-9,4.029-9,9s4.029,9,9,9h46.438
 224                   C111.277,157.807,115.307,153.777,115.307,148.807z"/>
 225                   <path d="M98.17,85.443c-3.515-3.515-9.213-3.515-12.728,0c-3.515,3.515-3.515,9.213,0,12.728l26.95,26.95
 226                   c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636c3.515-3.515,3.515-9.213,0-12.728L98.17,85.443z"/>
 227                   <path d="M148.807,0C66.754,0,0,66.754,0,148.807s66.754,148.807,148.807,148.807s148.807-66.754,148.807-148.807
 228                   S230.859,0,148.807,0z M148.807,279.613C76.68,279.613,18,220.934,18,148.807S76.68,18,148.807,18s130.807,58.68,130.807,130.807
 229                   S220.934,279.613,148.807,279.613z"/>
 230                 </g>
 231               </svg>
 232                 <!-- <img id="buttonHibernate" class="right power-button" src="images/hibernate.svg" width="40px" height="40px"> -->
 233             </div>
 234             <!-- End Hibernate Button -->
 235             <!-- Restart Button -->
 236             <div id="buttonRestart" class="col s4">
 237               <svg class="power-button"  height="40px" width="40px" viewBox="0 0 1000 1000" >
 238                 <g>
 239                   <path d="M506,984.1c-98.1,0-192.5-29.2-273.1-84.4C154.1,845.9,93.6,770.9,
 240                     57.6,682.9c-9.9-24.3-17.9-49.6-23.7-75.2c-3.2-13.9,5.5-27.7,
 241                     19.4-30.9c13.9-3.2,27.7,5.5,30.9,19.4c5.2,22.8,12.3,45.4,21.2,67.1C137.5,
 242                     742,191.6,809,262,857.2c72,49.3,156.4,75.3,244,75.3c238.5,0,432.5-194,
 243                     432.5-432.5c0-238.5-194-432.5-432.5-432.5c-87.6,0-172,26-244,75.3C191.7,191,
 244                     137.5,257.9,105.4,336.5C100,349.7,85,356,71.8,
 245                     350.7c-13.2-5.4-19.5-20.4-14.1-33.6c35.9-88,96.5-162.9,
 246                     175.2-216.8c80.6-55.2,175-84.3,273.1-84.3c129.3,0,250.8,50.4,
 247                     342.3,141.8C939.6,249.1,990,370.7,990,500c0,129.3-50.4,250.9-141.8,
 248                     342.3C756.8,933.7,635.2,984.1,506,984.1z"/>
 249                     <path d="M82.3,352.6c-10.5,0-20.3-6.5-24.1-16.8L11.6,211.6c-5-13.3,1.8-28.2,
 250                       15.1-33.2c13.3-5,28.2,1.8,33.2,15.1l38.5,102.8l106.2-26.1c13.8-3.4,27.8,
 251                       5.1,31.2,18.9c3.4,13.8-5.1,27.8-18.9,31.2L88.4,351.8C86.4,352.3,84.3,
 252                       352.6,82.3,352.6z"/>
 253                   </g>
 254               </svg>
 255
 256                 <!-- <img id="buttonRestart" class="power-button" src="images/restart.svg" width="40px" height="40px"> -->
 257             </div>
 258             <!-- End Restart Button -->
 259             <!-- Shutdown Button -->
 260             <div id="buttonShutdown" class="col s4">
 261
 262               <svg class="power-button"  height="40px" width="40px" viewBox="0 0 56 56">
 263               <g>
 264                 <path d="M35.31,5.042c-0.532-0.155-1.085,0.15-1.24,0.68s0.149,
 265                   1.085,0.68,1.24C44.906,9.932,52,19.405,52,30c0,13.233-10.767,
 266                   24-24,24S4,43.233,4,30C4,19.392,11.105,9.915,21.279,
 267                   6.953c0.53-0.154,0.835-0.709,0.681-1.239
 268                         c-0.153-0.53-0.708-0.839-1.239-0.681C9.698,8.241,2,18.508,2,
 269                   30c0,14.337,
 270                         11.663,26,26,26s26-11.663,26-26
 271                         C54,18.522,46.314,8.26,35.31,5.042z"/>
 272                 <path d="M28,27c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,
 273                   0.447-1,1v25C27,
 274                         26.553,27.447,27,28,27z"/>
 275               </g>
 276               </svg>
 277                 <!-- <img id="buttonShutdown" class="power-button" src="images/shutdown.svg" width="40px" height="40px"> -->
 278             </div>
 279             <!-- End Shutdown Button -->
 280           </div>
 281       </div>
 282
 283     </div>
 284   </footer>
 285 <script>
 286
 287 // hide enverything until fully loaded
 288 $("body").append(`<div id="block" style="position: absolute;background-color: black;
 289 width: 100%; height: 100vh; z-index:9999;"></div>`);
 290
 291 // pass true to show logger output
 292 const log = new logger(false);
 293
 294 // create singleton
 295 const greeter = new LoginManager();
 296
 297 // called after greeter and lightdm are initialized
 298 $(greeter).on("ready", function(e) {
 299
 300   let $user = $("#selectUser");
 301   let $session = $("#selectSession");
 302   let $password = $("#inputPassword");
 303
 304   greeter.fillUserSelect($user);
 305   greeter.fillSessionSelect($session);
 306
 307
 308   /* Bind shutdown, restart hibernate and suspend to the
 309       appropriate buttons */
 310   $("#buttonPoweroff").click(function() {
 311       greeter.shutdown();
 312   });
 313   $("#buttonRestart").click(function() {
 314       greeter.restart();
 315   });
 316   $("#hibernate").click(function() {
 317       greeter.hibernate();
 318   });
 319
 320
 321   $password.keypress((e) => {
 322     // user has typed, remove placeholder and invalid class
 323     $password.prop("placeholder", "").removeClass("invalid");
 324
 325     /* attempt authentication, 'grant' event will be emitted on sucecss
 326     and 'deny' will be emitted on failure */
 327     if (e.keyCode == 13) {
 328       let username = $user.children("option:selected").val();
 329       let pass = $password.val();
 330       log.debug("attempt authenticate with: " + username + " " + pass);
 331       greeter.auth(username, pass);
 332     }
 333
 334   });
 335
 336
 337   // when the user is authenticated do transitions and login
 338         $(greeter).on("grant", () => {
 339     let session_key = $session.children("option:selected").val();
 340     greeter.login(session_key);
 341         })
 342   .on("deny", () => {
 343     // inform the user that the credentials are invalid
 344     $password.removeClass("valid").addClass("invalid");
 345     $password.val("").prop("placeholder", "Incorrect Password");
 346   });
 347
 348         $(greeter.plugins.SplashScreen).on("active", function() {
 349                 $(".active-appear").fadeIn();
 350         }).on("inactive", function() {
 351                 $(".active-appear").fadeOut();
 352         });
 353
 354   setTimeout(() => $("#block").remove(), dur=1);
 355 });
 356
 357
 358 </script>
 359 <script>
 360   /*
 361          * Define this fuction so lightdm doesnt crash, gets resassigned
 362    * in login manager
 363          */
 364         window.authentication_complete = function() {
 365
 366         };
 367
 368
 369 </script>
 370 </body>
 371 </html>