data-transport/www/html/_wizard/wizard.html

<script>
    var _meta ={"postgresql":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},"redshift":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},    "mysql":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},"mariadb":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},    "bigquery":{"private_key":1,"dataset":1,"table":1},"mongodb":{"db":1,"collection":1,"host":0,"port":0,"username":0,"password":0},    "netezza":{"host":1,"port":1,"username":1,"password":1, "database":1,"table":1}, "sqlite":{"path":1,"table":1},    "sqlserver":{"host":0,"port":0,"username":1,"password":1,"database":1, "table":1}
,"databricks":{"host":1,"token":1,"schema":1,"cluster_path":1,"table":1},"couchdb":{"url":0,"dbname":1,"doc":1,"username":0,"password":0},"cloudant":{"url":0,"dbname":1,"doc":1,"username":0,"password":0}
}

    var wizard = {}
    wizard.init = function (){
        
        Object.keys(_meta).forEach( function (_name){
            var _div = jx.dom.get.instance('DIV')
            _div.innerHTML = _name
            _div.data = _meta[_name]
            _div.data.provider = _name
            _div.data.context = 'write'
            _div.className = 'search-item active'
            _div.placeholder = 'use '+_name+' provider'
            _div.onclick = function (){
                wizard.write_code(this.data)
                $('.wizard-code').slideDown()

            }
            jx.dom.append('search-meta-items',_div)
        })
        
        jx.dom.set.value('search-provider','sqlite')
        wizard.search()
        
    }
    wizard.write_code = function (_info){
        $('.provider').html(_info.provider)
        $('#auth-file').html( JSON.stringify(_info))
    }
    wizard.search = function (){
        var term = jx.dom.get.value('search-provider').trim()
        
        wizard.show(term)
       
    }
    wizard.clear = function (){
        jx.dom.set.value('search-provider','')
        wizard.show('')
        jx.dom.set.focus('search-provider')
    }
    wizard.show = function (term){
        _count = 0
        $('.wizard-code').slideUp()
        if (term == ''){
            $('.search-item').slideDown()
        }else{
            var nodes = jx.dom.get.children('search-meta-items')
            var _regx = new RegExp(term,"ig")
            jx.utils.patterns.visitor(nodes,function (node){
                if (node.data.provider.match(_regx)){
                    $(node).slideDown()
                    _count += 1
                }else{
                    $(node).slideUp()
                }
            })
            
        }
        $('.found-items').html(_count)
    }
    wizard.supported_providers = function (){
        var uri = '{{system.context}}/api/info/about' ;
        
        var http = HttpClient.instance()
        http.get(uri,function(x){
            var _object = JSON.parse(x.responseText)
            jx.dom.set.value('wiz-vendors',_object.supported)
        
        var layout = {on:{load:{'contact-wizard':['www/html/contact.html']}}}
        bootup.init('{{system.context}}',layout)


        })        
    }
    $(document).ready(function(){
        _node = jx.dom.get.instance('wz-clear-search')
        _node.onclick = wizard.clear
        
        _node = jx.dom.get.instance('search-provider')
        _node.onkeyup=wizard.search

        $('.wizard-code').slideUp()
        wizard.supported_providers()
        wizard.init()
    })
</script>
<style>
    .wizard-frame input {
        background-color:#f3f3f3; width:96%;
        padding:8px; border:4px solid transparent; outline: 0;
         color:#000000;
        }
        .wizard-frame input:focus {
            border-left-color: #4682b4;
        }
        .search-meta-frame {
            width:calc(100% - 64px) ;
            margin-top:4px;
        }
        #search-meta{
            
            height:100px; overflow: hidden; overflow-y: auto;
            
            padding:8px;
        }
        #search-meta .search-item {padding:4px; text-transform: capitalize;}
        
        .wizard-code .provider {text-transform: uppercase;}


        .supported-vendors table {width:100%; padding:4px; border:1px solid #CAD5E0;}
    .supported-vendors thead tr {
        background-color: #4682B4;
        color: #ffffff;
        text-align: left;
    }
  
    .supported-vendors tbody tr {
    border-bottom: 1px solid #dddddd;
}

.supported-vendors tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

</style>

<div class="wizard-frame" style="display:grid; grid-template-columns: 650px auto; gap:8px;">
    <div>
        <div class="large-text">Wizard: auth file generator</div>
        <p>
            <div>This wizard generates an <b>auth-file</b>. It is a template file to be used to setup a <b>data-transport</b> database connectivity to help with best practice when it comes to sensitive information in code.
                <ul>
                    <i class="fa-solid fa-minus"></i> search for the database provider / vendors
                    <br><i class="fa-solid fa-minus"></i> click on the vendor and copy the generated code to a file
    
                </ul>
            </div>
        </p>
        <p>
            <div style="display:grid; grid-template-columns: auto 48px; gap:4px">
                <div>
                    <input id="search-provider" type="text" placeholder="[database provider]" onkeyup="wizard.search()">
                </div>
                <div> 
                    <div id="wz-clear-search" class="active" align="center"><i class="fa-solid fa-trash"></i></div>
                </div>
            </div>
            <div  class="search-meta-frame border-round border">
                <div align="right">
                    <span class="found-items">0</span><span> found</span>
                </div>
                <div id="search-meta"><div id="search-meta-items"></div></div>
                

            </div>
        </p>
        <p>
            <div style="height:150px;">

                <div class="wizard-code">
                    <div class="provider bold"></div>
                    <div id="auth-file" class="source-code" style="text-wrap: wrap; overflow: hidden; overflow-x: auto;"> &nbsp;</div>
                    <br><b>Note :</b>
                    <br><i class="fa-solid fa-minus"> </i> Copy the code above to the <b>auth-file</b> and fill with appropriate values
                    <br><i class="fa-solid fa-minus"> </i> Attributes with <b>zero</b> i.e <b>0</b> are optional
                </div>
            </div>
        </p>
        <p>
            <div id="contact-wizard"></div>
        </p>
        
    </div>
    <div>
        <div class="large-text">Prerequisites</div>
        <ul class="border-left">
            <li type="square">Familiarity with JSON format</li>
            <li type="square">Understand your current database security access policy
                <br><i class="fa-solid fa-minus"> </i> Insure your policy (permissions) match your use case
                <br>
            </li>
        </ul>
        <div class="large-text">Thing to know</div>
        <ul class="border-left">
            <li type="square">Values assigned to attributes
                <br><i class="fa-solid fa-minus"> </i> value of <b>one</b> i.e <b>1</b> suggests a value must be provided
                <br><i class="fa-solid fa-minus"> </i> value of <b>zero</b> i.e <b>0</b> suggests the attribute is optional and can be removed
            </li>
            <li type="square">
                Supported databases (or database providers) to use in search
                <div id="wiz-vendors" class="supported-vendors"></div>
            </li>
        </ul>
    </div>
</div>