feat(auth-firebase): implement Phase 2 integration - Firebase Auth, Session Sync, Favorites Grid, and Firestore Newsletter
This commit is contained in:
@@ -5,6 +5,23 @@
|
||||
$contactEmail = $settings['imprint'][$langCode]['email'] ?? 'contact@flixcooks.at';
|
||||
?>
|
||||
<footer class="site-footer" role="contentinfo">
|
||||
<section class="footer-newsletter">
|
||||
<div class="newsletter-content">
|
||||
<h3><?php echo $langCode === 'de' ? 'Bleib inspiriert' : 'Stay Inspired'; ?></h3>
|
||||
<p><?php echo $langCode === 'de' ? 'Melde dich für unseren Newsletter an und erhalte saisonale Rezepte direkt in dein Postfach.' : 'Sign up for our newsletter and get seasonal recipes delivered straight to your inbox.'; ?></p>
|
||||
</div>
|
||||
<form class="newsletter-form" id="newsletterForm" onsubmit="handleSubscribe(event)">
|
||||
<div class="newsletter-input-group">
|
||||
<input type="email" id="newsletterEmail" placeholder="<?php echo $langCode === 'de' ? 'Deine E-Mail-Adresse...' : 'Your email address...'; ?>" required>
|
||||
<button type="submit" aria-label="Subscribe">
|
||||
<span class="btn-text">→</span>
|
||||
<span class="btn-success-check">✓</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="newsletter-feedback" id="newsletterFeedback"></div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div class="footer-meta">
|
||||
<p><?php echo $langCode === 'de' ? 'Designed & entwickelt von Felix Brockers' : 'Designed & built by Felix Brockers'; ?></p>
|
||||
<a class="contact-link underline-link" href="mailto:<?php echo e($contactEmail); ?>">
|
||||
@@ -44,6 +61,183 @@
|
||||
})();
|
||||
|
||||
|
||||
// ── Newsletter subscription logic ──────────────────────────
|
||||
function handleSubscribe(e) {
|
||||
e.preventDefault();
|
||||
var emailInput = document.getElementById('newsletterEmail');
|
||||
var feedback = document.getElementById('newsletterFeedback');
|
||||
var form = document.getElementById('newsletterForm');
|
||||
var btn = form.querySelector('button');
|
||||
var email = emailInput.value.trim();
|
||||
|
||||
if (!email) return;
|
||||
|
||||
btn.disabled = true;
|
||||
feedback.className = 'newsletter-feedback';
|
||||
feedback.textContent = '';
|
||||
|
||||
window.db.collection('subscribers').doc(email.toLowerCase()).set({
|
||||
email: email.toLowerCase(),
|
||||
subscribedAt: firebase.firestore.FieldValue.serverTimestamp(),
|
||||
status: 'active'
|
||||
})
|
||||
.then(function() {
|
||||
form.classList.add('success');
|
||||
emailInput.disabled = true;
|
||||
feedback.className = 'newsletter-feedback success';
|
||||
feedback.textContent = '<?php echo $langCode === "de" ? "Erfolgreich abonniert!" : "Successfully subscribed!"; ?>';
|
||||
})
|
||||
.catch(function(error) {
|
||||
btn.disabled = false;
|
||||
feedback.className = 'newsletter-feedback error';
|
||||
feedback.textContent = '<?php echo $langCode === "de" ? "Fehler: " : "Error: "; ?>' + error.message;
|
||||
});
|
||||
}
|
||||
|
||||
// ── Guest Modal Logic ──────────────────────────────────────
|
||||
function openGuestModal() {
|
||||
var modal = document.getElementById('guestFavModal');
|
||||
if (modal) {
|
||||
modal.classList.add('open');
|
||||
modal.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
function closeGuestModal() {
|
||||
var modal = document.getElementById('guestFavModal');
|
||||
if (modal) {
|
||||
modal.classList.remove('open');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Close guest modal if clicking backdrop
|
||||
document.addEventListener('click', function(e) {
|
||||
var modal = document.getElementById('guestFavModal');
|
||||
if (modal && e.target === modal) {
|
||||
closeGuestModal();
|
||||
}
|
||||
});
|
||||
|
||||
// ── Favorites Toggle & Management ───────────────────────────
|
||||
var currentUser = null;
|
||||
var userFavSlugs = new Set();
|
||||
|
||||
function syncFavorites(uid) {
|
||||
window.db.collection('user_favorites').where('userId', '==', uid).get()
|
||||
.then(function(snapshot) {
|
||||
userFavSlugs.clear();
|
||||
snapshot.forEach(function(doc) {
|
||||
userFavSlugs.add(doc.data().recipeSlug);
|
||||
});
|
||||
updateHeartStates();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error("Error syncing favorites: ", err);
|
||||
});
|
||||
}
|
||||
|
||||
function clearFavorites() {
|
||||
userFavSlugs.clear();
|
||||
updateHeartStates();
|
||||
}
|
||||
|
||||
function updateHeartStates() {
|
||||
document.querySelectorAll('.btn-favorite').forEach(function(btn) {
|
||||
var slug = btn.getAttribute('data-slug');
|
||||
if (userFavSlugs.has(slug)) {
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleFavorite(slug, btn) {
|
||||
if (!currentUser) {
|
||||
openGuestModal();
|
||||
return;
|
||||
}
|
||||
|
||||
var docId = currentUser.uid + '_' + slug;
|
||||
var docRef = window.db.collection('user_favorites').doc(docId);
|
||||
|
||||
if (userFavSlugs.has(slug)) {
|
||||
// Optimistic UI update
|
||||
userFavSlugs.delete(slug);
|
||||
btn.classList.remove('active');
|
||||
|
||||
docRef.delete()
|
||||
.catch(function(err) {
|
||||
console.error("Error removing favorite: ", err);
|
||||
// Rollback
|
||||
userFavSlugs.add(slug);
|
||||
btn.classList.add('active');
|
||||
});
|
||||
} else {
|
||||
// Optimistic UI update
|
||||
userFavSlugs.add(slug);
|
||||
btn.classList.add('active');
|
||||
|
||||
docRef.set({
|
||||
userId: currentUser.uid,
|
||||
recipeSlug: slug,
|
||||
createdAt: firebase.firestore.FieldValue.serverTimestamp()
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error("Error adding favorite: ", err);
|
||||
// Rollback
|
||||
userFavSlugs.delete(slug);
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Hook up event listeners to all favorite buttons dynamically
|
||||
document.addEventListener('click', function(e) {
|
||||
var btn = e.target.closest('.btn-favorite');
|
||||
if (btn) {
|
||||
var slug = btn.getAttribute('data-slug');
|
||||
if (slug) {
|
||||
toggleFavorite(slug, btn);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Setup Auth state observer for favorites
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.auth) {
|
||||
window.auth.onAuthStateChanged(function(user) {
|
||||
currentUser = user;
|
||||
if (user) {
|
||||
syncFavorites(user.uid);
|
||||
} else {
|
||||
clearFavorites();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Guest Favoriting Prompt Modal -->
|
||||
<div class="guest-modal-backdrop" id="guestFavModal" aria-hidden="true" role="dialog">
|
||||
<div class="guest-modal-card">
|
||||
<button class="guest-modal-close" onclick="closeGuestModal()" aria-label="Close modal">×</button>
|
||||
<div class="guest-modal-icon">❤️</div>
|
||||
<h3><?php echo $langCode === 'de' ? 'Lieblingsrezept speichern' : 'Save your favorite recipe'; ?></h3>
|
||||
<p><?php echo $langCode === 'de' ? 'Erstelle ein kostenloses Konto oder melde dich an, um Rezepte in deinen Favoriten zu speichern und deine Ernährungsziele zu verwalten.' : 'Create a free account or login to save recipes to your favorites and manage your dietary goals.'; ?></p>
|
||||
<div class="guest-modal-actions">
|
||||
<a class="btn-reveal" href="/login.php<?php echo $langSuffix; ?>">
|
||||
<span class="btn-reveal-text"><?php echo $langCode === 'de' ? 'Jetzt Anmelden' : 'Login / Register'; ?></span>
|
||||
<span class="btn-reveal-arrow">→</span>
|
||||
</a>
|
||||
<button class="underline-link" onclick="closeGuestModal()"><?php echo $langCode === 'de' ? 'Später' : 'Maybe later'; ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user