break DatabaseEdit form out into separate partial

resources/frontend_client/app/admin/databases/partials/database_edit.html

@@ -8,50 +8,8 @@
 
     <section class="Grid Grid--gutters Grid--full">
         <!-- form -->
-        <div class="Grid-cell Cell--2of3">
-            <form class="Form-new bordered rounded shadowed" name="form" novalidate>
-                <div class="Form-field" mb-form-field="engine">
-                    <mb-form-label display-name="Database type" field-name="engine"></mb-form-label>
-                    <label class="Select Form-offset">
-                        <select name="engine" ng-model="database.engine" ng-options="type as properties.name for (type, properties) in form_input.engines"></select>
-                    </label>
-                </div>
-
-                <div class="Form-field" mb-form-field="engine">
-                    <mb-form-label display-name="Name" field-name="name"></mb-form-label>
-                    <input class="Form-input Form-offset full" name="name" placeholder="How would you like to refer to this database?" ng-model="database.name" required autofocus />
-                    <span class="Form-charm"></span>
-                </div>
-
-                <!-- Database Input Fields - show a form for each field in DatabaseEdit.ENGINES[database.engine].fields -->
-                <div class="FormInputGroup">
-                    <div class="Form-field" ng-repeat="field in ENGINES[database.engine].fields" mb-form-field="{{field.fieldName}}">
-                        <mb-form-label display-name="{{field.displayName}}" field-name="{{field.fieldName}}"></mb-form-label>
-                        <!-- Multiple-Choice Field -->
-                        <div ng-if="field.choices" class="Form-input Form-offset full Button-group">
-                            <button ng-repeat="choice in field.choices" class="Button"
-                                    ng-class="details[field.fieldName] === choice.value ? {active: 'Button--active',
-                                                                                           danger: 'Button--danger'}[choice.selectionAccent] : null"
-                                    ng-click="details[field.fieldName] = choice.value">
-                                {{choice.name}}
-                            </button>
-                        </div>
-                        <!-- String Field (default) -->
-                        <input ng-if="!field.choices" class="Form-input Form-offset full" name="{{field.fieldName}}" placeholder="{{field.placeholder}}"
-                               ng-model="details[field.fieldName]" ng-required="field.required" />
-                        <span class="Form-charm"></span>
-                    </div>
-                </div>
-
-                <div class="Form-actions">
-                    <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database, details)" ng-disabled="!form.$valid">
-                        Save
-                    </button>
-                    <mb-form-message></mb-form-message>
-                </div>
-            </form>
+        <div ng-include="'/app/admin/databases/partials/database_edit_forms.html'" class="Grid-cell Cell--2of3">
         </div>
-
         <!-- actions -->
         <div class="Grid-cell Cell--1of3" ng-if="database.id">
             <div class="Actions">
@@ -68,4 +26,4 @@
             </div>
         </div>
     </section>
-</div><!-- wrapper -->
+</div>

resources/frontend_client/app/admin/databases/partials/database_edit_forms.html

+<!-- form -->
+<div>
+    <form class="Form-new bordered rounded shadowed" name="form" novalidate>
+        <div class="Form-field" mb-form-field="engine">
+            <mb-form-label display-name="Database type" field-name="engine"></mb-form-label>
+            <label class="Select Form-offset">
+                <select name="engine" ng-model="database.engine" ng-options="type as properties.name for (type, properties) in form_input.engines"></select>
+            </label>
+        </div>
+
+        <div class="Form-field" mb-form-field="engine">
+            <mb-form-label display-name="Name" field-name="name"></mb-form-label>
+            <input class="Form-input Form-offset full" name="name" placeholder="How would you like to refer to this database?" ng-model="database.name" required autofocus />
+            <span class="Form-charm"></span>
+        </div>
+
+        <!-- Database Input Fields - show a form for each field in DatabaseEdit.ENGINES[database.engine].fields -->
+        <div class="FormInputGroup">
+            <div class="Form-field" ng-repeat="field in ENGINES[database.engine].fields" mb-form-field="{{field.fieldName}}">
+                <mb-form-label display-name="{{field.displayName}}" field-name="{{field.fieldName}}"></mb-form-label>
+                <!-- Multiple-Choice Field -->
+                <div ng-if="field.choices" class="Form-input Form-offset full Button-group">
+                    <button ng-repeat="choice in field.choices" class="Button"
+                            ng-class="details[field.fieldName] === choice.value ? {active: 'Button--active',
+                                      danger: 'Button--danger'}[choice.selectionAccent] : null"
+                            ng-click="details[field.fieldName] = choice.value">
+                        {{choice.name}}
+                    </button>
+                </div>
+                <!-- String Field (default) -->
+                <input ng-if="!field.choices" class="Form-input Form-offset full" name="{{field.fieldName}}" placeholder="{{field.placeholder}}"
+                       ng-model="details[field.fieldName]" ng-required="field.required" />
+                <span class="Form-charm"></span>
+            </div>
+        </div>
+
+        <div class="Form-actions">
+            <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database, details)" ng-disabled="!form.$valid">
+                Save
+            </button>
+            <mb-form-message></mb-form-message>
+        </div>
+    </form>
+</div>