From bca6e16e1b454445f8894699bf02ab835eaf7946 Mon Sep 17 00:00:00 2001
From: bjarnef <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Jun 2016 23:11:26 +0200
Subject: [PATCH] Focus on input, toggle checkbox when clicking label and only
 submit button dimmed

---
 .../src/installer/steps/database.html         | 83 +++++++++----------
 .../src/installer/steps/user.html             | 16 ++--
 2 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/database.html b/src/Umbraco.Web.UI.Client/src/installer/steps/database.html
index 0cc7511f89..1b13768c9a 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/database.html
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/database.html
@@ -9,20 +9,16 @@
 		<div class="control-group">
 			<legend>What type of database do you use?</legend>
 			<label class="control-label" for="dbType">Database type</label>
-			    <div class="controls">
-			    	<select name="dbType" ng-options="db.id as db.name for db in dbs"  ng-model="installer.current.model.dbType" required>
-			    	</select>
-				</div>
+			<div class="controls">
+                <select id="dbType" name="dbType" ng-options="db.id as db.name for db in dbs" ng-model="installer.current.model.dbType" required></select>
+			</div>
 		</div>
 
 		<div class="controls" ng-if="installer.current.model.dbType == 0">
-				<p>Great!, no need to configure anything then, you simply click the <strong>continue</strong> button below to continue to the next step</p>
+            <p>Great!, no need to configure anything then, you simply click the <strong>continue</strong> button below to continue to the next step</p>
 		</div>
 
-
-
 		<div ng-if="installer.current.model.dbType < 0">
-
 			<legend>What is the exact connectionstring we should use?</legend>
 			<div class="control-group">
 				<label class="control-label" for="server">Connection string</label>
@@ -42,7 +38,7 @@
 						<div class="control-group">
 							<label class="control-label" for="server">Server</label>
 							<div class="controls">
-								<input type="text" name="server" placeholder="127.0.0.1\SQLEXPRESS" required ng-model="installer.current.model.server" />
+								<input type="text" id="server" name="server" placeholder="127.0.0.1\SQLEXPRESS" required ng-model="installer.current.model.server" />
 								<small class="inline-help">Enter server domain or IP</small>
 							</div>
 						</div>
@@ -52,7 +48,7 @@
 						<div class="control-group">
 							<label class="control-label" for="databaseName">Database name</label>
 							<div class="controls">
-								<input type="text" name="installer.current.model.databaseName"
+								<input type="text" id="databaseName" name="installer.current.model.databaseName"
 									placeholder="umbraco-cms"
 									required ng-model="installer.current.model.databaseName"  />
 								<small class="inline-help">Enter the name of the database</small>
@@ -61,49 +57,48 @@
 					</div>
 				</div>
 
-
 				<div class="row">
-					  <legend>What credentials are used to access the database?</legend>
-						<div class="span6">
-							<div class="control-group" ng-if="!installer.current.model.integratedAuth">
-								<label class="control-label" for="login">Login</label>
-								<div class="controls">
-									<input type="text" name="login"
-										placeholder="databaseuser"
-										required ng-model="installer.current.model.login"  />
-									<small class="inline-help">Enter the database user name</small>
-								</div>
-							</div>
-						</div>
-
-						<div class="span6">
-							<div class="control-group" ng-if="!installer.current.model.integratedAuth">
-							<label class="control-label" for="password">Password</label>
-								<div class="controls">
-								<input type="password" name="password"
-									placeholder="umbraco-cms"
-									required ng-model="installer.current.model.password"  />
-									<small class="inline-help">Enter the database password</small>
-								</div>
-							</div>
-						</div>
-
-						<div class="span12 control-group" ng-if="installer.current.model.dbType == 1">
+					<legend>What credentials are used to access the database?</legend>
+					<div class="span6">
+						<div class="control-group" ng-if="!installer.current.model.integratedAuth">
+							<label class="control-label" for="login">Login</label>
 							<div class="controls">
-							<label class="checkbox" for="integratedAuth">
-								<input type="checkbox" name="integratedAuth"
-								placeholder="umbraco-cms"
-								ng-model="installer.current.model.integratedAuth"  /> Use integrated authentication</label>
+								<input type="text" id="login" name="login"
+									placeholder="databaseuser"
+									required ng-model="installer.current.model.login"  />
+								<small class="inline-help">Enter the database user name</small>
 							</div>
 						</div>
+					</div>
+
+					<div class="span6">
+						<div class="control-group" ng-if="!installer.current.model.integratedAuth">
+						<label class="control-label" for="password">Password</label>
+							<div class="controls">
+							<input type="password" id="password" name="password"
+								placeholder="umbraco-cms"
+								required ng-model="installer.current.model.password"  />
+								<small class="inline-help">Enter the database password</small>
+							</div>
+						</div>
+					</div>
+
+					<div class="span12 control-group" ng-if="installer.current.model.dbType == 1">
+						<div class="controls">
+						<label class="checkbox">
+                            <input type="checkbox" id="integratedAuth" name="integratedAuth"
+                                   placeholder="umbraco-cms"
+                                   ng-model="installer.current.model.integratedAuth" /> Use integrated authentication</label>
+						</div>
+					</div>
 			  </div>
 		</div>
 
 		<div class="row">
-			<div class="control-group" ng-class="{disabled:myForm.$invalid}">
+			<div class="control-group">
 				<div class="controls">
-					<input type="submit" ng-disabled="myForm.$invalid || checking"  
-						value="Continue" class="btn btn-success" />
+                    <input type="submit" ng-disabled="myForm.$invalid || checking" ng-class="{disabled:myForm.$invalid}"
+                           value="Continue" class="btn btn-success" />
 
 						<button class="btn" ng-click="restart()">Go back</button>
                     
diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
index 2cd50fe208..7be0d23959 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
@@ -10,14 +10,14 @@
 			<div class="pull-right">
 				<div class="control-group">
 					<label class="control-label" for="name">Name</label>
-					    <div class="controls">
-							<input type="text" id="name" name="name" placeholder="Full name" required ng-model="installer.current.model.name" />
-						</div>
+					<div class="controls">
+						<input type="text" id="name" name="name" placeholder="Full name" required ng-model="installer.current.model.name" />
+					</div>
 				</div>
 
 				<div class="control-group">
 					<label class="control-label" for="email">Email</label>
-					    <div class="controls">
+					<div class="controls">
 						<input type="text" id="email" name="email" placeholder="you@example.com" required ng-model="installer.current.model.email" val-email />
 						<small class="inline-help">Your email will be used as your login</small>
 					</div>
@@ -46,17 +46,15 @@
 
 				<div class="control-group">
 					<div class="controls">
-						<label class="checkbox" for="subscribeToNewsLetter">
+						<label class="checkbox">
 							<input type="checkbox" id="subscribeToNewsLetter" name="subscribeToNewsLetter"
-							ng-model="installer.current.model.subscribeToNewsLetter"  /> Keep me updated on Umbraco Versions, Security Bulletins and Community News</label>
+							       ng-model="installer.current.model.subscribeToNewsLetter" /> Keep me updated on Umbraco Versions, Security Bulletins and Community News</label>
 					</div>
 				</div>
 
 				<div class="control-group" ng-class="{disabled:myForm.$invalid}">	
 					<div class="controls">
-
-						<input type="submit" ng-disabled="myForm.$invalid"  value="Install" class="btn btn-success" />
-						
+						<input type="submit" ng-disabled="myForm.$invalid"  value="Install" class="btn btn-success" />	
 						<a href class="btn btn-neutral control-customize" ng-disabled="myForm.$invalid" ng-click="validateAndForward()">Customize</a>
 					</div>
 				</div>