Skip to content

Commit 0bb98b6

Browse files
NekshaDeSilvaNekshaDeSilva
committed
update the community changes
1 parent aa14fde commit 0bb98b6

File tree

2 files changed

+531
-7
lines changed

2 files changed

+531
-7
lines changed

‎scripts/community-integration.js‎

Lines changed: 231 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,239 @@
11
// Community Page Integration with Backend
22
document.addEventListener('DOMContentLoaded', async function() {
3-
// Ensure user is authenticated
4-
if (!api.requireAuth()) return;
5-
6-
// Load community data
7-
await loadCommunityData();
3+
// Check if user is authenticated, but don't redirect
4+
const isAuthenticated = api.isAuthenticated();
85

9-
// Set up real-time features
10-
setupCommunityFeatures();
6+
if (isAuthenticated) {
7+
// Load full community data for authenticated users
8+
await loadCommunityData();
9+
setupCommunityFeatures();
10+
} else {
11+
// Load limited community data for guests
12+
await loadPublicCommunityData();
13+
setupGuestFeatures();
14+
showAuthPrompts();
15+
}
1116
});
1217

18+
async function loadPublicCommunityData() {
19+
try {
20+
// Show loading state
21+
showCommunityLoading(true);
22+
23+
// Load public posts (no authentication required)
24+
await loadPublicPosts();
25+
26+
// Load trending topics (public)
27+
await loadTrendingTopics();
28+
29+
// Show sample active users and study groups
30+
showSampleData();
31+
32+
} catch (error) {
33+
console.error('Failed to load public community data:', error);
34+
showOfflineMessage();
35+
} finally {
36+
showCommunityLoading(false);
37+
}
38+
}
39+
40+
async function loadPublicPosts() {
41+
try {
42+
// For now, show the existing static posts
43+
// In a real implementation, you'd fetch public posts without auth
44+
const postsContainer = document.querySelector('.posts-feed');
45+
if (postsContainer && postsContainer.children.length === 0) {
46+
// Posts are already in the HTML, so no need to load
47+
console.log('Using existing static posts for demo');
48+
}
49+
} catch (error) {
50+
console.error('Failed to load public posts:', error);
51+
}
52+
}
53+
54+
function setupGuestFeatures() {
55+
// Disable posting features for guests
56+
const createPostBtn = document.getElementById('createPostBtn');
57+
if (createPostBtn) {
58+
createPostBtn.addEventListener('click', () => {
59+
showAuthPrompt('You need to log in to create posts. Join our community!');
60+
});
61+
}
62+
63+
// Disable interaction buttons for guests
64+
document.querySelectorAll('.action-btn').forEach(btn => {
65+
btn.addEventListener('click', (e) => {
66+
e.preventDefault();
67+
showAuthPrompt('Please log in to interact with posts!');
68+
});
69+
});
70+
71+
// Disable chat for guests
72+
const chatInput = document.getElementById('chatInput');
73+
if (chatInput) {
74+
chatInput.disabled = true;
75+
chatInput.placeholder = 'Log in to join the conversation...';
76+
}
77+
78+
const chatSendBtn = document.getElementById('chatSendBtn');
79+
if (chatSendBtn) {
80+
chatSendBtn.disabled = true;
81+
chatSendBtn.addEventListener('click', () => {
82+
showAuthPrompt('Please log in to participate in community chat!');
83+
});
84+
}
85+
}
86+
87+
function showAuthPrompts() {
88+
// Add login prompts to various sections
89+
const sidebar = document.querySelector('.community-right-sidebar');
90+
if (sidebar) {
91+
const authPrompt = document.createElement('div');
92+
authPrompt.className = 'sidebar-card auth-prompt';
93+
authPrompt.innerHTML = `
94+
<div class="auth-prompt-content">
95+
<div class="auth-prompt-icon">
96+
<i class="fas fa-rocket"></i>
97+
</div>
98+
<h3>Join OpenRockets!</h3>
99+
<p>Sign up to participate in discussions, share projects, and connect with fellow developers.</p>
100+
<div class="auth-prompt-buttons">
101+
<button class="btn-primary" onclick="showRegisterModal()">
102+
<i class="fas fa-user-plus"></i>
103+
Sign Up Free
104+
</button>
105+
<button class="btn-secondary" onclick="showLoginModal()">
106+
<i class="fas fa-sign-in-alt"></i>
107+
Sign In
108+
</button>
109+
</div>
110+
<div class="auth-prompt-features">
111+
<div class="feature-item">
112+
<i class="fas fa-comments"></i>
113+
<span>Real-time chat</span>
114+
</div>
115+
<div class="feature-item">
116+
<i class="fas fa-share-alt"></i>
117+
<span>Share projects</span>
118+
</div>
119+
<div class="feature-item">
120+
<i class="fas fa-users"></i>
121+
<span>Study groups</span>
122+
</div>
123+
</div>
124+
</div>
125+
`;
126+
sidebar.insertBefore(authPrompt, sidebar.firstChild);
127+
}
128+
}
129+
130+
function showAuthPrompt(message) {
131+
// Create a nice auth prompt modal
132+
const authPromptModal = document.createElement('div');
133+
authPromptModal.className = 'auth-prompt-modal';
134+
authPromptModal.innerHTML = `
135+
<div class="auth-prompt-modal-content">
136+
<div class="auth-prompt-header">
137+
<div class="auth-prompt-icon">
138+
<i class="fas fa-lock"></i>
139+
</div>
140+
<h3>Authentication Required</h3>
141+
<button class="close-auth-prompt" onclick="this.closest('.auth-prompt-modal').remove()">
142+
<i class="fas fa-times"></i>
143+
</button>
144+
</div>
145+
<div class="auth-prompt-body">
146+
<p>${message}</p>
147+
<div class="auth-prompt-benefits">
148+
<div class="benefit-item">
149+
<i class="fas fa-check-circle"></i>
150+
<span>Free forever</span>
151+
</div>
152+
<div class="benefit-item">
153+
<i class="fas fa-check-circle"></i>
154+
<span>Join 1000+ developers</span>
155+
</div>
156+
<div class="benefit-item">
157+
<i class="fas fa-check-circle"></i>
158+
<span>Real-time collaboration</span>
159+
</div>
160+
</div>
161+
</div>
162+
<div class="auth-prompt-footer">
163+
<button class="btn-primary" onclick="showRegisterModal(); this.closest('.auth-prompt-modal').remove();">
164+
<i class="fas fa-rocket"></i>
165+
Join OpenRockets
166+
</button>
167+
<button class="btn-secondary" onclick="showLoginModal(); this.closest('.auth-prompt-modal').remove();">
168+
<i class="fas fa-sign-in-alt"></i>
169+
Sign In
170+
</button>
171+
</div>
172+
</div>
173+
`;
174+
175+
document.body.appendChild(authPromptModal);
176+
177+
// Remove after 5 seconds if user doesn't interact
178+
setTimeout(() => {
179+
if (authPromptModal.parentNode) {
180+
authPromptModal.remove();
181+
}
182+
}, 8000);
183+
}
184+
185+
function showSampleData() {
186+
// Update online count with sample data
187+
const onlineCount = document.getElementById('onlineCount');
188+
if (onlineCount) {
189+
onlineCount.textContent = '150+ online';
190+
}
191+
192+
// Add sample chat messages if empty
193+
const chatMessages = document.getElementById('chatMessages');
194+
if (chatMessages && chatMessages.children.length <= 1) {
195+
const sampleMessages = [
196+
{ user: 'Sarah', message: 'Welcome to OpenRockets! 🚀 Great to have you here!', time: '2 min ago' },
197+
{ user: 'Mike', message: 'Just finished the React tutorial - amazing content!', time: '5 min ago' },
198+
{ user: 'Emma', message: 'Anyone working on the JavaScript challenge?', time: '8 min ago' }
199+
];
200+
201+
sampleMessages.forEach(msg => {
202+
const messageEl = document.createElement('div');
203+
messageEl.className = 'chat-message sample-message';
204+
messageEl.innerHTML = `
205+
<div class="message-avatar">${msg.user[0]}</div>
206+
<div class="message-content">
207+
<div class="message-author">${msg.user}</div>
208+
<div class="message-text">${msg.message}</div>
209+
<div class="message-time">${msg.time}</div>
210+
</div>
211+
`;
212+
chatMessages.appendChild(messageEl);
213+
});
214+
}
215+
}
216+
217+
function showOfflineMessage() {
218+
const postsContainer = document.querySelector('.posts-feed');
219+
if (postsContainer) {
220+
postsContainer.innerHTML = `
221+
<div class="offline-message">
222+
<div class="offline-icon">
223+
<i class="fas fa-wifi-slash"></i>
224+
</div>
225+
<h3>Unable to connect to community server</h3>
226+
<p>Don't worry! You can still browse the community and see sample content.
227+
Some features may be limited until the server connection is restored.</p>
228+
<button class="btn-primary" onclick="window.location.reload()">
229+
<i class="fas fa-sync-alt"></i>
230+
Try Again
231+
</button>
232+
</div>
233+
`;
234+
}
235+
}
236+
13237
async function loadCommunityData() {
14238
try {
15239
// Show loading state

0 commit comments

Comments
 (0)