Focus on input, toggle checkbox when clicking label and only submit button dimmed

This commit is contained in:
bjarnef
2016-06-19 23:11:26 +02:00
parent 2a5dcef5f9
commit bca6e16e1b
2 changed files with 46 additions and 53 deletions

View File

@@ -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>

View File

@@ -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>