Merge pull request #1529 from owncloud/installation-login-fixes

Installation login fixes

core/css/styles.css

@@ -59,25 +59,6 @@ input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#
 ::-webkit-scrollbar-thumb { background:#ddd; }
 
 
-#show { float: right; position: absolute; right: 1em; top: 0.8em; display:none; }
-#login form input[name="show"] + label { background: url("../img/actions/toggle.png") no-repeat; opacity:0.3;
-float: right; width: 24px; position: absolute !important; height: 14px; right: 1em; top: 1.25em;}
-#login form input[name="show"]:checked + label { background:url("../img/actions/toggle.png") no-repeat; opacity:0.8; }
-
-
-
-/* SHOW PASSWORD TOGGLE */
-#show {
-	position:absolute; right:1em; top:.8em; float:right;
-	display:none;
-}
-#login form input[name="show"] + label {
-	position:absolute !important; height:14px; width:24px; right:1em; top:1.25em; float:right;
-	background-image:url("../img/actions/toggle.png"); background-repeat:no-repeat; opacity:.3;
-}
-#login form input[name="show"]:checked + label { opacity:.8; }
-
-
 /* BUTTONS */
 input[type="submit"], input[type="button"], button, .button, #quota, div.jp-progress, select, .pager li a {
 	width:auto; padding:.4em;
@@ -166,17 +147,14 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
 #login #datadirContent label { display:block; margin:0; color:#999;  }
 #login form #datadirField legend { margin-bottom:15px; }
 
-
 /* Icons for username and password fields to better recognize them */
 #adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
-#adminlogin+label+img, #adminpass+label+img, #user+label+img, #password+label+img {
+#adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon {
 	position:absolute; left:1.25em; top:1.65em;
 	opacity:.3;
 }
-#adminpass+label+img, #password+label+img { top:1.1em; }
+#adminpass-icon, #password-icon { top:1.1em; }
 input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; }
-#pass_image { position: absolute; top: 1.2em; left: 1.4em; opacity: 0.3; }
-
 
 /* Nicely grouping input field sets */
 .grouptop input {
@@ -194,15 +172,28 @@ input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; }
 	box-shadow:0 1px 1px #fff,0 1px 0 #ddd inset;
 }
 
+/* In field labels. No, HTML placeholder does not work as well. */
 #login form label { color:#666; }
 #login .groupmiddle label, #login .groupbottom label { top:.65em; }
-/* NEEDED FOR INFIELD LABELS */
 p.infield { position:relative; }
 label.infield { cursor:text !important; top:1.05em; left:.85em; }
 #login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; padding-left:1.4em; }
+#login #databaseField .infield { padding-left:0; }
 #login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; }
 #login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
 
+/* Show password toggle */
+#show {
+	position:absolute; right:1em; top:.8em; float:right;
+	display:none;
+}
+#show + label {
+	position:absolute!important; height:14px; width:24px; right:1em; top:1.25em!important;
+	background-image:url("../img/actions/toggle.png"); background-repeat:no-repeat; opacity:.3;
+}
+#show:checked + label { opacity:.8; }
+
+/* Database selector */
 #login form #selectDbType { text-align:center; }
 #login form #selectDbType label {
 	position:static; margin:0 -3px 5px; padding:.4em;
@@ -212,6 +203,7 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
 }
 #login form #selectDbType label.ui-state-hover, #login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; }
 
+/* Warnings */
 fieldset.warning {
 	padding:8px;
 	color:#b94a48; background-color:#f2dede; border:1px solid #eed3d7;

core/templates/installation.php

@@ -40,9 +40,11 @@
 			<img class="svg" src="<?php echo image_path('', 'actions/user.svg'); ?>" alt="" />
 		</p>
 		<p class="infield groupbottom">
-			<input type="password" name="adminpass" id="adminpass" value="<?php print OC_Helper::init_var('adminpass'); ?>" required />
+			<input type="password" name="adminpass" id="adminpass" value="<?php print OC_Helper::init_var('adminpass'); ?>" required data-typetoggle="#show" />
 			<label for="adminpass" class="infield"><?php echo $l->t( 'Password' ); ?></label>
-			<img class="svg" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt="" />
+			<img class="svg" id="adminpass-icon" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt="" />
+			<input type="checkbox" id="show" name="show" />
+			<label for="show"></label>
 		</p>
 	</fieldset>
 

core/templates/login.php

@@ -33,7 +33,7 @@
 			<input type="password" name="password" id="password" value="" data-typetoggle="#show"
 				   required<?php echo $_['user_autofocus'] ? '' : ' autofocus'; ?> />
 			<label for="password" class="infield"><?php echo $l->t('Password'); ?></label>
-			<img class="svg" id="pass_image" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt=""/>
+			<img class="svg" id="password-icon" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt=""/>
 			<input type="checkbox" id="show" name="show" />
 			<label for="show"></label>
 		</p>