{% extends "base.html" %}

{% block content %}

   <div id="messages" style="margin-bottom: 15px;">
   </div>

   <div class="panel panel-primary">
      <div class="panel-heading">
         <h2 class="panel-title">Nodes</h2>
      </div>
      <div class="panel-body">
         <table id="node_table" class="table table-striped table-condensed">
            <thead>
            <tr>
               <td><b>Name</b></td>
               <td><b>Hashcat version</b></td>
               <td><b>Status</b></td>
               <td><b>Running sessions</b></td>
            </tr>
            </thead>
            <tbody>
            </tbody>
         </table>
      </div>
   </div>

    <script type="text/javascript">
        $(document).ready( function () {
            // datatable
            var table = $('#node_table').DataTable({
               "processing": false,
               "serverSide": true,
               "searching": false,
               "paging": false,
               "ordering": false,
               "info": false,
               "pageLength": 100,
               "columnDefs": [
                   { "width": "30%", "targets": 0},
                   { "width": "30%", "targets": 1},
                   { "width": "25%", "targets": 2},
                   { "width": "15%", "targets": 3},
               ],
               "ajax": {
                  "url": "{% url 'API:api_node_status' %}",
               },
            });
 
            function autoRefresh()
            {
               //window.location.reload();
               table.ajax.reload();
            }
            setInterval(autoRefresh, 30000); // this will reload page after every 30 seconds; Method II
        });


    </script>

   <div class="panel panel-primary">
      <div class="panel-heading">
         <div style="float: right;">
            <button id="update_hashfiles" class="btn btn-xs btn-success">Update</button>
         </div>
         <h2 class="panel-title">Hashfiles</h2>
      </div>
      <div class="panel-body">

         {% load math %}

         <table id="hashfile_table" class="table">
            <thead>
            <tr>
               <td></td>
               <td><b>Name</b></td>
               <td><b>Type</b></td>
               <td><b>Lines</b></td>
               <td><b>Cracked</b></td>
               <td><b>Usernames included ?</b></td>
               <td><b>Running sessions</b></td>
	       {% if user.is_staff %}
               	<td><b>Created by</b></td>
	       {% endif %}
               <td></td>
            </tr>
            </thead>
         </table>
         </br>
         <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#action_add" title="Add a new hashfile">Add</button></td>

      </div>
   </div>

   <script type="text/javascript">
/* Formatting function for row details - modify as you need */
         // datatable
         var hashfile_table = $('#hashfile_table').DataTable({
            "processing": false,
            "serverSide": true,
            "columnDefs": [
                {
                  "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": '',
                  "targets": 0,
                  "render": function () {
                      return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                  },
                  "width": "15px",
                },
                { "data": "name", "width": "15%", "targets": 1},
                { "data": "type", "width": "20%", "targets": 2},
                { "data": "line_count", "width": "10%", "targets": 3},
                { "data": "cracked", "width": "12%", "targets": 4},
                { "data": "username_included", "orderable": false, "width": "15%", "targets": 5},
                { "data": "sessions_count", "orderable": false, "targets": 6},
	        {% if user.is_staff %}
                { "data": "created_by", "orderable": false, "width": "100px", "targets": 7},
                { "data": "buttons", "orderable": false, "width": "100px", "targets": 8},
        	{% else %}
                { "data": "buttons", "orderable": false, "width": "100px", "targets": 7},
	        {% endif %}
            ],
            "ajax": {
               "url": "{% url 'API:api_hashfiles' %}",
            },
            "order": [[1, 'asc']]
         });

         function sub_DataTable(vtask_id, table_id) {
             var subtable = $('table#'+table_id).DataTable({
                  "processing": false,
                  "serverSide": true,
                  "searching": false,
                  "paging": false,
                  "ordering": false,
                  "info": false,
                  "pageLength": 100,
                  "ajax": {
                     "url": "{% url 'API:api_hashfile_sessions' %}",
                     "data": function(d) {
                        d.hashfile_id = vtask_id;
                     },
                  },
                  "columnDefs": [
                     { "data": "node", "width": "10%", "targets": 0},
                     { "data": "type", "width": "5%", "targets": 1},
                     { "data": "rule_mask", "width": "12%", "targets": 2},
                     { "data": "wordlist", "width": "12%", "targets": 3},
                     { "data": "status", "width": "5%", "targets": 4},
                     { "data": "remaining", "width": "30%", "targets": 5},
                     { "data": "progress", "width": "5%", "targets": 6},
                     { "data": "speed", "width": "15%", "targets": 7},
                     { "data": "buttons", "width": "6%", "targets": 8},
                  ],
             });
         }

         function format ( table_id ) {
             // `d` is the original data object for the row
             return '<table id="'+table_id+'" class="display table table-striped table-condensed" border="0" style="padding-left:50px; width:100%;">'+
             '<thead>'+
             '<th>Node</th>'+
             '<th>Type</th>'+
             '<th>Rule/Mask</th>'+
             '<th>Wordlist</th>'+
             '<th>Status</th>'+
             '<th>Remaining time</th>'+
             '<th>Progress</th>'+
             '<th>Speed</th>'+
             '<th></th>'+
             '</thead>'+
             '</table>';
         }

         var opened_array = [];

         function reload_hashfile_table()
         {
            hashfile_table.ajax.reload(function ()
            {

               // reopen rows
               for (var i = 0; i < opened_array.length; i++) {

                  var tr = $('tr#' + opened_array[i]);
                  var tdi = tr.find("i.fa");
                  var row = hashfile_table.row("#" + opened_array[i]);

                  var virtual_task_id = row.data()["DT_RowId"];
                  var subtable_id = "subtable-"+virtual_task_id;

                  row.child(format(subtable_id)).show();
                  tr.addClass('shown');
                  tdi.first().removeClass('fa-plus-square');
                  tdi.first().addClass('fa-minus-square');

                  sub_DataTable(virtual_task_id, subtable_id);
               };

            });
         }

        function session_action(session_name, action){
           if(action == "remove")
           {
              res = window.confirm("Are you sure?");

              if(res == false)
              {
                 return
              }
           }

           $.ajax({
               'url' : '{% url "API:api_session_action" %}',
               'type' : 'GET',
               'data' : {
                  'session_name' : session_name,
                  'action' : action
               },
               'success' : function(data) {
                  reload_hashfile_table();
               }
           });
        }

        function hashfile_action(hashfile_id, action){
           if(action == "remove")
           {
              res = window.confirm("Are you sure?");

              if(res == false)
              {
                 return
              }
           }

           $.ajax({
               'url' : '{% url "API:api_hashfile_action" %}',
               'type' : 'GET',
               'data' : {
                  'hashfile_id' : hashfile_id,
                  'action' : action
               },
               'success' : function(data) {
                  reload_hashfile_table();
               }
           });
        }

        function update_messages() {
           $.getJSON('{% url "API:api_get_messages" %}', function (data) {
              $('#messages').empty();
              for (i = 0; i < data['messages'].length; i++) {
                 $('#messages').append('<div class="alert alert-info" style="margin-bottom: 5px;">' + data['messages'][i]['message'] + '</div>');
              }
           });
        }

        function update_all() {
            update_messages();
            reload_hashfile_table();
        }

        $(document).ready( function () {
                        
            // Add event listener for opening and closing details
            $('#hashfile_table tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var tdi = tr.find("i.fa");
                var row = hashfile_table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    tdi.first().removeClass('fa-minus-square');
                    tdi.first().addClass('fa-plus-square');

                    var index = opened_array.indexOf(tr.attr('id'));
                    if (index > -1) {
                        opened_array.splice(index, 1);
                    }
                }
                else {
                    // Open this row
                    var virtual_task_id = row.data()["DT_RowId"];
                    var subtable_id = "subtable-"+virtual_task_id;
                    // Open this row
                    row.child(format(subtable_id)).show();
                    tr.addClass('shown');
                    tdi.first().removeClass('fa-plus-square');
                    tdi.first().addClass('fa-minus-square');

                    var index = opened_array.indexOf(tr.attr('id'));
                    if (index == -1) {
                        opened_array.push(tr.attr('id'));
                    }

                    sub_DataTable(virtual_task_id, subtable_id);
                }
            });

            document.getElementById("update_hashfiles").addEventListener('click',update_all);

            setInterval(update_all, 60000); // this will reload page after every 60 seconds;
            update_messages();
      });

   </script>

   <script type="text/javascript">
      $(function() {
          $('.confirm').click(function() {
              return window.confirm("Are you sure?");
          });
      });
   </script>


   <!-- Modal -->
   <div class="modal fade" id="action_new" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">New session</h4>
         </div>

            <div class="modal-body">
               <!-- Nav tabs -->
               <ul class="nav nav-tabs" role="tablist">
                  <li class="active" ><a href="#dictionary_bruteforce" aria-controls="rule_bruteforce" role="tab" data-toggle="tab">Dictionary-based bruteforce</a></li>
                  <li><a href="#mask_bruteforce" aria-controls="mask_bruteforce" role="tab" data-toggle="tab">Mask-based bruteforce</a></li>
               </ul>

               <!-- Tab panes -->
               <div class="tab-content">
                  <div role="tabpanel" class="tab-pane active" id="dictionary_bruteforce">

                     <form action="{% url "Hashcat:new_session" %}" enctype="multipart/form-data" method="post">
                     {% csrf_token %}
                     <input type="hidden" id="crack_type" name="crack_type" value="dictionary">

                     <input type="hidden" id="hashfile_id" name="hashfile_id">

                     <label for="node">Node</label>
                     </br>
                     <select name="node" id="node">
                        {% for node in node_list %}
                        <option value="{{ node.name }}">{{ node.name }}</option>
                        {% endfor %}
                     </select>
                     </br>
                     </br>

                     <label for="rule">Rule</label>
                     </br>
                     <select name="rule" id="rule">
                        {% for rule in rule_list %}
                        <option value="{{ rule.name }}">{{ rule.name }}</option>
                        {% endfor %}
                     </select>
                     </br>
                     </br>

                     <label for="wordlist">Wordlist</label>
                     </br>
                     <select name="wordlist" id="wordlist">
                        {% for wordlist in wordlist_list %}
                        <option value="{{ wordlist.name }}">{{ wordlist.name }}</option>
                        {% endfor %}
                     </select>
                     </br>
                     </br>

                     <label for="wordlist">Custom words</label>
                     </br>
                     <textarea name="custom_words" id="custom_words" rows="3" cols="60"></textarea>
                     </br>
                     </br>

                     <label for="device_type">Device Type</label>
                     </br>
                     <select name="device_type" id="device_type">
                        <option value="2">GPU</option>
                        <option value="1">CPU</option>
                        <option value="3">FPGA, DSP, Co-Processor</option>
                     </select>
                     </br>
                     </br>

                     <label for="brain_mode">Brain</label>
                     </br>
                     <select name="brain_mode" id="brain_mode">
                        <option value="0">Disabled</option>
                        <option value="1">Send hashed passwords</option>
                        <option value="2">Send attack positions</option>
                        <option value="3">Send hashed passwords and attack positions</option>
                     </select>
                     </br>
                     </br>

                     <label for="device_type">End Date (Optional)</label>
                     </br>
                     <div class='input-group date' id='datetimepicker_dict'>
                        <input type='text' class="form-control" name="end_datetime" />
                        <span class="input-group-addon">
                           <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                     </div>
                     </br>

                     <input type="checkbox" name="debug" value="debug" id="debug"><label for="debug">  Save hashcat output file for debug purposes</label>
                     </br>
                     </br>

                     <button type="submit" class="btn btn-primary" >Create session</button>
                     </form>
                  </div>

                  <script type="text/javascript">
                     $(function () {
                        $('#datetimepicker_dict').datetimepicker();
                     });
                  </script>


                  <div role="tabpanel" class="tab-pane" id="mask_bruteforce">

                     <form action="{% url "Hashcat:new_session" %}" enctype="multipart/form-data" method="post">
                     {% csrf_token %}
                     <input type="hidden" id="crack_type" name="crack_type" value="mask">

                     <input type="hidden" id="hashfile_id" name="hashfile_id">

                     <label for="node">Node</label>
                     </br>
                     <select name="node" id="node">
                        {% for node in node_list %}
                        <option value="{{ node.name }}">{{ node.name }}</option>
                        {% endfor %}
                     </select>
                     </br>
                     </br>


                     <label for="mask">Mask</label>
                     </br>
                     <select name="mask" id="mask">
                        {% for mask in mask_list %}
                        <option value="{{ mask.name }}">{{ mask.name }}</option>
                        {% endfor %}
                     </select>
                     </br>
                     </br>

                     <label for="mask">Custom masks</label>
                     </br>
                     <textarea name="custom_words" id="custom_words" rows="3" cols="60"></textarea>
                     </br>
                     </br>

                     <label for="device_type">Device Type</label>
                     </br>
                     <select name="device_type" id="device_type">
                        <option value="2">GPU</option>
                        <option value="1">CPU</option>
                        <option value="3">FPGA, DSP, Co-Processor</option>
                     </select>
                     </br>
                     </br>

                     <label for="brain_mode">Brain</label>
                     </br>
                     <select name="brain_mode" id="brain_mode">
                        <option value="0">Disabled</option>
                        <option value="1">Send hashed passwords</option>
                        <option value="2">Send attack positions</option>
                        <option value="3">Send hashed passwords and attack positions</option>
                     </select>
                     </br>
                     </br>

                     <label for="device_type">End Date (Optional)</label>
                     </br>
                     <div class='input-group date' id='datetimepicker_btf'>
                        <input type='text' class="form-control" name="end_datetime" />
                        <span class="input-group-addon">
                           <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                     </div>
                     </br>

                     <input type="checkbox" name="debug" value="debug" id="debug"><label for="debug">  Save hashcat output file for debug purposes</label>
                     </br>
                     </br>

                     <button type="submit" class="btn btn-primary" >Create session</button>
                     </form>
                  </div>

                  <script type="text/javascript">
                     $(function () {
                        $('#datetimepicker_btf').datetimepicker();
                     });
                  </script>

               </div>
            </div>

            <div class="modal-footer">
            </div>
       </div>
     </div>
   </div>

   <script type="text/javascript">
      $('#action_new').on('show.bs.modal', function (event) {
         var button = $(event.relatedTarget) // Button that triggered the modal
         var hashfile_name = button.data('hashfile') // Extract info from data-* attributes
         var hashfile_id = button.data('hashfile_id') // Extract info from data-* attributes
         // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
         // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
         var modal = $(this)
         modal.find('.modal-title').text(hashfile_name + ': New session')
         modal.find('input#hashfile_id').val(hashfile_id)
      })
   </script>

   <!-- Modal -->
   <div class="modal fade" id="action_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Add hashfile</h4>
         </div>
            <div class="modal-body">
                     <form enctype="multipart/form-data" method="post">
                     {% csrf_token %}
                     <input type="hidden" id="action" name="action" value="add">

                     <label for="name">Name</label>
                     <input type="text" class="form-control" id="name" name="name">
                     </br>

                     <div>

                        <div style="float: right;">
                           <p><small>Unsure about which hash type to choose ? <a href="https://hashcat.net/wiki/doku.php?id=example_hashes" target="_blank">check this</a></small></p>
                        </div>
                        <label for="hash_type">Hash type</label>
                        </br>
                        <select name="hash_type" id="hash_type">
                           {% for hash_type in hash_type_list %}
                           <option value="{{ hash_type.id }}">{{ hash_type.name }}</option>
                           {% endfor %}
                        </select>
                     </div>
                     </br>

                     <label for="hashes">Hashes</label>
                     </br>
                     <textarea name="hashes" id="hashes" rows="10" cols="60"></textarea>

                     <input type="file" name="hashfile" size="40">

                     <input type="checkbox" name="username_included" value="username_included">Username included (format username:hash)
                     <br>
                     <br>
                     <button type="submit" class="btn btn-primary" >Add new hashfile</button>
                     </form>
         </div>

         <div class="modal-footer">
         </div>
       </div>
     </div>
   </div>


{% endblock %}