From d52db895dd56559ac2633e8a2cad4b72d91cea99 Mon Sep 17 00:00:00 2001
From: Fabian Becker <halfdan@xnorfz.de>
Date: Sun, 24 Feb 2013 23:21:27 +0100
Subject: Change DOCTYPE to html5 Login page is now HTML5 compatible Embed
 input icons

---
 plugins/Login/FormLogin.php        |  2 +-
 plugins/Login/templates/header.tpl | 13 +++++--------
 plugins/Login/templates/login.css  | 38 ++++++++++++++++++++++----------------
 plugins/Login/templates/login.tpl  | 21 +++++++++++----------
 4 files changed, 39 insertions(+), 35 deletions(-)

(limited to 'plugins/Login')
diff --git a/plugins/Login/FormLogin.php b/plugins/Login/FormLogin.php
index 5a74477772..46c02f2f91 100644
--- a/plugins/Login/FormLogin.php
+++ b/plugins/Login/FormLogin.php
@@ -15,7 +15,7 @@
  */
 class Piwik_Login_FormLogin extends Piwik_QuickForm2
 {
-	function __construct( $id = 'loginform', $method = 'post', $attributes = null, $trackSubmit = false)
+	function __construct( $id = 'login_form', $method = 'post', $attributes = null, $trackSubmit = false)
 	{
 		parent::__construct($id,  $method, $attributes, $trackSubmit);
 	}
diff --git a/plugins/Login/templates/header.tpl b/plugins/Login/templates/header.tpl
index 7c5a57666c..6a7be43ecf 100644
--- a/plugins/Login/templates/header.tpl
+++ b/plugins/Login/templates/header.tpl
@@ -1,14 +1,11 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
+<!DOCTYPE html>
+<html>
 <head>
 	<title>{if !$isCustomLogo}Piwik &rsaquo; {/if}{'Login_LogIn'|translate}</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<link rel="shortcut icon" href="plugins/CoreHome/templates/images/favicon.ico" />
 	<link rel="stylesheet" type="text/css" href="plugins/Login/templates/login.css" />
 	<meta name="description" content="{'General_OpenSourceWebAnalytics'|translate|escape}" />
-	
-
 
 {if isset($forceSslLogin) && $forceSslLogin}
 {literal}
@@ -44,14 +41,14 @@
 {include file="CoreHome/templates/iframe_buster_body.tpl"}
 {include file="default/ie6.tpl"}
 	<div id="logo">
-	{if !$isCustomLogo}<a href="http://piwik.org" alt="Piwik" title="{$linkTitle}">{/if}
-		<img src='{$logoLarge}' title="{$linkTitle}" width="240" style='margin-right:20px' />
+	{if !$isCustomLogo}<a href="http://piwik.org" title="{$linkTitle}">{/if}
+		<img src='{$logoLarge}' title="{$linkTitle}" alt="Piwik" width="240" style='margin-right:20px' />
 		{if $isCustomLogo}{capture name='poweredByPiwik'}
 				<i><a href="http://piwik.org/" target="_blank">{$linkTitle}</a></i>
 				{/capture}
 		{/if}
 	{if !$isCustomLogo}</a>
-		<div class="description"><a href="http://piwik.org" alt="Piwik" title="{$linkTitle}">{$linkTitle}</a>
+		<div class="description"><a href="http://piwik.org" title="{$linkTitle}">{$linkTitle}</a>
 			<div class="arrow"> </div>
 		</div>
 	{/if}
diff --git a/plugins/Login/templates/login.css b/plugins/Login/templates/login.css
index 61126e0a66..68a78dc6e0 100644
--- a/plugins/Login/templates/login.css
+++ b/plugins/Login/templates/login.css
@@ -22,7 +22,6 @@ form {
 	padding: 0 20px;
 	cursor: pointer;
 	font: bold 15px Arial, Helvetica;
-	color: #8f5a0a;
 }
 
 #login form div {
@@ -79,9 +78,9 @@ form {
 #login form { margin: 0; position: relative; }
 #login form input[type="text"],
 #login form input[type="password"] {
-	padding: 10px 15px 10px 30px;
+	padding: 10px 15px 10px 40px;
 	margin: 0 0 15px 0;
-	width: 273px; /* 273 + 2 + 45 = 320 */
+	width: 263px; /* 273 + 2 + 45 = 320 */
 	border: 1px solid #ccc;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
@@ -108,6 +107,19 @@ form {
 	text-align: center;
 }
 
+#login_form_password, #reset_form_password, 
+#reset_form_password_bis, #login_form_login, #reset_form_login {
+	background: #fff url(../../../themes/default/images/login-sprite.png) no-repeat;
+}
+
+#login_form_password, #reset_form_password, #reset_form_password_bis {
+	background-position: 10px -51px !important;
+}
+
+#login_form_login, #reset_form_login {
+	background-position: 10px 11px !important;
+}
+
 #login_form_password,#reset_form_password,#reset_form_password_bis,
 #login_form_login,#reset_form_login {
 	font-size: 20px;
@@ -116,10 +128,6 @@ form {
 	margin-right: 6px;
 }
 
-#login form input {
-	color: #555;
-}
-
 #login #login_error {
 	background-color: #ffebe8;
 	border-color: #c00;
@@ -127,13 +135,10 @@ form {
 
 #login form input.submit {
 	background-color: #e5e5e5;
-	color: #246;
-	border-color: #80b5d0;
 }
 
 #login form input.submit:hover {
-	color: #d54e21;
-	border-color: #328ab2;
+	background-color: #eee;
 }
 
 .login #login_error {
@@ -175,8 +180,8 @@ a {
 
 #logo .description {
 	position: absolute;
-	left: -60px !important;
-	top: -40px !important;
+	left: -40px !important;
+	top: -30px !important;
 	-webkit-transform:rotate(-6deg);
 	-moz-transform:rotate(-6deg);
 	-ms-transform:rotate(-6deg);
@@ -184,16 +189,17 @@ a {
 }
 
 #logo .description .arrow {
-	background:url('/themes/default/images/affix-arrow.png');
+	background:url('../../../themes/default/images/affix-arrow.png');
 	width:50px;
 	height:68px;
 	position:absolute;
-	left:-25px;
+	left:-35px;
 }
 
 #logo img {
 	border:0;
-	vertical-align: bottom; 
+	vertical-align: bottom;
+	width: 260px;
 }
 
 #logo .h1 {
diff --git a/plugins/Login/templates/login.tpl b/plugins/Login/templates/login.tpl
index 5b2cb472a6..956f8d4bc8 100644
--- a/plugins/Login/templates/login.tpl
+++ b/plugins/Login/templates/login.tpl
@@ -1,10 +1,10 @@
 {include file="Login/templates/header.tpl"}
 
-<div id="login">
+<section id="login">
 
 {* untrusted host warning *}
 {if isset($isValidHost) && isset($invalidHostMessage) && !$isValidHost}
-<div id="login_error" style='width:400px'>
+<div id="login_error">
 	<strong>{'General_Warning'|translate}:&nbsp;</strong>{$invalidHostMessage}
 
 	<br><br>{$invalidHostMessageHowToFix}
@@ -31,16 +31,17 @@
 	{/if}
 </div>
 
-<form id="login_form" {$form_data.attributes}>
+<form {$form_data.attributes}>
 	<h1>{'Login_LogIn'|translate}</h1>
 	<fieldset class="inputs">
-		<input type="text" name="form_login" id="login_form_login" class="input" value="" size="20" tabindex="10" placeholder="{'General_Username'|translate}" />
+		<input type="text" name="form_login" id="login_form_login" class="input" value="" size="20" tabindex="10" placeholder="{'General_Username'|translate}" autofocus="autofocus" />
 		<input type="password" name="form_password" id="login_form_password" class="input" value="" size="20" tabindex="20" placeholder="{'Login_Password'|translate}" />
 		<input type="hidden" name="form_nonce" id="login_form_nonce" value="{$nonce}" />
 	</fieldset>
 
 	<fieldset class="actions">
-		<label><input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90" {if $form_data.form_rememberme.value}checked="checked" {/if}/> {'Login_RememberMe'|translate}</label>
+		<input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90" {if $form_data.form_rememberme.value}checked="checked" {/if}/>
+		<label for="login_form_rememberme">{'Login_RememberMe'|translate}</label>
 		<input class="submit" id='login_form_submit' type="submit" value="{'Login_LogIn'|translate}" tabindex="100" />
 	</fieldset>
 </form>
@@ -48,15 +49,15 @@
 <form id="reset_form" style="display:none;">
 	<fieldset class="inputs">
 		<input type="text" name="form_login" id="reset_form_login" class="input" value="" size="20" tabindex="10" placeholder="{'Login_LoginOrEmail'|translate}" />
-		<input type="hidden" name="form_nonce" id="reset_form_nonce" value="{$nonce}" /></label>
+		<input type="hidden" name="form_nonce" id="reset_form_nonce" value="{$nonce}" />
 
-		<input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20" tabindex="20" placeholder="{'Login_Password'|translate}" /></label>
+		<input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20" tabindex="20" placeholder="{'Login_Password'|translate}" />
 
-		<input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value="" size="20" tabindex="30" placeholder="{'Login_PasswordRepeat'|translate}" /></label>
+		<input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value="" size="20" tabindex="30" placeholder="{'Login_PasswordRepeat'|translate}" />
 	</fieldset>
 	
 	<fieldset class="actions">
-		<span class="loadingPiwik" style="display:none;"><img src="themes/default/images/loading-blue.gif" /></span>
+		<span class="loadingPiwik" style="display:none;"><img alt="Loading" src="themes/default/images/loading-blue.gif" /></span>
 		<input class="submit" id='reset_form_submit' type="submit" value="{'Login_ChangePassword'|translate}" tabindex="100"/>
 	</fieldset>
 	
@@ -79,6 +80,6 @@
 	<p class="message">{'Login_ResetPasswordInstructions'|translate}</p>
 </div>
 {/if}
-</div>
+</section>
 </body>
 </html>
-- 
cgit v1.2.3

