RandomSec/extensions/database/module/scripts/index/database-import-form.html

<div  bind="databasePanel" class="database-container">
    
         <div id = "databaseLayoutDiv" class="grid-layout layout-div">
         	
            <div class="pure-g">
               <div class="pure-u-1-5">
                       <div class="pure-u-1"><button type="button" id="newConnectionButtonDiv" bind="newConnectionButton" class="pure-button pure-button-primary">New Connection</button></div>
                       <div class="pure-u-1-2" style="border-bottom: 1px dashed; border-color:lightgrey; margin-top:1px; padding-right:1px;"></div>
                       <div class="pure-u-1 sidebarDiv" bind="sidebarDiv">
                 
                          <div class="pure-menu pure-menu-scrollable custom-restricted">	
                            <span class="pure-menu-heading" id="savedConnectionSpan">Saved Connections</span>
                            <ul class="pure-menu-list" bind="menuListUl" id="menuListUl"></ul>
                          </div>
                  
                      </div>
               </div>
               
               <div class="connection-div-layout pure-u-4-5">
               
                     <div id = "newConnectionDiv" class="new-connection-div " bind="newConnectionDiv">
                           
                           <!-- <div class="panel panel-info"> -->
                             <form class="pure-form pure-form-aligned">
                             	  <fieldset class="new-connection-fieldset">
                                      <legend class="new-connection-legend pure-input-1-2" id="new-connection-legend"></legend>
                                  
                                      <div class="pure-control-group">
                                           <label id="connectionNameLabel" for="name"></label>
                                           <input bind="connectionNameInput" id="connectionName" type="text" placeholder="" value="" class="pure-input-1-3" required>
                                       </div>
                               
                                       <div class="pure-control-group">
                                           <label id="databaseTypeLabel" for="databaseType"></label>
                                            <select name="selection" id="databaseTypeSelect" bind="databaseTypeSelect" class="pure-input-1-3" required>
                                            	  <option value="postgresql">PostgreSQL</option>  
                                               <option value="mysql" selected="selected">MySQL</option>
                                               <option value="mariadb">MariaDB</option>
                                                <option value="sqlite">SQLite</option>
                                            </select>
                                       </div>

                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
                                          <label id="databaseHostLabel" for="databaseHost"></label> 
                                          <input bind="databaseHostInput" id="databaseHost" type="text" placeholder="" value="localhost" class="pure-input-1-3" required>
                                        </div>
                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
                                          <label id="databasePortLabel" for="databasePort"></label> 
                                          <input bind="databasePortInput" id="databasePort" type="text" placeholder="" value="5432" class="pure-input-1-3" required>
                                        </div>
                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
                                          <label id="databaseUserLabel" for="databaseUser"></label> 
                                          <input bind="databaseUserInput" id="databaseUser" type="text" placeholder="" value="postgres" class="pure-input-1-3" required>
                                        </div>
                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
                                          <label id="databasePasswordLabel" for="databasePassword"></label> 
                                          <input bind="databasePasswordInput" id="databasePassword" type="password" placeholder="" class="pure-input-1-3" required>
                                        </div>
                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb dbt-sqlite">
                                          <label id="databaseNameLabel" for="initialDatabase"></label> 
                                          <input bind="initialDatabaseInput" id="initialDatabase" type="text" placeholder="" class="pure-input-1-3" required>
                                        </div>
                                        <div class="pure-control-group dbtype-options">
                                          <label id="databaseSchemaLabel" for="initialSchema"></label> 
                                          <input bind="initialSchemaInput" id="initialSchema" type="text" placeholder="" class="pure-input-1-3" required>
                                        </div>
                                       
                                        <div class="pure-controls" id="newConnectionControlDiv">
                                           <button type="button" id="databaseTestButton" bind="testDatabaseButton" class="pure-button pure-button-primary"><span>Test</span></button>
                                           <button type="button" id="databaseSaveButton" bind="saveConnectionButton" class="button-success pure-button">Save</button>
                                           <button type="button" id="databaseConnectButton" bind="databaseConnectButton" class="button-secondary pure-button">Connect</button>
                                       </div>
                                       
                                       <div class="pure-controls" id="editConnectionControlDiv" style="display: none;">
                                           <button type="button" id="connectionEditButton" bind="editConnectionButton" class="pure-button pure-button-primary"><span>Edit</span></button>
                                           <button type="button" id="connectionEditCancelButton" bind="cancelEditConnectionButton" class="pure-button">Cancel</button>
                                         
                                       </div>
                               			
                                   </fieldset>
                                </form>
                            
                           	 
                           <!-- </div> --> <!--End Panel Div -->
                         
                         
                      </div><!--End NewConnectionDiv -->
                             
                      <div class="sql-editor-div  grid-layout" bind="sqlEditorDiv" id="sqlEditorDiv" style="display: none;" >
                                   
                                <form class="pure-form pure-form-stacked">
                                		<input type="hidden" id="currentConnectionNameInput" name="currentConnectionName">
                                		<input type="hidden" id="currentDatabaseTypeInput" name="currentDatabaseType">
                                		<input type="hidden" id="currentDatabaseUserInput" name="currentDatabaseUser">
                                		<input type="hidden" id="currentDatabasePasswordInput" name="currentDatabasePassword">
                                		<input type="hidden" id="currentDatabaseHostInput" name="currentDatabaseHost">
                                		<input type="hidden" id="currentDatabasePortInput" name="currentDatabasePort">
                                		<input type="hidden" id="currentInitialDatabaseInput" name="currentInitialDatabase">
                                		
									<div class="panel panel-info pure-input-3-4">
										<div class="panel-heading">Query Editor </div>
										<div class="panel-body">
											<fieldset style="padding:2px; margin-top:5px;">
											    <textarea id="queryTextArea" bind="queryTextArea" class="pure-input-1 no-resize" placeholder="Enter your query" rows="10" >SELECT * FROM</textarea>
											</fieldset>	
										    <div class="alert alert-info" id="connectionParameterSpan"></div>
											<!-- <select name="querySelect" id="queryHistorySelect" bind="queryHistorySelect" class="pure-input-1" style="padding-bottom:2px;">
													<option value="1">Query History</option>  
											</select> -->
										</div>
										
									<div class="panel-footer">
										<div class="pure-controls pure-input-1-2">
									       <button type="button" id="executeQueryBtn" bind="executeQueryButton" class="button-secondary pure-button">Preview Query Result</button>
									    <!--    <button type="button" bind="saveQueryButton" class="button-success pure-button">Save Query</button> -->
									    		
									    </div>
									</div>
									</div>
                                    
                                    <!--
									<div class="panel panel-info pure-input-1-2">
										<div class="panel-heading">Saved Queries</div>
										<div class="panel-body">
											<div class="queryResultDiv pure-input-1 scrollable" bind="queryResultDiv" id="queryResultDiv" style="<!padding:2px; margin-top:5px;"> </div>
										</div>
										
									</div>
                                    -->
                             </form>	
                        
                     </div><!-- End Sql Editor Div-->
                   
               </div>
           
           </div> <!-- End pure-g -->
         
       </div> <!-- End databaseLayoutDiv -->
    
    
</div><!-- End databaseContainer -->