partial google calendar task integration + fix with dark mode colors for task nodes so that text is still visible

4 files changed, 64 insertions, 53 deletions

diff --git a/src/client/apis/GoogleAuthenticationManager.tsx b/src/client/apis/GoogleAuthenticationManager.tsx
index 46581397d..1b1d6f734 100644
--- a/src/client/apis/GoogleAuthenticationManager.tsx
+++ b/src/client/apis/GoogleAuthenticationManager.tsx
@@ -1,4 +1,4 @@
-import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Opt } from '../../fields/Doc';
@@ -6,12 +6,13 @@ import { Networking } from '../Network';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { MainViewModal } from '../views/MainViewModal';
 import './GoogleAuthenticationManager.scss';
+import { ObservableReactComponent } from '../views/ObservableReactComponent';
 
 const AuthenticationUrl = 'https://accounts.google.com/o/oauth2/v2/auth';
 const prompt = 'Paste authorization code here...';
 
 @observer
-export class GoogleAuthenticationManager extends React.Component<object> {
+export class GoogleAuthenticationManager extends ObservableReactComponent<object> {
     // eslint-disable-next-line no-use-before-define
     public static Instance: GoogleAuthenticationManager;
     private authenticationLink: Opt<string> = undefined;
@@ -23,6 +24,12 @@ export class GoogleAuthenticationManager extends React.Component<object> {
     @observable private credentials: { user_info: { name: string; picture: string }; access_token: string } | undefined = undefined;
     private disposer: Opt<IReactionDisposer>;
 
+    constructor(props: object) {
+        super(props);
+        makeObservable(this);
+        GoogleAuthenticationManager.Instance = this;
+    }
+
     private set isOpen(value: boolean) {
         runInAction(() => (this.openState = value));
     }
@@ -49,14 +56,15 @@ export class GoogleAuthenticationManager extends React.Component<object> {
                     () => this.authenticationCode,
                     async authenticationCode => {
                         if (authenticationCode && /\d{1}\/[\w-]{55}/.test(authenticationCode)) {
+                            resolve(authenticationCode);
                             this.disposer?.();
-                            const response2 = await Networking.PostToServer('/writeGoogleAccessToken', { authenticationCode });
-                            runInAction(() => {
-                                this.success = true;
-                                this.credentials = response2 as { user_info: { name: string; picture: string }; access_token: string };
-                            });
+                            // const response2 = await Networking.PostToServer('/writeGoogleAccessToken', { authenticationCode });
+                            // runInAction(() => {
+                            //     this.success = true;
+                            //     this.credentials = response2 as { user_info: { name: string; picture: string }; access_token: string };
+                            // });
+                            // resolve((response2 as { access_token: string }).access_token);
                             this.resetState();
-                            resolve((response2 as { access_token: string }).access_token);
                         }
                     }
                 );
@@ -109,11 +117,6 @@ export class GoogleAuthenticationManager extends React.Component<object> {
         }
     });
 
-    constructor(props: object) {
-        super(props);
-        GoogleAuthenticationManager.Instance = this;
-    }
-
     private get renderPrompt() {
         return (
             <div className={'authorize-container'}>
@@ -153,7 +156,11 @@ export class GoogleAuthenticationManager extends React.Component<object> {
     }
 
     render() {
-        return <MainViewModal isDisplayed={this.openState} interactive={true} contents={this.renderPrompt} dialogueBoxStyle={this.dialogueBoxStyle} overlayStyle={{ zIndex: 1001 }} closeOnExternalClick={action(() => (this.isOpen = false))} />;
+        return (
+            <div className="hell">
+                <MainViewModal isDisplayed={this.openState} interactive={true} contents={this.renderPrompt} dialogueBoxStyle={this.dialogueBoxStyle} overlayStyle={{ zIndex: 1001 }} closeOnExternalClick={action(() => (this.isOpen = false))} />
+            </div>
+        );
     }
 }
 
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index b05292c47..d7640dc72 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -41,7 +41,7 @@ export class MainViewModal extends React.Component<MainViewOverlayProps> {
                     className="overlay"
                     onClick={this.props?.closeOnExternalClick}
                     style={{
-                        backgroundColor: isDark(SnappingManager.userColor) ? '#DFDFDF30' : '#32323230',
+                        backgroundColor: isDark(SnappingManager.userColor ?? '') ? '#DFDFDF30' : '#32323230',
                         ...(p.overlayStyle || {}),
                     }}
                 />
diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index 0fcc2f955..6ef0c6454 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -6,6 +6,15 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
+
+    input,
+    textarea,
+    select,
+    button {
+        background-color: #fff !important;
+        color: #000 !important;
+        border-color: #ccc !important;
+    }
 }
 
 .task-manager-title {
@@ -69,4 +78,4 @@ input[type="datetime-local"] {
     border: 1px solid #ccc;
     border-radius: 6px;
     box-sizing: border-box;
-}
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index 1c7aeeb82..3990356b9 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -270,43 +270,38 @@ export class TaskBox extends React.Component<TaskBoxProps> {
                 )}
 
                 {/** test button */}
-            <button
-            className="task-manager-google"
-            onClick={async () => {
-                console.log('GT button clicked');
-                const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
-                console.log('Got token', token);
-
-                try {
-                const response = await fetch('/googleTasks/create', {
-                    method: 'POST',
-                    headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: `Bearer ${token}`,
-                    },
-                    body: JSON.stringify({
-                    title: taskTitle || 'Untitled Task',
-                    notes: taskDesc,
-                    due: allDay
-                        ? String(doc.$task_dateRange)?.split('|')[0] + 'T23:59:00Z'
-                        : (doc.$task_endTime instanceof DateField && doc.$task_endTime.date?.toISOString()) || undefined,
-                    }),
-                });
-
-                const result = await response.json();
-                console.log("📬 Google Task result:", result);
-                alert(result?.id ? 'Task sent to Google Tasks!' : `Failed: ${result?.error?.message || 'Unknown error'}`);
-                } catch (err) {
-                console.error("Fetch error:", err);
-                alert("Fetch failed: ");
-                }
-            }}
-            >
-            GT
-            </button>
-
-
-
+                <button
+                    className="task-manager-google"
+                    onClick={async () => {
+                        console.log('GT button clicked');
+                        const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+                        console.log('Got token', token);
+
+                        try {
+                            const response = await fetch('/googleTasks/create', {
+                                method: 'POST',
+                                credentials: 'include',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    Authorization: `Bearer ${token}`,
+                                },
+                                body: JSON.stringify({
+                                    title: taskTitle || 'Untitled Task',
+                                    notes: taskDesc,
+                                    due: allDay ? String(doc.$task_dateRange)?.split('|')[0] + 'T23:59:00Z' : (doc.$task_endTime instanceof DateField && doc.$task_endTime.date?.toISOString()) || undefined,
+                                }),
+                            });
+
+                            const result = await response.text();
+                            console.log('Google Task result:', result);
+                            alert(result?.id ? 'Task sent to Google Tasks!' : `Failed: ${result?.error?.message || 'Unknown error'}`);
+                        } catch (err) {
+                            console.error('Fetch error:', err);
+                            alert('Fetch failed: ');
+                        }
+                    }}>
+                    GT
+                </button>
             </div>
         );
     }