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     var referer = getSearchParams(window.location).referer;
  79     $('#submit').click(function() {
  80         username=$('#username').val();
  81         pass=$('#password').val();
  82         /*
  83         * Perform some validation here.
  84         */
  85         $.ajax({
  86             url: '/session?api_server=' + api_server,
  87             type: 'POST',
  88             data: {
  89                 username: username,
  90                 password: pass
  91             },
  92             success: function(data) {
  93                 window.location.href='/?api_server=' + api_server + '&referer=' + referer;
  94             }
  95         });
  96     });
  97
  98     $('#loginForm').on('keyup', function(e) {
  99         if (e.keyCode == 13) {
 100             $('#submit').click();
 101         }
 102     });
 103 });
 104
 105 </script>
 106 </head>
 107 <body>
 108     <form id='loginForm' autocomplete='on'>
 109         <div class='logo'> </div>
 110         <h1 class='title'>Launchpad Login</h1>
 111         <input type='text' size='40' placeholder='Username' id='username'><br />
 112         <input type='password' size='40' placeholder='Password' id='password'><br />
 113         <input type='button' value='Submit' id='submit'>
 114     </form>
 115 </body>
 116 </html>