647 lines
29 KiB
HTML
647 lines
29 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Social Accounts - Account Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Social Accounts</h4>
|
|
<h6>Manage your linked social media and external accounts</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'accounts:social_account_create' %}" class="btn btn-added">
|
|
<i class="fas fa-plus me-1"></i>Link Account
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Account Statistics -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-link"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.total_accounts|default:4 }}</h5>
|
|
<h6>Linked Accounts</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-check-circle"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.active_accounts|default:3 }}</h5>
|
|
<h6>Active Accounts</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-sign-in-alt"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.login_enabled|default:2 }}</h5>
|
|
<h6>Login Enabled</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-calendar"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.last_used_days|default:2 }}</h5>
|
|
<h6>Days Since Last Use</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Available Providers -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-plus-circle me-2"></i>
|
|
Available Social Providers
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-2 col-md-3 col-sm-4 col-6">
|
|
<div class="provider-card" data-provider="google">
|
|
<div class="provider-icon">
|
|
<i class="fab fa-google fa-2x text-danger"></i>
|
|
</div>
|
|
<h6>Google</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="linkProvider('google')">
|
|
<i class="fas fa-link me-1"></i>Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-3 col-sm-4 col-6">
|
|
<div class="provider-card" data-provider="microsoft">
|
|
<div class="provider-icon">
|
|
<i class="fab fa-microsoft fa-2x text-primary"></i>
|
|
</div>
|
|
<h6>Microsoft</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="linkProvider('microsoft')">
|
|
<i class="fas fa-link me-1"></i>Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-3 col-sm-4 col-6">
|
|
<div class="provider-card" data-provider="github">
|
|
<div class="provider-icon">
|
|
<i class="fab fa-github fa-2x text-dark"></i>
|
|
</div>
|
|
<h6>GitHub</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="linkProvider('github')">
|
|
<i class="fas fa-link me-1"></i>Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-3 col-sm-4 col-6">
|
|
<div class="provider-card" data-provider="linkedin">
|
|
<div class="provider-icon">
|
|
<i class="fab fa-linkedin fa-2x text-info"></i>
|
|
</div>
|
|
<h6>LinkedIn</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="linkProvider('linkedin')">
|
|
<i class="fas fa-link me-1"></i>Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-3 col-sm-4 col-6">
|
|
<div class="provider-card" data-provider="facebook">
|
|
<div class="provider-icon">
|
|
<i class="fab fa-facebook fa-2x text-primary"></i>
|
|
</div>
|
|
<h6>Facebook</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="linkProvider('facebook')">
|
|
<i class="fas fa-link me-1"></i>Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-3 col-sm-4 col-6">
|
|
<div class="provider-card" data-provider="twitter">
|
|
<div class="provider-icon">
|
|
<i class="fab fa-twitter fa-2x text-info"></i>
|
|
</div>
|
|
<h6>Twitter</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="linkProvider('twitter')">
|
|
<i class="fas fa-link me-1"></i>Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linked Accounts -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-top">
|
|
<div class="search-set">
|
|
<div class="search-input">
|
|
<a class="btn btn-searchset">
|
|
<i class="fas fa-search"></i>
|
|
</a>
|
|
<input type="text" id="searchInput" placeholder="Search linked accounts...">
|
|
</div>
|
|
</div>
|
|
<div class="wordset">
|
|
<ul>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Export" onclick="exportAccounts()">
|
|
<i class="fas fa-download"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printAccounts()">
|
|
<i class="fas fa-print"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linked Accounts Table -->
|
|
<div class="table-responsive">
|
|
<table class="table" id="accountsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Provider</th>
|
|
<th>Account</th>
|
|
<th>Status</th>
|
|
<th>Permissions</th>
|
|
<th>Linked Date</th>
|
|
<th>Last Used</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Sample Data -->
|
|
<tr>
|
|
<td>
|
|
<div class="provider-info">
|
|
<i class="fab fa-google fa-2x text-danger me-3"></i>
|
|
<div>
|
|
<h6 class="mb-0">Google</h6>
|
|
<small class="text-muted">OAuth 2.0</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="account-info">
|
|
<strong>john.smith@gmail.com</strong>
|
|
<small class="d-block text-muted">John Smith</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightgreen">
|
|
<i class="fas fa-check-circle me-1"></i>Active
|
|
</span>
|
|
<div class="mt-1">
|
|
<span class="badge bg-success">Login Enabled</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="permissions-list">
|
|
<span class="badge bg-info me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Email</span>
|
|
<small class="d-block text-muted mt-1">2 permissions</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>Jan 15, 2024</strong>
|
|
<small class="d-block text-muted">3 months ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>Today 09:30 AM</strong>
|
|
<small class="d-block text-muted">2 hours ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:social_account_detail' 1 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Manage Permissions" onclick="managePermissions(1)">
|
|
<i class="fas fa-cog"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Test Connection" onclick="testConnection(1)">
|
|
<i class="fas fa-plug"></i>
|
|
</a>
|
|
<a class="confirm-text" href="{% url 'accounts:social_account_delete' 1 %}" data-bs-toggle="tooltip" title="Unlink Account">
|
|
<i class="fas fa-unlink"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="provider-info">
|
|
<i class="fab fa-microsoft fa-2x text-primary me-3"></i>
|
|
<div>
|
|
<h6 class="mb-0">Microsoft</h6>
|
|
<small class="text-muted">OAuth 2.0</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="account-info">
|
|
<strong>john.smith@company.com</strong>
|
|
<small class="d-block text-muted">John Smith</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightgreen">
|
|
<i class="fas fa-check-circle me-1"></i>Active
|
|
</span>
|
|
<div class="mt-1">
|
|
<span class="badge bg-secondary">Login Disabled</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="permissions-list">
|
|
<span class="badge bg-info me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Email</span>
|
|
<span class="badge bg-info me-1">Calendar</span>
|
|
<small class="d-block text-muted mt-1">3 permissions</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>Feb 20, 2024</strong>
|
|
<small class="d-block text-muted">2 months ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>Apr 10, 2024</strong>
|
|
<small class="d-block text-muted">5 days ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:social_account_detail' 2 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Manage Permissions" onclick="managePermissions(2)">
|
|
<i class="fas fa-cog"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Test Connection" onclick="testConnection(2)">
|
|
<i class="fas fa-plug"></i>
|
|
</a>
|
|
<a class="confirm-text" href="{% url 'accounts:social_account_delete' 2 %}" data-bs-toggle="tooltip" title="Unlink Account">
|
|
<i class="fas fa-unlink"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="provider-info">
|
|
<i class="fab fa-github fa-2x text-dark me-3"></i>
|
|
<div>
|
|
<h6 class="mb-0">GitHub</h6>
|
|
<small class="text-muted">OAuth 2.0</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="account-info">
|
|
<strong>johnsmith</strong>
|
|
<small class="d-block text-muted">John Smith</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightyellow">
|
|
<i class="fas fa-exclamation-triangle me-1"></i>Limited
|
|
</span>
|
|
<div class="mt-1">
|
|
<span class="badge bg-warning">Token Expired</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="permissions-list">
|
|
<span class="badge bg-info me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Repositories</span>
|
|
<small class="d-block text-muted mt-1">2 permissions</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>Mar 05, 2024</strong>
|
|
<small class="d-block text-muted">1 month ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<strong>Mar 20, 2024</strong>
|
|
<small class="d-block text-muted">3 weeks ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:social_account_detail' 3 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Refresh Token" onclick="refreshToken(3)">
|
|
<i class="fas fa-sync"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Test Connection" onclick="testConnection(3)">
|
|
<i class="fas fa-plug"></i>
|
|
</a>
|
|
<a class="confirm-text" href="{% url 'accounts:social_account_delete' 3 %}" data-bs-toggle="tooltip" title="Unlink Account">
|
|
<i class="fas fa-unlink"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="emptyState" class="text-center py-5" style="display: none;">
|
|
<i class="fas fa-link fa-3x text-muted mb-3"></i>
|
|
<h5>No Social Accounts Linked</h5>
|
|
<p class="text-muted">Link your social media accounts for easier login and enhanced features.</p>
|
|
<a href="{% url 'accounts:social_account_create' %}" class="btn btn-primary">
|
|
<i class="fas fa-plus me-1"></i>Link Your First Account
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Information -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-shield-alt me-2"></i>
|
|
Security & Privacy Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success">
|
|
<i class="fas fa-check-circle me-2"></i>Benefits
|
|
</h6>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-sign-in-alt text-primary me-2"></i>
|
|
Quick and secure login
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-sync text-info me-2"></i>
|
|
Automatic profile updates
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-shield-alt text-success me-2"></i>
|
|
Enhanced security with OAuth
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>Privacy Notes
|
|
</h6>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-eye text-muted me-2"></i>
|
|
Only requested permissions are accessed
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-times-circle text-danger me-2"></i>
|
|
We never post on your behalf
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-user-secret text-secondary me-2"></i>
|
|
Your data remains private
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize search functionality
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('keyup', function() {
|
|
filterAccounts();
|
|
});
|
|
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// Check if table is empty
|
|
checkEmptyState();
|
|
});
|
|
|
|
function filterAccounts() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
const table = document.getElementById('accountsTable');
|
|
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
|
let visibleRows = 0;
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
const provider = row.cells[0].textContent.toLowerCase();
|
|
const account = row.cells[1].textContent.toLowerCase();
|
|
|
|
if (provider.includes(searchTerm) || account.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
visibleRows++;
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Show/hide empty state
|
|
const emptyState = document.getElementById('emptyState');
|
|
const tableContainer = table.closest('.table-responsive');
|
|
|
|
if (visibleRows === 0) {
|
|
tableContainer.style.display = 'none';
|
|
emptyState.style.display = 'block';
|
|
} else {
|
|
tableContainer.style.display = 'block';
|
|
emptyState.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function checkEmptyState() {
|
|
const table = document.getElementById('accountsTable');
|
|
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
|
|
|
if (rows.length === 0) {
|
|
const emptyState = document.getElementById('emptyState');
|
|
const tableContainer = table.closest('.table-responsive');
|
|
tableContainer.style.display = 'none';
|
|
emptyState.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function linkProvider(provider) {
|
|
// Redirect to OAuth flow
|
|
window.location.href = `/auth/social/login/${provider}/`;
|
|
}
|
|
|
|
function managePermissions(accountId) {
|
|
alert(`Managing permissions for account ${accountId}. This would open a permissions management dialog.`);
|
|
}
|
|
|
|
function testConnection(accountId) {
|
|
const button = event.target.closest('a');
|
|
const originalIcon = button.innerHTML;
|
|
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
setTimeout(() => {
|
|
alert('Connection test successful!');
|
|
button.innerHTML = originalIcon;
|
|
}, 2000);
|
|
}
|
|
|
|
function refreshToken(accountId) {
|
|
const button = event.target.closest('a');
|
|
const originalIcon = button.innerHTML;
|
|
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
setTimeout(() => {
|
|
alert('Token refreshed successfully!');
|
|
button.innerHTML = originalIcon;
|
|
// Update the status in the table
|
|
location.reload();
|
|
}, 2000);
|
|
}
|
|
|
|
function exportAccounts() {
|
|
console.log('Exporting social accounts...');
|
|
alert('Export functionality would be implemented here.');
|
|
}
|
|
|
|
function printAccounts() {
|
|
console.log('Printing social accounts...');
|
|
window.print();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.provider-card {
|
|
text-align: center;
|
|
padding: 20px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.provider-card:hover {
|
|
border-color: #007bff;
|
|
box-shadow: 0 4px 8px rgba(0,123,255,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.provider-icon {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.provider-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.account-info strong {
|
|
color: #495057;
|
|
}
|
|
|
|
.permissions-list .badge {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dash-widget {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dash-widget .dash-widgetimg span {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.dash-widget .dash-widgetcontent h5 {
|
|
color: white;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.dash-widget .dash-widgetcontent h6 {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.provider-card {
|
|
margin-bottom: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.provider-info {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.provider-info i {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.permissions-list {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|