Add Google Drive authorization processing and error handling templates
- Implemented `google_drive_callback.html` for processing Google Drive authorization, including UI for success and error states. - Added JavaScript functionality for exchanging authorization codes, saving settings, and handling folder selection. - Created `google_drive_callback_error.html` to display error messages during the authorization process.
This commit is contained in:
Christian Krakau-Louis
@@ -0,0 +1,476 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Google Drive Authorization Processing{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<div class="text-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<h2 class="text-2xl font-bold mt-4">Processing Authorization</h2>
|
||||
<p class="text-gray-600 mt-2">Please wait while we complete the Google Drive authorization process...</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center my-6">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
|
||||
<div id="processing-message" class="text-center text-gray-700">
|
||||
<p>Exchanging authorization code for refresh token...</p>
|
||||
</div>
|
||||
|
||||
<div id="error-container" class="hidden mt-6">
|
||||
<div class="bg-red-50 border-l-4 border-red-400 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">Error details:</h3>
|
||||
<div class="mt-2 text-sm text-red-700" id="error-message">
|
||||
<!-- Error message will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/google-drive-setup" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Return to Setup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="folder-selection-container" class="hidden mt-6">
|
||||
<div class="rounded-md bg-blue-50 p-4 mb-6">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-blue-800">
|
||||
Authentication successful! Please select or enter the Google Drive folder where you want to save files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 mb-6">
|
||||
<div>
|
||||
<label for="folder-id-input" class="block text-sm font-medium text-gray-700">Google Drive Folder ID</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input type="text" id="folder-id-input" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" placeholder="Enter Google Drive folder ID">
|
||||
<button id="folder-select-picker-btn" type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<svg class="h-4 w-4 mr-1 text-white-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Select Folder
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
You can paste a folder ID directly or use the selector to pick a folder. Root folder is "root".
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="save-folder-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="success-container" class="hidden mt-6">
|
||||
<div class="rounded-md bg-green-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-green-800">
|
||||
Google Drive authorization successful! Your refresh token has been saved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 p-4 bg-gray-100 rounded-md">
|
||||
<h3 class="font-medium text-lg mb-2">Configuration for Worker Nodes</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">
|
||||
Copy these environment variables to configure all worker nodes:
|
||||
</p>
|
||||
|
||||
<div class="relative">
|
||||
<pre id="env-vars" class="bg-gray-800 text-green-400 text-sm p-3 rounded overflow-x-auto"><code></code></pre>
|
||||
|
||||
<button id="copy-env-vars" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white text-xs py-1 px-2 rounded">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Add these variables to your .env file or environment configuration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<a href="/status" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Go to Status Page
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const code = "{{ code }}";
|
||||
|
||||
// Get credentials from session storage
|
||||
const clientId = sessionStorage.getItem('google_drive_client_id');
|
||||
const clientSecret = sessionStorage.getItem('google_drive_client_secret');
|
||||
const folderId = sessionStorage.getItem('google_drive_folder_id');
|
||||
|
||||
const redirectUri = window.location.origin + "/google-drive-callback";
|
||||
|
||||
let accessToken = null;
|
||||
let refreshToken = null;
|
||||
|
||||
// Define folderIdInput at the top level so it's accessible throughout the script
|
||||
const folderIdInput = document.getElementById('folder-id-input');
|
||||
const folderSelectBtn = document.getElementById('folder-select-picker-btn');
|
||||
const saveFolderBtn = document.getElementById('save-folder-btn');
|
||||
|
||||
// Automatically exchange the code for a refresh token
|
||||
if (code) {
|
||||
if (!clientId || !clientSecret) {
|
||||
showError("Missing Client ID or Client Secret. Please go back to the setup page and try again.");
|
||||
return;
|
||||
}
|
||||
|
||||
exchangeCode(code, clientId, clientSecret, redirectUri, folderId);
|
||||
} else {
|
||||
showError("No authorization code was found in the URL");
|
||||
}
|
||||
|
||||
function exchangeCode(code, clientId, clientSecret, redirectUri, folderId) {
|
||||
const formData = new FormData();
|
||||
formData.append('client_id', clientId);
|
||||
formData.append('client_secret', clientSecret);
|
||||
formData.append('redirect_uri', redirectUri);
|
||||
formData.append('code', code);
|
||||
if (folderId) {
|
||||
formData.append('folder_id', folderId);
|
||||
}
|
||||
|
||||
document.getElementById('processing-message').innerHTML =
|
||||
'<p>Exchanging authorization code for refresh token...</p>';
|
||||
|
||||
fetch('/api/google-drive/exchange-token', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.detail || 'Failed to exchange token');
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.refresh_token) {
|
||||
// Store tokens
|
||||
refreshToken = data.refresh_token;
|
||||
accessToken = data.access_token;
|
||||
|
||||
// Update settings in memory first
|
||||
const updateFormData = new FormData();
|
||||
updateFormData.append('refresh_token', data.refresh_token);
|
||||
|
||||
// Use the client ID and client secret from session storage
|
||||
updateFormData.append('client_id', clientId);
|
||||
updateFormData.append('client_secret', clientSecret);
|
||||
if (folderId) {
|
||||
updateFormData.append('folder_id', folderId);
|
||||
}
|
||||
updateFormData.append('use_oauth', 'true');
|
||||
|
||||
document.getElementById('processing-message').innerHTML =
|
||||
'<p>Updating system settings with new token...</p>';
|
||||
|
||||
return fetch('/api/google-drive/update-settings', {
|
||||
method: 'POST',
|
||||
body: updateFormData
|
||||
}).then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error('Token received but failed to update settings: ' + (err.detail || 'Unknown error'));
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
}).then(() => {
|
||||
// If we have a folder ID, save settings directly
|
||||
if (folderId) {
|
||||
return saveSettings(data.refresh_token, clientId, clientSecret, folderId);
|
||||
} else {
|
||||
// Show folder selection UI
|
||||
document.getElementById('processing-message').classList.add('hidden');
|
||||
document.getElementById('folder-selection-container').classList.remove('hidden');
|
||||
|
||||
// Initialize Google Picker for folder selection
|
||||
loadGooglePicker(accessToken, clientId);
|
||||
|
||||
return null; // Return null to avoid further .then() processing
|
||||
}
|
||||
});
|
||||
} else {
|
||||
throw new Error('No refresh token was received from the server');
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
// Only proceed if we saved settings directly
|
||||
if (result) {
|
||||
showSuccess(result.refresh_token, result.client_id, result.client_secret, result.folderId);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showError(error.message);
|
||||
});
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('processing-message').classList.add('hidden');
|
||||
document.getElementById('folder-selection-container').classList.add('hidden');
|
||||
document.getElementById('error-container').classList.remove('hidden');
|
||||
document.getElementById('error-message').innerText = message;
|
||||
|
||||
// Hide the spinner when showing error
|
||||
document.querySelector('.animate-spin').parentNode.classList.add('hidden');
|
||||
}
|
||||
|
||||
function saveSettings(refreshToken, clientId, clientSecret, folderId) {
|
||||
const saveFormData = new FormData();
|
||||
saveFormData.append('refresh_token', refreshToken);
|
||||
saveFormData.append('client_id', clientId);
|
||||
saveFormData.append('client_secret', clientSecret);
|
||||
if (folderId) {
|
||||
saveFormData.append('folder_id', folderId);
|
||||
}
|
||||
saveFormData.append('use_oauth', 'true');
|
||||
|
||||
document.getElementById('processing-message').innerHTML =
|
||||
'<p>Saving settings to configuration...</p>';
|
||||
|
||||
return fetch('/api/google-drive/save-settings', {
|
||||
method: 'POST',
|
||||
body: saveFormData
|
||||
}).then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
// Check if the error is about .env file not found
|
||||
if (err.detail && err.detail.includes('.env file not found')) {
|
||||
// Continue despite .env file issue
|
||||
return {
|
||||
status: 'warning',
|
||||
message: 'Settings saved in memory only. The .env file could not be updated.',
|
||||
in_memory_only: true
|
||||
};
|
||||
}
|
||||
throw new Error('Failed to save settings to file: ' + (err.detail || 'Unknown error'));
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
}).then((result) => {
|
||||
// Return the values for showing success screen
|
||||
return {
|
||||
refresh_token: refreshToken,
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
folderId: folderId,
|
||||
in_memory_only: result.in_memory_only || false
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function showSuccess(refreshToken, clientId, clientSecret, folderId, inMemoryOnly) {
|
||||
document.getElementById('processing-message').classList.add('hidden');
|
||||
document.getElementById('folder-selection-container').classList.add('hidden');
|
||||
document.getElementById('success-container').classList.remove('hidden');
|
||||
|
||||
// Hide the spinner when showing success
|
||||
document.querySelector('.animate-spin').parentNode.classList.add('hidden');
|
||||
|
||||
// Update the environment variables pre block with the new token
|
||||
const envVarsCode = document.querySelector('#env-vars code');
|
||||
if (envVarsCode) {
|
||||
envVarsCode.textContent = `GOOGLE_DRIVE_USE_OAUTH=true
|
||||
GOOGLE_DRIVE_CLIENT_ID=${clientId}
|
||||
GOOGLE_DRIVE_CLIENT_SECRET=${clientSecret}
|
||||
GOOGLE_DRIVE_REFRESH_TOKEN=${refreshToken}
|
||||
GOOGLE_DRIVE_FOLDER_ID=${folderId || 'YOUR_FOLDER_ID'}`;
|
||||
}
|
||||
|
||||
// If settings were only saved in memory, add a warning
|
||||
if (inMemoryOnly) {
|
||||
const successContainer = document.getElementById('success-container');
|
||||
const warningDiv = document.createElement('div');
|
||||
warningDiv.className = 'rounded-md bg-yellow-50 p-4 mt-4';
|
||||
warningDiv.innerHTML = `
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-yellow-800">
|
||||
Note: Settings were saved in memory only. The .env file could not be updated.
|
||||
Make sure to add these environment variables to your configuration files manually.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Insert warning after the success message but before the environment vars section
|
||||
const envVarsSection = document.querySelector('#success-container .mt-6');
|
||||
successContainer.insertBefore(warningDiv, envVarsSection);
|
||||
}
|
||||
|
||||
// Add copy functionality
|
||||
const copyEnvVarsBtn = document.getElementById('copy-env-vars');
|
||||
if (copyEnvVarsBtn) {
|
||||
copyEnvVarsBtn.addEventListener('click', function() {
|
||||
const envVarsText = document.getElementById('env-vars').textContent;
|
||||
navigator.clipboard.writeText(envVarsText)
|
||||
.then(() => {
|
||||
const originalText = copyEnvVarsBtn.textContent;
|
||||
copyEnvVarsBtn.textContent = 'Copied!';
|
||||
copyEnvVarsBtn.classList.add('bg-green-700');
|
||||
setTimeout(() => {
|
||||
copyEnvVarsBtn.textContent = originalText;
|
||||
copyEnvVarsBtn.classList.remove('bg-green-700');
|
||||
}, 2000);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
alert('Failed to copy text to clipboard');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Clear session storage
|
||||
sessionStorage.removeItem('google_drive_client_id');
|
||||
sessionStorage.removeItem('google_drive_client_secret');
|
||||
sessionStorage.removeItem('google_drive_folder_id');
|
||||
|
||||
// In 10 seconds, redirect to status page
|
||||
setTimeout(() => {
|
||||
window.location.href = '/status';
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
// Handle folder selection UI
|
||||
if (saveFolderBtn) {
|
||||
saveFolderBtn.addEventListener('click', function() {
|
||||
if (!folderIdInput) {
|
||||
alert('Error: Folder input element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const folderId = folderIdInput.value.trim() || 'root';
|
||||
saveFolderBtn.disabled = true;
|
||||
saveFolderBtn.innerHTML = '<span class="animate-spin inline-block mr-2">⟳</span> Saving...';
|
||||
|
||||
saveSettings(refreshToken, clientId, clientSecret, folderId)
|
||||
.then(result => {
|
||||
showSuccess(result.refresh_token, result.client_id, result.client_secret, result.folderId);
|
||||
})
|
||||
.catch(error => {
|
||||
alert('Failed to save settings: ' + error.message);
|
||||
saveFolderBtn.disabled = false;
|
||||
saveFolderBtn.textContent = 'Save Settings';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Function to load and initialize the Google Picker
|
||||
function loadGooglePicker(accessToken, clientId) {
|
||||
// Load the Google API Loader script
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://apis.google.com/js/api.js';
|
||||
script.onload = function() {
|
||||
gapi.load('picker', function() {
|
||||
initGooglePicker(accessToken, clientId);
|
||||
});
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
// Initialize and setup the Google Picker
|
||||
function initGooglePicker(accessToken, clientId) {
|
||||
if (!accessToken || !clientId || !folderSelectBtn) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup the click handler for the folder select button
|
||||
folderSelectBtn.addEventListener('click', function() {
|
||||
// Create the folder picker view
|
||||
const folderView = new google.picker.DocsView(google.picker.ViewId.FOLDERS)
|
||||
.setIncludeFolders(true)
|
||||
.setSelectFolderEnabled(true)
|
||||
.setMode(google.picker.DocsViewMode.LIST); // Use LIST mode to work with the drive.file scope
|
||||
|
||||
// Create and render the picker
|
||||
const picker = new google.picker.PickerBuilder()
|
||||
.addView(folderView)
|
||||
.setOAuthToken(accessToken)
|
||||
.setOrigin(window.location.protocol + '//' + window.location.host)
|
||||
.setTitle('Select a folder for DocuElevate')
|
||||
.setCallback(pickerCallback)
|
||||
.build();
|
||||
|
||||
picker.setVisible(true);
|
||||
});
|
||||
}
|
||||
|
||||
// Callback function for picker
|
||||
function pickerCallback(data) {
|
||||
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
|
||||
const folder = data[google.picker.Response.DOCUMENTS][0];
|
||||
const folderId = folder[google.picker.Document.ID];
|
||||
const folderName = folder[google.picker.Document.NAME];
|
||||
|
||||
// Update the folder ID input
|
||||
if (folderIdInput) {
|
||||
folderIdInput.value = folderId;
|
||||
|
||||
// Add visual confirmation instead of alert
|
||||
const confirmationMsg = document.createElement('div');
|
||||
confirmationMsg.className = 'mt-2 text-sm text-green-600';
|
||||
confirmationMsg.innerHTML = `<svg class="inline-block h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg> Selected folder: "${folderName}"`;
|
||||
|
||||
// Remove previous confirmation if it exists
|
||||
const existingConfirmation = folderIdInput.parentNode.querySelector('.text-green-600');
|
||||
if (existingConfirmation) {
|
||||
existingConfirmation.remove();
|
||||
}
|
||||
|
||||
// Insert the confirmation message after the input field
|
||||
folderIdInput.parentNode.appendChild(confirmationMsg);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user