mARTin
43e5296db4
Address gaps found in verification: - Fix Google and Apple OAuth callbacks to use real API token exchanges - Complete calendar event fetching with real API integrations - Implement bidirectional sync with actual database/calendar operations - Enable functional calendar connection UI with real OAuth triggers
162 lines
6.8 KiB
Markdown
162 lines
6.8 KiB
Markdown
---
|
|
phase: 03-calendar-integration
|
|
plan: 06
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- src/components/CalendarSettings.tsx
|
|
- src/app/api/calendar/google/oauth/route.ts
|
|
- src/app/api/calendar/apple/oauth/route.ts
|
|
autonomous: true
|
|
gap_closure: true
|
|
|
|
must_haves:
|
|
truths:
|
|
- "User can connect their Google Calendar account"
|
|
- "User can connect their Apple Calendar account"
|
|
- "User can view calendar events alongside tasks in weekly view"
|
|
- "User can manage calendar connection settings from the application"
|
|
- "User's tasks and calendar events are synchronized bidirectionally"
|
|
artifacts:
|
|
- path: "src/components/CalendarSettings.tsx"
|
|
provides: "Functional calendar connection UI with real OAuth triggers"
|
|
- path: "src/app/api/calendar/google/oauth/route.ts"
|
|
provides: "OAuth callback that properly saves connections"
|
|
- path: "src/app/api/calendar/apple/oauth/route.ts"
|
|
provides: "OAuth callback that properly saves connections"
|
|
key_links:
|
|
- from: "src/components/CalendarSettings.tsx"
|
|
to: "src/app/api/calendar/google/oauth/route.ts"
|
|
via: "connecting Google Calendar via OAuth flow"
|
|
pattern: "connect.*google"
|
|
- from: "src/components/CalendarSettings.tsx"
|
|
to: "src/app/api/calendar/apple/oauth/route.ts"
|
|
via: "connecting Apple Calendar via OAuth flow"
|
|
pattern: "connect.*apple"
|
|
- from: "src/components/CalendarSettings.tsx"
|
|
to: "src/app/api/calendar/sync/route.ts"
|
|
via: "triggering sync operations"
|
|
pattern: "sync.*api"
|
|
---
|
|
|
|
# Gap Closure: Calendar Connection UI and Management
|
|
|
|
## Objective
|
|
Enable functional calendar connection management UI that triggers real OAuth flows and manages connections properly.
|
|
|
|
## Purpose
|
|
Allow users to successfully connect, disconnect, and manage their calendar connections through the UI.
|
|
|
|
## Output
|
|
Fully functional CalendarSettings UI component with real OAuth triggers and connection management.
|
|
|
|
## Tasks
|
|
|
|
<task type="auto">
|
|
<name>Implement Real Google Calendar OAuth Trigger</name>
|
|
<files>src/components/CalendarSettings.tsx</files>
|
|
<action>
|
|
Enable the Google connection button to trigger actual OAuth flow:
|
|
|
|
1. Replace placeholder button functionality with actual redirect to Google OAuth authorization URL
|
|
2. Implement proper URL construction with client ID, redirect URI, scopes, and state parameters
|
|
3. Ensure proper error handling if OAuth initiation fails
|
|
4. Add loading states for OAuth redirection
|
|
5. Add proper accessibility attributes for screen readers
|
|
|
|
The implementation should:
|
|
- Construct proper Google OAuth authorization URL
|
|
- Redirect user to Google OAuth flow when clicked
|
|
- Include necessary OAuth parameters (client_id, redirect_uri, scope, state)
|
|
- Preserve user session during OAuth flow
|
|
</action>
|
|
<verify>Clicking "Connect Google Calendar" button redirects to actual Google OAuth page</verify>
|
|
<done>Google Calendar connection button triggers real OAuth flow to Google</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement Real Apple Calendar OAuth Trigger</name>
|
|
<files>src/components/CalendarSettings.tsx</files>
|
|
<action>
|
|
Enable the Apple connection button to trigger actual OAuth flow:
|
|
|
|
1. Replace placeholder button functionality with actual redirect to Apple OAuth authorization URL
|
|
2. Implement proper URL construction with client ID, redirect URI, scopes, and state parameters
|
|
3. Ensure proper error handling if OAuth initiation fails
|
|
4. Add loading states for OAuth redirection
|
|
5. Add proper accessibility attributes for screen readers
|
|
|
|
The implementation should:
|
|
- Construct proper Apple OAuth authorization URL
|
|
- Redirect user to Apple OAuth flow when clicked
|
|
- Include necessary OAuth parameters (client_id, redirect_uri, scope, state)
|
|
- Preserve user session during OAuth flow
|
|
</action>
|
|
<verify>Clicking "Connect Apple Calendar" button redirects to actual Apple OAuth page</verify>
|
|
<done>Apple Calendar connection button triggers real OAuth flow to Apple</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement Calendar Disconnection Functionality</name>
|
|
<files>src/components/CalendarSettings.tsx</files>
|
|
<action>
|
|
Enable proper disconnection of calendar accounts:
|
|
|
|
1. Implement actual database removal of CalendarConnection records when disconnected
|
|
2. Add confirmation dialogs for disconnection actions
|
|
3. Ensure tokens are properly removed from database (both access and refresh tokens)
|
|
4. Handle errors that might occur during disconnection
|
|
5. Add loading states during disconnection process
|
|
6. Update UI to reflect successful disconnection immediately
|
|
|
|
The implementation should:
|
|
- Make API call to remove calendar connection from database
|
|
- Display confirmation before removing connection
|
|
- Handle API errors gracefully
|
|
- Update component state to reflect disconnection
|
|
</action>
|
|
<verify>Clicking "Disconnect" button removes calendar connection from database and UI</verify>
|
|
<done>Calendar connection disconnection works with proper database removal</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement Manual Sync Triggering</name>
|
|
<files>src/components/CalendarSettings.tsx</files>
|
|
<action>
|
|
Enable proper manual sync triggering from the UI:
|
|
|
|
1. Implement actual API call to trigger sync when "Sync Now" button is clicked
|
|
2. Ensure sync operation uses correct time range parameters
|
|
3. Add loading states during sync operation
|
|
4. Handle responses from sync endpoint properly
|
|
5. Update last sync time display after successful sync
|
|
6. Show error messages if sync fails
|
|
|
|
The implementation should:
|
|
- Make API call to /api/calendar/sync endpoint with proper parameters
|
|
- Handle sync results and update UI accordingly
|
|
- Show loading indicator during sync operation
|
|
- Update last sync timestamp display
|
|
</action>
|
|
<verify>Clicking "Sync Now" button triggers actual sync operation and updates last sync time</verify>
|
|
<done>Manual sync button triggers real sync operation with proper API calls</done>
|
|
</task>
|
|
</tasks>
|
|
|
|
## Verification
|
|
|
|
After completing these tasks, the following checks should pass:
|
|
- Clicking "Connect Google Calendar" button redirects to actual Google OAuth page
|
|
- Clicking "Connect Apple Calendar" button redirects to actual Apple OAuth page
|
|
- Clicking "Disconnect" button removes calendar connection from database
|
|
- Clicking "Sync Now" button triggers actual sync operation
|
|
- UI properly reflects connection and sync status updates
|
|
|
|
## Success Criteria
|
|
|
|
All gaps identified in the VERIFICATION.md for calendar connection management UI are resolved:
|
|
- Calendar connection buttons trigger real OAuth flows to respective providers
|
|
- Calendar disconnection completely removes connections from database
|
|
- Manual sync from UI triggers real sync operations
|
|
- UI properly reflects connection and sync states |