{isValidating ? (
diff --git a/frontend/src/components/SharePointPicker.tsx b/frontend/src/components/SharePointPicker.tsx
new file mode 100644
index 000000000..682fd1cd6
--- /dev/null
+++ b/frontend/src/components/SharePointPicker.tsx
@@ -0,0 +1,175 @@
+import { useTranslation } from 'react-i18next';
+import ConnectorAuth from './ConnectorAuth';
+import { useEffect, useState } from 'react';
+
+import {
+ getSessionToken,
+ setSessionToken,
+ removeSessionToken,
+ validateProviderSession,
+} from '../utils/providerUtils';
+import ConnectedStateSkeleton from './ConnectedStateSkeleton';
+import FilesSectionSkeleton from './FileSelectionSkeleton';
+
+interface SharePointPickerProps {
+ token: string | null;
+}
+
+const SharePointPicker: React.FC
= ({ token }) => {
+ const { t } = useTranslation();
+ const [isLoading, setIsLoading] = useState(false);
+ const [userEmail, setUserEmail] = useState('');
+ const [isConnected, setIsConnected] = useState(false);
+ const [authError, setAuthError] = useState('');
+ const [accessToken, setAccessToken] = useState(null);
+ const [isValidating, setIsValidating] = useState(false);
+
+ useEffect(() => {
+ const sessionToken = getSessionToken('share_point');
+ if (sessionToken) {
+ setIsValidating(true);
+ setIsConnected(true); // Optimistically set as connected for skeleton
+ validateSession(sessionToken);
+ }
+ }, [token]);
+
+ const validateSession = async (sessionToken: string) => {
+ try {
+ const validateResponse = await validateProviderSession(
+ token,
+ 'share_point',
+ );
+
+ if (!validateResponse.ok) {
+ setIsConnected(false);
+ setAuthError(
+ t('modals.uploadDoc.connectors.sharePoint.sessionExpired'),
+ );
+ setIsValidating(false);
+ return false;
+ }
+
+ const validateData = await validateResponse.json();
+ if (validateData.success) {
+ setUserEmail(
+ validateData.user_email ||
+ t('modals.uploadDoc.connectors.auth.connectedUser'),
+ );
+ setIsConnected(true);
+ setAuthError('');
+ setAccessToken(validateData.access_token || null);
+ setIsValidating(false);
+
+ return true;
+ } else {
+ setIsConnected(false);
+ setAuthError(
+ validateData.error ||
+ t('modals.uploadDoc.connectors.sharePoint.sessionExpiredGeneric'),
+ );
+ setIsValidating(false);
+ return false;
+ }
+ } catch (error) {
+ console.error('Error validating session:', error);
+ setAuthError(t('modals.uploadDoc.connectors.sharePoint.validateFailed'));
+ setIsConnected(false);
+ setIsValidating(false);
+ return false;
+ }
+ };
+
+ const handleDisconnect = async () => {
+ const sessionToken = getSessionToken('share_point');
+ if (sessionToken) {
+ try {
+ const apiHost = import.meta.env.VITE_API_HOST;
+ await fetch(`${apiHost}/api/connectors/disconnect`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ provider: 'share_point',
+ session_token: sessionToken,
+ }),
+ });
+ } catch (err) {
+ console.error('Error disconnecting from SharePoint:', err);
+ }
+ }
+
+ removeSessionToken('share_point');
+ setIsConnected(false);
+ setAccessToken(null);
+ setUserEmail('');
+ setAuthError('');
+ };
+
+ const handleOpenPicker = async () => {
+ alert('Feature not supported yet.');
+ };
+
+ return (
+
+ {isValidating ? (
+ <>
+
+
+
+ ) : (
+ <>
+
{
+ setUserEmail(
+ data.user_email ||
+ t('modals.uploadDoc.connectors.auth.connectedUser'),
+ );
+ setIsConnected(true);
+ setAuthError('');
+
+ if (data.session_token) {
+ setSessionToken('share_point', data.session_token);
+ validateSession(data.session_token);
+ }
+ }}
+ onError={(error) => {
+ setAuthError(error);
+ setIsConnected(false);
+ }}
+ isConnected={isConnected}
+ userEmail={userEmail}
+ onDisconnect={handleDisconnect}
+ errorMessage={authError}
+ />
+
+ {isConnected && (
+
+
+
+
+ {t('modals.uploadDoc.connectors.sharePoint.selectedFiles')}
+
+
+
+
+