installer: database switcher

public/src/installer/install.js

@@ -8,7 +8,7 @@ $('document').ready(function() {
 
 
 	function setupInputs() {
-		$('.form-control').on('focus', function() {
+		$('form').on('focus', '.form-control', function() {
 			var parent = $(this).parents('.input-row');
 
 			$('.input-row.active').removeClass('active');
@@ -18,12 +18,14 @@ $('document').ready(function() {
 			help.html(help.attr('data-help'));
 		});
 
-		$('[name]').on('blur', function() {
-			validate($(this).attr('name'), $(this));
+		$('form').on('blur change', '[name]', function() {
+			activate($(this).attr('name'), $(this));
 		});
+
+		activate($('[name="database"]').val(), $('[name="database"]'));
 	}
 
-	function validate(type, el) {
+	function activate(type, el) {
 		var field = el.val(),
 			parent = el.parents('.input-row'),
 			help = parent.children('.help-text');
@@ -64,6 +66,10 @@ $('document').ready(function() {
 			}
 		}
 
+		function switchDatabase(field) {
+			$('#database-config').html($('[data-database="' + field + '"]').html());
+		}
+
 		switch (type) {
 			case 'username':
 				return validateUsername(field);
@@ -73,6 +79,8 @@ $('document').ready(function() {
 				return validateConfirmPassword(field);
 			case 'email':
 				return validateEmail(field);
+			case 'database':
+				return switchDatabase(field);
 		}
 	}
 });

src/views/install/index.tpl

@@ -88,17 +88,19 @@
 
 			<div class="row input-row">
 				<div class="col-sm-7 col-xs-12 input-field">
-					<label for="confirm">Database Type</label>
+					<label for="database">Database Type</label>
 					<select class="form-control" name="database">
 						<option value="redis">Redis</option>
-						<option value="mongodb">MongoDB</option>
+						<option value="mongo">MongoDB</option>
 					</select>
 				</div>
 			</div>
+
+			<div id="database-config"></div>
 		</form>
 	</div>
 
-	<div class="hidea">
+	<div class="hide">
 		<!-- BEGIN databases -->
 		<div data-database="{databases.name}">
 			<!-- BEGIN questions -->