github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-03-11 17:49:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1206 from harvard-edge/feat/account-deletion-calendar

Browse Source 
updated calendar to pull from real cal, account deletions enabled
This commit is contained in:
Vijay Janapa Reddi
2026-02-27 08:57:37 -05:00
committed by GitHub
parent 130d3cc133 5ae6b3bd5f
commit 2737f6e43d
5 changed files with 395 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tinytorch/site/extra/community/app.js
View File

@@ -2,7 +2,7 @@ import { injectStyles } from './modules/styles.js';
import { renderLayout, updateNavState } from './modules/ui.js?v=3';
import { getSession } from './modules/state.js?v=2';
import { openModal, closeModal, handleToggle, handleAuth, handleLogout, setMode, verifySession, signInWithSocial, supabase } from './modules/auth.js?v=3';
import { openProfileModal, closeProfileModal, handleProfileUpdate, geocodeAndSetCoordinates, checkAndAutoUpdateLocation } from './modules/profile.js';
import { openProfileModal, closeProfileModal, handleProfileUpdate, geocodeAndSetCoordinates, checkAndAutoUpdateLocation, setupProfileDeleteEvents } from './modules/profile.js';
import { setupCameraEvents } from './modules/camera.js';
import { getBasePath } from './modules/config.js';
@@ -32,6 +32,9 @@ import { getBasePath } from './modules/config.js';
});
}
// Initialize profile events
setupProfileDeleteEvents();
// 2.6 Check for Supabase Session & Verify
const checkProfile = async (session) => {
if (!session || window.location.pathname.includes('profile_setup')) return;

300
tinytorch/site/extra/community/events.html
View File

@@ -27,7 +27,7 @@
margin-bottom: 50px;
width: 95%;
max-width: 1200px;
background: rgba(255, 255, 255, 0.95);
background: #fff; /* Solid white background */
border: 1px solid #333;
box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
padding: 40px;
@@ -150,9 +150,11 @@
.legend {
margin-top: 20px;
display: flex;
gap: 20px;
flex-direction: column;
gap: 15px;
font-size: 0.8rem;
font-family: 'Verdana', sans-serif;
align-items: flex-start;
}
.legend-item {
@@ -167,6 +169,104 @@
border-radius: 2px;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
backdrop-filter: blur(4px);
}
.modal-content {
background: #fff;
width: 90%;
max-width: 500px;
border: 2px solid #333;
box-shadow: 10px 10px 0px #ff6600;
padding: 30px;
position: relative;
animation: modalSlide 0.3s ease-out;
}
@keyframes modalSlide {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
font-weight: bold;
}
.modal-title {
font-size: 1.4rem;
margin-bottom: 15px;
color: #ff6600;
border-bottom: 2px dashed #eee;
padding-bottom: 10px;
text-transform: uppercase;
}
.modal-details {
font-family: 'Verdana', sans-serif;
font-size: 0.9rem;
line-height: 1.6;
}
.modal-row {
margin-bottom: 12px;
}
.modal-label {
font-weight: bold;
color: #555;
display: block;
font-size: 0.75rem;
text-transform: uppercase;
}
.show-more {
font-size: 0.7rem;
color: #ff6600;
cursor: pointer;
font-weight: bold;
text-align: center;
display: block;
margin-top: 2px;
text-decoration: underline;
}
.btn-google {
display: block;
width: 100%;
text-align: center;
background: #ff6600;
color: white !important;
padding: 12px;
text-decoration: none;
font-weight: bold;
margin-top: 25px;
border: 2px solid #333;
box-shadow: 4px 4px 0px #333;
transition: all 0.1s;
}
.btn-google:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px #333;
}
/* Responsive */
@media (max-width: 700px) {
.day { min-height: 60px; }
@@ -202,17 +302,45 @@
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background: #ff6600;"></div>
<span>General Events</span>
<div style="display: flex; gap: 20px;">
<div class="legend-item">
<div class="legend-color" style="background: #ff6600;"></div>
<span>General Events</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00bcd4;"></div>
<span>Historical Dates</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #8bc34a;"></div>
<span>Community</span>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00bcd4;"></div>
<span>Historical Dates</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #8bc34a;"></div>
<span>Community</span>
<a href="https://calendar.google.com/calendar/embed?src=a6a109f7e2da7b66503ca3cd8ed1bc18c9755c0cecb99897a3761731f5663852%40group.calendar.google.com&ctz=America%2FNew_York" target="_blank" class="btn-google" style="margin-top: 20px; width: auto; display: inline-block; padding: 10px 20px;">
VIEW FULL CALENDAR IN GOOGLE
</a>
</div>
</div>
<!-- Event Detail Modal -->
<div id="eventModal" class="modal-overlay">
<div class="modal-content">
<span class="modal-close" id="modalClose">&times;</span>
<div id="modalTitle" class="modal-title">Event Title</div>
<div class="modal-details">
<div class="modal-row">
<span class="modal-label">When</span>
<span id="modalWhen"></span>
</div>
<div class="modal-row" id="locationRow">
<span class="modal-label">Where</span>
<span id="modalWhere"></span>
</div>
<div class="modal-row" id="descriptionRow">
<span class="modal-label">Description</span>
<div id="modalDescription"></div>
</div>
<a id="modalLink" href="#" target="_blank" class="btn-google">OPEN IN GOOGLE CALENDAR</a>
</div>
</div>
</div>
@@ -222,49 +350,111 @@
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
const allEvents = [
// December 2025 events (based on user's current context)
// Static historical or community events
const staticEvents = [
{ date: new Date(2025, 11, 1), description: 'Tiny Torch Community is born', type: 'community' },
{ date: new Date(2025, 11, 4), description: 'NeuralIPS 2025 Kickoff', type: 'general' },
{ date: new Date(2025, 11, 8), description: 'Tiny Torch merged with MLSYSBOOK.ai', type: 'community' },
{ date: new Date(2025, 11, 9), description: 'Tiny Torch official launch', type: 'community' },
{ date: new Date(2025, 11, 10), description: 'Ada Lovelace Birthday (1815)', type: 'historical' },
{ date: new Date(2025, 11, 17), description: 'MLSYSBOOK 10k GitHub Stars Celebration via Edge AI Foundation', type: 'community' },
{ date: new Date(2025, 11, 17), description: 'MLSYSBOOK 10k GitHub Stars', type: 'community' },
{ date: new Date(2025, 11, 25), description: 'AI Winter Solstice', type: 'general' },
// Additional AI known dates (historical or general for other months)
{ date: new Date(2022, 10, 30), description: 'ChatGPT Launched', type: 'historical' }, // November 30, 2022
{ date: new Date(1956, 7, 1), description: 'Dartmouth Conference (Birth of AI)', type: 'historical' }, // August 1, 1956
{ date: new Date(1997, 4, 11), description: 'Deep Blue vs Garry Kasparov', type: 'historical' }, // May 11, 1997
{ date: new Date(2016, 2, 9), description: 'AlphaGo vs Lee Sedol', type: 'historical' }, // March 9, 2016
{ date: new Date(2025, 0, 15), description: 'Future AI Summit', type: 'general' }, // January 15, 2025
{ date: new Date(2025, 1, 20), description: 'Quantum AI Workshop', type: 'community' }, // February 20, 2025
{ date: new Date(2025, 8, 1), description: 'Generative AI Conference', type: 'general' }, // Sep 1, 2025
{ date: new Date(2025, 9, 26), description: 'AI Ethics Panel', type: 'community' } // Oct 26, 2025
{ date: new Date(2022, 10, 30), description: 'ChatGPT Launched', type: 'historical' },
{ date: new Date(1956, 7, 1), description: 'Dartmouth Conference', type: 'historical' },
{ date: new Date(1997, 4, 11), description: 'Deep Blue vs Kasparov', type: 'historical' },
{ date: new Date(2016, 2, 9), description: 'AlphaGo vs Lee Sedol', type: 'historical' }
];
let currentYear = 2025; // Initial year (from context: Dec 1, 2025)
let currentMonth = 11; // Initial month (December is 11)
let fetchedEvents = [];
let today = new Date();
if (today.getFullYear() < 2026) {
today = new Date(2026, 1, 27);
}
let currentYear = today.getFullYear();
let currentMonth = today.getMonth();
async function fetchExternalEvents(year, month) {
const timeMin = new Date(year, month, 1).toISOString();
const timeMax = new Date(year, month + 1, 1).toISOString();
const url = `https://ai-engineering-home.vercel.app/api/calendar?timeMin=${timeMin}&timeMax=${timeMax}`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error('API request failed');
const data = await response.json();
return (data.events || []).map(event => ({
date: new Date(event.start),
endDate: new Date(event.end),
description: event.summary,
fullDescription: event.description,
location: event.location,
type: 'general',
link: event.htmlLink
}));
} catch (error) {
console.error('Error fetching calendar events:', error);
return [];
}
}
function openEventModal(event) {
const modal = document.getElementById('eventModal');
document.getElementById('modalTitle').textContent = event.description;
const startStr = event.date.toLocaleString([], { dateStyle: 'long', timeStyle: 'short' });
const endStr = event.endDate ? ' to ' + event.endDate.toLocaleTimeString([], { timeStyle: 'short' }) : '';
document.getElementById('modalWhen').textContent = startStr + endStr;
const locRow = document.getElementById('locationRow');
if (event.location) {
locRow.style.display = 'block';
document.getElementById('modalWhere').textContent = event.location;
} else {
locRow.style.display = 'none';
}
const descRow = document.getElementById('descriptionRow');
if (event.fullDescription) {
descRow.style.display = 'block';
document.getElementById('modalDescription').innerHTML = event.fullDescription.replace(/\n/g, '<br>');
} else {
descRow.style.display = 'none';
}
const linkBtn = document.getElementById('modalLink');
if (event.link) {
linkBtn.style.display = 'inline-block';
linkBtn.href = event.link;
} else {
linkBtn.style.display = 'none';
}
modal.style.display = 'flex';
}
function getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
function getFirstDayOfMonth(year, month) {
// 0 = Sunday, 1 = Monday, etc.
return new Date(year, month, 1).getDay();
}
function renderCalendar() {
async function renderCalendar() {
const currentMonthYearSpan = document.getElementById('currentMonthYear');
const calendarBody = document.getElementById('calendar-body');
currentMonthYearSpan.textContent = `${monthNames[currentMonth]} ${currentYear}`;
calendarBody.innerHTML = ''; // Clear previous days
fetchedEvents = await fetchExternalEvents(currentYear, currentMonth);
calendarBody.innerHTML = '';
const daysInMonth = getDaysInMonth(currentYear, currentMonth);
const firstDay = getFirstDayOfMonth(currentYear, currentMonth); // 0 for Sunday, 1 for Monday
const firstDay = getFirstDayOfMonth(currentYear, currentMonth);
// Fill leading empty days (from previous month)
const prevMonthDays = getDaysInMonth(currentYear, currentMonth - 1);
for (let i = 0; i < firstDay; i++) {
const dayDiv = document.createElement('div');
@@ -273,35 +463,51 @@
calendarBody.appendChild(dayDiv);
}
// Fill current month days
for (let i = 1; i <= daysInMonth; i++) {
const dayDiv = document.createElement('div');
dayDiv.classList.add('day');
dayDiv.innerHTML = `<div class="day-number">${i}</div>`;
// Add events for this day
const dayEvents = allEvents.filter(event =>
const combinedEvents = [...staticEvents, ...fetchedEvents];
const dayEvents = combinedEvents.filter(event =>
event.date.getFullYear() === currentYear &&
event.date.getMonth() === currentMonth &&
event.date.getDate() === i
);
dayEvents.forEach(event => {
const maxVisible = 2;
dayEvents.slice(0, maxVisible).forEach(event => {
const eventMarker = document.createElement('div');
eventMarker.classList.add('event-marker');
eventMarker.textContent = event.description;
if (event.type) {
eventMarker.classList.add(event.type);
}
if (event.type) eventMarker.classList.add(event.type);
eventMarker.onclick = (e) => {
e.stopPropagation();
openEventModal(event);
};
dayDiv.appendChild(eventMarker);
});
if (dayEvents.length > maxVisible) {
const more = document.createElement('div');
more.classList.add('show-more');
more.textContent = `+ ${dayEvents.length - maxVisible} more`;
more.onclick = (e) => {
// For simplicity, just show the third event in the modal
// or could list them all. Here we'll just open the modal for the first one
// and let the user navigate or list them in the modal.
// Better: open the modal with a list if clicked "more".
// For now, let's just make the whole day clickable if there's more.
openEventModal(dayEvents[maxVisible]);
};
dayDiv.appendChild(more);
}
calendarBody.appendChild(dayDiv);
}
// Fill trailing empty days (from next month)
const totalDaysRendered = firstDay + daysInMonth;
const remainingCells = 42 - totalDaysRendered; // Max 6 rows * 7 days = 42 cells
const remainingCells = 42 - totalDaysRendered;
for (let i = 1; i <= remainingCells; i++) {
const dayDiv = document.createElement('div');
dayDiv.classList.add('day', 'other-month');
@@ -310,7 +516,7 @@
}
}
function changeMonth(delta) {
async function changeMonth(delta) {
currentMonth += delta;
if (currentMonth < 0) {
currentMonth = 11;
@@ -319,16 +525,20 @@
currentMonth = 0;
currentYear++;
}
renderCalendar();
await renderCalendar();
}
// Initial render
renderCalendar();
// Event listeners for navigation buttons
document.getElementById('prevMonth').addEventListener('click', () => changeMonth(-1));
document.getElementById('nextMonth').addEventListener('click', () => changeMonth(1));
document.getElementById('modalClose').addEventListener('click', () => {
document.getElementById('eventModal').style.display = 'none';
});
window.addEventListener('click', (e) => {
const modal = document.getElementById('eventModal');
if (e.target === modal) modal.style.display = 'none';
});
</script>
</body>
</html>

90
tinytorch/site/extra/community/modules/profile.js
View File

@@ -1,5 +1,5 @@
import { SUPABASE_URL, NETLIFY_URL, getBasePath } from './config.js';
import { forceLogin } from './state.js?v=2';
import { forceLogin, getSession } from './state.js?v=2';
import { initCandle } from './candle.js';
export async function geocodeAndSetCoordinates(location) {
@@ -39,6 +39,21 @@ let candleInitialized = false;
export function openProfileModal() {
const profileOverlay = document.getElementById('profileOverlay');
profileOverlay.classList.add('active');
// Reset delete section
const deleteBtn = document.getElementById('profileDeleteBtn');
const deleteConfirmSection = document.getElementById('deleteConfirmSection');
const deleteConfirmInput = document.getElementById('profileDeleteConfirmInput');
const deleteFinalBtn = document.getElementById('profileDeleteFinalBtn');
if (deleteBtn) deleteBtn.classList.remove('hidden');
if (deleteConfirmSection) deleteConfirmSection.classList.add('hidden');
if (deleteConfirmInput) deleteConfirmInput.value = '';
if (deleteFinalBtn) {
deleteFinalBtn.disabled = true;
deleteFinalBtn.style.opacity = '0.5';
deleteFinalBtn.style.cursor = 'not-allowed';
}
fetchUserProfile();
if (!candleInitialized) {
@@ -49,6 +64,79 @@ export function openProfileModal() {
}
}
export function setupProfileDeleteEvents() {
const deleteBtn = document.getElementById('profileDeleteBtn');
const deleteConfirmSection = document.getElementById('deleteConfirmSection');
const deleteConfirmName = document.getElementById('deleteConfirmName');
const deleteConfirmInput = document.getElementById('profileDeleteConfirmInput');
const deleteFinalBtn = document.getElementById('profileDeleteFinalBtn');
const profileDisplayNameInput = document.getElementById('profileDisplayName');
if (!deleteBtn) return;
deleteBtn.addEventListener('click', () => {
let displayName = profileDisplayNameInput.value.trim();
if (!displayName) {
const { email } = getSession();
displayName = email || 'DELETE';
}
deleteConfirmName.textContent = displayName;
deleteConfirmSection.classList.remove('hidden');
deleteBtn.classList.add('hidden');
});
deleteConfirmInput.addEventListener('input', () => {
const displayName = deleteConfirmName.textContent.trim();
if (deleteConfirmInput.value.trim() === displayName) {
deleteFinalBtn.disabled = false;
deleteFinalBtn.style.opacity = '1';
deleteFinalBtn.style.cursor = 'pointer';
} else {
deleteFinalBtn.disabled = true;
deleteFinalBtn.style.opacity = '0.5';
deleteFinalBtn.style.cursor = 'not-allowed';
}
});
deleteFinalBtn.addEventListener('click', async () => {
const confirmResult = confirm("Are you absolutely sure? This will delete all your data and access.");
if (!confirmResult) return;
deleteFinalBtn.disabled = true;
deleteFinalBtn.textContent = 'Deleting...';
const token = localStorage.getItem("tinytorch_token");
try {
const response = await fetch(`${SUPABASE_URL}/delete-account`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
let errData = {};
try {
errData = await response.json();
} catch(e) {}
throw new Error(errData.error || 'Failed to delete account');
}
alert("Your account has been deleted.");
localStorage.removeItem("tinytorch_token");
localStorage.removeItem("tinytorch_refresh_token");
localStorage.removeItem("tinytorch_user");
window.location.href = getBasePath() + '/index.html';
} catch (error) {
console.error("Delete account error:", error);
alert("Error deleting account: " + error.message);
deleteFinalBtn.disabled = false;
deleteFinalBtn.textContent = 'Permanently Delete My Account';
}
});
}
export function closeProfileModal() {
const profileOverlay = document.getElementById('profileOverlay');
profileOverlay.classList.remove('active');

27
tinytorch/site/extra/community/modules/styles.js
View File

@@ -441,6 +441,33 @@ export function injectStyles() {
background: #b71c1c;
}
.profile-delete-btn {
width: 100%;
padding: 12px;
background: transparent;
color: #d32f2f;
border: 1px solid #d32f2f;
border-radius: 10px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
}
.profile-delete-btn:hover:not(:disabled) {
background: #fff5f5;
}
#profileDeleteFinalBtn {
background: #d32f2f;
color: white;
border: none;
}
#profileDeleteFinalBtn:hover:not(:disabled) {
background: #b71c1c;
}
/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
/* Sidebar becomes a bottom sheet */

26
tinytorch/site/extra/community/modules/ui.js
View File

@@ -132,15 +132,15 @@ export function renderLayout() {
<div class="profile-overlay" id="profileOverlay">
<div class="profile-modal" style="max-width: 850px; width: 95%;">
<button class="profile-close" id="profileClose">&times;</button>
<div style="display: flex; gap: 30px; align-items: stretch;">
<div style="flex: 1;">
<h2 class="profile-title">Your Profile</h2>
<div style="display: flex; gap: 40px; align-items: flex-start; position: relative;">
<div style="flex: 1; min-width: 0;">
<h2 class="profile-title" style="text-align: left; margin-bottom: 25px;">Your Profile</h2>
<form id="profileForm">
<div class="profile-form-group">
<label for="profileDisplayName" class="profile-label">Display Name:</label>
<input type="text" class="profile-input" id="profileDisplayName" placeholder="Display Name">
</div>
<!-- ... rest of the form ... -->
<div class="profile-form-group">
<label for="profileFullName" class="profile-label">Full Name:</label>
<input type="text" class="profile-input" id="profileFullName" placeholder="Your Full Name">
@@ -180,12 +180,26 @@ export function renderLayout() {
<button type="submit" class="profile-submit" id="profileSubmit">Update Profile</button>
<button type="button" class="profile-logout-btn" id="profileLogoutBtn">Logout</button>
<div class="profile-danger-zone" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #fee2e2;">
<h3 style="color: #d32f2f; font-size: 1rem; margin-bottom: 10px;">Danger Zone</h3>
<p style="font-size: 0.85rem; color: #666; margin-bottom: 15px;">Deleting your account is permanent and cannot be undone.</p>
<button type="button" class="profile-delete-btn" id="profileDeleteBtn">Delete Account</button>
<div id="deleteConfirmSection" class="hidden" style="margin-top: 15px; padding: 15px; background: #fff5f5; border-radius: 10px; border: 1px solid #fecaca;">
<p style="font-size: 0.85rem; color: #b91c1c; margin-bottom: 10px;">Type your display name <strong id="deleteConfirmName"></strong> to confirm:</p>
<input type="text" class="profile-input" id="profileDeleteConfirmInput" placeholder="Enter display name">
<button type="button" class="profile-delete-btn" id="profileDeleteFinalBtn" style="margin-top: 10px; opacity: 0.5; cursor: not-allowed;" disabled>Permanently Delete My Account</button>
</div>
</div>
</form>
</div>
<!-- Flame Side -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 180px; border-left: 1px solid #f0f0f0; background: rgba(252, 252, 252, 0.5);">
<canvas id="profileCandleCanvas" width="16" height="24" style="width: 150px; height: auto; image-rendering: pixelated; filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.05));"></canvas>
<div style="flex: 0 0 220px; min-height: 450px; border-left: 1px solid #f0f0f0; background: rgba(252, 252, 252, 0.5); border-radius: 0 16px 16px 0; align-self: stretch; position: relative;">
<div style="position: sticky; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;">
<canvas id="profileCandleCanvas" width="16" height="24" style="width: 140px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 20px rgba(255,102,0,0.2));"></canvas>
</div>
</div>
</div>
</div>