788 lines
39 KiB
HTML
788 lines
39 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% if object %}Edit{% else %}Link{% endif %} 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_list' %}" class="me-3">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
{% if object %}Edit{% else %}Link{% endif %} Social Account
|
|
</h4>
|
|
<h6>{% if object %}Update settings for{% else %}Connect{% endif %} your social media account</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Account Setup Form -->
|
|
<div class="col-lg-8 col-md-12">
|
|
{% if not object %}
|
|
<!-- Provider Selection (Only for new accounts) -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-link me-2"></i>
|
|
Choose Social Provider
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="provider-selection">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="provider-card" data-provider="google">
|
|
<input type="radio" name="provider" value="google" id="provider_google" checked>
|
|
<label for="provider_google" class="provider-label">
|
|
<i class="fab fa-google fa-3x text-danger mb-3"></i>
|
|
<h6>Google</h6>
|
|
<p class="text-muted small">Gmail, Google Workspace</p>
|
|
<div class="features">
|
|
<span class="badge bg-success me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Email</span>
|
|
<span class="badge bg-warning">Calendar</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="provider-card" data-provider="microsoft">
|
|
<input type="radio" name="provider" value="microsoft" id="provider_microsoft">
|
|
<label for="provider_microsoft" class="provider-label">
|
|
<i class="fab fa-microsoft fa-3x text-primary mb-3"></i>
|
|
<h6>Microsoft</h6>
|
|
<p class="text-muted small">Outlook, Office 365</p>
|
|
<div class="features">
|
|
<span class="badge bg-success me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Email</span>
|
|
<span class="badge bg-warning">Office</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="provider-card" data-provider="github">
|
|
<input type="radio" name="provider" value="github" id="provider_github">
|
|
<label for="provider_github" class="provider-label">
|
|
<i class="fab fa-github fa-3x text-dark mb-3"></i>
|
|
<h6>GitHub</h6>
|
|
<p class="text-muted small">Code repositories</p>
|
|
<div class="features">
|
|
<span class="badge bg-success me-1">Profile</span>
|
|
<span class="badge bg-secondary me-1">Repos</span>
|
|
<span class="badge bg-info">Gists</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="provider-card" data-provider="linkedin">
|
|
<input type="radio" name="provider" value="linkedin" id="provider_linkedin">
|
|
<label for="provider_linkedin" class="provider-label">
|
|
<i class="fab fa-linkedin fa-3x text-info mb-3"></i>
|
|
<h6>LinkedIn</h6>
|
|
<p class="text-muted small">Professional network</p>
|
|
<div class="features">
|
|
<span class="badge bg-success me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Network</span>
|
|
<span class="badge bg-warning">Posts</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="provider-card" data-provider="facebook">
|
|
<input type="radio" name="provider" value="facebook" id="provider_facebook">
|
|
<label for="provider_facebook" class="provider-label">
|
|
<i class="fab fa-facebook fa-3x text-primary mb-3"></i>
|
|
<h6>Facebook</h6>
|
|
<p class="text-muted small">Social network</p>
|
|
<div class="features">
|
|
<span class="badge bg-success me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Friends</span>
|
|
<span class="badge bg-warning">Pages</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="provider-card" data-provider="twitter">
|
|
<input type="radio" name="provider" value="twitter" id="provider_twitter">
|
|
<label for="provider_twitter" class="provider-label">
|
|
<i class="fab fa-twitter fa-3x text-info mb-3"></i>
|
|
<h6>Twitter</h6>
|
|
<p class="text-muted small">Microblogging</p>
|
|
<div class="features">
|
|
<span class="badge bg-success me-1">Profile</span>
|
|
<span class="badge bg-info me-1">Tweets</span>
|
|
<span class="badge bg-warning">DMs</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Account Configuration -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-cog me-2"></i>
|
|
Account Settings
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="socialAccountForm">
|
|
{% csrf_token %}
|
|
|
|
{% if object %}
|
|
<!-- Current Account Info (Edit mode) -->
|
|
<div class="current-account-info mb-4">
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
{% if object.provider == 'google' %}
|
|
<i class="fab fa-google fa-2x text-danger me-3"></i>
|
|
{% elif object.provider == 'microsoft' %}
|
|
<i class="fab fa-microsoft fa-2x text-primary me-3"></i>
|
|
{% elif object.provider == 'github' %}
|
|
<i class="fab fa-github fa-2x text-dark me-3"></i>
|
|
{% elif object.provider == 'linkedin' %}
|
|
<i class="fab fa-linkedin fa-2x text-info me-3"></i>
|
|
{% elif object.provider == 'facebook' %}
|
|
<i class="fab fa-facebook fa-2x text-primary me-3"></i>
|
|
{% elif object.provider == 'twitter' %}
|
|
<i class="fab fa-twitter fa-2x text-info me-3"></i>
|
|
{% endif %}
|
|
<div>
|
|
<h6 class="mb-1">{{ object.provider|title }} Account</h6>
|
|
<p class="mb-0">{{ object.email|default:"john.smith@gmail.com" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Basic Settings -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="display_name" class="form-label">Display Name</label>
|
|
<input type="text" class="form-control" id="display_name" name="display_name"
|
|
value="{{ object.display_name|default:'' }}"
|
|
placeholder="How this account appears in your profile">
|
|
<small class="form-text text-muted">Optional custom name for this account</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="account_type" class="form-label">Account Type</label>
|
|
<select class="form-select" id="account_type" name="account_type">
|
|
<option value="personal" {% if object.account_type == 'personal' %}selected{% endif %}>Personal</option>
|
|
<option value="business" {% if object.account_type == 'business' %}selected{% endif %}>Business</option>
|
|
<option value="organization" {% if object.account_type == 'organization' %}selected{% endif %}>Organization</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Settings -->
|
|
<div class="settings-section mb-4">
|
|
<h6 class="section-title">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Login Settings
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="enable_login" name="enable_login"
|
|
{% if not object or object.login_enabled %}checked{% endif %}>
|
|
<label class="form-check-label" for="enable_login">
|
|
<strong>Enable Social Login</strong>
|
|
</label>
|
|
<small class="form-text text-muted d-block">Allow logging in with this account</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="auto_create_account" name="auto_create_account"
|
|
{% if not object or object.auto_create_account %}checked{% endif %}>
|
|
<label class="form-check-label" for="auto_create_account">
|
|
<strong>Auto-create Account</strong>
|
|
</label>
|
|
<small class="form-text text-muted d-block">Automatically create account on first login</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permission Settings -->
|
|
<div class="settings-section mb-4">
|
|
<h6 class="section-title">
|
|
<i class="fas fa-key me-2"></i>Permissions
|
|
</h6>
|
|
<div class="permissions-grid">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="permission-group">
|
|
<h6 class="text-success">Basic Permissions</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="perm_profile" name="permissions" value="profile" checked disabled>
|
|
<label class="form-check-label" for="perm_profile">
|
|
<i class="fas fa-user text-primary me-2"></i>Profile Information
|
|
<small class="d-block text-muted">Basic profile data (required)</small>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="perm_email" name="permissions" value="email" checked disabled>
|
|
<label class="form-check-label" for="perm_email">
|
|
<i class="fas fa-envelope text-info me-2"></i>Email Address
|
|
<small class="d-block text-muted">Primary email address (required)</small>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="permission-group">
|
|
<h6 class="text-info">Optional Permissions</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="perm_calendar" name="permissions" value="calendar"
|
|
{% if 'calendar' in object.permissions %}checked{% endif %}>
|
|
<label class="form-check-label" for="perm_calendar">
|
|
<i class="fas fa-calendar text-warning me-2"></i>Calendar Access
|
|
<small class="d-block text-muted">Read calendar events</small>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="perm_contacts" name="permissions" value="contacts"
|
|
{% if 'contacts' in object.permissions %}checked{% endif %}>
|
|
<label class="form-check-label" for="perm_contacts">
|
|
<i class="fas fa-users text-success me-2"></i>Contacts
|
|
<small class="d-block text-muted">Access contact list</small>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sync Settings -->
|
|
<div class="settings-section mb-4">
|
|
<h6 class="section-title">
|
|
<i class="fas fa-sync me-2"></i>Synchronization
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="auto_sync_profile" name="auto_sync_profile"
|
|
{% if not object or object.auto_sync_profile %}checked{% endif %}>
|
|
<label class="form-check-label" for="auto_sync_profile">
|
|
<strong>Auto-sync Profile</strong>
|
|
</label>
|
|
<small class="form-text text-muted d-block">Automatically update profile from social account</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="sync_frequency" class="form-label">Sync Frequency</label>
|
|
<select class="form-select" id="sync_frequency" name="sync_frequency">
|
|
<option value="manual" {% if object.sync_frequency == 'manual' %}selected{% endif %}>Manual Only</option>
|
|
<option value="daily" {% if object.sync_frequency == 'daily' %}selected{% endif %}>Daily</option>
|
|
<option value="weekly" {% if object.sync_frequency == 'weekly' %}selected{% endif %}>Weekly</option>
|
|
<option value="monthly" {% if object.sync_frequency == 'monthly' %}selected{% endif %}>Monthly</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Privacy Settings -->
|
|
<div class="settings-section mb-4">
|
|
<h6 class="section-title">
|
|
<i class="fas fa-shield-alt me-2"></i>Privacy & Security
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="share_profile_data" name="share_profile_data"
|
|
{% if object.share_profile_data %}checked{% endif %}>
|
|
<label class="form-check-label" for="share_profile_data">
|
|
<strong>Share Profile Data</strong>
|
|
</label>
|
|
<small class="form-text text-muted d-block">Allow sharing profile data with integrated services</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="activity_logging" name="activity_logging"
|
|
{% if not object or object.activity_logging %}checked{% endif %}>
|
|
<label class="form-check-label" for="activity_logging">
|
|
<strong>Activity Logging</strong>
|
|
</label>
|
|
<small class="form-text text-muted d-block">Log account activity for security purposes</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'accounts:social_account_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-times me-1"></i>Cancel
|
|
</a>
|
|
<div>
|
|
{% if not object %}
|
|
<button type="button" class="btn btn-outline-primary me-2" onclick="testConnection()">
|
|
<i class="fas fa-plug me-1"></i>Test Connection
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-link me-1"></i>Link Account
|
|
</button>
|
|
{% else %}
|
|
<button type="button" class="btn btn-outline-primary me-2" onclick="syncNow()">
|
|
<i class="fas fa-sync me-1"></i>Sync Now
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-save me-1"></i>Update Settings
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setup Guide Sidebar -->
|
|
<div class="col-lg-4 col-md-12">
|
|
<!-- Connection Status -->
|
|
{% if object %}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-plug me-2"></i>
|
|
Connection Status
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="connection-status">
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Connection</span>
|
|
<span class="badge bg-success">
|
|
<i class="fas fa-check-circle me-1"></i>Active
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Token Status</span>
|
|
<span class="badge bg-success">Valid</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Last Sync</span>
|
|
<span class="text-muted">2 hours ago</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Next Sync</span>
|
|
<span class="text-muted">Tomorrow</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Setup Steps -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-list-check me-2"></i>
|
|
{% if object %}Update{% else %}Setup{% endif %} Steps
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="setup-steps">
|
|
{% if not object %}
|
|
<div class="step-item active" id="step1">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h6>Choose Provider</h6>
|
|
<small class="text-muted">Select your social media platform</small>
|
|
</div>
|
|
</div>
|
|
<div class="step-item" id="step2">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h6>Configure Settings</h6>
|
|
<small class="text-muted">Set up permissions and preferences</small>
|
|
</div>
|
|
</div>
|
|
<div class="step-item" id="step3">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h6>Authorize Access</h6>
|
|
<small class="text-muted">Grant permissions on provider site</small>
|
|
</div>
|
|
</div>
|
|
<div class="step-item" id="step4">
|
|
<div class="step-number">4</div>
|
|
<div class="step-content">
|
|
<h6>Complete</h6>
|
|
<small class="text-muted">Account successfully linked</small>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="step-item completed">
|
|
<div class="step-number">✓</div>
|
|
<div class="step-content">
|
|
<h6>Account Linked</h6>
|
|
<small class="text-muted">Successfully connected</small>
|
|
</div>
|
|
</div>
|
|
<div class="step-item active">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h6>Update Settings</h6>
|
|
<small class="text-muted">Modify account preferences</small>
|
|
</div>
|
|
</div>
|
|
<div class="step-item">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h6>Save Changes</h6>
|
|
<small class="text-muted">Apply new settings</small>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Information -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-shield-alt me-2"></i>
|
|
Security Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="security-info">
|
|
<div class="security-item mb-3">
|
|
<i class="fas fa-lock text-success me-2"></i>
|
|
<small>OAuth 2.0 secure authentication</small>
|
|
</div>
|
|
<div class="security-item mb-3">
|
|
<i class="fas fa-key text-info me-2"></i>
|
|
<small>Encrypted token storage</small>
|
|
</div>
|
|
<div class="security-item mb-3">
|
|
<i class="fas fa-eye-slash text-warning me-2"></i>
|
|
<small>Limited permission scope</small>
|
|
</div>
|
|
<div class="security-item">
|
|
<i class="fas fa-times-circle text-danger me-2"></i>
|
|
<small>No posting on your behalf</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize provider selection
|
|
const providerRadios = document.querySelectorAll('input[name="provider"]');
|
|
providerRadios.forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
updateProviderSelection(this.value);
|
|
updateStepProgress(2);
|
|
});
|
|
});
|
|
|
|
// Show initial provider selection
|
|
const checkedRadio = document.querySelector('input[name="provider"]:checked');
|
|
if (checkedRadio) {
|
|
updateProviderSelection(checkedRadio.value);
|
|
}
|
|
|
|
// Form validation
|
|
const form = document.getElementById('socialAccountForm');
|
|
form.addEventListener('submit', function(e) {
|
|
if (!validateForm()) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
function updateProviderSelection(provider) {
|
|
// Update provider cards
|
|
const cards = document.querySelectorAll('.provider-card');
|
|
cards.forEach(card => card.classList.remove('selected'));
|
|
|
|
const selectedCard = document.querySelector(`[data-provider="${provider}"]`);
|
|
if (selectedCard) {
|
|
selectedCard.classList.add('selected');
|
|
}
|
|
|
|
// Update permission options based on provider
|
|
updatePermissionOptions(provider);
|
|
}
|
|
|
|
function updatePermissionOptions(provider) {
|
|
// Show/hide permissions based on provider capabilities
|
|
const calendarPerm = document.getElementById('perm_calendar');
|
|
const contactsPerm = document.getElementById('perm_contacts');
|
|
|
|
if (provider === 'google' || provider === 'microsoft') {
|
|
calendarPerm.closest('.form-check').style.display = 'block';
|
|
} else {
|
|
calendarPerm.closest('.form-check').style.display = 'none';
|
|
}
|
|
|
|
if (provider === 'google' || provider === 'microsoft' || provider === 'linkedin') {
|
|
contactsPerm.closest('.form-check').style.display = 'block';
|
|
} else {
|
|
contactsPerm.closest('.form-check').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function updateStepProgress(step) {
|
|
const steps = document.querySelectorAll('.step-item');
|
|
steps.forEach((stepItem, index) => {
|
|
if (index < step) {
|
|
stepItem.classList.add('completed');
|
|
stepItem.classList.remove('active');
|
|
} else if (index === step - 1) {
|
|
stepItem.classList.add('active');
|
|
stepItem.classList.remove('completed');
|
|
} else {
|
|
stepItem.classList.remove('active', 'completed');
|
|
}
|
|
});
|
|
}
|
|
|
|
function testConnection() {
|
|
const provider = document.querySelector('input[name="provider"]:checked').value;
|
|
const button = event.target;
|
|
const originalText = button.innerHTML;
|
|
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Testing...';
|
|
button.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
alert(`Connection to ${provider} successful! You can proceed with linking.`);
|
|
button.innerHTML = originalText;
|
|
button.disabled = false;
|
|
updateStepProgress(3);
|
|
}, 2000);
|
|
}
|
|
|
|
function syncNow() {
|
|
const button = event.target;
|
|
const originalText = button.innerHTML;
|
|
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Syncing...';
|
|
button.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
alert('Profile synchronized successfully!');
|
|
button.innerHTML = originalText;
|
|
button.disabled = false;
|
|
}, 2000);
|
|
}
|
|
|
|
function validateForm() {
|
|
const provider = document.querySelector('input[name="provider"]:checked');
|
|
|
|
if (!provider && !{{ object|yesno:"true,false" }}) {
|
|
alert('Please select a social provider.');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.provider-selection {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.provider-card {
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.provider-card:hover {
|
|
border-color: #007bff;
|
|
box-shadow: 0 4px 8px rgba(0,123,255,0.1);
|
|
}
|
|
|
|
.provider-card.selected {
|
|
border-color: #007bff;
|
|
background-color: #f8f9ff;
|
|
}
|
|
|
|
.provider-card input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.provider-label {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.features {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.features .badge {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.settings-section {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.section-title {
|
|
color: #495057;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.permission-group h6 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-check {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-check-label small {
|
|
margin-left: 25px;
|
|
}
|
|
|
|
.setup-steps {
|
|
position: relative;
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.step-item:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 40px;
|
|
width: 2px;
|
|
height: 30px;
|
|
background-color: #dee2e6;
|
|
}
|
|
|
|
.step-item.completed::after {
|
|
background-color: #28a745;
|
|
}
|
|
|
|
.step-item.active::after {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.step-number {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: #dee2e6;
|
|
color: #6c757d;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step-item.active .step-number {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.step-item.completed .step-number {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.security-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.status-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.status-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.provider-card {
|
|
margin-bottom: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.settings-section {
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.form-check-label small {
|
|
margin-left: 0;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|