501 lines
25 KiB
HTML
501 lines
25 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Remove Social Account - 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>
|
|
<a href="{% url 'accounts:social_account_detail' object.pk %}" class="me-3">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
Remove Social Account
|
|
</h4>
|
|
<h6>Confirm removal of linked social media account</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 col-md-10">
|
|
<!-- Warning Alert -->
|
|
<div class="alert alert-warning" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-exclamation-triangle fa-2x me-3"></i>
|
|
<div>
|
|
<h5 class="alert-heading mb-1">Account Removal Warning</h5>
|
|
<p class="mb-0">You are about to remove a linked social account. This will affect your login options and data synchronization.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Information Card -->
|
|
<div class="card">
|
|
<div class="card-header bg-warning text-dark">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-unlink me-2"></i>
|
|
Account Removal Confirmation
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Account Details -->
|
|
<div class="account-summary mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-2 text-center">
|
|
<div class="provider-icon-large">
|
|
{% if object.provider == 'google' %}
|
|
<i class="fab fa-google fa-4x text-danger"></i>
|
|
{% elif object.provider == 'microsoft' %}
|
|
<i class="fab fa-microsoft fa-4x text-primary"></i>
|
|
{% elif object.provider == 'github' %}
|
|
<i class="fab fa-github fa-4x text-dark"></i>
|
|
{% elif object.provider == 'linkedin' %}
|
|
<i class="fab fa-linkedin fa-4x text-info"></i>
|
|
{% elif object.provider == 'facebook' %}
|
|
<i class="fab fa-facebook fa-4x text-primary"></i>
|
|
{% elif object.provider == 'twitter' %}
|
|
<i class="fab fa-twitter fa-4x text-info"></i>
|
|
{% else %}
|
|
<i class="fas fa-link fa-4x text-secondary"></i>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-10">
|
|
<h5 class="mb-2">{{ object.provider|default:"Google"|title }} Account</h5>
|
|
<div class="account-details">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<small class="text-muted">Account Email:</small>
|
|
<div class="mb-2">
|
|
<strong>{{ object.email|default:"john.smith@gmail.com" }}</strong>
|
|
{% if object.email_verified %}
|
|
<i class="fas fa-check-circle text-success ms-2" title="Verified"></i>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<small class="text-muted">Display Name:</small>
|
|
<div class="mb-2">
|
|
<strong>{{ object.display_name|default:"John Smith" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<small class="text-muted">Linked Date:</small>
|
|
<div>{{ object.date_joined|default:"Jan 15, 2024"|date:"M d, Y" }}</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<small class="text-muted">Last Used:</small>
|
|
<div>{{ object.last_login|default:"Today 09:30 AM"|date:"M d, Y g:i A" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Impact Assessment -->
|
|
<div class="impact-assessment mb-4">
|
|
<h6 class="text-warning mb-3">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
What Will Happen When You Remove This Account
|
|
</h6>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="impact-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-sign-in-alt text-danger me-3 mt-1"></i>
|
|
<div>
|
|
<strong>Login Access</strong>
|
|
<p class="text-muted small mb-0">You will no longer be able to log in using this {{ object.provider|title }} account.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="impact-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-sync text-warning me-3 mt-1"></i>
|
|
<div>
|
|
<strong>Data Synchronization</strong>
|
|
<p class="text-muted small mb-0">Automatic profile updates from this account will stop.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="impact-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-key text-info me-3 mt-1"></i>
|
|
<div>
|
|
<strong>Permissions Revoked</strong>
|
|
<p class="text-muted small mb-0">All granted permissions will be revoked on the provider side.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="impact-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-database text-secondary me-3 mt-1"></i>
|
|
<div>
|
|
<strong>Data Retention</strong>
|
|
<p class="text-muted small mb-0">Your existing profile data will be preserved.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="impact-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-history text-info me-3 mt-1"></i>
|
|
<div>
|
|
<strong>Activity History</strong>
|
|
<p class="text-muted small mb-0">Login history and activity logs will be preserved for audit purposes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="impact-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-undo text-success me-3 mt-1"></i>
|
|
<div>
|
|
<strong>Re-linking</strong>
|
|
<p class="text-muted small mb-0">You can re-link this account type later if needed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Usage Information -->
|
|
<div class="usage-info mb-4">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-chart-bar me-2"></i>
|
|
Current Account Usage
|
|
</h6>
|
|
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="usage-stat">
|
|
<div class="stat-number text-primary">{{ object.login_count|default:127 }}</div>
|
|
<div class="stat-label">Total Logins</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="usage-stat">
|
|
<div class="stat-number text-success">{{ object.sync_count|default:45 }}</div>
|
|
<div class="stat-label">Profile Syncs</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="usage-stat">
|
|
<div class="stat-number text-info">{{ object.permissions_count|default:3 }}</div>
|
|
<div class="stat-label">Active Permissions</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="usage-stat">
|
|
<div class="stat-number text-warning">{{ object.days_since_last_use|default:2 }}</div>
|
|
<div class="stat-label">Days Since Last Use</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alternative Login Methods Check -->
|
|
<div class="login-methods-check mb-4">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-shield-alt me-2"></i>
|
|
Account Security Check
|
|
</h6>
|
|
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-info-circle me-3"></i>
|
|
<div>
|
|
<strong>Alternative Login Methods:</strong>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success me-2">
|
|
<i class="fas fa-envelope me-1"></i>Email/Password
|
|
</span>
|
|
{% if has_other_social_accounts %}
|
|
<span class="badge bg-primary me-2">
|
|
<i class="fas fa-link me-1"></i>{{ other_social_accounts_count }} Other Social Account(s)
|
|
</span>
|
|
{% endif %}
|
|
{% if has_2fa %}
|
|
<span class="badge bg-warning">
|
|
<i class="fas fa-shield-alt me-1"></i>2FA Enabled
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if not has_other_login_methods %}
|
|
<div class="text-danger small mt-2">
|
|
<i class="fas fa-exclamation-triangle me-1"></i>
|
|
Warning: This is your only login method. Ensure you have password access before removing.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Form -->
|
|
<form method="post" id="deleteForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- Confirmation Checkbox -->
|
|
<div class="confirmation-section mb-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="confirm_removal" name="confirm_removal" required>
|
|
<label class="form-check-label" for="confirm_removal">
|
|
<strong>I understand the consequences and want to remove this social account</strong>
|
|
</label>
|
|
</div>
|
|
|
|
{% if not has_other_login_methods %}
|
|
<div class="form-check mt-3">
|
|
<input class="form-check-input" type="checkbox" id="confirm_password_access" name="confirm_password_access" required>
|
|
<label class="form-check-label" for="confirm_password_access">
|
|
<strong>I confirm that I have password access to my account</strong>
|
|
</label>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Reason for Removal -->
|
|
<div class="form-group mb-4">
|
|
<label for="removal_reason" class="form-label">Reason for Removal (Optional)</label>
|
|
<select class="form-select" id="removal_reason" name="removal_reason">
|
|
<option value="">Select a reason...</option>
|
|
<option value="no_longer_use">No longer use this service</option>
|
|
<option value="privacy_concerns">Privacy concerns</option>
|
|
<option value="security_breach">Security breach or compromise</option>
|
|
<option value="account_deactivated">Account deactivated on provider</option>
|
|
<option value="switching_accounts">Switching to different account</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Additional Notes -->
|
|
<div class="form-group mb-4">
|
|
<label for="removal_notes" class="form-label">Additional Notes (Optional)</label>
|
|
<textarea class="form-control" id="removal_notes" name="removal_notes" rows="3"
|
|
placeholder="Any additional information about this removal..."></textarea>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'accounts:social_account_detail' object.pk %}" class="btn btn-secondary">
|
|
<i class="fas fa-times me-1"></i>Cancel
|
|
</a>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-primary me-2" onclick="disconnectInstead()">
|
|
<i class="fas fa-pause me-1"></i>Disconnect Instead
|
|
</button>
|
|
<button type="submit" class="btn btn-danger" id="confirmDeleteBtn" disabled>
|
|
<i class="fas fa-unlink me-1"></i>Remove Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alternative Actions -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-lightbulb me-2"></i>
|
|
Alternative Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="alternative-action">
|
|
<h6>
|
|
<i class="fas fa-pause-circle text-warning me-2"></i>
|
|
Temporarily Disconnect
|
|
</h6>
|
|
<p class="text-muted small">Disable the account without removing it completely. You can reconnect it later without re-authorization.</p>
|
|
<button type="button" class="btn btn-outline-warning btn-sm" onclick="disconnectInstead()">
|
|
<i class="fas fa-pause me-1"></i>Disconnect Instead
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="alternative-action">
|
|
<h6>
|
|
<i class="fas fa-cog text-info me-2"></i>
|
|
Modify Permissions
|
|
</h6>
|
|
<p class="text-muted small">Reduce permissions instead of removing the account completely.</p>
|
|
<a href="{% url 'accounts:social_account_update' object.pk %}" class="btn btn-outline-info btn-sm">
|
|
<i class="fas fa-cog me-1"></i>Edit Settings
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Enable/disable submit button based on confirmation checkboxes
|
|
const confirmCheckbox = document.getElementById('confirm_removal');
|
|
const passwordCheckbox = document.getElementById('confirm_password_access');
|
|
const submitButton = document.getElementById('confirmDeleteBtn');
|
|
|
|
function updateSubmitButton() {
|
|
const confirmChecked = confirmCheckbox.checked;
|
|
const passwordChecked = passwordCheckbox ? passwordCheckbox.checked : true;
|
|
submitButton.disabled = !(confirmChecked && passwordChecked);
|
|
}
|
|
|
|
confirmCheckbox.addEventListener('change', updateSubmitButton);
|
|
if (passwordCheckbox) {
|
|
passwordCheckbox.addEventListener('change', updateSubmitButton);
|
|
}
|
|
|
|
// Form submission confirmation
|
|
const deleteForm = document.getElementById('deleteForm');
|
|
deleteForm.addEventListener('submit', function(e) {
|
|
const provider = '{{ object.provider|title }}';
|
|
if (!confirm(`Are you absolutely sure you want to remove your ${provider} account? This action cannot be undone.`)) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
function disconnectInstead() {
|
|
if (confirm('Disconnect this account instead of removing it? You can reconnect it later without re-authorization.')) {
|
|
// Submit disconnect request
|
|
fetch('{% url "accounts:social_account_disconnect" object.pk %}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Account disconnected successfully. You can reconnect it anytime.');
|
|
window.location.href = '{% url "accounts:social_account_list" %}';
|
|
} else {
|
|
alert('Error disconnecting account: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('Error disconnecting account. Please try again.');
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.provider-icon-large {
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.account-summary {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.impact-item {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.usage-info {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.usage-stat {
|
|
text-align: center;
|
|
padding: 15px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
background: white;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.login-methods-check .alert {
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
|
|
.confirmation-section {
|
|
border: 2px solid #ffc107;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
background-color: #fff9e6;
|
|
}
|
|
|
|
.alternative-action {
|
|
padding: 15px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
background: white;
|
|
}
|
|
|
|
.alternative-action h6 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.account-summary .row {
|
|
text-align: center;
|
|
}
|
|
|
|
.provider-icon-large {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.impact-assessment .row {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.usage-stat {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.d-flex.justify-content-between > div {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|