entity-browser-frontend/app/templates/new-db-dialog.html

<div>
    <div class="modal-header without-bottom-border">
        <h3 class="modal-title">New database</h3>
    </div>
    <div class="modal-body">
        <div class="container-fluid">
            <form class="form-horizontal" novalidate ng-submit="dbDialogCtrl.saveDB()" name="database">
                <div class="form-group"
                     data-ng-class="{'has-error':  (database.location.$invalid && database.location.$dirty)}">
                    <label for="location">location</label>
                    <input id="location" name="location" data-ng-required="true" ng-model="dbDialogCtrl.db.location"
                           class="form-control"
                           placeholder="location"
                           data-uib-tooltip="{{dbDialogCtrl.getMessage('location')}}"
                           data-uib-tooltip-trigger="mouseenter">
                </div>
                <div class="form-group">
                    <div class="db-key-label">key</div>
                    <div class="btn-group">
                        <button ng-repeat="buttonItem in dbDialogCtrl.keyOptions"
                                type="button"
                                class="btn btn-default" ng-class="{'btn-info': dbDialogCtrl.isKeyOption(buttonItem)}"
                                ng-click="dbDialogCtrl.setKeyOption(buttonItem)">{{buttonItem.title}}
                        </button>
                    </div>
                </div>
                <div class="form-group" ng-if="dbDialogCtrl.isCustomKeyOption()">
                    <input id="key" name="key"
                           ng-model="dbDialogCtrl.db.key"
                           class="form-control"
                           placeholder="key">
                </div>
                <div class="form-group">
                    <div class="checkbox checkbox-primary">
                        <input id="opened" type="checkbox" name="opened" ng-model="dbDialogCtrl.db.opened">
                        <label for="opened">open database</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="checkbox checkbox-primary">
                        <input id="readonly" type="checkbox" name="readonly" ng-model="dbDialogCtrl.db.readonly">
                        <label for="readonly">in readonly mode</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="checkbox checkbox-primary">
                        <input id="watchReadonly" type="checkbox" name="watchReadonly" ng-model="dbDialogCtrl.db.watchReadonly">
                        <label for="watchReadonly">watch external changes</label>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6" style="padding-left: 0;">
                        <div class="checkbox checkbox-primary">
                            <input id="encryted" type="checkbox" name="opened" ng-model="dbDialogCtrl.db.encrypted">
                            <label for="encryted">is encrypted</label>
                        </div>
                    </div>
                    <div class="col-md-6" style="padding-right: 0;" ng-if="dbDialogCtrl.db.encrypted">
                        <div class="pull-right">
                            <span>using</span>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default"
                                        ng-class="{'btn-info': dbDialogCtrl.isChaCha}"
                                        ng-click="dbDialogCtrl.toggleProvider()">ChaCha
                                </button>
                                <button type="button" class="btn btn-default"
                                        ng-class="{'btn-info': !dbDialogCtrl.isChaCha}"
                                        ng-click="dbDialogCtrl.toggleProvider()">Salsa
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-if="dbDialogCtrl.db.encrypted"
                     data-ng-class="{'has-error':  (database.encryptionKey.$invalid && database.encryptionKey.$dirty)}">
                    <label for="encryptionKey">encryption key</label>
                    <input id="encryptionKey" name="encryptionKey" data-ng-required="true"
                           ng-model="dbDialogCtrl.db.encryptionKey"
                           class="form-control"
                           placeholder="encryption key"
                           data-uib-tooltip="{{dbDialogCtrl.getMessage('encryptionKey')}}"
                           data-uib-tooltip-trigger="mouseenter">
                </div>
                <div class="form-group" ng-if="dbDialogCtrl.db.encrypted"
                     data-ng-class="{'has-error':  (database.initialization.$invalid && database.initialization.$dirty)}">
                    <label for="initialization">initialization vector</label>
                    <input id="initialization" name="initialization" data-ng-required="true"
                           ng-model="dbDialogCtrl.db.encryptionIV"
                           class="form-control"
                           placeholder="initialization"
                           data-uib-tooltip="{{dbDialogCtrl.getMessage('initialization')}}"
                           data-uib-tooltip-trigger="mouseenter">
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer without-top-border">
        <button class="btn btn-primary mdm-ui-component-confirm-button" data-ng-click="dbDialogCtrl.saveDB()">
            Add
        </button>
        <button class="btn btn-default mdm-ui-component-confirm-button" data-ng-click="dbDialogCtrl.cancel()">
            Cancel
        </button>
    </div>
</div>