database_edit.html

<div class="wrapper">
    <section class="Breadcrumbs">
        <a class="Breadcrumb Breadcrumb--path" cv-org-href="/admin/databases/">Databases</a>
        <cv-chevron-right-icon class="Breadcrumb-divider" width="12px" height="12px"></cv-chevron-right-icon>
        <h2 class="Breadcrumb Breadcrumb--page" ng-if="!database.id">Add Database</h2>
        <h2 class="Breadcrumb Breadcrumb--page" ng-if="database.id">{{database.name}}</h2>
    </section>

    <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="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>

                <div class="Form-field" ng-class="{'Form--fieldError': form.engine.$error.message !== undefined}">
                    <mb-form-label form="form" display-name="Database type" field-name="engine"></mb-form-label>
                    <label class="Select Form-input 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" ng-class="{'Form--fieldError': form.name.$error.message !== undefined}">
                    <mb-form-label form="form" 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 />
                    <span class="Form-charm"></span>
                </div>

                <!-- TODO: database type dependent inputs -->
                <div class="FormInputGroup" ng-show="database.engine == 'postgres'">
                    <div class="Form-field" ng-class="{'Form--fieldError': form.host.$error.message !== undefined}">
                        <mb-form-label form="form" display-name="Host" field-name="host"></mb-form-label>
                        <input class="Form-input Form-offset full" name="host" placeholder="localhost" ng-model="details.host" required />
                        <span class="Form-charm"></span>
                    </div>

                    <div class="Form-field" ng-class="{'Form--fieldError': form.port.$error.message !== undefined}">
                        <mb-form-label form="form" display-name="Port" field-name="port"></mb-form-label>
                        <input class="Form-input Form-offset full" name="port" placeholder="5432" ng-model="details.port" required />
                        <span class="Form-charm"></span>
                    </div>

                    <div class="Form-field" ng-class="{'Form--fieldError': form.dbname.$error.message !== undefined}">
                        <mb-form-label form="form" display-name="Database name" field-name="dbname"></mb-form-label>
                        <input class="Form-input Form-offset full" name="dbname" placeholder="What is the name of your database?" ng-model="details.dbname" />
                        <span class="Form-charm"></span>
                    </div>

                    <div class="Form-field" ng-class="{'Form--fieldError': form.user.$error.message !== undefined}">
                        <mb-form-label form="form" display-name="Database username" field-name="user"></mb-form-label>
                        <input class="Form-input Form-offset full" name="user" placeholder="What username do you use to login to the database?" ng-model="details.user" required />
                        <span class="Form-charm"></span>
                    </div>

                    <div class="Form-field" ng-class="{'Form--fieldError': form.pass.$error.message !== undefined}">
                        <mb-form-label form="form" display-name="Database password" field-name="pass"></mb-form-label>
                        <input class="Form-input Form-offset full" name="pass" placeholder="*******" ng-model="details.pass" />
                        <span class="Form-charm"></span>
                    </div>
                </div>

                <div class="Form-actions">
                    <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
                        Save
                    </button>
                </div>
            </form>
        </div>

        <!-- actions -->
        <div class="Grid-cell Cell--1of3">
            <div class="Actions">
                <h3>Actions</h3>
                <div class="Actions-group">
                    <button class="Button" ng-click="save(database)">Sync</button>
                </div>

                <div class="Actions-group Actions--dangerZone">
                    <label class="Actions-groupLabel block">Danger Zone:</label>
                    <button class="Button Button--danger" ng-click="save(database)">Remove this database</button>
                </div>
            </div>
        </div>
    </section>
</div><!-- wrapper -->