Merge pull request #46 from aio-libs/login-form

Add very basic login page
aio-libs · Sep 29, 2016 · 54d7b99 · 54d7b99
2 parents 2ac7517 + 33c22aa
commit 54d7b99
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 0 deletions.
diff --git a/aiohttp_admin/static/css/login.css b/aiohttp_admin/static/css/login.css
@@ -0,0 +1,100 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: #4CAF50;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: #43A047;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: #4CAF50;
+  text-decoration: none;
+}
+.form .register-form {
+  display: none;
+}
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.container:before, .container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.container .info {
+  margin: 50px auto;
+  text-align: center;
+}
+.container .info h1 {
+  margin: 0 0 15px;
+  padding: 0;
+  font-size: 36px;
+  font-weight: 300;
+  color: #1a1a1a;
+}
+.container .info span {
+  color: #4d4d4d;
+  font-size: 12px;
+}
+.container .info span a {
+  color: #000000;
+  text-decoration: none;
+}
+.container .info span .fa {
+  color: #EF3B3A;
+}
+body {
+  background: #76b852; /* fallback for old browsers */
+  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
+  background: -moz-linear-gradient(right, #76b852, #8DC26F);
+  background: -o-linear-gradient(right, #76b852, #8DC26F);
+  background: linear-gradient(to left, #76b852, #8DC26F);
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/aiohttp_admin/templates/login.html b/aiohttp_admin/templates/login.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>aiohttp admin</title>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <link href="{{ url('admin.static', filename='css/login.css') }}" rel="stylesheet">
+    <link href="{{ url('admin.static', filename='css/ng-admin.min.css') }}" rel="prefetch">
+    <link href="{{ url('admin.static', filename='js/ng-admin.min.js') }}" rel="prefetch">
+    <link href="{{ url('admin.config', filename='config.js') }}" rel="prefetch">
+</head>
+<body>
+    <div class="login-page">
+        <div class="form">
+            <p>aiohttp_admin</p>
+            <form class="login-form" onsubmit="return login()">
+                <input id="username" placeholder="username" type="text">
+                <input id="password" placeholder="password" type="password">
+                <button>login</button>
+                <p class="message"><a href="http://github.com/aio-libs/aiohttp_admin">http://github.com/aio-libs/aiohttp_admin</a></p>
+            </form>
+        </div>
+    </div>
+    <script type="application/x-javascript">
+    window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
+    function hideURLbar(){
+        window.scrollTo(0,1);
+    }
+    function login(e) {
+        if (e) {
+            e.preventDefault();
+        }
+        var request = new XMLHttpRequest();
+        var data = {"username": document.getElementById('username').value,
+                    "password": document.getElementById('password').value}
+        request.open('POST', '/admin/login', true);
+        request.setRequestHeader('Content-Type', 'application/json');
+        request.onload = function() {
+          if (request.status >= 200 && request.status < 400) {
+            var respData = JSON.parse(request.responseText);
+            window.localStorage.setItem('aiohttp_admin_token', respData);
+            var redirect = request.getResponseHeader("location");
+            window.location = redirect;
+          } else {
+            alert("go wrong status code");
+          }
+        };
+        request.onerror = function() {
+          alert("Connection Error");
+        };
+        request.send(JSON.stringify(data));
+    }
+    </script>
+</body>
+</html>