onairos 2.0.7 → 2.0.9

package/src/components/UniversalOnboarding.js

@@ -1,32 +1,48 @@
 import React, { useState, useEffect } from 'react';
+import YoutubeConnector from './connectors/YoutubeConnector';
+import LinkedInConnector from './connectors/LinkedInConnector';
+import InstagramConnector from './connectors/InstagramConnector';
+import PinterestConnector from './connectors/PinterestConnector';
+import RedditConnector from './connectors/RedditConnector';
+import GmailConnector from './connectors/GmailConnector';
 
 const platforms = [
-  { name: 'YouTube', icon: '📺', color: 'bg-red-500' },
-  { name: 'Reddit', icon: '🔥', color: 'bg-orange-500' },
-  { name: 'Instagram', icon: '📷', color: 'bg-pink-500' },
-  { name: 'Pinterest', icon: '📌', color: 'bg-red-600' },
-  { name: 'TikTok', icon: '🎵', color: 'bg-black' },
-  { name: 'Twitter', icon: '🐦', color: 'bg-blue-500' },
-  { name: 'LinkedIn', icon: '💼', color: 'bg-blue-700' },
-  { name: 'Facebook', icon: '👥', color: 'bg-blue-600' }
+  { name: 'YouTube', icon: '📺', color: 'bg-red-500', connector: 'youtube' },
+  { name: 'Reddit', icon: '🔥', color: 'bg-orange-500', connector: 'reddit' },
+  { name: 'Instagram', icon: '📷', color: 'bg-pink-500', connector: 'instagram' },
+  { name: 'Pinterest', icon: '📌', color: 'bg-red-600', connector: 'pinterest' },
+  { name: 'LinkedIn', icon: '💼', color: 'bg-blue-700', connector: 'linkedin' },
+  { name: 'Gmail', icon: '📧', color: 'bg-red-500', connector: 'gmail' }
 ];
 
-export default function UniversalOnboarding({ onComplete, appIcon, appName = 'App' }) {
+export default function UniversalOnboarding({ onComplete, appIcon, appName = 'App', username }) {
   const [connectedAccounts, setConnectedAccounts] = useState({});
   const [isConnecting, setIsConnecting] = useState(false);
+  const [activeConnector, setActiveConnector] = useState(null);
 
-  const handleToggle = async (platformName) => {
-    if (isConnecting) return;
-    
-    setIsConnecting(true);
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    
+  const handleConnectionChange = (platformName, isConnected) => {
     setConnectedAccounts(prev => ({
       ...prev,
-      [platformName]: !prev[platformName]
+      [platformName]: isConnected
     }));
+    setActiveConnector(null);
+  };
+
+  const handleToggle = async (platformName, connectorType) => {
+    if (isConnecting) return;
     
-    setIsConnecting(false);
+    const isCurrentlyConnected = connectedAccounts[platformName];
+    
+    if (isCurrentlyConnected) {
+      // Disconnect - call the connector's disconnect method
+      setConnectedAccounts(prev => ({
+        ...prev,
+        [platformName]: false
+      }));
+    } else {
+      // Connect - open the OAuth dialog
+      setActiveConnector(connectorType);
+    }
   };
 
   const handleContinue = () => {
@@ -104,7 +120,7 @@ export default function UniversalOnboarding({ onComplete, appIcon, appName = 'Ap
                 
                 {/* Toggle Switch */}
                 <button
-                  onClick={() => handleToggle(platform.name)}
+                  onClick={() => handleToggle(platform.name, platform.connector)}
                   disabled={isConnecting}
                   className={`relative inline-flex h-5 sm:h-6 w-9 sm:w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
                     isConnected ? 'bg-blue-600' : 'bg-gray-200'
@@ -151,6 +167,44 @@ export default function UniversalOnboarding({ onComplete, appIcon, appName = 'Ap
           Skip for now
         </button>
       </div>
+
+      {/* OAuth Connector Dialogs */}
+      <YoutubeConnector 
+        open={activeConnector === 'youtube'}
+        onClose={() => setActiveConnector(null)}
+        onConnectionChange={handleConnectionChange}
+        username={username}
+      />
+      <LinkedInConnector 
+        open={activeConnector === 'linkedin'}
+        onClose={() => setActiveConnector(null)}
+        onConnectionChange={handleConnectionChange}
+        username={username}
+      />
+      <InstagramConnector 
+        open={activeConnector === 'instagram'}
+        onClose={() => setActiveConnector(null)}
+        onConnectionChange={handleConnectionChange}
+        username={username}
+      />
+      <PinterestConnector 
+        open={activeConnector === 'pinterest'}
+        onClose={() => setActiveConnector(null)}
+        onConnectionChange={handleConnectionChange}
+        username={username}
+      />
+      <RedditConnector 
+        open={activeConnector === 'reddit'}
+        onClose={() => setActiveConnector(null)}
+        onConnectionChange={handleConnectionChange}
+        username={username}
+      />
+      <GmailConnector 
+        open={activeConnector === 'gmail'}
+        onClose={() => setActiveConnector(null)}
+        onConnectionChange={handleConnectionChange}
+        username={username}
+      />
     </div>
   );
 }

package/src/components/connectors/GmailConnector.js

@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+
+class GmailConnector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      connected: false,
+      open: false,
+      isConnecting: false,
+    };
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.gmailConnect = this.gmailConnect.bind(this);
+    this.setConnected = this.setConnected.bind(this);
+    this.setDisconnected = this.setDisconnected.bind(this);
+  }
+
+  setConnected() {
+    this.setState({ connected: true });
+    if (this.props.onConnectionChange) {
+      this.props.onConnectionChange('Gmail', true);
+    }
+    this.handleClose();
+  }
+
+  setDisconnected() {
+    this.updateConnections('Remove', 'Gmail').then(() => {
+      this.setState({ connected: false });
+      if (this.props.onConnectionChange) {
+        this.props.onConnectionChange('Gmail', false);
+      }
+      this.handleClose();
+    }).catch((error) => {
+      console.error('Error removing Gmail connection:', error);
+    });
+  }
+
+  async updateConnections(updateType, newConnection) {
+    const jsonData = {
+      session: {
+        username: localStorage.getItem("username") || this.props.username
+      },
+      updateType,
+      newConnection
+    };
+
+    try {
+      const response = await fetch('https://api2.onairos.uk/connections/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonData),
+      });
+      return await response.json();
+    } catch (error) {
+      console.error('UpdateConnections error:', error);
+      throw error;
+    }
+  }
+
+  handleOpen() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+
+  async gmailConnect() {
+    this.setState({ isConnecting: true });
+    
+    const jsonData = {
+      session: {
+        username: localStorage.getItem("username") || this.props.username
+      },
+    };
+
+    try {
+      const response = await fetch('https://api2.onairos.uk/gmail/authorize', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonData),
+      });
+
+      const result = await response.json();
+      
+      if (result.gmailURL) {
+        window.location.href = result.gmailURL;
+      } else {
+        console.error('No Gmail URL received');
+        this.setState({ isConnecting: false });
+      }
+    } catch (error) {
+      console.error('Gmail connection error:', error);
+      this.setState({ isConnecting: false });
+    }
+  }
+
+  render() {
+    const { open = this.props.open || this.state.open } = this.props;
+    
+    if (!open) return null;
+    
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-hidden">
+          <div className="p-6">
+            <h2 className="text-xl font-bold text-gray-900 mb-4">
+              Grant Onairos Access to your Gmail Account?
+            </h2>
+            
+            <div className="space-y-4 text-gray-700">
+              <p>
+                Grant Permission to your Gmail Account, so we can build your Data Models.
+              </p>
+              
+              <div>
+                <p className="font-medium mb-2">We will access your Gmail:</p>
+                <ul className="list-disc ml-6 space-y-1">
+                  <li>Basic Account Information</li>
+                  <li>Email Metadata (subjects, dates, senders)</li>
+                  <li>Email Categories and Labels</li>
+                  <li>Communication Patterns</li>
+                </ul>
+              </div>
+              
+              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                <p className="text-yellow-800 text-sm font-medium">
+                  <strong>Note:</strong> We do NOT read the content of your emails. Only metadata is processed.
+                </p>
+              </div>
+              
+              <p>
+                We will delete all the data used once your Model is Created
+              </p>
+              
+              <p className="text-sm">
+                <a href="https://onairos.uk/compliance-google-policy" className="text-blue-600 hover:underline">
+                  Onairos
+                </a>{' '}
+                complies with{' '}
+                <a href="https://policies.google.com/privacy" className="text-blue-600 hover:underline">
+                  Google API Services User Data Policy
+                </a>
+              </p>
+            </div>
+            
+            <div className="flex space-x-3 mt-6">
+              <button
+                onClick={this.handleClose}
+                disabled={this.state.isConnecting}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+              >
+                Disagree
+              </button>
+              <button
+                onClick={this.gmailConnect}
+                disabled={this.state.isConnecting}
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {this.state.isConnecting ? 'Connecting...' : 'Agree'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default GmailConnector; 

package/src/components/connectors/InstagramConnector.js

@@ -0,0 +1,171 @@
+import React, { Component } from 'react';
+
+class InstagramConnector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      connected: false,
+      open: false,
+      isConnecting: false,
+    };
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.instagramConnect = this.instagramConnect.bind(this);
+    this.setConnected = this.setConnected.bind(this);
+    this.setDisconnected = this.setDisconnected.bind(this);
+  }
+
+  setConnected() {
+    this.setState({ connected: true });
+    if (this.props.onConnectionChange) {
+      this.props.onConnectionChange('Instagram', true);
+    }
+    this.handleClose();
+  }
+
+  setDisconnected() {
+    this.updateConnections('Remove', 'Instagram').then(() => {
+      this.setState({ connected: false });
+      if (this.props.onConnectionChange) {
+        this.props.onConnectionChange('Instagram', false);
+      }
+      this.handleClose();
+    }).catch((error) => {
+      console.error('Error removing Instagram connection:', error);
+    });
+  }
+
+  async updateConnections(updateType, newConnection) {
+    const jsonData = {
+      session: {
+        username: localStorage.getItem("username") || this.props.username
+      },
+      updateType,
+      newConnection
+    };
+
+    try {
+      const response = await fetch('https://api2.onairos.uk/connections/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonData),
+      });
+      return await response.json();
+    } catch (error) {
+      console.error('UpdateConnections error:', error);
+      throw error;
+    }
+  }
+
+  handleOpen() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+
+  async instagramConnect() {
+    this.setState({ isConnecting: true });
+    
+    const jsonData = {
+      session: {
+        username: localStorage.getItem("username") || this.props.username
+      },
+    };
+
+    try {
+      const response = await fetch('https://api2.onairos.uk/instagram/authorize', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonData),
+      });
+
+      const result = await response.json();
+      
+      if (result.instagramURL) {
+        window.location.href = result.instagramURL;
+      } else {
+        console.error('No Instagram URL received');
+        this.setState({ isConnecting: false });
+      }
+    } catch (error) {
+      console.error('Instagram connection error:', error);
+      this.setState({ isConnecting: false });
+    }
+  }
+
+  render() {
+    const { open = this.props.open || this.state.open } = this.props;
+    
+    if (!open) return null;
+    
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-hidden">
+          <div className="p-6">
+            <h2 className="text-xl font-bold text-gray-900 mb-4">
+              Grant Onairos Access to your Instagram Account?
+            </h2>
+            
+            <div className="space-y-4 text-gray-700">
+              <p>
+                Grant Permission to your Instagram Account, so we can build your Data Models.
+              </p>
+              
+              <div>
+                <p className="font-medium mb-2">We will access your Instagram:</p>
+                <ul className="list-disc ml-6 space-y-1">
+                  <li>Basic Profile Information</li>
+                  <li>Posts and Stories</li>
+                  <li>Liked Content</li>
+                  <li>Following and Followers</li>
+                </ul>
+              </div>
+              
+              <p>
+                We will delete all the data used once your Model is Created
+              </p>
+              
+              <p className="text-sm">
+                <a href="https://onairos.uk/compliance-meta-policy" className="text-blue-600 hover:underline">
+                  Onairos
+                </a>{' '}
+                complies with{' '}
+                <a href="https://developers.facebook.com/policy" className="text-blue-600 hover:underline">
+                  Meta Platform Policy
+                </a>
+              </p>
+            </div>
+            
+            <div className="flex space-x-3 mt-6">
+              <button
+                onClick={this.handleClose}
+                disabled={this.state.isConnecting}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+              >
+                Disagree
+              </button>
+              <button
+                onClick={this.instagramConnect}
+                disabled={this.state.isConnecting}
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {this.state.isConnecting ? 'Connecting...' : 'Agree'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default InstagramConnector; 

package/src/components/connectors/LinkedInConnector.js

@@ -0,0 +1,168 @@
+import React, { Component } from 'react';
+
+class LinkedInConnector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      connected: false,
+      open: false,
+      isConnecting: false,
+    };
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.linkedinConnect = this.linkedinConnect.bind(this);
+    this.setConnected = this.setConnected.bind(this);
+    this.setDisconnected = this.setDisconnected.bind(this);
+  }
+
+  setConnected() {
+    this.setState({ connected: true });
+    if (this.props.onConnectionChange) {
+      this.props.onConnectionChange('LinkedIn', true);
+    }
+    this.handleClose();
+  }
+
+  setDisconnected() {
+    this.updateConnections('Remove', 'LinkedIn').then(() => {
+      this.setState({ connected: false });
+      if (this.props.onConnectionChange) {
+        this.props.onConnectionChange('LinkedIn', false);
+      }
+      this.handleClose();
+    }).catch((error) => {
+      console.error('Error removing LinkedIn connection:', error);
+    });
+  }
+
+  async updateConnections(updateType, newConnection) {
+    const jsonData = {
+      session: {
+        username: localStorage.getItem("username") || this.props.username
+      },
+      updateType,
+      newConnection
+    };
+
+    try {
+      const response = await fetch('https://api2.onairos.uk/connections/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonData),
+      });
+      return await response.json();
+    } catch (error) {
+      console.error('UpdateConnections error:', error);
+      throw error;
+    }
+  }
+
+  handleOpen() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+
+  async linkedinConnect() {
+    this.setState({ isConnecting: true });
+    
+    const jsonData = {
+      session: {
+        username: localStorage.getItem("username") || this.props.username
+      },
+    };
+
+    try {
+      const response = await fetch('https://api2.onairos.uk/linkedin/authorize', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonData),
+      });
+
+      const result = await response.json();
+      
+      if (result.linkedinURL) {
+        window.location.href = result.linkedinURL;
+      } else {
+        console.error('No LinkedIn URL received');
+        this.setState({ isConnecting: false });
+      }
+    } catch (error) {
+      console.error('LinkedIn connection error:', error);
+      this.setState({ isConnecting: false });
+    }
+  }
+
+  render() {
+    const { open = this.props.open || this.state.open } = this.props;
+    
+    if (!open) return null;
+    
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-hidden">
+          <div className="p-6">
+            <h2 className="text-xl font-bold text-gray-900 mb-4">
+              Grant Onairos Access to your LinkedIn Account?
+            </h2>
+            
+            <div className="space-y-4 text-gray-700">
+              <p>
+                Grant Permission to your LinkedIn Account, so we can build your Data Models.
+              </p>
+              
+              <div>
+                <p className="font-medium mb-2">We will access your LinkedIn:</p>
+                <ul className="list-disc ml-6 space-y-1">
+                  <li>Basic Profile Information</li>
+                  <li>Professional Experience</li>
+                  <li>Network Connections</li>
+                  <li>Posts and Activity</li>
+                </ul>
+              </div>
+              
+              <p>
+                We will delete all the data used once your Model is Created
+              </p>
+              
+              <p className="text-sm">
+                <a href="https://onairos.uk/privacy-policy" className="text-blue-600 hover:underline">
+                  Onairos Privacy Policy
+                </a>{' '}
+                - Your professional data is handled with the highest security standards.
+              </p>
+            </div>
+            
+            <div className="flex space-x-3 mt-6">
+              <button
+                onClick={this.handleClose}
+                disabled={this.state.isConnecting}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+              >
+                Disagree
+              </button>
+              <button
+                onClick={this.linkedinConnect}
+                disabled={this.state.isConnecting}
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {this.state.isConnecting ? 'Connecting...' : 'Agree'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LinkedInConnector;