user_accounts.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>KTVManager</title>
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
  9. <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
  10. <style>
  11. .password-blur {
  12. filter: blur(4px);
  13. transition: filter 0.3s ease;
  14. cursor: pointer;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <!-- Navbar -->
  20. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  21. <a class="navbar-brand" href="/">KTVManager</a>
  22. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  23. <span class="navbar-toggler-icon"></span>
  24. </button>
  25. <div class="collapse navbar-collapse" id="navbarNav">
  26. <ul class="navbar-nav ml-auto">
  27. <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
  28. <li class="nav-item"><a class="nav-link" href="/accounts">Accounts</a></li>
  29. <li class="nav-item"><a class="nav-link" href="/urls">URLs</a></li>
  30. </ul>
  31. </div>
  32. </nav>
  33. <!-- Main Content -->
  34. <div class="container mt-5">
  35. <h2>{{ username }}'s Accounts</h2>
  36. <div class="table-responsive">
  37. <table class="table table-striped" id="accountsTable">
  38. <thead>
  39. <tr>
  40. <th>#</th>
  41. <th>Username</th>
  42. <th>Stream</th>
  43. <th>Stream URL</th>
  44. <th>Expiry Date</th>
  45. <th>Password</th>
  46. <th>Actions</th>
  47. </tr>
  48. </thead>
  49. <tbody>
  50. {% for account in user_accounts %}
  51. <tr>
  52. <td>{{ loop.index }}</td>
  53. <td>{{ account.username }}</td>
  54. <td>{{ account.stream }}</td>
  55. <td><a href="{{ account.streamURL }}" target="_blank">{{ account.streamURL }}</a></td>
  56. <td>{{ account.expiaryDate_rendered }}</td>
  57. <td class="password-cell password-blur" data-password="{{ account.password }}">********</td>
  58. <td>
  59. <button class="btn btn-danger delete-account-btn" data-stream="{{ account.stream }}" data-username="{{ account.username }}">
  60. Delete
  61. </button>
  62. </td>
  63. </tr>
  64. {% endfor %}
  65. </tbody>
  66. </table>
  67. </div>
  68. </div>
  69. <footer class="bg-dark text-white text-center py-3 mt-5">
  70. <p>&copy; 2024 KTVManager | All rights reserved</p>
  71. </footer>
  72. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  73. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
  74. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  75. <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
  76. <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
  77. <script>
  78. const authValue = "{{ auth | safe }}"; // Passing `auth` safely
  79. $(document).ready(function() {
  80. $.fn.dataTable.ext.type.order['date-eu'] = function(data) {
  81. const parts = data.split('/');
  82. return new Date(parts[2], parts[1] - 1, parts[0]).getTime();
  83. };
  84. $('#accountsTable').DataTable({
  85. "searching": true,
  86. "ordering": true,
  87. "responsive": true,
  88. "columnDefs": [
  89. { "type": "date-eu", "targets": 4 }
  90. ]
  91. });
  92. $('#accountsTable tbody').on('click', '.password-cell', function() {
  93. const $cell = $(this);
  94. $cell.text($cell.data('password'));
  95. $cell.removeClass('password-blur');
  96. $(document).on('click.password', function(event) {
  97. if (!$(event.target).closest('.password-cell').length) {
  98. $cell.text('********').addClass('password-blur');
  99. $(document).off('click.password');
  100. }
  101. });
  102. });
  103. // Delete functionality
  104. $('.delete-account-btn').click(async function() {
  105. const stream = $(this).data('stream');
  106. const username = $(this).data('username');
  107. if (confirm(`Are you sure you want to delete account for stream: ${stream}, username: ${username}?`)) {
  108. try {
  109. const response = await fetch('http://vps.k-world.me.uk:3001/deleteAccount', {
  110. method: 'POST',
  111. headers: {
  112. 'Content-Type': 'application/json',
  113. 'Authorization': 'Basic ' + authValue // Adjust auth here as needed
  114. },
  115. body: JSON.stringify({ stream, username })
  116. });
  117. const result = await response.json();
  118. if (response.ok) {
  119. alert(result.message);
  120. $(this).closest('tr').remove();
  121. } else {
  122. alert(result.error || 'Failed to delete account');
  123. }
  124. } catch (error) {
  125. console.error('Error deleting account:', error);
  126. alert('Error occurred while deleting account');
  127. }
  128. }
  129. });
  130. });
  131. </script>
  132. </body>
  133. </html>