@plutonhq/core-frontend 0.1.21 → 0.1.22

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.21",
+   "version": "0.1.22",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {

package/src/components/Storage/AddStorage/AddStorage.module.scss

@@ -166,3 +166,77 @@
       }
    }
 }
+
+.oauthContainer {
+   background-color: var(--background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   box-sizing: border-box;
+   padding: 12px;
+   word-break: break-all;
+   &.success {
+      background-color: var(--success-bg-color);
+      border-color: var(--success-bg-color);
+      color: var(--success-text-color);
+   }
+   &.error {
+      background-color: var(--error-bg-color);
+      border-color: var(--error-bg-color);
+      color: var(--error-text-color);
+   }
+}
+
+.oauthButton {
+   display: flex;
+   width: 100%;
+   flex-direction: column;
+   align-items: flex-end;
+   .oauthAuthorizeBtn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+      background-color: var(--primary-color);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      &:hover {
+         opacity: 0.9;
+      }
+   }
+}
+
+.oauthInnerBtn {
+   display: inline-flex;
+   align-items: center;
+   gap: 6px;
+   padding: 6px 14px;
+   font-size: 12px;
+   font-weight: 500;
+   color: var(--content-text-color);
+   background-color: var(--content-background-color);
+   border: none;
+   border-radius: 6px;
+   cursor: pointer;
+   margin-top: 8px;
+   &:hover {
+      background-color: var(--primary-color);
+      color: var(--primary-text-color);
+   }
+}
+
+.oauthProgress {
+   p {
+      margin: 6px 0;
+      font-size: 13px;
+      line-height: 1.5;
+      a {
+         color: var(--primary-color);
+         text-decoration: underline;
+      }
+   }
+}

package/src/components/Storage/StorageAuthSettings/StorageAuthSettings.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { storageOptionField } from '../../../@types/storages';
 import Tristate from '../../common/form/Tristate/Tristate';
 import Icon from '../../common/Icon/Icon';
 import classes from '../AddStorage/AddStorage.module.scss';
 import StorageSettings from '../StorageSettings/StorageSettings';
+import { startStorageAuthorize, getStorageAuthorizeStatus, cancelStorageAuthorize } from '../../../services/storage';
 
 interface StorageAuthSettingsProps {
    storageType: string;
@@ -16,6 +17,8 @@ interface StorageAuthSettingsProps {
    onAuthTypeChange: (authType: string) => void;
 }
 
+type OAuthStatus = 'idle' | 'authorizing' | 'success' | 'error';
+
 const StorageAuthSettings = ({
    storageType,
    fields,
@@ -29,6 +32,16 @@ const StorageAuthSettings = ({
    const [showAdvanced, setShowAdvanced] = useState(true);
    const [showOAuthDoc, setShowOAuthDoc] = useState(false);
 
+   // OAuth auto-authorize state
+   const [oauthStatus, setOauthStatus] = useState<OAuthStatus>('idle');
+   const [authSessionId, setAuthSessionId] = useState<string | null>(null);
+   const [authUrl, setAuthUrl] = useState<string | null>(null);
+   const [authError, setAuthError] = useState<string | null>(null);
+   const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+   const installType = (window as any).plutonInstallType;
+   const isDesktop = installType === 'binary' || installType === 'dev';
+
    console.log('availableAuthTypes :', fields, authTypes, currentAuthType);
 
    useEffect(() => {
@@ -37,6 +50,76 @@ const StorageAuthSettings = ({
       }
    }, [authTypes, currentAuthType, onAuthTypeChange]);
 
+   // Cleanup polling on unmount
+   useEffect(() => {
+      return () => {
+         if (pollingRef.current) {
+            clearInterval(pollingRef.current);
+         }
+      };
+   }, []);
+
+   const stopPolling = useCallback(() => {
+      if (pollingRef.current) {
+         clearInterval(pollingRef.current);
+         pollingRef.current = null;
+      }
+   }, []);
+
+   const startOAuthAuthorize = useCallback(async () => {
+      setOauthStatus('authorizing');
+      setAuthUrl(null);
+      setAuthError(null);
+
+      try {
+         const { sessionId } = await startStorageAuthorize(storageType);
+         setAuthSessionId(sessionId);
+
+         // Start polling every 2 seconds
+         pollingRef.current = setInterval(async () => {
+            try {
+               const result = await getStorageAuthorizeStatus(sessionId);
+
+               if (result.authUrl) {
+                  setAuthUrl(result.authUrl);
+               }
+
+               if (result.status === 'success' && result.token) {
+                  stopPolling();
+                  setOauthStatus('success');
+                  onUpdate({ ...settings, token: result.token });
+               } else if (result.status === 'error') {
+                  stopPolling();
+                  setOauthStatus('error');
+                  setAuthError(result.error || 'Authorization failed');
+               }
+            } catch (err: any) {
+               stopPolling();
+               setOauthStatus('error');
+               setAuthError(err?.message || 'Failed to check authorization status');
+            }
+         }, 2000);
+      } catch (err: any) {
+         setOauthStatus('error');
+         setAuthError(err?.message || 'Failed to start authorization');
+      }
+   }, [storageType, settings, onUpdate, stopPolling]);
+
+   const handleCancelAuthorize = useCallback(async () => {
+      stopPolling();
+      if (authSessionId) {
+         try {
+            await cancelStorageAuthorize(authSessionId);
+         } catch {
+            // Ignore cancel errors
+         }
+      }
+      setOauthStatus('idle');
+      setAuthSessionId(null);
+      setAuthUrl(null);
+      setAuthError(null);
+   }, [authSessionId, stopPolling]);
+
    return (
       <div className={classes.authSettings}>
          <div
@@ -67,14 +150,64 @@ const StorageAuthSettings = ({
                      />
                   </div>
                )}
-
                <StorageSettings
                   fields={fields.filter((f) => f.authFieldType === currentAuthType)}
                   settings={settings}
                   onUpdate={(newSettings) => onUpdate(newSettings)}
                   errors={errors}
                />
-               {currentAuthType === 'oauth' && (
+
+               {currentAuthType === 'oauth' && isDesktop && oauthStatus === 'idle' && (
+                  <div className={classes.oauthButton}>
+                     <button className={classes.oauthAuthorizeBtn} onClick={startOAuthAuthorize}>
+                        <Icon type={'key'} size={14} /> Authorize & Get Access Token
+                     </button>
+                  </div>
+               )}
+
+               {currentAuthType === 'oauth' && isDesktop && oauthStatus !== 'idle' && (
+                  <div className={`${classes.oauthContainer} ${classes[oauthStatus]}`}>
+                     {oauthStatus === 'authorizing' && (
+                        <div className={classes.oauthProgress}>
+                           <p>
+                              <strong>Waiting for authorization...</strong>
+                              <br />A browser window should have opened. Please authorize the connection in your browser.
+                           </p>
+                           {authUrl && (
+                              <p>
+                                 If the browser didn't open automatically,{' '}
+                                 <a href={authUrl} target="_blank" rel="noopener noreferrer">
+                                    click here to authorize
+                                 </a>
+                                 .
+                              </p>
+                           )}
+                           <button className={classes.oauthInnerBtn} onClick={handleCancelAuthorize}>
+                              Cancel
+                           </button>
+                        </div>
+                     )}
+                     {oauthStatus === 'success' && (
+                        <div className={classes.oauthProgress}>
+                           <p>
+                              <Icon type={'check'} size={14} /> <strong>Authorization successful!</strong> Token has been automatically filled in.
+                           </p>
+                        </div>
+                     )}
+                     {oauthStatus === 'error' && (
+                        <div className={classes.oauthProgress}>
+                           <p>
+                              <strong>Authorization failed:</strong> {authError}
+                           </p>
+                           <button className={classes.oauthInnerBtn} onClick={startOAuthAuthorize}>
+                              <Icon type={'key'} size={14} /> Try Again
+                           </button>
+                        </div>
+                     )}
+                  </div>
+               )}
+
+               {currentAuthType === 'oauth' && !isDesktop && (
                   <div className={classes.oauthDoc}>
                      <h4 onClick={() => setShowOAuthDoc(!showOAuthDoc)}>
                         <Icon type={'key'} size={14} /> Acquiring the OAuth Access Token

package/src/services/storage.ts

@@ -198,3 +198,52 @@ export function useVerifyStorage() {
       },
    });
 }
+
+// ── OAuth Authorization ─────────────────────────────────────────────
+export async function startStorageAuthorize(type: string): Promise<{ sessionId: string }> {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/authorize`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify({ type }),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data.result;
+}
+
+export async function getStorageAuthorizeStatus(sessionId: string): Promise<{
+   status: 'pending' | 'success' | 'error';
+   token?: string;
+   error?: string;
+   authUrl?: string;
+}> {
+   const url = new URL(`${API_URL}/storages/authorize/status`);
+   url.searchParams.set('sessionId', sessionId);
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data.result;
+}
+
+export async function cancelStorageAuthorize(sessionId: string): Promise<void> {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/authorize/cancel`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify({ sessionId }),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+}