From ecd68e0c6e9a1ef4f77f117c9a564f4c99630bab Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <JanCBorchardt@fsfe.org>
Date: Tue, 19 Apr 2011 00:54:36 +0200
Subject: [PATCH 1/3] actually know what to put in which login field

---
 js/js.js                   | 16 ++++++++++++++++
 templates/installation.php |  2 +-
 templates/login.php        |  8 ++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/js/js.js b/js/js.js
index 2fb67f0ec0..b7d94b5eb6 100644
--- a/js/js.js
+++ b/js/js.js
@@ -22,4 +22,20 @@ $(document).ready(function() {
 		$('label.sqlite').css('background-color', '#ddd');
 		$('label.mysql').css('background-color', '#fff');
 	});
+
+	// Hide and show input field values for login form
+	var textuser = "username";
+	var textpassword = "password";
+	$("#user").focus(function() {
+		if($(this).attr("value") == textuser) $(this).attr("value", "");
+	});
+	$("#user").blur(function() {
+		if($(this).attr("value") == "") $(this).attr("value", textuser);
+	});
+	$("#password").focus(function() {
+		if($(this).attr("value") == textpassword) $(this).attr("value", "");
+	});
+	$("#password").blur(function() {
+		if($(this).attr("value") == "") $(this).attr("value", textpassword);
+	});
 });
diff --git a/templates/installation.php b/templates/installation.php
index 73b9a67743..725c7f149e 100644
--- a/templates/installation.php
+++ b/templates/installation.php
@@ -3,7 +3,7 @@
 	<form action="#" method="post">
 		<input type='hidden' name='install' value='true'/>
 		<fieldset>
-			<input type="text" name="login" value="your email" />
+			<input type="text" name="login" value="admin username" />
 			<input type="password" name="pass" value="password" />
         </fieldset>
 		<fieldset>
diff --git a/templates/login.php b/templates/login.php
index 02ba70be52..c0defdc2b0 100644
--- a/templates/login.php
+++ b/templates/login.php
@@ -1,13 +1,13 @@
 <div id="login">
-	<img src="<?php echo image_path("", "owncloud-logo-medium-white.png"); ?>" alt="ownCloud" />
+	<img src="<?php echo image_path('', 'owncloud-logo-medium-white.png'); ?>" alt="ownCloud" />
 	<form action="index.php" method="post">
 		<!-- <h1>Sign in :</h1> -->
 		<fieldset>
-			<?php if($_["error"]): ?>
+			<?php if($_['error']): ?>
 				Login failed!
 			<?php endif; ?>
-			<input type="text" name="user" value="" />
-			<input type="password" name="password" />
+			<input type="text" name="user" id="user" value="username" />
+			<input type="password" name="password" id="password" value="password" />
 			<input type="submit" value="Log in" />
 		</fieldset>
 	</form>

From c7d5e671acdcc73a9740a09249634be051c2968c Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <JanCBorchardt@fsfe.org>
Date: Tue, 19 Apr 2011 01:17:35 +0200
Subject: [PATCH 2/3] jQuery-value-hide-foo for the installation form as well

---
 js/js.js                   | 34 +++++++++++++++++++---------------
 templates/installation.php | 30 +++++++++++++++---------------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/js/js.js b/js/js.js
index b7d94b5eb6..948c341738 100644
--- a/js/js.js
+++ b/js/js.js
@@ -23,19 +23,23 @@ $(document).ready(function() {
 		$('label.mysql').css('background-color', '#fff');
 	});
 
-	// Hide and show input field values for login form
-	var textuser = "username";
-	var textpassword = "password";
-	$("#user").focus(function() {
-		if($(this).attr("value") == textuser) $(this).attr("value", "");
-	});
-	$("#user").blur(function() {
-		if($(this).attr("value") == "") $(this).attr("value", textuser);
-	});
-	$("#password").focus(function() {
-		if($(this).attr("value") == textpassword) $(this).attr("value", "");
-	});
-	$("#password").blur(function() {
-		if($(this).attr("value") == "") $(this).attr("value", textpassword);
-	});
+	// Hide and show input field values for login and installation form
+	var textuser = 'username';
+	var textpassword = 'password';
+	var textadmin = 'admin username';
+	var textdbuser = 'MySQL user';
+	var textdbpass = 'password';
+	var textdbname = 'database name';
+	$('#user').focus(function() { if($(this).attr('value') == textuser) $(this).attr('value', ''); });
+	$('#user').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textuser); });
+	$('#password').focus(function() { if($(this).attr('value') == textpassword) $(this).attr('value', ''); });
+	$('#password').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textpassword); });
+	$('#admin').focus(function() { if($(this).attr('value') == textadmin) $(this).attr('value', ''); });
+	$('#admin').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textadmin); });
+	$('#dbuser').focus(function() { if($(this).attr('value') == textdbuser) $(this).attr('value', ''); });
+	$('#dbuser').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textdbuser); });
+	$('#dbpass').focus(function() { if($(this).attr('value') == textdbpass) $(this).attr('value', ''); });
+	$('#dbpass').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textdbpass); });
+	$('#dbname').focus(function() { if($(this).attr('value') == textdbname) $(this).attr('value', ''); });
+	$('#dbname').blur(function() { if($(this).attr('value') == '') $(this).attr('value', textdbname); });
 });
diff --git a/templates/installation.php b/templates/installation.php
index 725c7f149e..dc6dc5790f 100644
--- a/templates/installation.php
+++ b/templates/installation.php
@@ -1,17 +1,17 @@
 <div id="login">
-	<img src="<?php echo image_path("", "owncloud-logo-medium-white.png"); ?>" alt="ownCloud" />
+	<img src="<?php echo image_path('', 'owncloud-logo-medium-white.png'); ?>" alt="ownCloud" />
 	<form action="#" method="post">
 		<input type='hidden' name='install' value='true'/>
 		<fieldset>
-			<input type="text" name="login" value="admin username" />
-			<input type="password" name="pass" value="password" />
+			<input type="text" name="login" id="admin" value="admin username" />
+			<input type="password" name="pass" id="password" value="password" />
         </fieldset>
 		<fieldset>
 			<?php if(!$_['hasSQLite']): ?>
 				<legend><abbr title="to use SQLite instead, install it on your server">MySQL</abbr> Database</legend>
-				<input type="text" name="dbuser" value="MySQL user" />
-				<input type="password" name="dbpass" value="password" />
-				<input type="text" name="dbname" value="database name" />
+				<input type="text" name="dbuser" id="dbuser" value="MySQL user" />
+				<input type="password" name="dbpass" id="dbpass" value="password" />
+				<input type="text" name="dbname" id="dbname" value="database name" />
 			<?php endif;?>
 		</fieldset>
 		<fieldset id="advanced">
@@ -22,24 +22,24 @@
 					<input type="radio" name="dbtype" value='sqlite' id="sqlite" checked="checked" /><label class="sqlite" for="sqlite">SQLite</label>
 					<input type="radio" name="dbtype" value='mysql' id="mysql"><label class="mysql" for="mysql">MySQL</label>
 					<div id="use_mysql">
-						<input type="text" name="dbuser" value="MySQL user" />
-						<input type="password" name="dbpass" value="password" />
-						<input type="text" name="dbname" value="database name" />
+						<input type="text" name="dbuser" id="dbuser" value="MySQL user" />
+						<input type="password" name="dbpass" id="dbpass" value="password" />
+						<input type="text" name="dbname" id="dbname" value="database name" />
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and !$_['hasSQLite']): ?>
-						<input type='hidden' name='dbtype' value='mysql'/>
+						<input type="hidden" name="dbtype" value="mysql" />
 				<?php endif;?>
 				<?php if(!$_['hasMySQL'] and $_['hasSQLite']): ?>
-						<input type='hidden' name='dbtype' value='sqlite'/>
+						<input type="hidden" name="dbtype" value="sqlite" />
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and $_['hasSQLite']): ?>
-						<label class="left">Database host</label><input type="text" name="dbhost" value="localhost" />
-						<label class="left">Table prefix</label><input type="text" name="dbtableprefix" value="oc_" />
+						<label class="left">Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" />
+						<label class="left">Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" />
 					</div>
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and !$_['hasSQLite']): ?>
-					<label class="left">Host</label><input type="text" name="dbhost" value="localhost" />
-					<label class="left">Table prefix</label><input type="text" name="dbtableprefix" value="oc_" />
+					<label class="left">Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" />
+					<label class="left">Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" />
 				<?php endif;?>
 			</div>
 		</fieldset>

From 565c46eedfb83a8eb3c95827cb21e1ed57c8c56e Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <JanCBorchardt@fsfe.org>
Date: Tue, 19 Apr 2011 02:00:15 +0200
Subject: [PATCH 3/3] the installation form layout is still not completely done
 but at least the CSS looks better

---
 css/styles.css             | 40 ++++++++++++--------------------------
 templates/installation.php | 10 +++++-----
 2 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index d5b5f59f70..6a4e7d8f89 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -22,30 +22,27 @@ legend { padding:0 0.5em; font-size:1.2em; }
 
 div.controls { width:91%; margin:1em 1em 1em 2em; padding:0.5em 0; background-color:#f7f7f7; border:1px solid #eee; }
 
-/* INSTALLATION ------------------------------------------------------------ */
-legend { font-weight:bold; }
-legend abbr { border-bottom:1px dotted #000; }
-form a { color:#000; text-decoration:none; }
-#login input[type='text'], #login input[type='password'] { display:block; margin:0 auto .5em; }
-#login input[type='radio'] { display:none; }
-#login input[type='radio']+label { margin:1em .1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:2em; color:#666; background-color:#fff; }
-#login input[type='radio']+label:hover, #login input[type='radio']+label:focus { background-color:#ccc; outline:0; }
-.left { display:block; position:relative; top:2.5em; left:-19em; text-align: right; font-weight:bold; }
- 
- 
-/* LOG IN ------------------------------------------------------------ */
+/* LOG IN & INSTALLATION ------------------------------------------------------------ */
 #body-login { width:100%; background-image:none; background-color:#ddd; }
 #body-login p.info { width:16em; margin:4em auto; padding:1em; background-color:#eee; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
 #login { margin:0 auto 0 auto; padding:2em 0 0 0; background:#eee url('../img/header-login.png') repeat-x left 0; text-align:center; }
 #login form { margin:2.5em auto 0 auto; padding:0 0 1.5em 0; text-align:center; border-bottom:1px solid #fff; }
+#login form a { color:#000; text-decoration:none; }
 #login h1 { margin:0; padding:2.5em 0 0 0; border:0; text-align:center; text-transform:lowercase; font-size:1.5em; }
 #login fieldset { background-color:transparent; border:0; }
 #login fieldset p { margin:1em 0 0 0; padding:0; text-align:center; }
-#login label { font-size:1.2em; }
+#login legend { font-weight:bold; margin-left:45%; }
+#login legend abbr { border-bottom:1px dotted #000; }
+#login label { font-size:1.2em; display:inline; position:relative; top:2em; left:-12em; text-align:right; font-weight:bold; }
 #login input { width:8em; margin:0.1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:2em; color:#666; }
 #login input:hover, #login input:focus { outline:0; }
 #login input[type='submit'] { width:5em; background-color:#fff; }
 #login input[type='submit']:hover, #login input[type=submit]:focus { background-color:#ccc; outline:0; }
+#login input[type='text'], #login input[type='password'] { display:block; margin:0 auto .5em; }
+#login input[type='radio'] { display:none; }
+#login input[type='radio']+label { margin:1em .1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:2em; color:#666; background-color:#fff; }
+#login input[type='radio']+label:hover, #login input[type='radio']+label:focus { background-color:#ccc; outline:0; }
+#login #use_mysql { margin-top:1.5em; }
 
 .prettybutton { margin:0.1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em; text-decoration:none; color:#666; background-color:#fff; }
 .prettybutton:hover, .prettybutton:focus { background-color:#ccc; outline:0; }
@@ -121,22 +118,9 @@ p.actions a.delete { background-image:url('../img/delete.png'); }
 #quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
 #quota_indicator div { background-color:#76A9EA; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
 
-
 /* PAGER ------------------------------------------------------------ */
-.pager tr td
-{
-    border-bottom: 0px;
-}
-
-
-.pager tr td a
-{
-    text-decoration: none;
-    color: #666666;
-    font-size: 0.9em;
-    text-align: center;
-}
-
+.pager tr td { border-bottom:0px; }
+.pager tr td a { text-decoration:none; color:#666666; font-size:0.9em; text-align:center; }
 
 /* LOGS --------------------------------------------------------------------- */
 #logs_options { width:auto; margin:0; }
diff --git a/templates/installation.php b/templates/installation.php
index dc6dc5790f..5c882e81bf 100644
--- a/templates/installation.php
+++ b/templates/installation.php
@@ -17,7 +17,7 @@
 		<fieldset id="advanced">
 			<legend><a id="advanced_options_link" href="">Advanced ▾</a></legend>
 			<div id="advanced_options">
-				<label class="left">Data directory</label><input type="text" name="directory" value="<?php echo($_['datadir']);?>" />
+				<label>Data directory</label><input type="text" name="directory" value="<?php echo($_['datadir']);?>" />
 				<?php if($_['hasMySQL'] and $_['hasSQLite']): ?>
 					<input type="radio" name="dbtype" value='sqlite' id="sqlite" checked="checked" /><label class="sqlite" for="sqlite">SQLite</label>
 					<input type="radio" name="dbtype" value='mysql' id="mysql"><label class="mysql" for="mysql">MySQL</label>
@@ -33,13 +33,13 @@
 						<input type="hidden" name="dbtype" value="sqlite" />
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and $_['hasSQLite']): ?>
-						<label class="left">Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" />
-						<label class="left">Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" />
+						<label>Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" />
+						<label>Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" />
 					</div>
 				<?php endif;?>
 				<?php if($_['hasMySQL'] and !$_['hasSQLite']): ?>
-					<label class="left">Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" />
-					<label class="left">Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" />
+					<label>Database host</label><input type="text" name="dbhost" id="dbhost" value="localhost" />
+					<label>Table prefix</label><input type="text" name="dbtableprefix" id="dbtableprefix" value="oc_" />
 				<?php endif;?>
 			</div>
 		</fieldset>