Skip to content

Commit 54d7b99

Browse files
jettifyjettify
authored
Merge pull request #46 from aio-libs/login-form
Add very basic login page
2 parents 2ac7517 + 33c22aa commit 54d7b99

File tree

2 files changed

+155
-0
lines changed

2 files changed

+155
-0
lines changed

‎aiohttp_admin/static/css/login.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
2+
3+
.login-page {
4+
width: 360px;
5+
padding: 8% 0 0;
6+
margin: auto;
7+
}
8+
.form {
9+
position: relative;
10+
z-index: 1;
11+
background: #FFFFFF;
12+
max-width: 360px;
13+
margin: 0 auto 100px;
14+
padding: 45px;
15+
text-align: center;
16+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
17+
}
18+
.form input {
19+
font-family: "Roboto", sans-serif;
20+
outline: 0;
21+
background: #f2f2f2;
22+
width: 100%;
23+
border: 0;
24+
margin: 0 0 15px;
25+
padding: 15px;
26+
box-sizing: border-box;
27+
font-size: 14px;
28+
}
29+
.form button {
30+
font-family: "Roboto", sans-serif;
31+
text-transform: uppercase;
32+
outline: 0;
33+
background: #4CAF50;
34+
width: 100%;
35+
border: 0;
36+
padding: 15px;
37+
color: #FFFFFF;
38+
font-size: 14px;
39+
-webkit-transition: all 0.3 ease;
40+
transition: all 0.3 ease;
41+
cursor: pointer;
42+
}
43+
.form button:hover,.form button:active,.form button:focus {
44+
background: #43A047;
45+
}
46+
.form .message {
47+
margin: 15px 0 0;
48+
color: #b3b3b3;
49+
font-size: 12px;
50+
}
51+
.form .message a {
52+
color: #4CAF50;
53+
text-decoration: none;
54+
}
55+
.form .register-form {
56+
display: none;
57+
}
58+
.container {
59+
position: relative;
60+
z-index: 1;
61+
max-width: 300px;
62+
margin: 0 auto;
63+
}
64+
.container:before, .container:after {
65+
content: "";
66+
display: block;
67+
clear: both;
68+
}
69+
.container .info {
70+
margin: 50px auto;
71+
text-align: center;
72+
}
73+
.container .info h1 {
74+
margin: 0 0 15px;
75+
padding: 0;
76+
font-size: 36px;
77+
font-weight: 300;
78+
color: #1a1a1a;
79+
}
80+
.container .info span {
81+
color: #4d4d4d;
82+
font-size: 12px;
83+
}
84+
.container .info span a {
85+
color: #000000;
86+
text-decoration: none;
87+
}
88+
.container .info span .fa {
89+
color: #EF3B3A;
90+
}
91+
body {
92+
background: #76b852; /* fallback for old browsers */
93+
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
94+
background: -moz-linear-gradient(right, #76b852, #8DC26F);
95+
background: -o-linear-gradient(right, #76b852, #8DC26F);
96+
background: linear-gradient(to left, #76b852, #8DC26F);
97+
font-family: "Roboto", sans-serif;
98+
-webkit-font-smoothing: antialiased;
99+
-moz-osx-font-smoothing: grayscale;
100+
}

‎aiohttp_admin/templates/login.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>aiohttp admin</title>
5+
<meta charset="utf-8">
6+
<meta content="width=device-width, initial-scale=1" name="viewport">
7+
<link href="{{ url('admin.static', filename='css/login.css') }}" rel="stylesheet">
8+
<link href="{{ url('admin.static', filename='css/ng-admin.min.css') }}" rel="prefetch">
9+
<link href="{{ url('admin.static', filename='js/ng-admin.min.js') }}" rel="prefetch">
10+
<link href="{{ url('admin.config', filename='config.js') }}" rel="prefetch">
11+
</head>
12+
<body>
13+
<div class="login-page">
14+
<div class="form">
15+
<p>aiohttp_admin</p>
16+
<form class="login-form" onsubmit="return login()">
17+
<input id="username" placeholder="username" type="text">
18+
<input id="password" placeholder="password" type="password">
19+
<button>login</button>
20+
<p class="message"><a href="http://github.com/aio-libs/aiohttp_admin">http://github.com/aio-libs/aiohttp_admin</a></p>
21+
</form>
22+
</div>
23+
</div>
24+
<script type="application/x-javascript">
25+
window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
26+
function hideURLbar(){
27+
window.scrollTo(0,1);
28+
}
29+
function login(e) {
30+
if (e) {
31+
e.preventDefault();
32+
}
33+
var request = new XMLHttpRequest();
34+
var data = {"username": document.getElementById('username').value,
35+
"password": document.getElementById('password').value}
36+
request.open('POST', '/admin/login', true);
37+
request.setRequestHeader('Content-Type', 'application/json');
38+
request.onload = function() {
39+
if (request.status >= 200 && request.status < 400) {
40+
var respData = JSON.parse(request.responseText);
41+
window.localStorage.setItem('aiohttp_admin_token', respData);
42+
var redirect = request.getResponseHeader("location");
43+
window.location = redirect;
44+
} else {
45+
alert("go wrong status code");
46+
}
47+
};
48+
request.onerror = function() {
49+
alert("Connection Error");
50+
};
51+
request.send(JSON.stringify(data));
52+
}
53+
</script>
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)