From ceb1da06d4541968bfb5a5e5225b4b5c0011f007 Mon Sep 17 00:00:00 2001
From: Pellaeon Lin <nfsmwlin@gmail.com>
Date: Sat, 4 Oct 2014 22:23:48 +0800
Subject: [PATCH] Polish the looks of createAccount form

---
 css/style.css      | 21 ++++++++++++++++++---
 templates/form.php | 18 ++++++++++++------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index eca406f..67f0d78 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,18 @@
-#hello {
-	color: red;
-}
\ No newline at end of file
+#email, #username {
+	width: 223px !important;
+	padding-left: 36px !important;
+}
+#email-icon, #username-icon {
+	position: absolute;
+	left: 16px;
+	top: 22px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	filter: alpha(opacity=30);
+	opacity: .3;
+}
+#body-login input[type="email"] {
+	width: 249px;
+}
+#username-icon {
+	top: 17px;
+}
diff --git a/templates/form.php b/templates/form.php
index c511848..e499e5b 100644
--- a/templates/form.php
+++ b/templates/form.php
@@ -1,4 +1,6 @@
-<form action="<?php print_unescaped(OC_Helper::linkToRoute('registration.register.createAccount', array('token'=>$_['token']))) ?>" method="post">
+<?php
+\OCP\Util::addStyle('registration', 'style');
+?><form action="<?php print_unescaped(OC_Helper::linkToRoute('registration.register.createAccount', array('token'=>$_['token']))) ?>" method="post">
 	<fieldset>
 		<?php if ( $_['errormsgs'] ) {?>
 		<ul class="error">
@@ -6,21 +8,25 @@
 				echo "<li>$errormsg</li>";
 			} ?>
 		</ul>
+		<?php } else { ?>
+		<ul class="success"><!-- TODO: add success style -->
+			<li><?php print_unescaped($l->t('Welcome, you can create your account below.')); ?></li>
+		</ul>
 		<?php } ?>
 		<p class="infield grouptop">
 		<input type="email" name="email" id="email" value="<?php echo $_['email']; ?>" disabled />
 		<label for="email" class="infield"><?php echo $_['email']; ?></label>
-		<img class="svg" src="<?php print_unescaped(image_path('', 'actions/mail.svg')); ?>" alt=""/>
+		<img id="email-icon" class="svg" src="<?php print_unescaped(image_path('', 'actions/mail.svg')); ?>" alt=""/>
 		</p>
 
 		<p class="infield groupmiddle">
-		<input type="text" name="username" id="username" value="<?php echo $_['entered_data']['user']; ?>" />
-		<label for="username" class="infield"><?php print_unescaped($l->t( 'Username' )); ?></label>
-		<img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
+		<input type="text" name="username" id="username" value="<?php echo $_['entered_data']['user']; ?>" placeholder="<?php print_unescaped($l->t('Username')); ?>" />
+		<label for="username" class="infield"><?php print_unescaped($l->t('Username')); ?></label>
+		<img id="username-icon" class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
 		</p>
 
 		<p class="infield groupbottom">
-		<input type="password" name="password" id="password" />
+		<input type="password" name="password" id="password" placeholder="<?php print_unescaped($l->t('Password')); ?>"/>
 		<label for="password" class="infield"><?php print_unescaped($l->t( 'Password' )); ?></label>
 		<img id="password-icon" class="svg" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
 		<input id="show" name="show" type="checkbox">