skyquake/framework/core/views/login.html

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