diff --git a/webapp/packages/core-ui/src/AuthenticationProvider.tsx b/webapp/packages/core-ui/src/AuthenticationProvider.tsx index eb4eb0d3f3..955a306948 100644 --- a/webapp/packages/core-ui/src/AuthenticationProvider.tsx +++ b/webapp/packages/core-ui/src/AuthenticationProvider.tsx @@ -6,19 +6,11 @@ * you may not use this file except in compliance with the License. */ import { observer } from 'mobx-react-lite'; -import styled, { css } from 'reshadow'; -import { Button, Container, GroupItem, useStyles, useTranslate } from '@cloudbeaver/core-blocks'; +import { Button, Container, useTranslate } from '@cloudbeaver/core-blocks'; import { useAuthenticationAction } from './useAuthenticationAction'; -const styles = css` - Container { - justify-content: center; - align-items: center; - } -`; - export type Props = { providerId: string; className?: string; @@ -29,21 +21,22 @@ export type Props = { export const AuthenticationProvider = observer(function AuthenticationProvider(props) { const translate = useTranslate(); - const style = useStyles(styles); const action = useAuthenticationAction(props); if (action.authorized) { return (props.children?.() as null) || null; } - return styled(style)( - - {translate('authentication_request_token')} - - - - , + return ( + + + {translate('authentication_request_token')} + + + + + ); }); diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx index a073ceecbc..15cb5587f7 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx @@ -9,6 +9,7 @@ import { runInAction } from 'mobx'; import { observer } from 'mobx-react-lite'; import styled, { css } from 'reshadow'; +import { AUTH_PROVIDER_LOCAL_ID, AuthProvidersResource, UserInfoResource } from '@cloudbeaver/core-authentication'; import { ColoredContainer, ExceptionMessage, @@ -20,7 +21,7 @@ import { useStyles, useTranslate, } from '@cloudbeaver/core-blocks'; -import { createConnectionParam } from '@cloudbeaver/core-connections'; +import { createConnectionParam, DatabaseAuthModelsResource, DBDriverResource } from '@cloudbeaver/core-connections'; import { TabContainerPanelComponent, useTab, useTabState } from '@cloudbeaver/core-ui'; import type { IConnectionFormProps } from '../IConnectionFormProps'; @@ -38,12 +39,25 @@ const style = css` } `; -export const OriginInfo: TabContainerPanelComponent = observer(function OriginInfo({ tabId, state: { info, resource } }) { +export const OriginInfo: TabContainerPanelComponent = observer(function OriginInfo({ + tabId, + state: { info, resource, config }, +}) { const tab = useTab(tabId); const translate = useTranslate(); - // const userInfoService = useService(UserInfoResource); + const userInfoLoader = useResource(OriginInfo, UserInfoResource, undefined); const state = useTabState>(); const styles = useStyles(style); + const driverLoader = useResource(OriginInfo, DBDriverResource, config.driverId ?? null); + const authModeLoader = useResource( + OriginInfo, + DatabaseAuthModelsResource, + config.authModelId ?? info?.authModel ?? driverLoader.data?.defaultAuthModel ?? null, + ); + + const providerId = authModeLoader.data?.requiredAuth ?? info?.requiredAuth ?? AUTH_PROVIDER_LOCAL_ID; + const isAuthenticated = userInfoLoader.resource.hasToken(providerId); + const providerLoader = useResource(OriginInfo, AuthProvidersResource, providerId); const connection = useResource( OriginInfo, @@ -53,7 +67,7 @@ export const OriginInfo: TabContainerPanelComponent = obse includes: ['includeOrigin', 'customIncludeOriginDetails'] as const, }, { - // isActive: () => !info?.origin || userInfoService.hasOrigin(info.origin), + active: isAuthenticated, onData: connection => { runInAction(() => { if (!connection.origin.details) { @@ -89,15 +103,17 @@ export const OriginInfo: TabContainerPanelComponent = obse ); } - // const authorized = !info?.origin || userInfoService.hasOrigin(info.origin); - - // if (!authorized && info?.origin) { - // return styled(styles)( - // - // - // - // ); - // } + if (!isAuthenticated) { + return styled(styles)( + + + {translate('connections_public_connection_cloud_auth_required', undefined, { + providerLabel: providerLoader.data?.label, + })} + + , + ); + } if (!connection.data?.origin.details || connection.data.origin.details.length === 0) { return styled(styles)(