From f2253bc09035b4f20bb5b29ce51965ac408c771f Mon Sep 17 00:00:00 2001
From: Callum Whyte <hey@callumwhyte.com>
Date: Thu, 30 Jul 2020 16:53:16 +0100
Subject: [PATCH] Improving database field labels in installer (#8172)

---
 .../src/installer/steps/database.html         | 219 +++++++++---------
 1 file changed, 111 insertions(+), 108 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 fc870858cf..cfe0940aa2 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/database.html
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/database.html
@@ -1,118 +1,121 @@
 <div ng-controller="Umbraco.Installer.DataBaseController">
 
-	<h1>Configure your database</h1>
-	<p>
-		Enter connection and authentication details for the database you want to install Umbraco on
-	</p>
+    <h1>Configure your database</h1>
+    <p>
+        Enter connection and authentication details for the database you want to install Umbraco on
+    </p>
 
-	<form name="myForm" class="form-horizontal" novalidate ng-submit="validateAndForward();">
-		<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 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>
+    <form name="myForm" class="form-horizontal" novalidate ng-submit="validateAndForward();">
+        <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 id="dbType" name="dbType"
+                        ng-options="db.id as db.name for db in dbs"
+                        required ng-model="installer.current.model.dbType">
+                </select>
+            </div>
+        </div>
 
-		<div class="controls" ng-if="installer.current.model.dbType == 0">
+        <div class="controls" ng-if="installer.current.model.dbType == 0">
             <p>Great! No need to configure anything, you can simply click the <strong>continue</strong> button below to continue to the next step</p>
-		</div>
+        </div>
 
-		<div ng-if="installer.current.model.dbType < 0">
-			<legend>What is the exact connection string we should use?</legend>
-			<div class="control-group">
-				<label class="control-label" for="server">Connection string</label>
-				  <div class="controls">
-
-					<textarea class="input-block-level" required ng-model="installer.current.model.connectionString" rows="5">
-					</textarea>
-					<small class="inline-help">Enter a valid database connection string.</small>
-				</div>
-			</div>
-		</div>
-
-		<div ng-if="installer.current.model.dbType > 0">
-				<div class="row">
-					<legend>Where do we find your database?</legend>
-					<div class="span6">
-						<div class="control-group">
-							<label class="control-label" for="server">Server</label>
-							<div class="controls">
-								<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>
-					</div>
-
-					<div class="span6">
-						<div class="control-group">
-							<label class="control-label" for="databaseName">Database name</label>
-							<div class="controls">
-								<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>
-							</div>
-						</div>
-					</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" id="login" name="login"
-									placeholder="umbraco-database-user"
-									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">
-				<div class="controls">
-                    <input type="submit" ng-disabled="myForm.$invalid || checking" ng-class="{disabled:myForm.$invalid}"
-                           value="Continue" class="btn btn-success" />
-
-						<button class="btn btn-info" ng-click="restart()">Go back</button>
-                    
-					    <span class="inline-help" ng-if="checking" ng-animate="'fade'">
-	                    	Validating your database connection...
-	                    </span>
-
-						<span class="inline-help error" ng-if="invalidDbDns" ng-animate="'fade'">
-							Could not connect to database
-						</span>
+        <div ng-if="installer.current.model.dbType < 0">
+            <legend>What is the exact connection string we should use?</legend>
+            <div class="control-group">
+                <label class="control-label" for="server">Connection string</label>
+                  <div class="controls">
+                    <textarea class="input-block-level" required ng-model="installer.current.model.connectionString" rows="5"></textarea>
+                    <small class="inline-help">Enter a valid database connection string.</small>
                 </div>
-			</div>
-		</div>
+            </div>
+        </div>
 
+        <div ng-if="installer.current.model.dbType > 0">
+            <div class="row">
+                <legend>Where do we find your database?</legend>
+                <div class="span6">
+                    <div class="control-group">
+                        <label class="control-label" for="server">Server</label>
+                        <div class="controls">
+                            <input type="text" id="server" name="server"
+                                   placeholder="{{ installer.current.model.dbType == 3 ? 'umbraco-database.database.windows.net' : '127.0.0.1\SQLEXPRESS'}}"
+                                   required ng-model="installer.current.model.server" />
+                            <small class="inline-help">Enter server domain or IP</small>
+                        </div>
+                    </div>
+                </div>
 
-	</form>
+                <div class="span6">
+                    <div class="control-group">
+                        <label class="control-label" for="databaseName">Database name</label>
+                        <div class="controls">
+                            <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>
+                        </div>
+                    </div>
+                </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" id="login" name="login"
+                                   placeholder="umbraco-db-user"
+                                   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-db-password"
+                                   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"
+                                   ng-model="installer.current.model.integratedAuth" />
+                            Use integrated authentication
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="control-group">
+                <div class="controls">
+                    <input type="submit" value="Continue" class="btn btn-success"
+                           ng-disabled="myForm.$invalid || checking"
+                           ng-class="{disabled:myForm.$invalid}" />
+
+                    <button class="btn btn-info" ng-click="restart()">Go back</button>
+                
+                    <span class="inline-help" ng-if="checking" ng-animate="'fade'">
+                        Validating your database connection...
+                    </span>
+
+                    <span class="inline-help error" ng-if="invalidDbDns" ng-animate="'fade'">
+                        Could not connect to database
+                    </span>
+                </div>
+            </div>
+        </div>
+    </form>
 </div>