{% include "header.html" %} {% load i18n %}{% load static %}{% get_current_language as LANGUAGE_CODE %}
{% include "datatablecss.html" %}
<link href="{% get_static_prefix %}{{theme}}/assets/css/passtrength.css" rel="stylesheet" type="text/css" />
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">{% translate 'API Manager' %}</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item">{% translate 'API' %}</li>
                                <li class="breadcrumb-item active"><a href="{% url 'api_manager' %}"
                                        class="text-primary">{% translate 'API Manager' %}</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <!-- First Block -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{% translate 'Manage Reseller API Access' %} </h4>
                            <p class="card-title-desc">{% translate "Eenos Reseller API manager will allow you to create API users. Authenticated API users can manage the Eenos platform from remote applications like billing system" %}</p>                            
                            <!-- Action Messages -->
                            <div class="mt-3">
                                {% if form.errors %}
                                <div class="alert alert-danger eenosinfo ">
                                    {% for error in form.non_field_errors %}
                                    {{ error|escape }}
                                    {% endfor %}
                                    {% for field in form %}
                                    {% for error in field.errors %}
                                    {{ error|escape }}
                                    {% endfor %}
                                    {% endfor %}
                                </div>
                                {% endif %}

                                {% if messages %}
                                {% for message in messages %}
                                {% if message.tags == "success" %}
                                <div class="alert alert-success eenosinfo" role="alert">
                                    {{ message }}
                                </div>
                                {% else %}
                                <div class="alert alert-danger eenosinfo ">
                                    {{ message }}
                                </div>
                                {% endif %}
                                {% endfor %}
                                {% endif %}
                            </div>
                            <!-- Action Messages -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- First Block -->
            <!-- Second Block -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{% translate 'API Accounts' %} </h4>
                            <div class="col-sm-12">
                                <table id="datatable"
                                    class="display table table-bordered dt-responsive  w-100 dataTable no-footer dtr-inline"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>{% translate 'Sl.No' %}</th>
                                            <th>{% translate 'API User' %}</th>
                                            <th>{% translate 'Date of Creation' %}</th>
                                            <th>{% translate 'Date of Update' %}</th>
                                            <th>{% translate 'Remote Access' %}</th>
                                            <th>{% translate 'Whitelisted IPs' %}</th>                                           
                                            <th>{% translate 'Action' %}</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>{% translate 'Sl.No' %}</th>
                                            <th>{% translate 'API User' %}</th>
                                            <th>{% translate 'Date of Creation' %}</th>
                                            <th>{% translate 'Date of Update' %}</th>
                                            <th>{% translate 'Remote Access' %}</th>
                                            <th>{% translate 'Whitelisted IPs' %}</th>                                           
                                            <th>{% translate 'Action' %}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- Third Block  -->
             <form action=" " class="eenos-form" method="POST" name="createuser" id="eenos-form"> 
                            {% csrf_token %}
                        <div class="row">
                            
                            <div class="col-lg-12 col-md-12">
                                <div class="card">
                                    <div class="card-body">                                        
                                        <h4 class="card-title">{% translate 'Create API Account' %}</h4>                                        
                                        
                                        <div class="mb-3">
                                                <label  class="col-md-2 col-form-label">{% translate 'API User Name' %}</label>
                                                <div class="col-sm-auto col-md-4">
                                                    <input class="form-control" autocomplete="off" type="text" value="" 
                                                    required data-parsley-required-message="{% translate 'Please enter a user name' %}" 
                                                    data-parsley-pattern="^[A-Za-z0-9_][A-Za-z0-9_\-]{4,29}$" 
                                                    placeholder="{% translate 'Enter API user Name' %}"
                                                    id="user" name="apiuser">
                                                </div>            
                                        </div>
                                        <!-- New pass -->
                                        <div class="row gy-2 gx-3 align-items-center">      
                                                <div class="col-sm-auto col-md-4 mb-3">
                                                    <label  class="form-label">{% translate 'Password of API user' %}</label>
                                                    <div class="input-group">                                                    
                                                        <input type="text" autocomplete="off" class="form-control" minlength="8" name="apipassword" required id="id_password" placeholder="{% translate 'Enter Password' %}" rel="gp" data-size="24" data-character-set="a-z,A-Z,0-9,#" data-parsley-required-message="{% translate 'Please enter a password' %}" data-parsley-errors-container="#p-errors">
                                                        <span class="input-group-text"><i class="far fa-eye font-size-18" id="togglePassword"></i></span>&nbsp;
                                                        <button type="button" class="btn btn-outline-success w-md pass_generate">{% translate 'Generate Password' %}</button>
                                                        
                                                    </div>       
                                                    <div id="p-errors"></div>                                         
                                                 </div>                                               
                                        </div>
                                        <div class="mb-3 ">
                                                <label class="form-label">{% translate 'Confirm Password' %}</label>
                                                <div class="col-sm-auto col-md-4">
                                                <input type="text" name="apirepassword" id="repassword" minlength="8"  required data-parsley-required-message="{% translate 'Please re-type the password' %}" 
                                                 class="form-control" placeholder="{% translate 'Re-Enter new password' %}">
                                                 </div>
                                        </div>
                                      

                                        <div class="form-group row">
                                            <label class="col-md-2 col-form-label">{% translate 'Remote Access' %} <br><small> {% translate 'Allow access from remote Ips' %}</small></label>
                                            <div class="col-md-6">
                                                <div class="padding-top-radio">                                                            
                                                <input type="radio" name="remoteaccess" value="off" class="disablethis remoteaccess_off ">
                                                <label class="package_select">{% translate 'Allow any IP' %} </label>   
                                                                                                        
                                                <input type="radio" name="remoteaccess" value="on" class="enablethis remoteaccess_on"> 
                                                <label class="package_select">{% translate 'Allow the following Ips Only' %}</label>                                                     
                                               </div>
                                            </div>                                            
                                        </div>
                                        <div class="hide_custom_ip form-group row mb-3">
                                            <fieldset class="eenos_filedset eenos_hide_show_div col-md-6">
                                            <legend class="eenos_legend">{% translate 'Whitelisted IPs' %}</legend>  
                                            <div>                                                
                                                <p class="text-muted mb-2">
                                                    {% translate 'Enter all remote IP addresses in a comma-separated list. Only these IPs are allowed to connect with API' %}                                                    
                                                </p>
                                                <textarea id="allowedips" name="apiips" class="form-control allowedips"  rows="3" placeholder="" style="margin-top: 0px; margin-bottom: 0px; height: 50px;"></textarea>                                        
                                            </div>   
                                            <br />                                         
                                        </fieldset>
                                        </div>                                        
                                        
                                        <button type="button" class="btn btn-primary w-md createacct"  name="create">{% translate 'Create API User' %}</button>    
                                    </div>                                   
                            
                            </div>  
                            </div>                              
                            
                        </div>     
                        
                        <input type="hidden" name="createaact" id="createacct">             
                    </form>
                    <form action="" class="del_form" id="del_form" method="POST"> 
                        {% csrf_token %}
                        <input type="hidden" name="user" id="deluser">
                        <input type="hidden" name="deleteuser" id="deleteuser">
                    </form>
                    <form action="" class="option_change_pwd" id="change_pwd_form" method="POST"> 
                        {% csrf_token %}
                        <input type="hidden" name="change_password" id="change_password">
                        <input type="hidden" name="password" id="cpassword">
                        <input type="hidden" name="user" id="password_usr">
                    </form>
                    

        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->

{% include "footer.html" %}
{% include "datatablejs.html" %}
<script type="text/javascript" charset="utf8" src="{% get_static_prefix %}{{theme}}/assets/js/jquery.passtrength.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('#datatable').DataTable( {
        responsive: true,
        processing: true,
        lengthMenu: [[15, 25, 50, -1], [15, 25, 50, "All"]],    
        columnDefs: [   
            { orderable: false, targets: 0 } ,    
            { width: "2px", targets: [0] },            
            { className: "sltest", targets: [ 0 ] },
            { responsivePriority: 1, targets: 1 } , 
            { responsivePriority: 2, targets: -2 } ,            
        ],        
        order: [[0, 'asc']],
        language: {
            loadingRecords: '&nbsp;',
            processing: '<i class="fas fa-spinner fa-spin fa-3x text-primary"></i>',
            emptyTable: "<a href='{% url 'createuser' %}' class='text-info'>{% translate 'No API accounts , start adding accounts' %}</a>",             
        },
        ajax: "{% url 'apikeys_listuser' %}"
    } );
} );

$('.remoteaccess_off').prop('checked', true);
$("div.hide_custom_ip").hide();
$('input:radio[name=remoteaccess]').click(function() {      
    if($(this).hasClass('remoteaccess_on')) {
        $("div.hide_custom_ip").show();
        $('.allowedips').prop('required',true);    
    }else{
        $('.allowedips').prop('required',false); 
        $("div.hide_custom_ip").hide();    
    }

});

// Show hide password with strength check and generate

$('#id_password').passtrength({
  minChars: 8,
  passwordToggle: false,
  tooltip: true,
  textWeak: "{% translate 'Weak' %}",
  textMedium: "{% translate 'Medium' %}",
  textStrong: "{% translate 'Strong' %}",
  textVeryStrong: "{% translate 'Very Strong' %}",   
});
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password'); 
 togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
});
$(document).on("click",".pass_generate",function(){ 
    var field = $('#id_password');
    field.val(randString(field));    
});

$(document).on("click",".createacct",function(){  
    var instance=$('#eenos-form').parsley();   
    instance.validate();   
    var isvalid=instance.isValid();    
    if (isvalid == true){
        $.confirm({
            animation: 'zoom',
            closeAnimation: 'scale',
            theme: 'modern',
            animateFromElement: false,
            icon: "fas fa-user-plus",
            title: "{% translate 'Create API Account' %}"  ,
            content: "{% translate 'Do you wish to create the API account ' %} ", 
            buttons: {
                formSubmit: {
                    btnClass: 'btn btn-success w-md',
                    text: "{% translate 'Create' %}",
                    action: function(){   
                        $("#createacct").val('yes');                                     
                        $( "#eenos-form" ).submit();
                        }
                    },
                    cancel: {
                        text: "{% translate 'Cancel' %}",
                        action: function () {}
                    }
            } 
        }); 
    }
    
});


$(document).on("click",".change_pass",function(){  
    var user=$(this).attr("value");    
    $.confirm({
        animation: 'zoom',
        closeAnimation: 'scale',
        theme: 'modern',
        animateFromElement: false,
        icon: "fas fa-key",
        title: "{% translate 'Change API Password' %}"  ,
        content: '<div class="form-group">' + 
            '<label class="form-label">{% translate "API User" %} : '+ user +'</label> <br />' +       
            '<input class="form-control" autocomplete="off" type="text" id="new_pass" name="new_pass" rel="gp" data-size="24" data-character-set="a-z,A-Z,0-9,#"> <br />' +
            '<span><button type="button" class="btn btn-outline-success w-lg waves-effect getNewPass"> {% translate "Create Password" %} </button> </span>' +
            '</div>', 
        onContentReady: function (){
            var self = this;
            this.$content.find('.getNewPass').click(function(){
                var field = $('#new_pass');
                field.val(randString(field));
            
        });
        },
        buttons: {
            formSubmit: {
                btnClass: 'btn btn-info w-md',
                text: "{% translate 'Change Password' %}",
                action: function(){ 
                    var pass= $('#new_pass').val();
                    if (pass){
                        $("#cpassword").val(pass);
                        $("#change_password").val("yes");
                        $("#password_usr").val(user);
                        $("#change_pwd_form").submit();
                    }else{
                        $.alert({
                            title: "{% translate 'Input Error' %}",
                            content: "{% translate 'Please enter a Password' %}",
                            icon: "far fa-question-circle",
                            theme: 'modern',
                            animateFromElement: false,
                            animation: 'zoom',
                            });    
                    }
                    //alert(pass);                                                           
                    }
                },
                cancel: {
                    text: "{% translate 'Cancel' %}",
                    action: function () {}
                }
        } 
    }); 
});


$(document).on("click",".delete",function(){  
    var user=$(this).attr('value');    
    $.confirm({
        animation: 'zoom',
        closeAnimation: 'scale',
        theme: 'modern',
        animateFromElement: false,
        icon: "far fa-trash-alt",
        title: "{% translate 'Delete API User' %}"  ,
        content: "{% translate 'Do you wish to delete the API user ' %} "+user+'?', 
        buttons: {
            formSubmit: {
                btnClass: 'btn btn-danger w-md',
                text: "{% translate 'Delete' %}",
                action: function(){                     
                    $("#deluser").val(user);
                    $("#deleteuser").val('yes');                   
                    $( "#del_form" ).submit();
                    }
                },
                cancel: {
                    text: "{% translate 'Cancel' %}",
                    action: function () {}
                }
        } 
    }); 
});

</script>
    </body>
</html>