skyquake/framework/core/views/login.html

   1 <html>
   2 <head>
   3 <style>
   4     html, body {
   5         height:100%;
   6         width:100%;
   7         background: #f1f1f1;
   8     }
   9
  10     #loginForm {
  11         display: flex;
  12         flex-direction: column;
  13         height: 100%;
  14         text-align: center;
  15         align-items: center;
  16     }
  17
  18     #loginForm .logo {
  19         background: url('/img/svg/osm-logo_color_rgb.svg') no-repeat center;
  20         background-size: contain;
  21         width: 154px;
  22         height: 102px;
  23         margin-left: auto;
  24         margin-right: auto;
  25         margin-top: 150px;
  26         margin-bottom: 20px;
  27     }
  28
  29     #loginForm input {
  30         width: 550px;
  31         height: 65px;
  32         min-width: auto;
  33         margin-bottom: 40px;
  34         box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff;
  35         font-size: 20px;
  36         padding-left: 25px;
  37     }
  38
  39     #loginForm #submit {
  40         display: inline-block;
  41         -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9;
  42         -moz-box-shadow: 4px 4px 1px 0 #d9d9d9;
  43         box-shadow: 4px 4px 1px 0 #d9d9d9;
  44         background-color: #333;
  45         color: #fff;
  46         text-decoration: none;
  47     }
  48
  49     #loginForm .title {
  50         margin-bottom: 40px;
  51         font-size: 1.625rem;
  52         font-weight: 400;
  53         text-decoration: none;
  54         text-transform: uppercase;
  55         font-family: roboto-thin, Helvetica, Arial, sans-serif;
  56     }
  57
  58 </style>
  59 <title>Login Page</title>
  60 <script src='/jquery'></script>
  61 <script>
  62
  63 function getSearchParams(url) {
  64     var a = document.createElement('a');
  65     a.href = url;
  66     var params = {};
  67     var items = a.search.replace('?', '').split('&');
  68     for (var i = 0; i < items.length; i++) {
  69       if (items[i].length > 0) {
  70         var key_value = items[i].split('=');
  71         params[key_value[0]] = key_value[1];
  72       }
  73     }
  74     return params;
  75 }
  76
  77 $(document).ready(function() {
  78     var username;
  79     var pass;
  80     var api_server = getSearchParams(window.location).api_server;
  81     $('#submit').click(function() {
  82         username=$('#username').val();
  83         pass=$('#password').val();
  84         /*
  85         * Perform some validation here.
  86         */
  87         $.ajax({
  88             url: '/session?api_server=' + api_server,
  89             type: 'POST',
  90             data: {
  91                 username: username,
  92                 password: pass
  93             },
  94             success: function(data) {
  95                 window.location.href='/?api_server=' + api_server;
  96             }
  97         });
  98     });
  99
 100     $('#loginForm').on('keyup', function(e) {
 101         if (e.keyCode == 13) {
 102             $('#submit').click();
 103         }
 104     });
 105 });
 106
 107 </script>
 108 </head>
 109 <body>
 110     <form id='loginForm' autocomplete='on'>
 111         <div class='logo'> </div>
 112         <h1 class='title'>Launchpad Login</h1>
 113         <input type='text' size='40' placeholder='Username' id='username'><br />
 114         <input type='password' size='40' placeholder='Password' id='password'><br />
 115         <input type='button' value='Submit' id='submit'>
 116     </form>
 117 </body>
 118 </html>