Module: check_mk
Branch: master
Commit: 33fb22b87297bd496d915cb3d60251efc8155306
URL:
http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=33fb22b87297bd…
Author: Mathias Kettner <mk(a)mathias-kettner.de>
Date: Thu Feb 16 12:25:06 2012 +0100
Redesign of login screen
---
web/htdocs/htmllib.py | 10 ++-
web/htdocs/images/button_login_hi.png | Bin 0 -> 1068 bytes
web/htdocs/images/button_login_lo.png | Bin 0 -> 1104 bytes
web/htdocs/images/login_dark_bg.png | Bin 0 -> 4670 bytes
web/htdocs/images/login_spotlight.png | Bin 0 -> 334182 bytes
web/htdocs/images/login_window.png | Bin 0 -> 10934 bytes
web/htdocs/images/snapin_closed.png | Bin 844 -> 832 bytes
web/htdocs/login.css | 145 +++++++++++++++++++++++----------
web/htdocs/login.py | 41 +++++-----
9 files changed, 129 insertions(+), 67 deletions(-)
diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py
index 9d4ff21..f37ca06 100644
--- a/web/htdocs/htmllib.py
+++ b/web/htdocs/htmllib.py
@@ -330,12 +330,16 @@ class html:
def empty_icon(self):
self.write('<img class=icon src="images/trans.png">')
- def icon_button(self, url, help, icon):
- self.write('<a href="%s">'
+ def icon_button(self, url, help, icon, id=None):
+ if id:
+ idtxt = "id='%s' " % id
+ else:
+ idtxt = ""
+ self.write('<a %sonfocus="if (this.blur) this.blur();"
href="%s">'
'<img align=absmiddle class=iconbutton title="%s"
src="images/button_%s_lo.png" '
'onmouseover=\"hilite_icon(this, 1)\" '
'onmouseout=\"hilite_icon(this, 0)\">'
- '</a>\n' % (url, help, icon))
+ '</a>\n' % (idtxt, url, help, icon))
def empty_icon_button(self):
self.write('<img class="iconbutton trans"
src="images/trans.png">\n')
diff --git a/web/htdocs/images/button_login_hi.png
b/web/htdocs/images/button_login_hi.png
new file mode 100644
index 0000000..f07d282
Binary files /dev/null and b/web/htdocs/images/button_login_hi.png differ
diff --git a/web/htdocs/images/button_login_lo.png
b/web/htdocs/images/button_login_lo.png
new file mode 100644
index 0000000..eeeef84
Binary files /dev/null and b/web/htdocs/images/button_login_lo.png differ
diff --git a/web/htdocs/images/login_dark_bg.png b/web/htdocs/images/login_dark_bg.png
new file mode 100644
index 0000000..d02f332
Binary files /dev/null and b/web/htdocs/images/login_dark_bg.png differ
diff --git a/web/htdocs/images/login_spotlight.png
b/web/htdocs/images/login_spotlight.png
new file mode 100644
index 0000000..ab3abf6
Binary files /dev/null and b/web/htdocs/images/login_spotlight.png differ
diff --git a/web/htdocs/images/login_window.png b/web/htdocs/images/login_window.png
new file mode 100644
index 0000000..931dab3
Binary files /dev/null and b/web/htdocs/images/login_window.png differ
diff --git a/web/htdocs/images/snapin_closed.png b/web/htdocs/images/snapin_closed.png
index 86a669e..0151a0c 100644
Binary files a/web/htdocs/images/snapin_closed.png and
b/web/htdocs/images/snapin_closed.png differ
diff --git a/web/htdocs/login.css b/web/htdocs/login.css
index d6792f4..73ffd6b 100644
--- a/web/htdocs/login.css
+++ b/web/htdocs/login.css
@@ -36,61 +36,118 @@ Boston, MA 02110-1301 USA.
| Styling of the login page (when not HTTP Basic Auth is used) |
'-------------------------------------------------------------------------*/
-#login {
- margin: 0;
- height: 100%;
- width: 100%;
- text-align:center;
+body.main {
+ background-image: url("images/login_dark_bg.png");
+ background-position: center;
+ text-align: center;
+ vertical-align: middle;
}
-#login #logo {
- width: 126px;
- margin: 5em auto 0 auto;
- height: 72px;
- background-repeat: no-repeat;
- background-image: url("images/mk_logo_126x72.gif");
+
+
+div#login {
+ background-image: url("images/login_spotlight.png");
+ width: 605px;
+ height: 410px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -205px 0px 0px -302px;
+ /* border: 1px solid yellow; */
+}
+
+img#login_window {
+ width: 370px;
+ height: 230px;
+ position: relative;
+ left: 10px;
+ top: 10px;
+ float: none;
}
-#login h1 {
- width: 300px;
- margin: 0.2em auto 1em auto;
+
+label {
+ color: white;
}
-#login a {
- color: #ffffff;
+
+#version {
+ position: absolute;
+ top: 25px;
+ left: 420px;
+ color: white;
}
-#login a:hover {
- text-decoration: none;
+
+#label_user, #label_pass {
+ left: 174px;
}
-#login #form {
- width: 320px;
- margin: 0 auto 10px auto;
- padding: 8px 20px 8px 20px;
- background-image: url("images/form_background.png");
- border-radius: 15px;
+
+#input_user, #input_pass {
+ left: 250px;
}
-#login p {
- text-align: left;
+
+#label_user {
+ position: absolute;
+ top: 132px;
}
-#login label {
- font-size: 1.4em;
- padding-top: 0;
- margin: 0;
+#input_user {
+ position: absolute;
+ top: 128px;
}
-#login p input {
- width: 312px;
- font-size: 1.5em;
- margin-top: 2px;
+
+#label_pass {
+ position: absolute;
+ top: 168px;
}
-#login #table td.submit {
- padding-top: 5px;
+#input_pass {
+ position: absolute;
+ top: 164px;
}
-#login p.submit {
- text-align: right;
+
+#input_user, #input_pass {
+ width: 130px;
+ height: 16px;
}
-#login p.submit input {
- width: auto;
+
+#button_login {
+ position: absolute;
+ top: 190px;
+ left: 415px;
}
-#login #foot {
- font-size: 0.8em;
- font-style: italic;
- color: #ffffff;
+#button_login img {
+ width: 63px;
+ height: 32px;
}
+
+#button_text {
+ position: absolute;
+ top: 198px;
+ left: 415px;
+ text-align: center;
+ width: 61px;
+ color: white;
+ z-index: 100;
+}
+
+#login_error {
+ position: absolute;
+ top: -60px;
+ left: 135px;
+ width: 360px;
+ z-index: 100;
+}
+
+
+#foot {
+ position: absolute;
+ text-align: center;
+ top: 250px;
+ left: 135px;
+ width: 350px;
+ color: white;
+ font-size: 8pt;
+}
+
+
+#foot a, #foot a:hover {
+ color: white;
+}
+
diff --git a/web/htdocs/login.py b/web/htdocs/login.py
index a1a3f8c..1e2afab 100644
--- a/web/htdocs/login.py
+++ b/web/htdocs/login.py
@@ -220,34 +220,35 @@ def normal_login_page():
origtarget = html.req.uri
html.write("<div id=login>")
- html.write("<div id=logo></div>")
- html.write("<h1>%s</h2>" % _("Check_MK Multisite"))
- html.write('<div id=form>')
-
if html.has_user_errors():
+ html.write('<div id=login_error>')
html.show_user_errors()
+ html.write('</div>')
+
+ html.write("<img id=login_window
src=\"images/login_window.png\">")
+ html.write("<div id=version>%s</div>" %
defaults.check_mk_version)
html.begin_form("login", method = 'POST', add_transid = False)
+ html.hidden_field('_login', '1')
html.hidden_field('_origtarget', htmllib.attrencode(origtarget))
- html.write('<p>')
- html.write("<label class=legend for=_username>%s</label><br
/>" % _('Username'))
- html.text_input("_username", size = 50)
- html.write('</p>')
-
- html.write('<p>')
- html.write("<label class=legend for=_password>%s</label><br
/>" % _('Password'))
- html.password_input("_password", size = 50)
- html.write('</p>')
-
- html.write('<p class=submit>')
- html.button("_login", _('Login'))
- html.write('</p>')
- html.write('</div>')
-
+ html.write("<label id=label_user class=legend
for=_username>%s:</label><br />" % _('Username'))
+ html.text_input("_username", size = 50, id="input_user")
+ html.write("<label id=label_pass class=legend
for=_password>%s:</label><br />" % _('Password'))
+ html.password_input("_password", size = 50, id="input_pass")
+ html.write("<div id=button_text>%s</div>" %
_("Login"))
+
html.icon_button("javascript:document.getElementById('form_login').submit();",
_("Login"), "login", id="button_login")
+ html.write('<input type=submit style="display: none;">')
+
+ # Footer with copyright and stuff
html.write("<div id=foot>Version: %s - © "
- "<a href=\"http://mathias-kettner.de\">Mathias
Kettner</a></div>" % defaults.check_mk_version)
+ "<a href=\"http://mathias-kettner.de\">Mathias
Kettner</a><br><br>" % defaults.check_mk_version)
+ html.write(_("You can use, modify and distribute Check_MK under the terms of the
<a href='%s'>"
+ "GNU GPL Version 2</a>." %
"http://mathias-kettner.de/gpl.html"))
+ html.write("</div>")
+
html.write("</div>")
html.set_focus('_username')
+ html.hidden_fields()
html.end_form()
html.footer()