Skip to content

Commit 3f294fa

Browse files
GauriGupta21GauriGupta21
authored
Add clear and meaningful comments for better code understanding (#138)
2 parents a8aad4e + eede974 commit 3f294fa

File tree

5 files changed

+181
-135
lines changed

5 files changed

+181
-135
lines changed

‎frontend/index.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,26 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>WikiContest - Contest Management Platform</title>
7-
<!-- Google Fonts - Inter font family -->
7+
8+
<!-- Google Fonts - Inter font family for modern typography -->
89
<link rel="preconnect" href="https://fonts.googleapis.com">
910
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1011
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11-
<!-- Bootstrap CSS for styling -->
12+
13+
<!-- Bootstrap CSS for responsive layout and components -->
1214
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
13-
<!-- Font Awesome for icons -->
15+
16+
<!-- Font Awesome for icons throughout the application -->
1417
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
1518
</head>
1619
<body>
1720
<!-- Vue.js app will mount here -->
1821
<div id="app"></div>
1922

20-
<!-- Bootstrap JS for modals and dropdowns -->
23+
<!-- Bootstrap JS for interactive components (modals, dropdowns, etc.) -->
2124
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
25+
2226
<!-- Vue.js application entry point -->
2327
<script type="module" src="/src/main.js"></script>
2428
</body>
25-
</html>
29+
</html>

‎frontend/src/App.vue‎

Lines changed: 16 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
<i class="fas fa-user me-2"></i>Profile
6262
</router-link>
6363
</li>
64+
<!-- Jury Dashboard link - only visible to jury members -->
6465
<li v-if="isJury">
6566
<router-link class="dropdown-item" to="/jurydashboard">
6667
<i class="fas fa-tachometer-alt me-2"></i>Jury Dashboard
@@ -110,18 +111,17 @@ export default {
110111
const router = useRouter()
111112
const isJury = ref(false)
112113
113-
// Use store's computed properties directly - they are already reactive
114-
// Don't wrap them in another computed() - that breaks reactivity
114+
// Access reactive store properties directly without wrapping
115115
const isAuthenticated = store.isAuthenticated
116116
const currentUser = store.currentUser
117117
const theme = store.theme
118118
119-
// Toggle theme function
119+
// Toggle between light and dark theme
120120
const toggleTheme = () => {
121121
store.toggleTheme()
122122
}
123123
124-
// Get API base URL - use full URL for OAuth to ensure proper redirect
124+
// Return appropriate API base URL based on environment
125125
const getApiBaseUrl = () => {
126126
// In development, use full URL to Flask backend
127127
if (import.meta.env.DEV) {
@@ -131,15 +131,15 @@ export default {
131131
return '/api'
132132
}
133133
134-
// Check authentication on app mount
135-
// This runs after initial render, so buttons will show immediately
134+
// Initialize app state and check authentication on mount
136135
onMounted(async () => {
137-
// Apply theme on mount (in case store hasn't initialized it yet)
136+
// Apply saved theme preference from localStorage
138137
if (typeof document !== 'undefined') {
139138
const savedTheme = localStorage.getItem('theme') || 'light'
140139
store.setTheme(savedTheme)
141140
}
142141
142+
// Verify user authentication status
143143
try {
144144
// Force a fresh auth check - this will clear state if not authenticated
145145
await store.checkAuth()
@@ -149,38 +149,37 @@ export default {
149149
// checkAuth already clears state on error
150150
console.log('Auth check completed - user not logged in')
151151
}
152+
// Determine if user has jury privileges
152153
try {
153154
const data = await api.get('/user/dashboard')
154155
155-
// 👇 FRONTEND-ONLY JURY CHECK
156+
// Frontend-only check: user is jury if they have assigned contests
156157
isJury.value = Array.isArray(data.jury_contests) && data.jury_contests.length > 0
157158
} catch (e) {
158159
isJury.value = false
159160
}
160161
})
161162
162-
// Logout handler
163+
// Handle user logout and cleanup
163164
const handleLogout = async () => {
164165
try {
165-
// Logout clears state immediately
166+
// Clear user session and state
166167
await store.logout()
167168
168169
// Small delay to ensure cookies are cleared on backend
169170
await new Promise(resolve => setTimeout(resolve, 200))
170171
171-
// Force a fresh auth check to verify logout worked
172-
// This ensures state is definitely cleared
172+
// Verify logout by forcing fresh auth check
173173
await store.checkAuth()
174174
175175
// Show success message
176176
const { showAlert } = await import('./utils/alerts')
177177
showAlert('Logged out successfully', 'success')
178178
179-
// Redirect to home - state is already cleared
179+
// Redirect to home page
180180
router.push('/')
181181
} catch (error) {
182-
// Even if logout fails, ensure state is cleared
183-
// Force checkAuth to clear any stale state
182+
// Ensure state is cleared even if logout request fails
184183
await store.checkAuth()
185184
186185
const { showAlert } = await import('./utils/alerts')
@@ -210,10 +209,6 @@ export default {
210209
* Outer Space: #484848 (text/dark)
211210
*/
212211
213-
/* ================================
214-
WIKIMEDIA UI UPGRADE – PREMIUM
215-
================================ */
216-
217212
/* --- Brand Colors --- */
218213
:root {
219214
--crimson: #990000;
@@ -244,9 +239,6 @@ input {
244239
letter-spacing: 0.2px;
245240
}
246241
247-
/* =======================
248-
NAVBAR - Professional Design
249-
======================= */
250242
.navbar {
251243
background: var(--wiki-navbar-bg) !important;
252244
border-bottom: 1px solid var(--wiki-border);
@@ -256,6 +248,7 @@ input {
256248
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
257249
}
258250
251+
/* Dark mode navbar styling */
259252
[data-theme="dark"] .navbar {
260253
background: var(--wiki-navbar-bg) !important;
261254
border-bottom: 1px solid var(--wiki-border);
@@ -336,9 +329,6 @@ input {
336329
background: var(--wiki-hover-bg);
337330
}
338331
339-
/* =======================
340-
Buttons - Professional Style
341-
======================= */
342332
.btn-primary {
343333
background: var(--wiki-primary);
344334
border: 1px solid var(--wiki-primary);
@@ -408,9 +398,6 @@ input {
408398
background: var(--wiki-hover-bg);
409399
}
410400
411-
/* =======================
412-
Dropdown Menu - Professional
413-
======================= */
414401
.dropdown-menu {
415402
border-radius: 4px;
416403
padding: 0.25rem 0;
@@ -463,9 +450,6 @@ input {
463450
color: #990000 !important;
464451
}
465452
466-
/* =======================
467-
Global Card UI - Professional
468-
======================= */
469453
.card {
470454
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
471455
border: 1px solid var(--wiki-border);
@@ -493,9 +477,6 @@ input {
493477
font-size: 1.1rem;
494478
}
495479
496-
/* =======================
497-
Responsive Enhancements
498-
======================= */
499480
@media (max-width: 768px) {
500481
.navbar-brand {
501482
font-size: 1.3rem;
@@ -505,4 +486,4 @@ input {
505486
width: 100%;
506487
}
507488
}
508-
</style>
489+
</style>

‎frontend/src/main.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const app = createApp(App)
1818
// Use Vue Router for navigation
1919
app.use(router)
2020

21-
// Process OAuth callback if we just returned from Wikimedia
21+
// Wait for router to be ready before processing OAuth callback
2222
router.isReady().then(() => {
2323
const store = useStore()
24+
// Handle OAuth redirect from Wikimedia login
2425
processOAuthCallback(store, router)
2526
})
2627

2728
// Mount the app to the DOM
28-
app.mount('#app')
29-
29+
app.mount('#app')

0 commit comments

Comments
 (0)