under heavy development #50

client/plugins/bootstrap-filestyle/bootstrap-filestyle.min.js

+(function($){var nextId=0;var Filestyle=function(element,options){this.options=options;this.$elementFilestyle=[];this.$element=$(element)};Filestyle.prototype={clear:function(){this.$element.val("");this.$elementFilestyle.find(":text").val("");this.$elementFilestyle.find(".badge").remove()},destroy:function(){this.$element.removeAttr("style").removeData("filestyle");this.$elementFilestyle.remove()},disabled:function(value){if(value===true){if(!this.options.disabled){this.$element.attr("disabled","true");this.$elementFilestyle.find("label").attr("disabled","true");this.options.disabled=true}}else{if(value===false){if(this.options.disabled){this.$element.removeAttr("disabled");this.$elementFilestyle.find("label").removeAttr("disabled");this.options.disabled=false}}else{return this.options.disabled}}},buttonBefore:function(value){if(value===true){if(!this.options.buttonBefore){this.options.buttonBefore=true;if(this.options.input){this.$elementFilestyle.remove();this.constructor();this.pushNameFiles()}}}else{if(value===false){if(this.options.buttonBefore){this.options.buttonBefore=false;if(this.options.input){this.$elementFilestyle.remove();this.constructor();this.pushNameFiles()}}}else{return this.options.buttonBefore}}},icon:function(value){if(value===true){if(!this.options.icon){this.options.icon=true;this.$elementFilestyle.find("label").prepend(this.htmlIcon())}}else{if(value===false){if(this.options.icon){this.options.icon=false;this.$elementFilestyle.find(".icon-span-filestyle").remove()}}else{return this.options.icon}}},input:function(value){if(value===true){if(!this.options.input){this.options.input=true;if(this.options.buttonBefore){this.$elementFilestyle.append(this.htmlInput())}else{this.$elementFilestyle.prepend(this.htmlInput())}this.$elementFilestyle.find(".badge").remove();this.pushNameFiles();this.$elementFilestyle.find(".group-span-filestyle").addClass("input-group-btn")}}else{if(value===false){if(this.options.input){this.options.input=false;this.$elementFilestyle.find(":text").remove();var files=this.pushNameFiles();if(files.length>0&&this.options.badge){this.$elementFilestyle.find("label").append(' <span class="badge">'+files.length+"</span>")}this.$elementFilestyle.find(".group-span-filestyle").removeClass("input-group-btn")}}else{return this.options.input}}},size:function(value){if(value!==undefined){var btn=this.$elementFilestyle.find("label"),input=this.$elementFilestyle.find("input");btn.removeClass("btn-lg btn-sm");input.removeClass("input-lg input-sm");if(value!="nr"){btn.addClass("btn-"+value);input.addClass("input-"+value)}}else{return this.options.size}},placeholder:function(value){if(value!==undefined){this.options.placeholder=value;this.$elementFilestyle.find("input").attr("placeholder",value)}else{return this.options.placeholder}},buttonText:function(value){if(value!==undefined){this.options.buttonText=value;this.$elementFilestyle.find("label .buttonText").html(this.options.buttonText)}else{return this.options.buttonText}},buttonName:function(value){if(value!==undefined){this.options.buttonName=value;this.$elementFilestyle.find("label").attr({"class":"btn "+this.options.buttonName})}else{return this.options.buttonName}},iconName:function(value){if(value!==undefined){this.$elementFilestyle.find(".icon-span-filestyle").attr({"class":"icon-span-filestyle "+this.options.iconName})}else{return this.options.iconName}},htmlIcon:function(){if(this.options.icon){return'<span class="icon-span-filestyle '+this.options.iconName+'"></span> '}else{return""}},htmlInput:function(){if(this.options.input){return'<input type="text" class="form-control '+(this.options.size=="nr"?"":"input-"+this.options.size)+'" placeholder="'+this.options.placeholder+'" disabled> '}else{return""}},pushNameFiles:function(){var content="",files=[];if(this.$element[0].files===undefined){files[0]={name:this.$element[0]&&this.$element[0].value}}else{files=this.$element[0].files}for(var i=0;i<files.length;i++){content+=files[i].name.split("\\").pop()+", "}if(content!==""){this.$elementFilestyle.find(":text").val(content.replace(/\, $/g,""))}else{this.$elementFilestyle.find(":text").val("")}return files},constructor:function(){var _self=this,html="",id=_self.$element.attr("id"),files=[],btn="",$label;if(id===""||!id){id="filestyle-"+nextId;_self.$element.attr({id:id});nextId++}btn='<span class="group-span-filestyle '+(_self.options.input?"input-group-btn":"")+'"><label for="'+id+'" class="btn '+_self.options.buttonName+" "+(_self.options.size=="nr"?"":"btn-"+_self.options.size)+'" '+(_self.options.disabled?'disabled="true"':"")+">"+_self.htmlIcon()+'<span class="buttonText">'+_self.options.buttonText+"</span></label></span>";html=_self.options.buttonBefore?btn+_self.htmlInput():_self.htmlInput()+btn;_self.$elementFilestyle=$('<div class="bootstrap-filestyle input-group">'+html+"</div>");_self.$elementFilestyle.find(".group-span-filestyle").attr("tabindex","0").keypress(function(e){if(e.keyCode===13||e.charCode===32){_self.$elementFilestyle.find("label").click();return false}});_self.$element.css({position:"absolute",clip:"rect(0px 0px 0px 0px)"}).attr("tabindex","-1").after(_self.$elementFilestyle);if(_self.options.disabled){_self.$element.attr("disabled","true")}_self.$element.change(function(){var files=_self.pushNameFiles();if(_self.options.input==false&&_self.options.badge){if(_self.$elementFilestyle.find(".badge").length==0){_self.$elementFilestyle.find("label").append(' <span class="badge">'+files.length+"</span>")}else{if(files.length==0){_self.$elementFilestyle.find(".badge").remove()}else{_self.$elementFilestyle.find(".badge").html(files.length)}}}else{_self.$elementFilestyle.find(".badge").remove()}});if(window.navigator.userAgent.search(/firefox/i)>-1){_self.$elementFilestyle.find("label").click(function(){_self.$element.click();return false})}}};var old=$.fn.filestyle;$.fn.filestyle=function(option,value){var get="",element=this.each(function(){if($(this).attr("type")==="file"){var $this=$(this),data=$this.data("filestyle"),options=$.extend({},$.fn.filestyle.defaults,option,typeof option==="object"&&option);if(!data){$this.data("filestyle",(data=new Filestyle(this,options)));data.constructor()}if(typeof option==="string"){get=data[option](value)}}});if(typeof get!==undefined){return get}else{return element}};$.fn.filestyle.defaults={buttonText:"Choose file",iconName:"glyphicon glyphicon-folder-open",buttonName:"btn-default",size:"nr",input:true,badge:true,icon:true,buttonBefore:false,disabled:false,placeholder:""};$.fn.filestyle.noConflict=function(){$.fn.filestyle=old;return this};$(function(){$(".filestyle").each(function(){var $this=$(this),options={input:$this.attr("data-input")==="false"?false:true,icon:$this.attr("data-icon")==="false"?false:true,buttonBefore:$this.attr("data-buttonBefore")==="true"?true:false,disabled:$this.attr("data-disabled")==="true"?true:false,size:$this.attr("data-size"),buttonText:$this.attr("data-buttonText"),buttonName:$this.attr("data-buttonName"),iconName:$this.attr("data-iconName"),badge:$this.attr("data-badge")==="false"?false:true,placeholder:$this.attr("data-placeholder")};$this.filestyle(options)})})})(window.jQuery);
\ No newline at end of file

client/stylesheets/main.css

@@ -26,4 +26,8 @@ tr.selected {
 
 .modal-background {
     background: #f8fafb !important;
+}
+
+.bootstrap-filestyle {
+    width: 100%;
 }
\ No newline at end of file

client/views/layouts/top_navbar/top_navbar.html

@@ -53,10 +53,28 @@
                     </small>
                 </div>
                 <div class="modal-body">
-                    {{> ReactiveDatatable tableData=reactiveDataFunction options=optionsObject tableId="tblConnection" }}
+                    <table id="tblConnection"
+                           class="table table-striped table-bordered table-hover dataTables-example dataTable"
+                           style="width: 100%">
+                        <thead>
+                        <tr>
+                            <th>_id</th>
+                            <th>Connection Name</th>
+                            <th>Url</th>
+                            <th>Use Ssl</th>
+                            <th>Hostname</th>
+                            <th>Port</th>
+                            <th>Edit</th>
+                            <th>Delete</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        </tbody>
+                    </table>
+
                     <button id="btnCreateNewConnection" type="button" class="btn btn-block btn-outline btn-primary"
                             data-toggle="modal"
-                            data-target="#connectionCreateModal">Create New
+                            data-target="#addEditConnectionModal">Create New
                     </button>
                 </div>
                 <div class="modal-footer">
@@ -70,55 +88,196 @@
             </div>
         </div>
     </div>
-    <!-- MODAL CreateConnection-->
-    <div class="modal inmodal" id="connectionCreateModal" tabindex="-1" role="dialog" aria-hidden="true"
+
+
+    <!-- MODAL CREATE/EDIT Connection-->
+    <div class="modal inmodal" id="addEditConnectionModal" tabindex="-1" role="dialog" aria-hidden="true"
          style="display: none;">
         <div class="modal-dialog">
             <div class="modal-content animated bounceInRight">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                             class="sr-only">Close</span></button>
-                    <h4 class="modal-title">New Connection</h4>
-                    <small class="font-bold">Create a new connection
+                    <h4 id="addEditConnectionModalTitle" class="modal-title">New Connection</h4>
+                    <small class="font-bold">{{getConnection.name}}
                     </small>
                 </div>
                 <div class="modal-body">
-                    <form id="formCreateConnection" class="form-horizontal">
-                        <div class="form-group"><label class="col-lg-2 control-label">Connection Name</label>
-                            <div class="col-lg-10"><input id="inputConnectionName" data-required="true" type="text"
-                                                          placeholder="Connection Name" class="form-control">
-                            </div>
-                        </div>
-                        <div class="form-group"><label class="col-lg-2 control-label">Hostname</label>
-                            <div class="col-lg-10"><input id="inputHost" data-required="true" type="text"
-                                                          placeholder="Hostname"
-                                                          class="form-control">
-                            </div>
-                        </div>
-                        <div class="form-group"><label class="col-lg-2 control-label">Port</label>
-                            <div class="col-lg-10"><input id="inputPort" value="27017" data-required="true"
-                                                          type="number"
-                                                          placeholder="Port"
-                                                          class="form-control">
+                    <div class="tabs-container">
+                        <ul class="nav nav-tabs">
+                            <li class="active"><a id="anchorTab1" data-toggle="tab" href="#tab-1" aria-expanded="true">
+                                Connection</a>
+                            </li>
+                            <li class=""><a id="anchorTab2" data-toggle="tab" href="#tab-2" aria-expanded="false">Authentication</a>
+                            </li>
+                            <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">URL</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <!-- TAB 1 -->
+                            <div id="tab-1" class="tab-pane active">
+                                <div class="panel-body no-borders modal-background">
+                                    <form class="form-horizontal">
+                                        <div class="form-group"><label class="col-lg-2 control-label">Connection
+                                            Name</label>
+                                            <div class="col-lg-10"><input id="inputConnectionName" data-required="true"
+                                                                          type="text"
+                                                                          placeholder="Connection Name"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                        <div class="form-group"><label class="col-lg-2 control-label">Hostname</label>
+                                            <div class="col-lg-10"><input id="inputHost" data-required="true"
+                                                                          type="text"
+                                                                          placeholder="Hostname"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                        <div class="form-group"><label class="col-lg-2 control-label">Port</label>
+                                            <div class="col-lg-10"><input id="inputPort" value="27017"
+                                                                          data-required="true"
+                                                                          type="number"
+                                                                          placeholder="Port"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                        <div class="form-group"><label class="col-lg-2 control-label">DB Name</label>
+                                            <div class="col-lg-10"><input id="inputDatabaseName" data-required="true"
+                                                                          type="text"
+                                                                          placeholder="Database Name"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
-                        </div>
-                        <div class="form-group"><label class="col-lg-2 control-label">DB Name</label>
-                            <div class="col-lg-10"><input id="inputDatabaseName" data-required="true" type="text"
-                                                          placeholder="Database Name"
-                                                          class="form-control">
-                            </div>
-                        </div>
-                        <div class="form-group"><label class="col-lg-2 control-label">User</label>
-                            <div class="col-lg-10"><input id="inputUser" type="text" placeholder="User"
-                                                          class="form-control">
+
+                            <!-- TAB 2 -->
+                            <div id="tab-2" class="tab-pane">
+                                <div class="panel-body no-borders modal-background">
+                                    <form class="form-horizontal">
+                                        <div class="form-group">
+                                            <label class="col-lg-2 control-label">Authentication Type</label>
+                                            <div id="divAuthType" class="col-lg-10">
+                                                <label class="radio-inline i-checks">
+                                                    <input id="inputAuthStandard" type="radio"
+                                                           name="authTypeInput"
+                                                           class="form-control"
+                                                           style="position: absolute; opacity: 0;"/>
+                                                    Standard
+                                                </label>
+                                                <label class="radio-inline i-checks">
+                                                    <input id="inputAuthCertificate" type="radio"
+                                                           class="form-control"
+                                                           name="authTypeInput"
+                                                           checked=""
+                                                           style="position: absolute; opacity: 0;"/>
+                                                    Certificate
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </form>
+
+                                    <!-- STANDARD AUTH FORM-->
+                                    <form id="formStandardAuth" class="form-horizontal">
+                                        <div class="form-group"><label class="col-lg-2 control-label">User</label>
+                                            <div class="col-lg-10"><input id="inputUser" type="text" placeholder="User"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                        <div class="form-group"><label class="col-lg-2 control-label">Password</label>
+                                            <div class="col-lg-10"><input id="inputPassword" type="password"
+                                                                          placeholder="Password"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                        <div class="form-group"><label class="col-lg-2 control-label">Authentication
+                                            DB</label>
+                                            <div class="col-lg-10"><input id="inputAuthenticationDB" type="text"
+                                                                          placeholder="Authentication DB"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                        <div class="form-group"><label class="col-lg-2 control-label">Use SSL</label>
+                                            <div id="divUseSSL" class="col-lg-10">
+                                                <input id="inputUseSSL" type="checkbox"
+                                                       class="form-control"
+                                                       checked=""
+                                                       style="position: absolute; opacity: 0;"/>
+                                            </div>
+                                        </div>
+                                    </form>
+
+                                    <!-- CERTIFICATE AUTH FORM -->
+                                    <form id="formCertificateAuth" class="form-horizontal" style="display: none;">
+                                        <div class="form-group">
+                                            <label class="col-lg-2 control-label">Certificate </label>
+                                            <div class="col-lg-10">
+                                                <input class="form-control" type="file" id="inputCertificatePath">
+                                            </div>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <label class="col-lg-2 control-label">Passphrase (optional) </label>
+                                            <div class="col-lg-10">
+                                                <input class="form-control filestyle" type="password"
+                                                       id="inputPassphrase"
+                                                       data-buttonName="btn-primary"
+                                                       placeholder="Passphrase">
+                                            </div>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <label class="col-lg-2 control-label">ROOT CA file (optional) </label>
+                                            <div class="col-lg-10">
+                                                <input class="form-control filestyle" type="file" id="inputRootCa"
+                                                       data-buttonName="btn-primary">
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
-                        </div>
-                        <div class="form-group"><label class="col-lg-2 control-label">Password</label>
-                            <div class="col-lg-10"><input id="inputPassword" type="password" placeholder="Password"
-                                                          class="form-control">
+
+                            <!--TAB 3 -->
+                            <div id="tab-3" class="tab-pane">
+                                <div class="panel-body no-borders modal-background">
+                                    <form class="form-horizontal">
+                                        <div class="form-group"><label class="col-lg-2 control-label">Use URL</label>
+                                            <div id="divUseUrl" class="col-lg-10">
+                                                <input id="inputUseUrl" type="checkbox"
+                                                       class="form-control"
+                                                       checked=""
+                                                       style="position: absolute; opacity: 0;"/>
+                                                <span class="help-block m-b-none">If checked, other connection options will be ignored.</span>
+                                            </div>
+                                        </div>
+
+                                        <div class="form-group"><label class="col-lg-2 control-label">Connection
+                                            Name</label>
+                                            <div class="col-lg-10"><input id="inputConnectionNameForUrl"
+                                                                          data-required="true"
+                                                                          disabled="true"
+                                                                          type="text"
+                                                                          placeholder="Connection Name"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+
+                                        <div class="form-group"><label class="col-lg-2 control-label">URL
+                                        </label>
+                                            <div class="col-lg-10"><input id="inputUrl" type="text"
+                                                                          disabled="true"
+                                                                          placeholder="Url"
+                                                                          class="form-control">
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
                         </div>
-                    </form>
+
+                    </div>
+
                 </div>
                 <div class="modal-footer">
                     <div class="pull-left">
@@ -131,7 +290,7 @@
     </div>
 
 
-    <!-- MODAL EditConnection-->
+    <!-- MODAL EditConnection
     <div class="modal inmodal" id="connectionEditModal" tabindex="-1" role="dialog" aria-hidden="true"
          style="display: none;">
         <div class="modal-dialog">
@@ -200,6 +359,6 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div>-->
 
 </template>
\ No newline at end of file

client/views/layouts/top_navbar/top_navbar.js

 Template.topNavbar.rendered = function () {
 
     var selector = $('#tblConnection');
-    selector.addClass('table-striped table-bordered table-hover');
     selector.find('tbody').on('click', 'tr', function () {
 
         var table = selector.DataTable();
@@ -25,62 +24,12 @@ Template.topNavbar.rendered = function () {
     // $('body').addClass('fixed-nav');
     // $(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
 
+    $(":file").filestyle({icon: false});
+    Template.topNavbar.initIChecks();
+    Template.topNavbar.populateConnectionsTable();
 };
 
 
-Template.topNavbar.helpers({
-    reactiveDataFunction: function () {
-        return function () {
-            return Connections.find().fetch(); // or .map()
-        };
-    },
-    optionsObject: {
-        columns: [
-            {
-                title: '_id',
-                data: '_id',
-                className: 'center',
-                sClass: "hide_column"
-            },
-            {
-                title: 'Connection Name',
-                data: 'name',
-                className: 'center'
-            },
-            {
-                title: 'Hostname',
-                data: 'host',
-                className: 'center'
-            },
-            {
-                title: 'Port',
-                data: 'port',
-                className: 'center'
-            },
-            {
-                title: 'Database Name',
-                data: 'databaseName',
-                className: 'center'
-            },
-            {
-                title: 'Edit',
-                data: null,
-                className: 'center',
-                bSortable: false,
-                defaultContent: '<a href="" title="Edit" class="editor_edit"><i class="fa fa-edit text-navy"></i></a>'
-            },
-            {
-                title: 'Delete',
-                data: null,
-                className: 'center',
-                bSortable: false,
-                defaultContent: '<a href="" title="Delete" class="editor_remove"><i class="fa fa-remove text-navy"></i></a>'
-            }
-        ]
-    }
-});
-
-
 Template.topNavbar.events({
     'click #btnRefreshCollections': function (e) {
         e.preventDefault();
@@ -215,6 +164,18 @@ Template.topNavbar.events({
         });
 
         Router.go('databaseStats');
+    },
+
+    'click #anchorTab1': function () {
+        if (!$('#anchorTab1').attr('data-toggle')) {
+            toastr.warning('Disable URI connection to use this tab');
+        }
+    },
+
+    'click #anchorTab2': function (e) {
+        if (!$('#anchorTab2').attr('data-toggle')) {
+            toastr.warning('Disable URI connection to use this tab');
+        }
     }
 });
 
@@ -242,7 +203,7 @@ Template.topNavbar.checkConnection = function (connection) {
 
 Template.topNavbar.connect = function (isRefresh) {
     var connection = Connections.findOne({_id: Session.get(Template.strSessionConnection)});
-    
+
     Meteor.call('connect', connection, function (err, result) {
         if (err || result.error) {
             Template.showMeteorFuncError(err, result, "Couldn't connect");
@@ -264,4 +225,91 @@ Template.topNavbar.connect = function (isRefresh) {
             Ladda.stopAll();
         }
     });
-}
\ No newline at end of file
+};
+
+Template.topNavbar.initIChecks = function () {
+    var selector = $('#divAuthType');
+    selector.iCheck({
+        radioClass: 'iradio_square-green'
+    });
+
+    var inputAuthStandardSelector = $('#inputAuthStandard');
+    var formStandardAuthSelector = $('#formStandardAuth');
+    var formCertificateAuthSelector = $('#formCertificateAuth');
+    var anchorTab1Selector = $('#anchorTab1');
+    var anchorTab2Selector = $('#anchorTab2');
+    var inputUseUriSelector = $("#inputUseUrl");
+
+    inputAuthStandardSelector.iCheck('check');
+
+    $('#divUseSSL').iCheck({
+        checkboxClass: 'icheckbox_square-green'
+    });
+
+    $('#divUseUrl').iCheck({
+        checkboxClass: 'icheckbox_square-green'
+    });
+
+    inputAuthStandardSelector.on('ifChecked', function (event) {
+        formStandardAuthSelector.show();
+        formCertificateAuthSelector.hide();
+    });
+
+    $('#inputAuthCertificate').on('ifChecked', function (event) {
+        formStandardAuthSelector.hide();
+        formCertificateAuthSelector.show();
+    });
+
+
+    inputUseUriSelector.iCheck('uncheck');
+    inputUseUriSelector.on('ifChanged', function (event) {
+        var inputUriSelector = $('#inputUrl');
+        var inputConnectionNameForUrl = $('#inputConnectionNameForUrl');
+
+        var isChecked = event.currentTarget.checked;
+        if (isChecked) {
+            inputUriSelector.prop('disabled', false);
+            inputConnectionNameForUrl.prop('disabled', false);
+            anchorTab1Selector.removeAttr("data-toggle");
+            anchorTab2Selector.removeAttr("data-toggle");
+        } else {
+            inputUriSelector.prop('disabled', true);
+            inputConnectionNameForUrl.prop('disabled', true);
+            anchorTab1Selector.attr('data-toggle', 'tab');
+            anchorTab2Selector.attr('data-toggle', 'tab');
+        }
+    });
+};
+
+Template.topNavbar.populateConnectionsTable = function () {
+    var tblConnections = $('#tblConnection');
+    // destroy jquery datatable to prevent reinitialization (https://datatables.net/manual/tech-notes/3)
+    if ($.fn.dataTable.isDataTable('#tblConnection')) {
+        tblConnections.DataTable().destroy();
+    }
+    tblConnections.DataTable({
+        data: Connections.find().fetch(),
+        columns: [
+            {data: "_id", sClass: "hide_column"},
+            {data: "name"},
+            {data: "url"},
+            {data: "useSsl"},
+            {data: "host"},
+            {data: "port"}
+        ],
+        columnDefs: [
+            {
+                targets: [6],
+                data: null,
+                bSortable: false,
+                defaultContent: '<a href="" title="Edit" class="editor_edit"><i class="fa fa-edit text-navy"></i></a>'
+            },
+            {
+                targets: [7],
+                data: null,
+                bSortable: false,
+                defaultContent: '<a href="" title="Delete" class="editor_remove"><i class="fa fa-remove text-navy"></i></a>'
+            }
+        ]
+    });
+};
\ No newline at end of file

client/views/pages/file_management/file_management.html

@@ -24,7 +24,7 @@
                                 <div class="form-group">
                                     <div class="col-sm-12">
                                         <button id="btnReloadFiles"
-                                                class="btn btn-block btn-outline btn-primary ladda-button"
+                                                class="btn btn-block btn-outline btn-primary ladda-button "
                                                 type="button"
                                                 data-style="contract">
                                             <strong>Reload</strong></button>

client/views/pages/file_management/upload_file/upload_file.html

@@ -3,7 +3,7 @@
         <label class="col-lg-1 control-label">File</label>
         <div class="col-lg-11">
             <div class="input-group">
-                <input class="form-control" type="file" id="inputFile">
+                <input class="form-control filestyle" data-buttonName="btn-primary" type="file" id="inputFile">
                     <span class="input-group-btn">
                         <button id="btnUpload"
                                 class="btn btn-primary ladda-button"

client/views/pages/file_management/upload_file/upload_file.js

@@ -5,6 +5,8 @@ Template.uploadFile.onRendered(function () {
     if (Session.get(Template.strSessionCollectionNames) == undefined) {
         Router.go('databaseStats');
     }
+
+    $(":file").filestyle({icon: false, buttonBefore: true});
 });
 
 Template.uploadFile.events({

lib/collections/connections.js

@@ -3,6 +3,18 @@
  */
 Connections = new Mongo.Collection('connections');
 Connections.attachSchema(new SimpleSchema({
+    url: {
+        type: "String",
+        optional: true
+    },
+    useSsl : {
+        type: "String",
+        optional: true
+    },
+    sslCertificatePath : {
+        type: "String",
+        optional: true
+    },
     name: {
         type: "String"
     },
@@ -15,6 +27,10 @@ Connections.attachSchema(new SimpleSchema({
     databaseName: {
         type: "String"
     },
+    authDatabaseName: {
+        type: "String",
+        optional: true
+    },
     user: {
         type: "String",
         optional: true

server/internal/internal_methods.js

@@ -65,6 +65,10 @@ Meteor.methods({
             $set: {
                 name: connection.name,
                 host: connection.host,
+                authDatabaseName: connection.authDatabaseName,
+                url: connection.url,
+                useSsl: connection.useSsl,
+                sslCertificatePath: connection.sslCertificatePath,
                 port: connection.port,
                 databaseName: connection.databaseName,
                 user: connection.user,