${domain}
${recipe.title}
+ ${creatorBadge}
${recipe.description || 'No description available for this recipe.'}
@@ -633,6 +803,26 @@ function showRecipeDetails(recipe) {
elements.recipeDetailTitle.textContent = recipe.title;
elements.recipeDetailDescription.textContent = recipe.description || 'No description available for this recipe.';
+ // Ownership and Permission controls
+ const isOwner = recipe.userId === currentUser.id;
+ const canEdit = isOwner || currentUser.isRecipeManager || currentUser.isAdmin;
+ if (canEdit) {
+ elements.btnDetailEdit.style.display = 'flex';
+ elements.btnDetailDelete.style.display = 'flex';
+ } else {
+ elements.btnDetailEdit.style.display = 'none';
+ elements.btnDetailDelete.style.display = 'none';
+ }
+
+ if (isOwner) {
+ elements.btnDetailClone.style.display = 'none';
+ elements.recipeDetailCreator.style.display = 'none';
+ } else {
+ elements.btnDetailClone.style.display = 'flex';
+ elements.recipeDetailCreator.style.display = 'inline-flex';
+ elements.recipeDetailCreatorName.textContent = `@${recipe.createdBy || 'gourmet_system'}`;
+ }
+
// Setup meta tags
if (recipe.servings) {
elements.tagServings.style.display = 'flex';
@@ -655,6 +845,13 @@ function showRecipeDetails(recipe) {
elements.tagCook.style.display = 'none';
}
+ if (recipe.sourceUrl) {
+ elements.tagSource.style.display = 'flex';
+ elements.tagSource.href = recipe.sourceUrl;
+ } else {
+ elements.tagSource.style.display = 'none';
+ }
+
// Populate Ingredients with scaler
renderScaledIngredients();
@@ -686,6 +883,7 @@ function showRecipeDetails(recipe) {
});
}
+ lucide.createIcons();
openModal('detail-modal');
}
@@ -770,7 +968,6 @@ function nextCookingStep() {
} else {
// Finished cooking
exitCookingMode();
- alert('Congratulations! Enjoy your delicious meal.');
}
}
@@ -811,3 +1008,649 @@ function resetTimer() {
stopwatchSeconds = 0;
elements.cookTimerVal.textContent = '00:00';
}
+
+// -------------------------------------------------------------
+// USER AUTHENTICATION & SESSION MANAGEMENT
+// -------------------------------------------------------------
+
+function initAuth() {
+ const token = localStorage.getItem('gourmet_token');
+ const userJson = localStorage.getItem('gourmet_user');
+
+ if (token && userJson) {
+ currentUser = JSON.parse(userJson);
+ elements.authModal.classList.remove('active');
+ elements.authModal.style.display = 'none';
+ elements.userBadgeContainer.style.display = 'flex';
+ elements.userDisplayName.textContent = `@${currentUser.username}`;
+
+ // Toggle Admin visibility
+ if (currentUser.isAdmin) {
+ elements.tabUserAdmin.style.display = 'flex';
+ } else {
+ elements.tabUserAdmin.style.display = 'none';
+ }
+
+ // Reset view to My Cookbook on init
+ switchTab('my-cookbook');
+ } else {
+ elements.authModal.classList.add('active');
+ elements.authModal.style.display = 'flex';
+ elements.userBadgeContainer.style.display = 'none';
+ elements.tabUserAdmin.style.display = 'none';
+ }
+}
+
+async function handleLogin(e) {
+ e.preventDefault();
+ elements.authErrorMsg.style.display = 'none';
+
+ const username = elements.loginUsernameInput.value.trim();
+ const password = elements.loginPasswordInput.value;
+
+ try {
+ const response = await fetch('/api/auth/login', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ username, password })
+ });
+
+ if (!response.ok) {
+ const err = await response.json().catch(() => ({}));
+ throw new Error(err.error || 'Login failed.');
+ }
+
+ const data = await response.json();
+ localStorage.setItem('gourmet_token', data.token);
+ localStorage.setItem('gourmet_user', JSON.stringify(data.user));
+ currentUser = data.user;
+
+ elements.authModal.classList.remove('active');
+ elements.authModal.style.display = 'none';
+ elements.userBadgeContainer.style.display = 'flex';
+ elements.userDisplayName.textContent = `@${currentUser.username}`;
+
+ // Toggle Admin visibility
+ if (currentUser.isAdmin) {
+ elements.tabUserAdmin.style.display = 'flex';
+ } else {
+ elements.tabUserAdmin.style.display = 'none';
+ }
+
+ elements.loginForm.reset();
+
+ // Default back to My Cookbook on fresh login
+ switchTab('my-cookbook');
+ } catch (error) {
+ elements.authErrorText.textContent = error.message;
+ elements.authErrorMsg.style.display = 'flex';
+ }
+}
+
+function logout() {
+ localStorage.removeItem('gourmet_token');
+ localStorage.removeItem('gourmet_user');
+ currentUser = null;
+ elements.authModal.classList.add('active');
+ elements.authModal.style.display = 'flex';
+ elements.userBadgeContainer.style.display = 'none';
+ elements.tabUserAdmin.style.display = 'none';
+ allRecipes = [];
+
+ // Reset tabs visual state
+ elements.tabMyCookbook.classList.add('active');
+ elements.tabCommunityVault.classList.remove('active');
+ elements.tabUserAdmin.classList.remove('btn-primary');
+ elements.tabUserAdmin.classList.add('btn-outline');
+ elements.tabUserAdmin.classList.remove('active');
+ elements.userAdminPanel.style.display = 'none';
+ elements.recipesGrid.style.display = 'grid';
+
+ const filters = elements.librarySearch.closest('.filter-controls');
+ if (filters) filters.style.display = 'flex';
+
+ renderLibrary();
+}
+
+function switchTab(tabName) {
+ elements.tabMyCookbook.classList.remove('active');
+ elements.tabCommunityVault.classList.remove('active');
+ elements.tabUserAdmin.classList.remove('active');
+ elements.tabUserAdmin.classList.remove('btn-primary');
+ elements.tabUserAdmin.classList.add('btn-outline');
+
+ elements.recipesGrid.style.display = 'none';
+ elements.emptyState.style.display = 'none';
+ elements.userAdminPanel.style.display = 'none';
+
+ const filters = elements.librarySearch.closest('.filter-controls');
+ if (filters) filters.style.display = 'flex';
+
+ if (tabName === 'my-cookbook') {
+ elements.tabMyCookbook.classList.add('active');
+ elements.recipesGrid.style.display = 'grid';
+ activeTab = 'my-cookbook';
+ fetchRecipes();
+ } else if (tabName === 'community-vault') {
+ elements.tabCommunityVault.classList.add('active');
+ elements.recipesGrid.style.display = 'grid';
+ activeTab = 'community-vault';
+ fetchRecipes();
+ } else if (tabName === 'user-admin') {
+ elements.tabUserAdmin.classList.add('btn-primary');
+ elements.tabUserAdmin.classList.remove('btn-outline');
+ elements.userAdminPanel.style.display = 'block';
+ if (filters) filters.style.display = 'none';
+ activeTab = 'user-admin';
+ fetchAdminUsers();
+ }
+
+ lucide.createIcons();
+}
+
+// -------------------------------------------------------------
+// USER ADMINISTRATION MANAGEMENT PANEL (ADMIN ONLY)
+// -------------------------------------------------------------
+
+async function fetchAdminUsers() {
+ try {
+ const response = await fetch('/api/admin/users', {
+ headers: getAuthHeaders()
+ });
+
+ if (response.status === 401) {
+ logout();
+ return;
+ }
+
+ if (!response.ok) throw new Error('Failed to load registered chef accounts.');
+
+ const users = await response.json();
+ renderAdminUsers(users);
+ } catch (error) {
+ console.error('Error fetching admin users:', error);
+ }
+}
+
+function renderAdminUsers(users) {
+ elements.adminUsersList.innerHTML = '';
+
+ users.forEach(user => {
+ const tr = document.createElement('tr');
+
+ let roleBadge = user.isAdmin
+ ? 'Active Session `
+ : `
+ ${user.isAdmin
+ ? `
@${user.username}
+ ${roleBadge}
+ ${dateStr}
+ ${actionCell}
+ `;
+
+ elements.adminUsersList.appendChild(tr);
+ });
+
+ lucide.createIcons();
+}
+
+async function handleAdminCreateUser(e) {
+ e.preventDefault();
+ elements.adminCreateError.style.display = 'none';
+
+ const username = elements.adminNewUsername.value.trim();
+ const password = elements.adminNewPassword.value;
+
+ try {
+ const response = await fetch('/api/auth/register', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...getAuthHeaders()
+ },
+ body: JSON.stringify({ username, password })
+ });
+
+ if (response.status === 401) {
+ logout();
+ return;
+ }
+
+ if (!response.ok) {
+ const err = await response.json().catch(() => ({}));
+ throw new Error(err.error || 'Failed to create chef account.');
+ }
+
+ closeModal('admin-create-user-modal');
+ elements.adminCreateUserForm.reset();
+ fetchAdminUsers();
+ } catch (error) {
+ elements.adminCreateErrorText.textContent = error.message;
+ elements.adminCreateError.style.display = 'flex';
+ }
+}
+
+window.confirmDeleteUser = function(id, username) {
+ elements.deleteUserTargetId.value = id;
+ elements.deleteUserTargetName.textContent = `@${username}`;
+ elements.deleteUserPreserveRecipes.checked = true;
+ openModal('admin-delete-user-modal');
+};
+
+async function handleAdminDeleteUser() {
+ const id = elements.deleteUserTargetId.value;
+ const preserveRecipes = elements.deleteUserPreserveRecipes.checked;
+
+ try {
+ const response = await fetch(`/api/admin/users/${id}`, {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...getAuthHeaders()
+ },
+ body: JSON.stringify({ preserveRecipes })
+ });
+
+ if (response.status === 401) {
+ logout();
+ return;
+ }
+
+ if (!response.ok) {
+ const err = await response.json().catch(() => ({}));
+ throw new Error(err.error || 'Failed to delete user.');
+ }
+
+ closeModal('admin-delete-user-modal');
+ fetchAdminUsers();
+ } catch (error) {
+ alert(`Error deleting user: ${error.message}`);
+ }
+}
+
+window.toggleUserRole = async function(id, makeAdmin) {
+ try {
+ const response = await fetch(`/api/admin/users/${id}/role`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...getAuthHeaders()
+ },
+ body: JSON.stringify({ isAdmin: makeAdmin })
+ });
+
+ if (response.status === 401) {
+ logout();
+ return;
+ }
+
+ if (!response.ok) {
+ const err = await response.json().catch(() => ({}));
+ throw new Error(err.error || 'Failed to update user role.');
+ }
+
+ fetchAdminUsers();
+ } catch (error) {
+ alert(`Error updating role: ${error.message}`);
+ }
+};
+
+window.toggleRecipeManagerRole = async function(id, makeManager) {
+ try {
+ const response = await fetch(`/api/admin/users/${id}/recipe-manager`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...getAuthHeaders()
+ },
+ body: JSON.stringify({ isRecipeManager: makeManager })
+ });
+
+ if (response.status === 401) {
+ logout();
+ return;
+ }
+
+ if (!response.ok) {
+ const err = await response.json().catch(() => ({}));
+ throw new Error(err.error || 'Failed to update recipe manager permission.');
+ }
+
+ fetchAdminUsers();
+ } catch (error) {
+ alert(`Error updating permission: ${error.message}`);
+ }
+};
+
+// -------------------------------------------------------------
+// SYSTEM SETTINGS & GEMINI AI PHOTO SCANNER
+// -------------------------------------------------------------
+
+async function openSettingsModal() {
+ // Reset visibility states and statuses
+ elements.settingsStatusMsg.style.display = 'none';
+ elements.settingsGeminiKeyInput.type = 'password';
+ const toggleIcon = elements.btnToggleGeminiKey.querySelector('i, svg');
+ if (toggleIcon) toggleIcon.setAttribute('data-lucide', 'eye');
+ lucide.createIcons();
+
+ elements.settingsGeminiKeyInput.value = '';
+ elements.settingsGeminiKeyInput.placeholder = 'Loading credentials...';
+
+ openModal('settings-modal');
+
+ try {
+ const response = await fetch('/api/settings', {
+ headers: getAuthHeaders()
+ });
+ if (response.status === 401) {
+ logout();
+ closeModal('settings-modal');
+ return;
+ }
+ if (!response.ok) throw new Error('Settings could not be loaded.');
+ const settings = await response.json();
+
+ const key = settings.geminiApiKey ? settings.geminiApiKey.trim() : '';
+ const isPlaceholder = key === 'PASTE_YOUR_GEMINI_API_KEY_HERE';
+
+ elements.settingsGeminiKeyInput.placeholder = 'Enter your Gemini API key...';
+ if (key && !isPlaceholder) {
+ elements.settingsGeminiKeyInput.value = key;
+ }
+ } catch (err) {
+ console.error('Error loading settings:', err);
+ elements.settingsGeminiKeyInput.placeholder = 'Failed to load settings';
+ }
+}
+
+async function handleSaveSettings(e) {
+ e.preventDefault();
+ elements.settingsStatusMsg.style.display = 'none';
+
+ const key = elements.settingsGeminiKeyInput.value.trim();
+
+ try {
+ const response = await fetch('/api/settings', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...getAuthHeaders()
+ },
+ body: JSON.stringify({ geminiApiKey: key })
+ });
+
+ if (response.status === 401) {
+ logout();
+ closeModal('settings-modal');
+ return;
+ }
+
+ if (!response.ok) throw new Error('Failed to save settings file.');
+
+ // Show success status banner
+ elements.settingsStatusMsg.style.display = 'flex';
+ setTimeout(() => {
+ elements.settingsStatusMsg.style.display = 'none';
+ }, 4000);
+ } catch (err) {
+ console.error('Error saving settings:', err);
+ alert(`Failed to save settings: ${err.message}`);
+ }
+}
+
+function toggleSettingsKeyVisibility() {
+ const input = elements.settingsGeminiKeyInput;
+ const toggleIcon = elements.btnToggleGeminiKey.querySelector('i, svg');
+
+ if (input.type === 'password') {
+ input.type = 'text';
+ if (toggleIcon) toggleIcon.setAttribute('data-lucide', 'eye-off');
+ } else {
+ input.type = 'password';
+ if (toggleIcon) toggleIcon.setAttribute('data-lucide', 'eye');
+ }
+ lucide.createIcons();
+}
+
+function showScanLoading() {
+ elements.loadingOverlay.classList.add('active');
+
+ const title = elements.loadingOverlay.querySelector('h3');
+ const subtitle = elements.loadingOverlay.querySelector('.loader-subtitle');
+ if (title) title.textContent = 'Scanning Recipe Photo';
+ if (subtitle) subtitle.textContent = 'Loading parameters and initializing scanner...';
+
+ elements.loaderStepFetch.className = 'loader-step active';
+ elements.loaderStepParse.className = 'loader-step';
+ elements.loaderStepImages.className = 'loader-step';
+
+ elements.loaderStepFetch.querySelector('span:last-child').textContent = 'Loading system configuration...';
+ elements.loaderStepParse.querySelector('span:last-child').textContent = 'Compressing and optimizing image...';
+ elements.loaderStepImages.querySelector('span:last-child').textContent = 'Digitizing with Gemini Vision AI...';
+
+ setLoaderStepIcon(elements.loaderStepFetch, 'circle-dashed', true);
+ setLoaderStepIcon(elements.loaderStepParse, 'circle', false);
+ setLoaderStepIcon(elements.loaderStepImages, 'circle', false);
+ lucide.createIcons();
+}
+
+function hideScanLoading() {
+ elements.loadingOverlay.classList.remove('active');
+
+ // Restore original loading screen texts
+ const title = elements.loadingOverlay.querySelector('h3');
+ const subtitle = elements.loadingOverlay.querySelector('.loader-subtitle');
+ if (title) title.textContent = 'Extracting Recipe Data';
+ if (subtitle) subtitle.textContent = 'Retrieving site contents and parsing culinary structures...';
+
+ elements.loaderStepFetch.querySelector('span:last-child').textContent = 'Connecting to source URL...';
+ elements.loaderStepParse.querySelector('span:last-child').textContent = 'Parsing schema structures...';
+ elements.loaderStepImages.querySelector('span:last-child').textContent = 'Extracting high-res dish photos...';
+}
+
+function compressImage(file, maxDimension = 1600) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = (event) => {
+ const img = new Image();
+ img.src = event.target.result;
+ img.onload = () => {
+ let width = img.width;
+ let height = img.height;
+
+ // Downscale maintaining aspect ratio
+ if (width > maxDimension || height > maxDimension) {
+ if (width > height) {
+ height = Math.round((height * maxDimension) / width);
+ width = maxDimension;
+ } else {
+ width = Math.round((width * maxDimension) / height);
+ height = maxDimension;
+ }
+ }
+
+ const canvas = document.createElement('canvas');
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext('2d');
+ ctx.drawImage(img, 0, 0, width, height);
+
+ const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
+ const base64 = dataUrl.split(',')[1];
+ resolve({
+ dataUrl,
+ base64,
+ mimeType: 'image/jpeg'
+ });
+ };
+ img.onerror = (err) => reject(err);
+ };
+ reader.onerror = (err) => reject(err);
+ });
+}
+
+async function handleRecipeImageScan(e) {
+ const file = e.target.files[0];
+ if (!file) return;
+ scanRecipeFile(file);
+}
+
+async function handleClipboardPaste(e) {
+ // Only trigger scan if logged in to prevent unauthenticated access attempts
+ if (!currentUser) return;
+
+ const items = (e.clipboardData || e.originalEvent?.clipboardData)?.items;
+ if (!items) return;
+
+ for (const item of items) {
+ if (item.kind === 'file' && item.type.startsWith('image/')) {
+ const file = item.getAsFile();
+ e.preventDefault(); // Intercept paste action
+ scanRecipeFile(file);
+ break;
+ }
+ }
+}
+
+async function scanRecipeFile(file) {
+ showScanLoading();
+
+ try {
+ // 1. Fetch system-wide configuration
+ const settingsResponse = await fetch('/api/settings', {
+ headers: getAuthHeaders()
+ });
+ if (settingsResponse.status === 401) {
+ logout();
+ hideScanLoading();
+ return;
+ }
+ if (!settingsResponse.ok) {
+ throw new Error('Could not fetch settings. Please ensure system settings are configured.');
+ }
+ const settings = await settingsResponse.json();
+ const apiKey = settings.geminiApiKey ? settings.geminiApiKey.trim() : '';
+ const isPlaceholder = apiKey === 'PASTE_YOUR_GEMINI_API_KEY_HERE' || apiKey === '';
+
+ if (!apiKey || isPlaceholder) {
+ hideScanLoading();
+ elements.scanImageInput.value = '';
+ alert('Google Gemini API Key is not configured.\n\nPlease click the Settings button at the top right, configure your Google Gemini API Key, and try again.');
+ return;
+ }
+
+ // Step 1 Completed -> Activate Step 2 (Compression)
+ elements.loaderStepFetch.className = 'loader-step completed';
+ setLoaderStepIcon(elements.loaderStepFetch, 'check-circle-2', false);
+ elements.loaderStepParse.className = 'loader-step active';
+ setLoaderStepIcon(elements.loaderStepParse, 'circle-dashed', true);
+ lucide.createIcons();
+
+ // 2. Compress image using Canvas
+ const compressed = await compressImage(file, 1600);
+
+ // Step 2 Completed -> Activate Step 3 (Gemini transcription)
+ elements.loaderStepParse.className = 'loader-step completed';
+ setLoaderStepIcon(elements.loaderStepParse, 'check-circle-2', false);
+ elements.loaderStepImages.className = 'loader-step active';
+ setLoaderStepIcon(elements.loaderStepImages, 'circle-dashed', true);
+ lucide.createIcons();
+
+ // 3. Make direct call to Google Gemini Vision API
+ const promptText = "You are a professional culinary transcriber. Analyze the image of a recipe (which could be a cookbook page, handwritten note, screenshot, or packaging) and extract it accurately. Fill in all fields as completely as possible. The response must be a JSON object matching this schema:\n{\n \"title\": \"Recipe Title\",\n \"description\": \"Brief description or review\",\n \"servings\": \"e.g., 4\",\n \"prepTime\": \"e.g., 15 mins\",\n \"cookTime\": \"e.g., 30 mins\",\n \"totalTime\": \"e.g., 45 mins\",\n \"ingredients\": [\"ingredient 1\", \"ingredient 2\"],\n \"instructions\": [\"step 1\", \"step 2\"]\n}\nDo not include any markdown styling (like ```json) or explanation. Return only the raw JSON string.";
+
+ const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${apiKey}`;
+
+ const geminiResponse = await fetch(geminiUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ contents: [
+ {
+ parts: [
+ { text: promptText },
+ {
+ inlineData: {
+ mimeType: compressed.mimeType,
+ data: compressed.base64
+ }
+ }
+ ]
+ }
+ ],
+ generationConfig: {
+ responseMimeType: "application/json"
+ }
+ })
+ });
+
+ if (!geminiResponse.ok) {
+ const errorObj = await geminiResponse.json().catch(() => ({}));
+ const status = geminiResponse.status;
+ let errMsg = 'Google Gemini API call failed.';
+ if (status === 400) {
+ errMsg = 'Invalid parameters or model version. Please verify your settings.';
+ } else if (status === 403) {
+ errMsg = 'Access denied. The Google Gemini API key is invalid or inactive.';
+ } else if (status === 429) {
+ errMsg = 'Rate limit exceeded. You have made too many requests or hit your Gemini quota.';
+ } else if (errorObj.error && errorObj.error.message) {
+ errMsg = `Gemini API Error: ${errorObj.error.message}`;
+ }
+ throw new Error(errMsg);
+ }
+
+ const result = await geminiResponse.json();
+ if (!result.candidates || result.candidates.length === 0 || !result.candidates[0].content) {
+ throw new Error('Gemini API returned an empty response. The text in the image may be unreadable.');
+ }
+
+ const rawText = result.candidates[0].content.parts[0].text;
+ const recipeData = JSON.parse(rawText);
+
+ // Auto-inject the scanned local picture as a custom visual preview option
+ recipeData.images = [compressed.dataUrl];
+ recipeData.image = compressed.dataUrl;
+
+ // 4. Finalize and trigger draft preview
+ hideScanLoading();
+ elements.scanImageInput.value = '';
+ openDraftPreview(recipeData);
+
+ } catch (error) {
+ console.error('Photo scanning error occurred:', error);
+ hideScanLoading();
+ elements.scanImageInput.value = '';
+ alert(`Scanning Failed: ${error.message}\n\nPlease verify your internet connection and check that your Gemini API Key is correct.`);
+ }
+}
diff --git a/public/index.html b/public/index.html
index 11c107e..860f728 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
GourmetVault – Curated Recipe Manager
+ ForkFolio – Curated Recipe Manager
+
+
+