Christian Krakau-Louis
566 lines
25 KiB
HTML
566 lines
25 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Edit Profile{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-md mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
|
|
<h2 class="text-2xl font-bold mb-6 text-navy-800">Edit Profile</h2>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="mb-4 p-3 {% if category == 'danger' %}bg-red-100 text-red-700{% elif category == 'success' %}bg-green-100 text-green-700{% else %}bg-blue-100 text-blue-700{% endif %} rounded">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" action="{{ url_for('users.edit_profile') }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
|
|
Username
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="username" name="username" type="text" placeholder="Username" value="{{ current_user.username }}">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="email">
|
|
Email
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="email" name="email" type="email" placeholder="Email address" value="{{ current_user.email }}">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="first_name">
|
|
First Name
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="first_name" name="first_name" type="text" placeholder="First name" value="{{ current_user.first_name or '' }}">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="last_name">
|
|
Last Name
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="last_name" name="last_name" type="text" placeholder="Last name" value="{{ current_user.last_name or '' }}">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="dropbox_export_path">
|
|
Dropbox Export Folder
|
|
</label>
|
|
<div class="flex space-x-2">
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="dropbox_export_path" name="dropbox_export_path" type="text" placeholder="/QuizzicalBeats"
|
|
value="{{ current_user.dropbox_export_path or '/QuizzicalBeats' }}">
|
|
<button type="button" id="browse-dropbox-btn"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded flex items-center"
|
|
{% if not current_user.dropbox_token %}disabled{% endif %}>
|
|
<i class="fab fa-dropbox mr-1"></i> Browse
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">Set the Dropbox folder where your exported rounds will be saved.</p>
|
|
{% if not current_user.dropbox_token %}
|
|
<p class="text-xs text-red-500 mt-1">
|
|
<i class="fas fa-exclamation-circle mr-1"></i>
|
|
<a href="{{ url_for('users.dropbox_auth') }}" class="underline">Connect your Dropbox account</a> to browse folders.
|
|
</p>
|
|
{% endif %}
|
|
<div id="dropbox-error-container" class="hidden mt-3 p-3 bg-red-100 text-sm rounded">
|
|
<div class="flex justify-between">
|
|
<h4 class="font-semibold mb-1">Dropbox API Error</h4>
|
|
<button id="close-error-btn" class="text-red-700">×</button>
|
|
</div>
|
|
<div id="dropbox-error-details"></div>
|
|
<div class="mt-2">
|
|
<button id="dropbox-debug-btn" type="button" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded">
|
|
Show Technical Details
|
|
</button>
|
|
<div id="dropbox-debug-info" class="hidden mt-2 bg-gray-100 p-2 rounded font-mono text-xs overflow-x-auto"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
|
|
Save Changes
|
|
</button>
|
|
<a class="inline-block align-baseline font-bold text-sm text-teal-500 hover:text-teal-800" href="{{ url_for('users.profile') }}">
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Dropbox Folder Browser Modal -->
|
|
<div id="dropbox-folder-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-navy-800">Select Dropbox Folder</h3>
|
|
<button id="close-dropbox-modal" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-4 border-b border-gray-200 flex items-center bg-gray-50">
|
|
<div class="flex-1 flex items-center">
|
|
<button id="parent-folder-btn" class="bg-gray-200 hover:bg-gray-300 rounded p-1 mr-2">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</button>
|
|
<span id="current-path" class="text-gray-600 font-mono text-sm">/</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button id="create-folder-btn" class="bg-teal-500 hover:bg-teal-600 text-white rounded p-1 px-2 text-sm flex items-center">
|
|
<i class="fas fa-folder-plus mr-1"></i> Create Folder
|
|
</button>
|
|
<button id="refresh-folders-btn" class="bg-gray-200 hover:bg-gray-300 rounded p-1">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-y-auto flex-1 p-2" style="max-height: 60vh;">
|
|
<div id="folder-list" class="space-y-1">
|
|
<div class="text-center p-8">
|
|
<div class="animate-spin inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mb-2"></div>
|
|
<p>Loading folders...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-2">
|
|
<button id="select-folder-btn" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded">
|
|
Select This Folder
|
|
</button>
|
|
<button id="cancel-selection-btn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Folder Modal -->
|
|
<div id="create-folder-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-md">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-bold text-navy-800">Create New Folder</h3>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="new-folder-name">
|
|
Folder Name
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="new-folder-name" type="text" placeholder="My New Folder">
|
|
<p id="folder-name-error" class="hidden mt-1 text-xs text-red-500"></p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">
|
|
Parent Folder
|
|
</label>
|
|
<p class="py-2 px-3 bg-gray-100 rounded text-gray-700 font-mono text-sm" id="parent-folder-path"></p>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-2 mt-6">
|
|
<button id="create-folder-submit" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded">
|
|
Create
|
|
</button>
|
|
<button id="create-folder-cancel" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const browseDropboxBtn = document.getElementById('browse-dropbox-btn');
|
|
const dropboxFolderModal = document.getElementById('dropbox-folder-modal');
|
|
const closeDropboxModal = document.getElementById('close-dropbox-modal');
|
|
const cancelSelectionBtn = document.getElementById('cancel-selection-btn');
|
|
const selectFolderBtn = document.getElementById('select-folder-btn');
|
|
const folderList = document.getElementById('folder-list');
|
|
const currentPathDisplay = document.getElementById('current-path');
|
|
const parentFolderBtn = document.getElementById('parent-folder-btn');
|
|
const refreshFoldersBtn = document.getElementById('refresh-folders-btn');
|
|
const dropboxExportPath = document.getElementById('dropbox_export_path');
|
|
const createFolderBtn = document.getElementById('create-folder-btn');
|
|
const createFolderModal = document.getElementById('create-folder-modal');
|
|
const createFolderSubmit = document.getElementById('create-folder-submit');
|
|
const createFolderCancel = document.getElementById('create-folder-cancel');
|
|
const newFolderNameInput = document.getElementById('new-folder-name');
|
|
const folderNameError = document.getElementById('folder-name-error');
|
|
const parentFolderPathDisplay = document.getElementById('parent-folder-path');
|
|
|
|
// Error display elements
|
|
const errorContainer = document.getElementById('dropbox-error-container');
|
|
const errorDetails = document.getElementById('dropbox-error-details');
|
|
const closeErrorBtn = document.getElementById('close-error-btn');
|
|
const debugBtn = document.getElementById('dropbox-debug-btn');
|
|
const debugInfo = document.getElementById('dropbox-debug-info');
|
|
|
|
let currentPath = '';
|
|
let lastApiResponse = null;
|
|
|
|
// Open the Dropbox folder browser modal
|
|
browseDropboxBtn.addEventListener('click', function() {
|
|
dropboxFolderModal.classList.remove('hidden');
|
|
// Always start at root when opening the browser
|
|
currentPath = '/';
|
|
loadFolders(currentPath);
|
|
});
|
|
|
|
// Close the modal when clicking close button or cancel
|
|
closeDropboxModal.addEventListener('click', closeModal);
|
|
cancelSelectionBtn.addEventListener('click', closeModal);
|
|
|
|
// Close modal when clicking outside
|
|
dropboxFolderModal.addEventListener('click', function(event) {
|
|
if (event.target === dropboxFolderModal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Close error display
|
|
closeErrorBtn.addEventListener('click', function() {
|
|
errorContainer.classList.add('hidden');
|
|
});
|
|
|
|
// Toggle debug info
|
|
debugBtn.addEventListener('click', function() {
|
|
if (debugInfo.classList.contains('hidden')) {
|
|
debugInfo.classList.remove('hidden');
|
|
debugBtn.textContent = 'Hide Technical Details';
|
|
} else {
|
|
debugInfo.classList.add('hidden');
|
|
debugBtn.textContent = 'Show Technical Details';
|
|
}
|
|
});
|
|
|
|
// Select the current folder
|
|
selectFolderBtn.addEventListener('click', function() {
|
|
dropboxExportPath.value = currentPath;
|
|
closeModal();
|
|
});
|
|
|
|
// Navigate to parent folder
|
|
parentFolderBtn.addEventListener('click', function() {
|
|
if (currentPath === '/' || currentPath === '') {
|
|
return; // Already at root
|
|
}
|
|
|
|
// Get parent path
|
|
const parts = currentPath.split('/').filter(p => p);
|
|
parts.pop(); // Remove last folder
|
|
|
|
const parentPath = '/' + parts.join('/');
|
|
loadFolders(parentPath);
|
|
});
|
|
|
|
// Refresh current folder
|
|
refreshFoldersBtn.addEventListener('click', function() {
|
|
loadFolders(currentPath);
|
|
});
|
|
|
|
// Open the Create Folder modal
|
|
createFolderBtn.addEventListener('click', function() {
|
|
createFolderModal.classList.remove('hidden');
|
|
parentFolderPathDisplay.textContent = currentPath;
|
|
newFolderNameInput.value = '';
|
|
folderNameError.classList.add('hidden');
|
|
|
|
// Focus the input field for better UX
|
|
setTimeout(() => {
|
|
newFolderNameInput.focus();
|
|
}, 100);
|
|
});
|
|
|
|
// Close the Create Folder modal when clicking outside
|
|
createFolderModal.addEventListener('click', function(event) {
|
|
if (event.target === createFolderModal) {
|
|
createFolderModal.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Close the Create Folder modal
|
|
createFolderCancel.addEventListener('click', function() {
|
|
createFolderModal.classList.add('hidden');
|
|
});
|
|
|
|
// Handle Enter key in the folder name input
|
|
newFolderNameInput.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
createFolderSubmit.click();
|
|
}
|
|
});
|
|
|
|
// Submit new folder creation
|
|
createFolderSubmit.addEventListener('click', function() {
|
|
const folderName = newFolderNameInput.value.trim();
|
|
if (!folderName) {
|
|
folderNameError.textContent = 'Folder name cannot be empty.';
|
|
folderNameError.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
// Check for invalid characters
|
|
if (/[\/\\:*?"<>|]/.test(folderName)) {
|
|
folderNameError.textContent = 'Folder name contains invalid characters.';
|
|
folderNameError.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
createFolderSubmit.disabled = true;
|
|
createFolderSubmit.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Creating...';
|
|
folderNameError.classList.add('hidden');
|
|
|
|
// Call API to create folder
|
|
fetch('/api/dropbox/create-folder', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRFToken': document.querySelector('input[name="csrf_token"]').value
|
|
},
|
|
body: JSON.stringify({
|
|
parent_path: currentPath,
|
|
folder_name: folderName
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(errorData => {
|
|
throw {
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
data: errorData
|
|
};
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
throw {
|
|
status: 500,
|
|
statusText: 'Server Error',
|
|
data: { error: data.error }
|
|
};
|
|
}
|
|
|
|
// Close modal and refresh folder list
|
|
createFolderModal.classList.add('hidden');
|
|
|
|
// If the folder was created successfully, navigate to it
|
|
if (data.path) {
|
|
loadFolders(data.path);
|
|
} else {
|
|
// Just refresh the current folder
|
|
loadFolders(currentPath);
|
|
}
|
|
|
|
// Show success message
|
|
const successDiv = document.createElement('div');
|
|
successDiv.className = 'p-2 mb-3 bg-green-100 text-green-800 rounded text-sm';
|
|
successDiv.textContent = `Folder "${folderName}" created successfully.`;
|
|
successDiv.style.opacity = '1';
|
|
successDiv.style.transition = 'opacity 0.5s ease-in-out';
|
|
folderList.insertBefore(successDiv, folderList.firstChild);
|
|
|
|
// Fade out success message after 3 seconds
|
|
setTimeout(() => {
|
|
successDiv.style.opacity = '0';
|
|
setTimeout(() => {
|
|
if (successDiv.parentNode) {
|
|
successDiv.parentNode.removeChild(successDiv);
|
|
}
|
|
}, 500);
|
|
}, 3000);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error creating folder:', error);
|
|
|
|
// Show error message in the modal
|
|
folderNameError.textContent = error.data?.error ||
|
|
(error.status === 409 ? 'A folder with this name already exists.' :
|
|
error.statusText || 'Error creating folder');
|
|
folderNameError.classList.remove('hidden');
|
|
|
|
// Also show detailed error in the main error display if it's a server error
|
|
if (error.status >= 500) {
|
|
showError(error);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
// Reset button state
|
|
createFolderSubmit.disabled = false;
|
|
createFolderSubmit.innerHTML = 'Create';
|
|
});
|
|
});
|
|
|
|
// Function to load folders from Dropbox
|
|
function loadFolders(path) {
|
|
// Hide any previous errors
|
|
errorContainer.classList.add('hidden');
|
|
|
|
// Update UI
|
|
currentPath = path;
|
|
currentPathDisplay.textContent = path || '/';
|
|
|
|
// Show loading indicator
|
|
folderList.innerHTML = `
|
|
<div class="text-center p-8">
|
|
<div class="animate-spin inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mb-2"></div>
|
|
<p>Loading folders...</p>
|
|
</div>
|
|
`;
|
|
|
|
// Make API request to get folders
|
|
fetch('/api/dropbox/folders?path=' + encodeURIComponent(path))
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(errorData => {
|
|
throw {
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
data: errorData
|
|
};
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Save the response for debugging
|
|
lastApiResponse = data;
|
|
|
|
if (data.error) {
|
|
throw {
|
|
status: 500,
|
|
statusText: 'Server Error',
|
|
data: data
|
|
};
|
|
}
|
|
|
|
// Check if there's a warning message (returned when a path doesn't exist)
|
|
if (data.warning) {
|
|
// Display warning message
|
|
const warningDiv = document.createElement('div');
|
|
warningDiv.className = 'p-2 mb-3 bg-yellow-100 text-yellow-800 rounded text-sm';
|
|
warningDiv.textContent = data.warning;
|
|
folderList.innerHTML = '';
|
|
folderList.appendChild(warningDiv);
|
|
|
|
// Update the current path
|
|
currentPath = data.path;
|
|
currentPathDisplay.textContent = data.path;
|
|
} else {
|
|
// Clear folder list
|
|
folderList.innerHTML = '';
|
|
}
|
|
|
|
if (data.folders.length === 0) {
|
|
const emptyDiv = document.createElement('div');
|
|
emptyDiv.className = 'text-center p-8 text-gray-500';
|
|
emptyDiv.innerHTML = `
|
|
<i class="fas fa-folder-open text-4xl mb-2"></i>
|
|
<p>No folders found in this location</p>
|
|
`;
|
|
folderList.appendChild(emptyDiv);
|
|
return;
|
|
}
|
|
|
|
// Sort folders alphabetically
|
|
data.folders.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
// Add each folder to the list
|
|
data.folders.forEach(folder => {
|
|
const folderItem = document.createElement('div');
|
|
folderItem.className = 'p-2 hover:bg-gray-100 rounded cursor-pointer flex items-center';
|
|
folderItem.innerHTML = `
|
|
<i class="fas fa-folder text-blue-500 mr-2"></i>
|
|
<span>${folder.name}</span>
|
|
`;
|
|
|
|
folderItem.addEventListener('click', function() {
|
|
loadFolders(folder.path_display);
|
|
});
|
|
|
|
folderList.appendChild(folderItem);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading folders:', error);
|
|
|
|
// Display error in the folder list
|
|
folderList.innerHTML = `
|
|
<div class="text-center p-8 text-red-500">
|
|
<i class="fas fa-exclamation-circle text-4xl mb-2"></i>
|
|
<p>${error.data?.error || error.statusText || 'Error loading folders'}</p>
|
|
<p class="text-sm mt-2">Make sure your Dropbox account is connected</p>
|
|
</div>
|
|
`;
|
|
|
|
// Also show detailed error in the profile page
|
|
showError(error);
|
|
});
|
|
}
|
|
|
|
function showError(error) {
|
|
// Format and display the error information
|
|
errorContainer.classList.remove('hidden');
|
|
|
|
let errorMessage = '';
|
|
if (error.status) {
|
|
errorMessage += `HTTP ${error.status}: `;
|
|
}
|
|
|
|
if (error.data && error.data.error) {
|
|
errorMessage += error.data.error;
|
|
} else if (error.statusText) {
|
|
errorMessage += error.statusText;
|
|
} else {
|
|
errorMessage += 'Unknown error occurred';
|
|
}
|
|
|
|
errorDetails.textContent = errorMessage;
|
|
|
|
// Show technical details
|
|
let debugText = '';
|
|
if (error.data) {
|
|
if (error.data.details) {
|
|
debugText += "Error Details:\n" + JSON.stringify(error.data.details, null, 2) + "\n\n";
|
|
}
|
|
if (error.data.traceback) {
|
|
debugText += "Traceback:\n" + error.data.traceback + "\n\n";
|
|
}
|
|
if (error.data.raw_response) {
|
|
debugText += "Raw Response:\n" + error.data.raw_response + "\n\n";
|
|
}
|
|
}
|
|
|
|
if (!debugText) {
|
|
debugText = JSON.stringify(error, null, 2);
|
|
}
|
|
|
|
debugInfo.textContent = debugText;
|
|
}
|
|
|
|
function closeModal() {
|
|
dropboxFolderModal.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |