143 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			143 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>KTVManager</title>
 | |
|     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 | |
|     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
 | |
|     <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
 | |
|     <style>
 | |
|         .password-blur {
 | |
|             filter: blur(4px);
 | |
|             transition: filter 0.3s ease;
 | |
|             cursor: pointer;
 | |
|         }
 | |
|     </style>
 | |
| </head>
 | |
| <body>
 | |
|     <!-- Navbar -->
 | |
|     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 | |
|         <a class="navbar-brand" href="/">KTVManager</a>
 | |
|         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 | |
|             <span class="navbar-toggler-icon"></span>
 | |
|         </button>
 | |
|         <div class="collapse navbar-collapse" id="navbarNav">
 | |
|             <ul class="navbar-nav ml-auto">
 | |
|                 <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
 | |
|                 <li class="nav-item"><a class="nav-link" href="/accounts">Accounts</a></li>
 | |
|                 <li class="nav-item"><a class="nav-link" href="/urls">URLs</a></li>
 | |
|             </ul>
 | |
|         </div>
 | |
|     </nav>
 | |
| 
 | |
|     <!-- Main Content -->
 | |
|     <div class="container mt-5">
 | |
|         <h2>{{ username }}'s Accounts</h2>
 | |
|         <div class="table-responsive">
 | |
|             <table class="table table-striped" id="accountsTable">
 | |
|                 <thead>
 | |
|                     <tr>
 | |
|                         <th>#</th>
 | |
|                         <th>Username</th>
 | |
|                         <th>Stream</th>
 | |
|                         <th>Stream URL</th>
 | |
|                         <th>Expiry Date</th>
 | |
|                         <th>Password</th>
 | |
|                         <th>Actions</th>
 | |
|                     </tr>
 | |
|                 </thead>
 | |
|                 <tbody>
 | |
|                     {% for account in user_accounts %}
 | |
|                     <tr>
 | |
|                         <td>{{ loop.index }}</td>
 | |
|                         <td>{{ account.username }}</td>
 | |
|                         <td>{{ account.stream }}</td>
 | |
|                         <td><a href="{{ account.streamURL }}" target="_blank">{{ account.streamURL }}</a></td>
 | |
|                         <td>{{ account.expiaryDate_rendered }}</td>
 | |
|                         <td class="password-cell password-blur" data-password="{{ account.password }}">********</td>
 | |
|                         <td>
 | |
|                             <button class="btn btn-danger delete-account-btn" data-stream="{{ account.stream }}" data-username="{{ account.username }}">
 | |
|                                 Delete
 | |
|                             </button>
 | |
|                         </td>
 | |
|                     </tr>
 | |
|                     {% endfor %}
 | |
|                 </tbody>
 | |
|             </table>
 | |
|         </div>
 | |
|     </div>
 | |
| 
 | |
|     <footer class="bg-dark text-white text-center py-3 mt-5">
 | |
|         <p>© 2024 KTVManager | All rights reserved</p>
 | |
|     </footer>
 | |
| 
 | |
|     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 | |
|     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
 | |
|     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 | |
|     <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
 | |
|     <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
 | |
|     <script>
 | |
|         const authValue = "{{ auth | safe }}";  // Passing `auth` safely
 | |
|         $(document).ready(function() {
 | |
|             $.fn.dataTable.ext.type.order['date-eu'] = function(data) {
 | |
|                 const parts = data.split('/');
 | |
|                 return new Date(parts[2], parts[1] - 1, parts[0]).getTime();
 | |
|             };
 | |
| 
 | |
|             $('#accountsTable').DataTable({
 | |
|                 "searching": true,
 | |
|                 "ordering": true,
 | |
|                 "responsive": true,
 | |
|                 "columnDefs": [
 | |
|                     { "type": "date-eu", "targets": 4 }
 | |
|                 ]
 | |
|             });
 | |
| 
 | |
|             $('#accountsTable tbody').on('click', '.password-cell', function() {
 | |
|                 const $cell = $(this);
 | |
|                 $cell.text($cell.data('password'));
 | |
|                 $cell.removeClass('password-blur');
 | |
|                 
 | |
|                 $(document).on('click.password', function(event) {
 | |
|                     if (!$(event.target).closest('.password-cell').length) {
 | |
|                         $cell.text('********').addClass('password-blur');
 | |
|                         $(document).off('click.password');
 | |
|                     }
 | |
|                 });
 | |
|             });
 | |
| 
 | |
|             // Delete functionality
 | |
|             $('.delete-account-btn').click(async function() {
 | |
|                 const stream = $(this).data('stream');
 | |
|                 const username = $(this).data('username');
 | |
|                 
 | |
|                 if (confirm(`Are you sure you want to delete account for stream: ${stream}, username: ${username}?`)) {
 | |
|                     try {
 | |
|                         const response = await fetch('http://vps.k-world.me.uk:3001/deleteAccount', {
 | |
|                             method: 'POST',
 | |
|                             headers: {
 | |
|                                 'Content-Type': 'application/json',
 | |
|                                 'Authorization': 'Basic ' +  authValue  // Adjust auth here as needed
 | |
|                             },
 | |
|                             body: JSON.stringify({ stream, username })
 | |
|                         });
 | |
| 
 | |
|                         const result = await response.json();
 | |
|                         if (response.ok) {
 | |
|                             alert(result.message);
 | |
|                             $(this).closest('tr').remove();
 | |
|                         } else {
 | |
|                             alert(result.error || 'Failed to delete account');
 | |
|                         }
 | |
|                     } catch (error) {
 | |
|                         console.error('Error deleting account:', error);
 | |
|                         alert('Error occurred while deleting account');
 | |
|                     }
 | |
|                 }
 | |
|             });
 | |
|         });
 | |
|     </script>
 | |
| </body>
 | |
| </html>
 | 
