\n \n\n",[],[245,247],"1a52f250-3669-11f0-806f-9e149126039e","Auth.tsx","1a52f4bc-3669-11f0-806f-9e149126039e","5d7e547e-f7ff-4323-b6c2-63f2f1957714",11,["D",1747848548956],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\n\nconst Auth: React.FC = () => {\n const [authUrl, setAuthUrl] = useState('');\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchAuthUrl = async () => {\n try {\n const response = await fetch('/api/auth/url');\n if (response.ok) {\n const data = await response.json();\n setAuthUrl(data.url);\n } else {\n setError('Failed to get authentication URL');\n }\n } catch (error) {\n setError('Error connecting to server');\n console.error('Error fetching auth URL:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n fetchAuthUrl();\n }, []);\n\n if (isLoading) {\n return (\n

Loading authentication...

\n );\n }\n\n if (error) {\n return (\n

Error

{error}

\n \n

\n );\n }\n\n return (\n

GCal Playground

\n Create and use alternative interfaces for Google Calendar. Sign in with your Google account to get started.\n

\n \n Sign in with Google\n \n

\n We'll need access to your Google Calendar to create and manage events.\n

\n );\n};\n\nexport default Auth;",[],[245,264,256],"components","3fb6cc38-61fc-11f0-b4c9-0224a6c84d84","App.tsx","125ac280-3669-11f0-b740-9e149126039e",23,["D",1752639647692],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { STORAGE_KEYS } from '../../shared/constants.ts';\nimport { AuthState } from '../../shared/types.ts';\nimport Auth from './Auth.tsx';\nimport ViewSelector from './views/ViewSelector.tsx';\nimport YearView from './views/YearView/index.tsx';\nimport Settings from './settings/Settings.tsx';\n\nconst App: React.FC = () => {\n const [authState, setAuthState] = useState({\n isAuthenticated: false,\n });\n const [activeView, setActiveView] = useState('year');\n const [isLoading, setIsLoading] = useState(true);\n const [showSettings, setShowSettings] = useState(false);\n const [metadataCalendarId, setMetadataCalendarId] = useState(null);\n\n // Load auth state from local storage on mount\n useEffect(() => {\n const storedAuth = localStorage.getItem(STORAGE_KEYS.AUTH);\n if (storedAuth) {\n try {\n const parsedAuth = JSON.parse(storedAuth);\n // Check if the token is still valid\n if (parsedAuth.expiresAt && parsedAuth.expiresAt > Date.now()) {\n setAuthState(parsedAuth);\n }\n } catch (error) {\n console.error('Error parsing stored auth:', error);\n localStorage.removeItem(STORAGE_KEYS.AUTH);\n }\n }\n\n // Check for auth parameters in URL fragment\n const hashParams = new URLSearchParams(window.location.hash.substring(1));\n const accessToken = hashParams.get('access_token');\n const refreshToken = hashParams.get('refresh_token');\n const expiresIn = hashParams.get('expires_in');\n\n if (accessToken && refreshToken && expiresIn) {\n const expiresAt = Date.now() + parseInt(expiresIn) * 1000;\n const newAuthState = {\n isAuthenticated: true,\n accessToken,\n refreshToken,\n expiresAt,\n };\n setAuthState(newAuthState);\n localStorage.setItem(STORAGE_KEYS.AUTH, JSON.stringify(newAuthState));\n \n // Clean up the URL\n window.history.replaceState({}, document.title, window.location.pathname);\n }\n\n setIsLoading(false);\n }, []);\n\n // Check for and create metadata calendar if needed\n useEffect(() => {\n if (authState.isAuthenticated && authState.accessToken) {\n const checkMetadataCalendar = async () => {\n try {\n // First check if we have the metadata calendar ID in local storage\n const storedMetadataId = localStorage.getItem('metadata_calendar_id');\n if (storedMetadataId) {\n setMetadataCalendarId(storedMetadataId);\n return;\n }\n\n // Otherwise, fetch calendar list to find or create it\n const response = await fetch('/api/metadata-calendar', {\n headers: {\n 'Authorization': `Bearer ${authState.accessToken}`,\n },\n });\n\n if (response.ok) {\n const data = await response.json();\n setMetadataCalendarId(data.id);\n localStorage.setItem('metadata_calendar_id', data.id);\n } else {\n console.error('Failed to create metadata calendar');\n }\n } catch (error) {\n console.error('Error checking metadata calendar:', error);\n }\n };\n\n checkMetadataCalendar();\n }\n }, [authState.isAuthenticated, authState.accessToken]);\n\n // Handle logout\n const handleLogout = () => {\n setAuthState({ isAuthenticated: false });\n localStorage.removeItem(STORAGE_KEYS.AUTH);\n localStorage.removeItem('metadata_calendar_id');\n };\n\n // Render loading state\n if (isLoading) {\n return (\n

\n );\n }\n\n // Render auth screen if not authenticated\n if (!authState.isAuthenticated) {\n return ;\n }\n\n // Render the main application\n return (\n

\n {/* Header */}\n

GCal Playground

\n \n \n

\n\n {/* Main content */}\n

\n {showSettings ? (\n setShowSettings(false)}\n />\n ) : (\n <>\n \n {activeView === 'year' && (\n \n )}\n {/* Other views would be conditionally rendered here */}\n \n )}\n

\n\n {/* Footer */}\n \n

\n );\n};\n\nexport default App;",[],[245,264,266],"466b3aaa-61fc-11f0-beda-0224a6c84d84","ViewSelector.tsx","20364f64-3669-11f0-83bf-9e149126039e","df2e3ea3-45ef-4190-b6c5-a36df791fb07",24,["D",1752639658946],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { VIEW_TYPES } from '../../../shared/constants.ts';\n\ninterface ViewSelectorProps {\n activeView: string;\n onViewChange: (view: string) => void;\n}\n\nconst ViewSelector: React.FC = ({ activeView, onViewChange }) => {\n // Currently we only have the year view implemented\n const views = [\n { id: VIEW_TYPES.YEAR, name: 'Year View', icon: '📅' },\n // Placeholder for future views\n // { id: VIEW_TYPES.MONTH, name: 'Month View', icon: '📆', disabled: true },\n // { id: VIEW_TYPES.WEEK, name: 'Week View', icon: '🗓️', disabled: true },\n // { id: VIEW_TYPES.DAY, name: 'Day View', icon: '📋', disabled: true },\n // { id: VIEW_TYPES.AGENDA, name: 'Agenda View', icon: '📝', disabled: true },\n ];\n\n return (\n

\n {views.map((view) => (\n onViewChange(view.id)}\n className={`px-4 py-2 rounded-md flex items-center space-x-2 ${\n activeView === view.id\n ? 'bg-blue-600 text-white'\n : 'bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'\n } ${view.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n disabled={view.disabled}\n >\n {view.icon}\n {view.name}\n \n ))}\n

\n );\n};\n\nexport default ViewSelector;",[],[245,264,282,274],"views","68f82bc8-6201-11f0-b57c-0224a6c84d84","3dfd7aea-3669-11f0-89c1-9e149126039e","4a9c008e-c71e-4b72-b2c8-172c20ba0481",46,["D",1752641864396],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { CalendarEvent, FormatRule } from '../../../../shared/types.ts';\nimport { DATE_FORMATS, DEFAULT_SETTINGS } from '../../../../shared/constants.ts';\nimport Week from './Week.tsx';\n\ninterface YearViewProps {\n authToken: string;\n metadataCalendarId: string | null;\n}\n\nconst YearView: React.FC = ({ authToken, metadataCalendarId }) => {\n const [year, setYear] = useState(new Date().getFullYear());\n const [events, setEvents] = useState([]);\n const [formatRules, setFormatRules] = useState([]);\n const [calendars, setCalendars] = useState([]);\n const [selectedCalendars, setSelectedCalendars] = useState(['primary']);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n \n // Generate weeks for the entire year\n const generateWeeks = () => {\n const weeks: Date[][] = [];\n const startDate = new Date(year, 0, 1);\n const endDate = new Date(year, 11, 31);\n \n // Adjust start date to the beginning of the week\n const dayOfWeek = startDate.getDay();\n const weekStartsOn = DEFAULT_SETTINGS.weekStartsOn;\n const diff = (dayOfWeek - weekStartsOn + 7) % 7;\n startDate.setDate(startDate.getDate() - diff);\n \n // Generate weeks until we reach the end of the year\n let currentDate = new Date(startDate);\n while (currentDate <= endDate) {\n const week: Date[] = [];\n \n // Add 7 days to the week\n for (let i = 0; i < 7; i++) {\n week.push(new Date(currentDate));\n currentDate.setDate(currentDate.getDate() + 1);\n }\n \n weeks.push(week);\n }\n \n return weeks;\n };\n \n // Fetch calendars\n useEffect(() => {\n const fetchCalendars = async () => {\n try {\n const response = await fetch('/api/calendars', {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n setCalendars(data.items || []);\n \n // Set default selected calendars\n if (data.items && data.items.length > 0) {\n const primaryCalendar = data.items.find((cal: any) => cal.primary) || data.items[0];\n setSelectedCalendars([primaryCalendar.id]);\n }\n } else {\n console.error('Failed to fetch calendars');\n }\n } catch (error) {\n console.error('Error fetching calendars:', error);\n }\n };\n \n if (authToken) {\n fetchCalendars();\n }\n }, [authToken]);\n \n // Fetch events for the selected year\n useEffect(() => {\n const fetchEvents = async () => {\n setIsLoading(true);\n setError(null);\n \n try {\n const timeMin = new Date(year, 0, 1).toISOString();\n const timeMax = new Date(year, 11, 31, 23, 59, 59).toISOString();\n \n // Fetch events for each selected calendar\n const allEvents: CalendarEvent[] = [];\n \n for (const calendarId of selectedCalendars) {\n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(calendarId)}&timeMin=${timeMin}&timeMax=${timeMax}`, {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n allEvents.push(...(data.items || []));\n } else {\n console.error(`Failed to fetch events for calendar ${calendarId}`);\n }\n }\n \n setEvents(allEvents);\n } catch (error) {\n console.error('Error fetching events:', error);\n setError('Failed to load events. Please try again.');\n } finally {\n setIsLoading(false);\n }\n };\n \n if (authToken && selectedCalendars.length > 0) {\n fetchEvents();\n }\n }, [authToken, year, selectedCalendars]);\n \n // Fetch formatting rules from metadata calendar\n useEffect(() => {\n const fetchFormatRules = async () => {\n if (!metadataCalendarId) return;\n \n try {\n const timeMin = new Date(2000, 0, 1).toISOString();\n const timeMax = new Date(2000, 0, 2).toISOString();\n \n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(metadataCalendarId)}&timeMin=${timeMin}&timeMax=${timeMax}`, {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n const rules: FormatRule[] = [];\n \n for (const event of data.items || []) {\n if (event.summary.startsWith('FORMAT_RULE:')) {\n try {\n const rule = JSON.parse(event.description);\n rules.push({\n id: event.id,\n ...rule,\n });\n } catch (error) {\n console.error('Error parsing format rule:', error);\n }\n }\n }\n \n setFormatRules(rules);\n } else {\n console.error('Failed to fetch format rules');\n }\n } catch (error) {\n console.error('Error fetching format rules:', error);\n }\n };\n \n if (authToken && metadataCalendarId) {\n fetchFormatRules();\n }\n }, [authToken, metadataCalendarId]);\n \n // Apply formatting rules to events\n const getFormattedEvents = () => {\n return events.map(event => {\n // Clone the event to avoid modifying the original\n const formattedEvent = { ...event, formatting: {} };\n \n // Apply each rule that matches\n for (const rule of formatRules) {\n if (ruleMatches(event, rule.condition)) {\n // Apply the formatting\n formattedEvent.formatting = {\n ...formattedEvent.formatting,\n ...rule.format\n };\n }\n }\n \n return formattedEvent;\n });\n };\n \n // Check if an event matches a condition\n const ruleMatches = (event: any, condition: any): boolean => {\n switch (condition.type) {\n case 'title':\n return event.summary?.toLowerCase().includes(condition.value.toLowerCase());\n \n case 'calendar':\n return event.organizer?.email === condition.value;\n \n case 'property':\n switch (condition.value) {\n case 'all-day':\n return !!event.start?.date && !!event.end?.date;\n case 'recurring':\n return !!event.recurringEventId;\n default:\n return false;\n }\n \n case 'custom':\n try {\n const hasTitle = event.summary?.toLowerCase().includes(condition.value.toLowerCase());\n const hasDescription = event.description?.toLowerCase().includes(condition.value.toLowerCase());\n return hasTitle || hasDescription;\n } catch (error) {\n console.error('Error evaluating custom condition:', error);\n return false;\n }\n \n default:\n return false;\n }\n };\n \n // Get events for a specific date\n const getEventsForDate = (date: Date) => {\n const formattedEvents = getFormattedEvents();\n \n return formattedEvents.filter(event => {\n // Check if the event occurs on this date\n const eventStart = event.start?.date \n ? new Date(event.start.date) \n : event.start?.dateTime \n ? new Date(event.start.dateTime)\n : null;\n \n const eventEnd = event.end?.date \n ? new Date(event.end.date) \n : event.end?.dateTime \n ? new Date(event.end.dateTime)\n : null;\n \n if (!eventStart || !eventEnd) return false;\n \n // For all-day events, the end date is exclusive\n if (event.start?.date) {\n const endDate = new Date(eventEnd);\n endDate.setDate(endDate.getDate() - 1);\n \n const dateWithoutTime = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n const startWithoutTime = new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate());\n const endWithoutTime = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());\n \n return dateWithoutTime >= startWithoutTime && dateWithoutTime <= endWithoutTime;\n }\n \n // For regular events, check if the date falls within the event time\n const dateStart = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);\n const dateEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);\n \n return (\n (eventStart <= dateEnd && eventEnd > dateStart) ||\n (eventStart.getDate() === date.getDate() && \n eventStart.getMonth() === date.getMonth() && \n eventStart.getFullYear() === date.getFullYear())\n );\n });\n };\n \n // Handle year change\n const handleYearChange = (newYear: number) => {\n setYear(newYear);\n };\n \n // Handle calendar selection\n const handleCalendarToggle = (calendarId: string) => {\n setSelectedCalendars(prev => {\n if (prev.includes(calendarId)) {\n return prev.filter(id => id !== calendarId);\n } else {\n return [...prev, calendarId];\n }\n });\n };\n \n const weeks = generateWeeks();\n \n return (\n

\n {/* Year selector and controls */}\n

\n handleYearChange(year - 1)}\n className=\"p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700\"\n >\n ◀\n \n

{year}

\n handleYearChange(year + 1)}\n className=\"p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700\"\n >\n ▶\n \n

\n \n {/* Calendar selector */}\n

\n Calendars:\n

\n {calendars.map(calendar => (\n \n handleCalendarToggle(calendar.id)}\n className=\"rounded\"\n />\n {calendar.summary}\n \n ))}\n

\n \n {/* Loading indicator */}\n {isLoading && (\n

Loading events...

\n )}\n \n {/* Error message */}\n {error && (\n

{error}

\n )}\n \n {/* Weekday headers and Year view */}\n

\n \n \n \n {['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'].map(day => (\n \n ))}\n \n \n \n {/* Year view */}\n \n {weeks.map((week, weekIndex) => {\n // Calculate month transition info for each day in the week\n const monthTransitions = week.map((date, dayIndex) => {\n if (dayIndex === 0) return null;\n \n const prevDate = week[dayIndex - 1];\n const isMonthTransition = date.getMonth() !== prevDate.getMonth();\n \n return isMonthTransition ? {\n dayIndex,\n newMonth: date.getMonth(),\n newYear: date.getFullYear()\n } : null;\n }).filter(Boolean) as { dayIndex: number; newMonth: number; newYear: number; }[];\n \n // Check if this week contains the first week of any month (days 1-7)\n const newMonthFirstWeeks = week.map((date, dayIndex) => {\n // A day is part of a new month's first week if:\n // 1. It's day 1-7 of the month\n // 2. It's the first occurrence of this month in the week\n const isFirstWeekOfMonth = date.getDate() <= 7;\n const isFirstOccurrenceInWeek = dayIndex === 0 || week[dayIndex - 1].getMonth() !== date.getMonth();\n \n return (isFirstWeekOfMonth && isFirstOccurrenceInWeek) ? {\n dayIndex,\n month: date.getMonth(),\n year: date.getFullYear()\n } : null;\n }).filter(Boolean) as { dayIndex: number; month: number; year: number; }[];\n \n return (\n getEventsForDate(date))}\n monthTransitions={monthTransitions}\n newMonthFirstWeeks={newMonthFirstWeeks}\n />\n );\n })}\n \n

\n {day}\n

\n );\n};\n\nexport default YearView;",[],[245,264,282,291,237],"YearView","848d33ba-6201-11f0-aac3-0224a6c84d84","Week.tsx","44176f80-3669-11f0-9771-9e149126039e",50,["D",1752641910674],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { CalendarEvent } from '../../../../shared/types.ts';\nimport Day from './Day.tsx';\n\ninterface MonthTransition {\n dayIndex: number;\n newMonth: number;\n newYear: number;\n}\n\ninterface NewMonthFirstWeek {\n dayIndex: number;\n month: number;\n year: number;\n}\n\ninterface WeekProps {\n dates: Date[];\n events: CalendarEvent[][];\n monthTransitions: MonthTransition[];\n newMonthFirstWeeks: NewMonthFirstWeek[];\n}\n\nconst Week: React.FC = ({ dates, events, monthTransitions, newMonthFirstWeeks }) => {\n return (\n \n {dates.map((date, index) => {\n // Check if this day has a month transition (vertical border on the left)\n const hasMonthTransition = monthTransitions.some(t => t.dayIndex === index);\n \n // Check if this day is part of a new month's first week (horizontal border on top)\n // This applies to all days 1-7 of a month when they first appear in a week\n const isNewMonthFirstWeek = newMonthFirstWeeks.some(w => \n date.getMonth() === w.month && \n date.getFullYear() === w.year &&\n date.getDate() <= 7\n );\n \n return (\n \n );\n })}\n \n );\n};\n\nexport default Week;",[],[245,264,282,291,293],"22ffed76-6202-11f0-a688-0224a6c84d84","Day.tsx","53e067fa-3669-11f0-a50f-9e149126039e",52,["D",1752642176503],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport { CalendarEvent } from '../../../../shared/types.ts';\n\ninterface DayProps {\n date: Date;\n events: CalendarEvent[];\n showMonthLabel: boolean;\n hasMonthTransition: boolean;\n isNewMonthFirstWeek: boolean;\n}\n\nconst Day: React.FC = ({ date, events, showMonthLabel, hasMonthTransition, isNewMonthFirstWeek }) => {\n const [showEventDetails, setShowEventDetails] = useState(false);\n \n const isToday = () => {\n const today = new Date();\n return (\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear()\n );\n };\n \n const isCurrentYear = () => {\n const today = new Date();\n return date.getFullYear() === today.getFullYear();\n };\n \n const getMonthName = () => {\n return date.toLocaleString('default', { month: 'short' });\n };\n \n // Limit the number of events shown\n const MAX_VISIBLE_EVENTS = 3;\n const visibleEvents = events.slice(0, MAX_VISIBLE_EVENTS);\n const hiddenEventCount = Math.max(0, events.length - MAX_VISIBLE_EVENTS);\n \n return (\n setShowEventDetails(!showEventDetails)}\n >\n {/* Day number */}\n

\n {date.getDate()}\n

\n \n {/* Month label */}\n {showMonthLabel && (\n

\n {getMonthName()}\n

\n )}\n \n {/* Events */}\n

\n {visibleEvents.map((event, index) => {\n // Get formatting from the event if available\n const formatting = event.formatting || {};\n const backgroundColor = formatting.backgroundColor || (event.colorId ? getColorForId(event.colorId) : '#e2e8f0');\n const textColor = formatting.textColor || getContrastColor(backgroundColor);\n \n return (\n

\n {formatting.displayText || event.summary}\n

\n );\n })}\n \n {/* Show count of hidden events */}\n {hiddenEventCount > 0 && (\n

\n +{hiddenEventCount} more\n

\n )}\n

\n \n {/* Event details popup */}\n {showEventDetails && events.length > 0 && (\n

e.stopPropagation()}\n >\n

\n {date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}\n

\n {events.map((event, index) => {\n const backgroundColor = event.formatting?.backgroundColor || (event.colorId ? getColorForId(event.colorId) : '#e2e8f0');\n const textColor = event.formatting?.textColor || getContrastColor(backgroundColor);\n \n return (\n

{event.summary}

\n {event.start?.dateTime && (\n

\n {new Date(event.start.dateTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n {event.end?.dateTime && (\n <> - {new Date(event.end.dateTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n )}\n

\n )}\n {event.location && (\n

📍 {event.location}

\n )}\n

\n );\n })}\n \n

\n )}\n \n );\n};\n\n// Helper function to get color for a colorId\nfunction getColorForId(colorId: string): string {\n const colors: Record = {\n '1': '#7986cb', // Lavender\n '2': '#33b679', // Sage\n '3': '#8e24aa', // Grape\n '4': '#e67c73', // Flamingo\n '5': '#f6bf26', // Banana\n '6': '#f4511e', // Tangerine\n '7': '#039be5', // Peacock\n '8': '#616161', // Graphite\n '9': '#3f51b5', // Blueberry\n '10': '#0b8043', // Basil\n '11': '#d50000', // Tomato\n };\n \n return colors[colorId] || '#9e9e9e';\n}\n\n// Helper function to get contrast color (black or white) based on background\nfunction getContrastColor(hexColor: string): string {\n // Convert hex to RGB\n const r = parseInt(hexColor.slice(1, 3), 16);\n const g = parseInt(hexColor.slice(3, 5), 16);\n const b = parseInt(hexColor.slice(5, 7), 16);\n \n // Calculate luminance\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n \n // Return black for bright colors, white for dark colors\n return luminance > 0.5 ? '#000000' : '#ffffff';\n}\n\nexport default Day;",[],[245,264,282,291,302],"3dfd8fda-3669-11f0-89c1-9e149126039e",13,["D",1747848608792],[194,195,196],[245,264,282,291],"203670fc-3669-11f0-83bf-9e149126039e",12,["D",1747848558832],[193,197],[245,264,282],"58678556-61fc-11f0-acfb-0224a6c84d84","Settings.tsx","669172e0-3669-11f0-a32c-9e149126039e","0cd86f45-2837-4cf8-b1f5-71271826c6de",28,["D",1752639689121],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { FormatRule } from '../../../shared/types.ts';\nimport FormatRules from './FormatRules.tsx';\n\ninterface SettingsProps {\n authToken: string;\n metadataCalendarId: string | null;\n onClose: () => void;\n}\n\nconst Settings: React.FC = ({ authToken, metadataCalendarId, onClose }) => {\n const [activeTab, setActiveTab] = useState('format-rules');\n const [formatRules, setFormatRules] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n \n // Fetch format rules\n useEffect(() => {\n const fetchFormatRules = async () => {\n if (!metadataCalendarId) {\n setIsLoading(false);\n return;\n }\n \n setIsLoading(true);\n setError(null);\n \n try {\n const timeMin = new Date(2000, 0, 1).toISOString();\n const timeMax = new Date(2000, 0, 2).toISOString();\n \n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(metadataCalendarId)}&timeMin=${timeMin}&timeMax=${timeMax}`, {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n const rules: FormatRule[] = [];\n \n for (const event of data.items || []) {\n if (event.summary.startsWith('FORMAT_RULE:')) {\n try {\n const rule = JSON.parse(event.description);\n rules.push({\n id: event.id,\n ...rule,\n });\n } catch (error) {\n console.error('Error parsing format rule:', error);\n }\n }\n }\n \n setFormatRules(rules);\n } else {\n setError('Failed to fetch format rules');\n }\n } catch (error) {\n console.error('Error fetching format rules:', error);\n setError('An error occurred while fetching format rules');\n } finally {\n setIsLoading(false);\n }\n };\n \n fetchFormatRules();\n }, [authToken, metadataCalendarId]);\n \n // Save a format rule\n const saveFormatRule = async (rule: FormatRule) => {\n if (!metadataCalendarId) {\n setError('Metadata calendar not available');\n return;\n }\n \n try {\n const event = {\n summary: `FORMAT_RULE: ${rule.name}`,\n description: JSON.stringify(rule),\n start: {\n date: '2000-01-01',\n },\n end: {\n date: '2000-01-02',\n },\n transparency: 'transparent',\n };\n \n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(metadataCalendarId)}`, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(event),\n });\n \n if (response.ok) {\n const createdEvent = await response.json();\n setFormatRules(prev => [...prev, { ...rule, id: createdEvent.id }]);\n return true;\n } else {\n setError('Failed to save format rule');\n return false;\n }\n } catch (error) {\n console.error('Error saving format rule:', error);\n setError('An error occurred while saving the format rule');\n return false;\n }\n };\n \n // Update a format rule\n const updateFormatRule = async (rule: FormatRule) => {\n if (!metadataCalendarId || !rule.id) {\n setError('Cannot update rule: missing ID or metadata calendar');\n return false;\n }\n \n try {\n const event = {\n summary: `FORMAT_RULE: ${rule.name}`,\n description: JSON.stringify(rule),\n start: {\n date: '2000-01-01',\n },\n end: {\n date: '2000-01-02',\n },\n transparency: 'transparent',\n };\n \n const response = await fetch(`/api/events/${rule.id}?calendarId=${encodeURIComponent(metadataCalendarId)}`, {\n method: 'PUT',\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(event),\n });\n \n if (response.ok) {\n setFormatRules(prev => prev.map(r => r.id === rule.id ? rule : r));\n return true;\n } else {\n setError('Failed to update format rule');\n return false;\n }\n } catch (error) {\n console.error('Error updating format rule:', error);\n setError('An error occurred while updating the format rule');\n return false;\n }\n };\n \n // Delete a format rule\n const deleteFormatRule = async (ruleId: string) => {\n if (!metadataCalendarId) {\n setError('Metadata calendar not available');\n return false;\n }\n \n try {\n const response = await fetch(`/api/events/${ruleId}?calendarId=${encodeURIComponent(metadataCalendarId)}`, {\n method: 'DELETE',\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n setFormatRules(prev => prev.filter(r => r.id !== ruleId));\n return true;\n } else {\n setError('Failed to delete format rule');\n return false;\n }\n } catch (error) {\n console.error('Error deleting format rule:', error);\n setError('An error occurred while deleting the format rule');\n return false;\n }\n };\n \n return (\n

Settings

\n \n

\n \n {/* Tabs */}\n

\n setActiveTab('format-rules')}\n >\n Format Rules\n \n setActiveTab('general')}\n >\n General Settings\n \n

\n \n {/* Error message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Loading indicator */}\n {isLoading && (\n

\n )}\n \n {/* Tab content */}\n {!isLoading && (\n

\n {activeTab === 'format-rules' && (\n \n )}\n \n {activeTab === 'general' && (\n

General Settings

\n General settings will be implemented in a future update.\n

\n )}\n

\n );\n};\n\nexport default Settings;",[],[245,264,328,320],"settings","5d224bc6-61fc-11f0-8425-0224a6c84d84","FormatRules.tsx","8140408a-3669-11f0-a1ca-9e149126039e",29,["D",1752639697055],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport { FormatRule, RuleCondition } from '../../../shared/types.ts';\n\ninterface FormatRulesProps {\n rules: FormatRule[];\n onSave: (rule: FormatRule) => Promise;\n onUpdate: (rule: FormatRule) => Promise;\n onDelete: (ruleId: string) => Promise;\n}\n\nconst FormatRules: React.FC = ({ rules, onSave, onUpdate, onDelete }) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editingRule, setEditingRule] = useState(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n \n // Initialize a new rule for editing\n const handleAddRule = () => {\n setEditingRule({\n name: 'New Rule',\n condition: {\n type: 'title',\n value: '',\n },\n format: {\n backgroundColor: '#e2e8f0',\n textColor: '#000000',\n visible: true,\n },\n });\n setIsEditing(true);\n };\n \n // Edit an existing rule\n const handleEditRule = (rule: FormatRule) => {\n setEditingRule({ ...rule });\n setIsEditing(true);\n };\n \n // Save the rule being edited\n const handleSaveRule = async () => {\n if (!editingRule) return;\n \n setIsSubmitting(true);\n \n try {\n let success;\n \n if (editingRule.id) {\n // Update existing rule\n success = await onUpdate(editingRule);\n } else {\n // Create new rule\n success = await onSave(editingRule);\n }\n \n if (success) {\n setIsEditing(false);\n setEditingRule(null);\n }\n } finally {\n setIsSubmitting(false);\n }\n };\n \n // Delete a rule\n const handleDeleteRule = async (ruleId: string) => {\n if (confirm('Are you sure you want to delete this rule?')) {\n await onDelete(ruleId);\n }\n };\n \n // Update a field in the editing rule\n const updateRuleField = (field: string, value: any) => {\n if (!editingRule) return;\n \n setEditingRule(prev => {\n if (!prev) return null;\n \n if (field.startsWith('condition.')) {\n const conditionField = field.split('.')[1];\n return {\n ...prev,\n condition: {\n ...prev.condition,\n [conditionField]: value,\n },\n };\n } else if (field.startsWith('format.')) {\n const formatField = field.split('.')[1];\n return {\n ...prev,\n format: {\n ...prev.format,\n [formatField]: value,\n },\n };\n } else {\n return {\n ...prev,\n [field]: value,\n };\n }\n });\n };\n \n // Render the rule editor\n const renderRuleEditor = () => {\n if (!editingRule) return null;\n \n return (\n

\n {editingRule.id ? 'Edit Rule' : 'New Rule'}\n

\n \n {/* Rule name */}\n

\n Rule Name\n updateRuleField('name', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n />\n

\n \n {/* Condition type */}\n

\n Condition Type\n updateRuleField('condition.type', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n >\n \n \n \n \n \n

\n \n {/* Condition value */}\n

\n Condition Value\n {editingRule.condition.type === 'property' ? (\n updateRuleField('condition.value', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n >\n \n \n \n \n \n ) : (\n updateRuleField('condition.value', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n placeholder={\n editingRule.condition.type === 'title'\n ? 'e.g., \"Meeting\" or \"Flight\"'\n : editingRule.condition.type === 'calendar'\n ? 'Calendar ID or email'\n : 'Custom expression'\n }\n />\n )}\n

\n \n {/* Format options */}\n

Formatting

\n \n {/* Background color */}\n

\n Background Color:\n updateRuleField('format.backgroundColor', e.target.value)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Text color */}\n

\n Text Color:\n updateRuleField('format.textColor', e.target.value)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Display format */}\n

\n Display Format:\n updateRuleField('format.displayFormat', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n placeholder=\"e.g., {flight} or {title}\"\n />\n

\n Use {'{title}'}, {'{location}'}, {'{description}'}, or {'{flight}'} for flights\n

\n \n {/* Visibility */}\n

\n Visible:\n updateRuleField('format.visible', e.target.checked)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Buttons */}\n

\n setIsEditing(false)}\n className=\"px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500\"\n disabled={isSubmitting}\n >\n Cancel\n \n \n {isSubmitting ? 'Saving...' : 'Save Rule'}\n \n

\n );\n };\n \n // Render a rule in the list\n const renderRuleItem = (rule: FormatRule) => {\n return (\n

{rule.name}

\n handleEditRule(rule)}\n className=\"px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700\"\n >\n Edit\n \n rule.id && handleDeleteRule(rule.id)}\n className=\"px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700\"\n >\n Delete\n \n

\n \n

\n Condition: {getConditionDescription(rule.condition)}\n

\n Format:\n

\n Background\n \n

\n Text\n \n {rule.format.displayFormat && (\n \n Format: {rule.format.displayFormat}\n \n )}\n \n {rule.format.visible === false && (\n \n Hidden\n \n )}\n

\n );\n };\n \n // Get a human-readable description of a condition\n const getConditionDescription = (condition: RuleCondition): string => {\n switch (condition.type) {\n case 'title':\n return `Title contains \"${condition.value}\"`;\n case 'calendar':\n return `Calendar is \"${condition.value}\"`;\n case 'property':\n return `Event is ${condition.value.replace('-', ' ')}`;\n case 'custom':\n return `Custom: \"${condition.value}\"`;\n default:\n return 'Unknown condition';\n }\n };\n \n return (\n

Format Rules

\n {!isEditing && (\n \n Add Rule\n \n )}\n

\n \n {isEditing ? (\n renderRuleEditor()\n ) : (\n

\n {rules.length === 0 ? (\n

\n No format rules yet. Click \"Add Rule\" to create one.\n

\n ) : (\n rules.map(renderRuleItem)\n )}\n

\n )}\n

\n );\n};\n\nexport default FormatRules;",[],[245,264,328,330],"6691b0ca-3669-11f0-a32c-9e149126039e",16,["D",1747848676867],[190,191],[245,264,328],"125aee86-3669-11f0-b740-9e149126039e",10,["D",1747848535577],[189,192,198,199],[245,264],"01a54bd6-3669-11f0-90f4-9e149126039e",["D",1747848507550],[188,200,201],[245],"39edff3e-366d-11f0-aeab-9e149126039e","index.ts",21,["D",1747850319966],"http","import { Hono } from 'https://esm.sh/hono@3.11.7';\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { handleGoogleAuth, handleGoogleCallback, getAuthUrl } from 'https://esm.town/v/malcolmocean/FlexCal/backend/auth/google-oauth.ts';\nimport { \n getCalendarEvents, \n createEvent, \n updateEvent, \n deleteEvent,\n getCalendarList,\n createMetadataCalendar\n} from 'https://esm.town/v/malcolmocean/FlexCal/backend/calendar/api.ts';\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get('/frontend/*', c => serveFile(c.req.path, import.meta.url));\napp.get('/shared/*', c => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html with initial data\napp.get('/', async c => {\n let html = await readFile('/frontend/index.html', import.meta.url);\n return c.html(html);\n});\n\n// Auth routes\napp.get('/api/auth/google', async c => {\n return await handleGoogleAuth(c);\n});\n\napp.get('/api/auth/google/callback', async c => {\n return await handleGoogleCallback(c);\n});\n\napp.get('/api/auth/url', async c => {\n const url = await getAuthUrl();\n return c.json({ url });\n});\n\n// Calendar API routes\napp.get('/api/calendars', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n try {\n const calendars = await getCalendarList(token);\n return c.json(calendars);\n } catch (error) {\n console.error('Error fetching calendars:', error);\n return c.json({ error: 'Failed to fetch calendars' }, 500);\n }\n});\n\napp.post('/api/metadata-calendar', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n try {\n const calendar = await createMetadataCalendar(token);\n return c.json(calendar);\n } catch (error) {\n console.error('Error creating metadata calendar:', error);\n return c.json({ error: 'Failed to create metadata calendar' }, 500);\n }\n});\n\napp.get('/api/events', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const timeMin = c.req.query('timeMin');\n const timeMax = c.req.query('timeMax');\n \n try {\n const events = await getCalendarEvents(token, calendarId, timeMin, timeMax);\n return c.json(events);\n } catch (error) {\n console.error('Error fetching events:', error);\n return c.json({ error: 'Failed to fetch events' }, 500);\n }\n});\n\napp.post('/api/events', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const event = await c.req.json();\n \n try {\n const createdEvent = await createEvent(token, calendarId, event);\n return c.json(createdEvent);\n } catch (error) {\n console.error('Error creating event:', error);\n return c.json({ error: 'Failed to create event' }, 500);\n }\n});\n\napp.put('/api/events/:eventId', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const eventId = c.req.param('eventId');\n const event = await c.req.json();\n \n try {\n const updatedEvent = await updateEvent(token, calendarId, eventId, event);\n return c.json(updatedEvent);\n } catch (error) {\n console.error('Error updating event:', error);\n return c.json({ error: 'Failed to update event' }, 500);\n }\n});\n\napp.delete('/api/events/:eventId', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const eventId = c.req.param('eventId');\n \n try {\n await deleteEvent(token, calendarId, eventId);\n return c.json({ success: true });\n } catch (error) {\n console.error('Error deleting event:', error);\n return c.json({ error: 'Failed to delete event' }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","flexcal",[],[161,352],"e8c671ee-3668-11f0-b34d-9e149126039e","formatting.ts","e8c672a2-3668-11f0-b34d-9e149126039e","fa1a5312-b855-4196-806e-953784eccab0",["D",1747848465826],"import { OpenAI } from \"https://esm.town/v/std/openai\";\n\n// Interface for formatting rules\ninterface FormatRule {\n id: string;\n name: string;\n condition: {\n type: 'title' | 'calendar' | 'property' | 'custom';\n value: string;\n };\n format: {\n backgroundColor?: string;\n textColor?: string;\n displayFormat?: string;\n visible?: boolean;\n };\n}\n\n// Apply formatting rules to events\nexport function applyFormatRules(events: any[], rules: FormatRule[]): any[] {\n return events.map(event => {\n // Clone the event to avoid modifying the original\n const formattedEvent = { ...event, formatting: {} };\n \n // Apply each rule that matches\n for (const rule of rules) {\n if (ruleMatches(event, rule.condition)) {\n // Apply the formatting\n formattedEvent.formatting = {\n ...formattedEvent.formatting,\n ...rule.format\n };\n \n // Apply custom display format if specified\n if (rule.format.displayFormat) {\n formattedEvent.formatting.displayText = formatEventText(event, rule.format.displayFormat);\n }\n }\n }\n \n return formattedEvent;\n });\n}\n\n// Check if an event matches a condition\nfunction ruleMatches(event: any, condition: any): boolean {\n switch (condition.type) {\n case 'title':\n return event.summary?.toLowerCase().includes(condition.value.toLowerCase());\n \n case 'calendar':\n // The calendar ID is usually in the event's organizer or in a custom field\n return event.organizer?.email === condition.value;\n \n case 'property':\n // Check for properties like all-day, recurring, etc.\n switch (condition.value) {\n case 'all-day':\n return !!event.start?.date && !!event.end?.date;\n case 'recurring':\n return !!event.recurringEventId;\n default:\n return false;\n }\n \n case 'custom':\n // For custom conditions, we would need a simple expression evaluator\n // This is a simplified version\n try {\n // Very basic evaluation - in a real app, use a proper expression evaluator\n const hasTitle = event.summary?.toLowerCase().includes(condition.value.toLowerCase());\n const hasDescription = event.description?.toLowerCase().includes(condition.value.toLowerCase());\n return hasTitle || hasDescription;\n } catch (error) {\n console.error('Error evaluating custom condition:', error);\n return false;\n }\n \n default:\n return false;\n }\n}\n\n// Format event text according to a template\nfunction formatEventText(event: any, format: string): string {\n // Replace placeholders in the format string\n let result = format;\n \n // Replace basic placeholders\n result = result.replace(/\\{title\\}/g, event.summary || '');\n result = result.replace(/\\{location\\}/g, event.location || '');\n result = result.replace(/\\{description\\}/g, event.description || '');\n \n // Handle special formatting for flights\n if (format.includes('{flight}') && (event.summary?.includes('flight') || event.summary?.includes('✈'))) {\n result = result.replace(/\\{flight\\}/g, extractFlightInfo(event));\n }\n \n return result;\n}\n\n// Extract flight information from an event\nfunction extractFlightInfo(event: any): string {\n // This is a simplified version - in a real app, use more sophisticated parsing\n const title = event.summary || '';\n const description = event.description || '';\n const location = event.location || '';\n \n // Look for airport codes (3 uppercase letters)\n const airportCodeRegex = /\\b([A-Z]{3})\\b/g;\n const allText = `${title} ${description} ${location}`;\n const matches = [...allText.matchAll(airportCodeRegex)];\n \n if (matches.length >= 2) {\n // If we found at least two airport codes, format as departure✈arrival\n return `${matches[0][1]}✈${matches[1][1]}`;\n }\n \n return title; // Fall back to the original title\n}\n\n// Use AI to extract flight information\nexport async function extractFlightInfoWithAI(event: any): Promise {\n try {\n const openai = new OpenAI();\n \n const prompt = `\nExtract the departure and arrival airport codes from this flight information.\nReturn only the codes in the format \"XXX✈YYY\" where XXX is the departure airport code and YYY is the arrival airport code.\nIf you can't find both codes, just return \"FLIGHT\".\n\nEvent title: ${event.summary || ''}\nEvent location: ${event.location || ''}\nEvent description: ${event.description || ''}\n `;\n \n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: \"You extract airport codes from flight information.\" },\n { role: \"user\", content: prompt }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 20,\n });\n \n const result = completion.choices[0].message.content?.trim() || 'FLIGHT';\n \n // Validate that the result matches the expected format\n if (/^[A-Z]{3}✈[A-Z]{3}$/.test(result)) {\n return result;\n } else {\n return 'FLIGHT';\n }\n } catch (error) {\n console.error('Error extracting flight info with AI:', error);\n return 'FLIGHT';\n }\n}",[],[161,368,361],"utils","e8c698d6-3668-11f0-b34d-9e149126039e",["D",1747848465826],[185],[161,368],["D",1747850307415],[],[161,81,65],["D",1747848441433],[183],[161,81],"c9670660-3668-11f0-bc5a-9e149126039e","google-oauth.ts","c9670714-3668-11f0-bc5a-9e149126039e","f35f9dd1-3f63-45c4-9028-ef78dd555ce7",["D",1747848413187],"import { Context } from 'https://esm.sh/hono@3.11.7';\n\n// Google OAuth configuration\nconst GOOGLE_CLIENT_ID = Deno.env.get('GOOGLE_CLIENT_ID');\nconst GOOGLE_CLIENT_SECRET = Deno.env.get('GOOGLE_CLIENT_SECRET');\nconst REDIRECT_URI = Deno.env.get('REDIRECT_URI') || 'https://your-val-town-url.web.val.run/api/auth/google/callback';\nconst SCOPES = [\n 'https://www.googleapis.com/auth/calendar',\n 'https://www.googleapis.com/auth/calendar.events',\n 'https://www.googleapis.com/auth/calendar.settings.readonly',\n 'https://www.googleapis.com/auth/calendar.calendarlist.readonly'\n];\n\n// Generate a random state for OAuth security\nfunction generateState(): string {\n const array = new Uint8Array(16);\n crypto.getRandomValues(array);\n return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');\n}\n\n// Get the Google OAuth URL\nexport async function getAuthUrl(): Promise {\n if (!GOOGLE_CLIENT_ID) {\n throw new Error('GOOGLE_CLIENT_ID environment variable is not set');\n }\n\n const state = generateState();\n \n const params = new URLSearchParams({\n client_id: GOOGLE_CLIENT_ID,\n redirect_uri: REDIRECT_URI,\n response_type: 'code',\n scope: SCOPES.join(' '),\n access_type: 'offline',\n state,\n prompt: 'consent',\n });\n\n return `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;\n}\n\n// Handle the initial OAuth request\nexport async function handleGoogleAuth(c: Context): Promise {\n try {\n const authUrl = await getAuthUrl();\n return new Response(null, {\n status: 302,\n headers: {\n Location: authUrl\n }\n });\n } catch (error) {\n console.error('Error in Google auth:', error);\n return c.json({ error: 'Authentication failed' }, 500);\n }\n}\n\n// Exchange the authorization code for tokens\nasync function exchangeCodeForTokens(code: string): Promise {\n if (!GOOGLE_CLIENT_ID || !GOOGLE_CLIENT_SECRET) {\n throw new Error('Google OAuth credentials are not set');\n }\n\n const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n code,\n client_id: GOOGLE_CLIENT_ID,\n client_secret: GOOGLE_CLIENT_SECRET,\n redirect_uri: REDIRECT_URI,\n grant_type: 'authorization_code',\n }),\n });\n\n if (!tokenResponse.ok) {\n const errorData = await tokenResponse.json();\n throw new Error(`Failed to exchange code for tokens: ${JSON.stringify(errorData)}`);\n }\n\n return tokenResponse.json();\n}\n\n// Handle the OAuth callback\nexport async function handleGoogleCallback(c: Context): Promise {\n const code = c.req.query('code');\n const error = c.req.query('error');\n const state = c.req.query('state');\n\n if (error) {\n return c.json({ error: `Authentication failed: ${error}` }, 400);\n }\n\n if (!code) {\n return c.json({ error: 'Authorization code is missing' }, 400);\n }\n\n try {\n const tokens = await exchangeCodeForTokens(code);\n \n // Redirect to the frontend with the tokens in the URL fragment\n // This is more secure than using query parameters\n const redirectUrl = `/?auth_success=true#access_token=${tokens.access_token}&refresh_token=${tokens.refresh_token}&expires_in=${tokens.expires_in}`;\n \n return new Response(null, {\n status: 302,\n headers: {\n Location: redirectUrl\n }\n });\n } catch (error) {\n console.error('Error in Google callback:', error);\n return c.json({ error: 'Failed to complete authentication' }, 500);\n }\n}\n\n// Refresh an access token using a refresh token\nexport async function refreshAccessToken(refreshToken: string): Promise {\n if (!GOOGLE_CLIENT_ID || !GOOGLE_CLIENT_SECRET) {\n throw new Error('Google OAuth credentials are not set');\n }\n\n const response = await fetch('https://oauth2.googleapis.com/token', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n client_id: GOOGLE_CLIENT_ID,\n client_secret: GOOGLE_CLIENT_SECRET,\n refresh_token: refreshToken,\n grant_type: 'refresh_token',\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Failed to refresh token: ${JSON.stringify(errorData)}`);\n }\n\n const data = await response.json();\n return data.access_token;\n}",[],[161,387,380],"auth","c96726e0-3668-11f0-bc5a-9e149126039e",["D",1747848413187],[181],[161,387],"bd5c8598-3668-11f0-88eb-9e149126039e",2,["D",1747848392985],[180,182,184,186],[161],["D",1747847921786],{"_11":12,"_131":71},{"_11":12,"_127":-5,"_70":71,"_31":69,"_128":129,"_130":30},{"_40":118,"_13":16,"_34":37,"_119":84,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":14,"_126":12},"ctx",{"_53":-5,"_150":434,"_435":436,"_437":438,"_439":30,"_440":30,"_441":30,"_442":24,"_443":-5,"_444":-7,"_445":-7,"_446":26,"_447":30,"_448":30,"_449":-5,"_450":30,"_451":30,"_452":30,"_453":-5},"ENV",{"_405":406,"_407":408,"_409":16,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429,"_430":431,"_432":433},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · calendar