From 801bfdd631b28948919165708391b61803b676c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrik=20Matias=CC=8Cko?= Date: Fri, 1 Sep 2023 00:17:24 +0200 Subject: [PATCH] reInitialization for remoteClient --- http-gateway/web/packages/shared-ui | 2 +- .../DevicesDetailsPage/DevicesDetailsPage.tsx | 4 +- .../List/DevicesListPage/DevicesListPage.tsx | 3 + .../Detail/RemoteClientDetailPage.tsx | 9 ++- .../RemoteClientsAuthProvider.tsx | 34 ++++++----- .../RemoteClientsAuthProvider.types.ts | 3 +- .../RemoteClientsPage/RemoteClientsPage.tsx | 59 +++++++++++++------ .../web/src/containers/RemoteClients/slice.ts | 21 +------ 8 files changed, 81 insertions(+), 54 deletions(-) diff --git a/http-gateway/web/packages/shared-ui b/http-gateway/web/packages/shared-ui index dfc2e95ed..f2f39e182 160000 --- a/http-gateway/web/packages/shared-ui +++ b/http-gateway/web/packages/shared-ui @@ -1 +1 @@ -Subproject commit dfc2e95ed8e5129663081729db955c5e8b4bf9fa +Subproject commit f2f39e182138621c84e81067f0282bbc74e084ab diff --git a/http-gateway/web/src/containers/Devices/Detail/DevicesDetailsPage/DevicesDetailsPage.tsx b/http-gateway/web/src/containers/Devices/Detail/DevicesDetailsPage/DevicesDetailsPage.tsx index c0c41a82c..2c3628a63 100644 --- a/http-gateway/web/src/containers/Devices/Detail/DevicesDetailsPage/DevicesDetailsPage.tsx +++ b/http-gateway/web/src/containers/Devices/Detail/DevicesDetailsPage/DevicesDetailsPage.tsx @@ -12,7 +12,7 @@ import Tabs from '@shared-ui/components/Atomic/Tabs' import Breadcrumbs from '@shared-ui/components/Layout/Header/Breadcrumbs' import StatusTag from '@shared-ui/components/Atomic/StatusTag' import { getApiErrorMessage } from '@shared-ui/common/utils' -import { security } from '@shared-ui/common/services' +import { clientAppSettings, security } from '@shared-ui/common/services' import Footer from '@shared-ui/components/Layout/Footer' import EditDeviceNameModal from '@shared-ui/components/Organisms/EditDeviceNameModal' import Notification from '@shared-ui/components/Atomic/Notification/Toast' @@ -60,6 +60,8 @@ const DevicesDetailsPage: FC = (props) => { const { footerExpanded, setFooterExpanded } = useContext(AppContext) + clientAppSettings.reset() + useEffect(() => { setDomReady(true) }, []) diff --git a/http-gateway/web/src/containers/Devices/List/DevicesListPage/DevicesListPage.tsx b/http-gateway/web/src/containers/Devices/List/DevicesListPage/DevicesListPage.tsx index 78591bdf0..5cd4b6205 100644 --- a/http-gateway/web/src/containers/Devices/List/DevicesListPage/DevicesListPage.tsx +++ b/http-gateway/web/src/containers/Devices/List/DevicesListPage/DevicesListPage.tsx @@ -18,6 +18,7 @@ import TableActionButton from '@shared-ui/components/Organisms/TableActionButton import Notification from '@shared-ui/components/Atomic/Notification/Toast' import { IconShowPassword, IconTrash, StatusTag } from '@shared-ui/components/Atomic' import Breadcrumbs from '@shared-ui/components/Layout/Header/Breadcrumbs' +import { clientAppSettings } from '@shared-ui/common/services' import { PendingCommandsExpandableList } from '@/containers/PendingCommands' import { DEVICES_REGISTERED_UNREGISTERED_COUNT_EVENT_KEY, devicesStatuses, NO_DEVICE_NAME, RESET_COUNTER } from '../../constants' @@ -59,6 +60,8 @@ const DevicesListPage: FC = () => { const combinedSelectedDevices = singleDevice ? [singleDevice] : selectedDevices const { footerExpanded, setFooterExpanded, collapsed } = useContext(AppContext) + clientAppSettings.reset() + useEffect(() => { deviceError && Notification.error( diff --git a/http-gateway/web/src/containers/RemoteClients/Detail/RemoteClientDetailPage.tsx b/http-gateway/web/src/containers/RemoteClients/Detail/RemoteClientDetailPage.tsx index 3d3f9fdf5..b9e6abf12 100644 --- a/http-gateway/web/src/containers/RemoteClients/Detail/RemoteClientDetailPage.tsx +++ b/http-gateway/web/src/containers/RemoteClients/Detail/RemoteClientDetailPage.tsx @@ -15,7 +15,14 @@ const RemoteClientDetailPage: FC = () => { return ( {(clientData, wellKnownConfig) => { - if (!wellKnownConfig || !wellKnownConfig?.isInitialized) { + // console.group('render Props') + // console.log(wellKnownConfig) + // console.log(clientData) + // console.log({ isInitialized: wellKnownConfig?.isInitialized }) + // console.log({ reInitialization: clientData.reInitialization }) + // console.groupEnd() + + if (!wellKnownConfig || !wellKnownConfig.isInitialized) { return } diff --git a/http-gateway/web/src/containers/RemoteClients/RemoteClientsAuthProvider/RemoteClientsAuthProvider.tsx b/http-gateway/web/src/containers/RemoteClients/RemoteClientsAuthProvider/RemoteClientsAuthProvider.tsx index 1b4e987a3..c2510e331 100644 --- a/http-gateway/web/src/containers/RemoteClients/RemoteClientsAuthProvider/RemoteClientsAuthProvider.tsx +++ b/http-gateway/web/src/containers/RemoteClients/RemoteClientsAuthProvider/RemoteClientsAuthProvider.tsx @@ -1,6 +1,5 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from 'react' import { useIntl } from 'react-intl' -import { useDispatch } from 'react-redux' import { clientAppSettings } from '@shared-ui/common/services' import { @@ -19,15 +18,15 @@ import Notification from '@shared-ui/components/Atomic/Notification/Toast' import { messages as t } from '../RemoteClients.i18n' import { AppAuthProviderRefType, Props } from './RemoteClientsAuthProvider.types' import notificationId from '@/notificationId' -import { unInitializeRemoteClient } from '@/containers/RemoteClients/slice' const RemoteClientsAuthProvider = forwardRef((props, ref) => { - const { wellKnownConfig, clientData, children, setAuthError, setInitialize, unauthorizedCallback } = props - const { id, clientUrl, authenticationMode, preSharedSubjectId, preSharedKey, reInitialization } = clientData + const { wellKnownConfig, reInitialization, clientData, children, setAuthError, setInitialize, unauthorizedCallback } = props + const { id, clientUrl, authenticationMode, preSharedSubjectId, preSharedKey } = clientData const { formatMessage: _ } = useIntl() const [userData] = useState(clientAppSettings.getUserData()) const [signOutRedirect] = useState(clientAppSettings.getSignOutRedirect()) - const dispatch = useDispatch() + const [reInitializationLoading, setReInitializationLoading] = useState(false) + const [initializationLoading, setInitializationLoading] = useState(false) useImperativeHandle(ref, () => ({ getSignOutMethod: () => @@ -38,22 +37,25 @@ const RemoteClientsAuthProvider = forwardRef((pro })) useEffect(() => { - if (reInitialization) { + if (reInitialization && !reInitializationLoading) { + setReInitializationLoading(true) + console.log('%c reInitializationProp start! ', 'background: #f0000; color: #bada55') reset(clientUrl, unauthorizedCallback) .then(() => { - console.log('reset done') - dispatch(unInitializeRemoteClient(id)) + console.log('%c reset done! ', 'background: #222; color: #bada55') setInitialize(false) + setReInitializationLoading(false) }) .catch(() => {}) } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [reInitialization, clientUrl, id, setInitialize]) + }, [reInitialization, clientUrl, id, setInitialize, wellKnownConfig?.isInitialized, reInitializationLoading, unauthorizedCallback]) useEffect(() => { - if (wellKnownConfig && !wellKnownConfig.isInitialized) { + if (wellKnownConfig && !wellKnownConfig.isInitialized && !initializationLoading) { if (authenticationMode === DEVICE_AUTH_MODE.X509) { try { + setInitializationLoading(true) getOpenIdConfiguration(wellKnownConfig.remoteProvisioning?.authority!).then((result) => { getJwksData(result.data.jwks_uri).then((result) => { initializeJwksData(result.data).then((result) => { @@ -64,8 +66,9 @@ const RemoteClientsAuthProvider = forwardRef((pro identityCertificateChallenge.certificateSigningRequest ).then((result) => { initializeFinal(identityCertificateChallenge.state, result.data.certificate).then(() => { - console.log('init done x509') + console.log('%c init done x509! ', 'background: #bada55; color: #1a1a1a') setInitialize(true) + setInitializationLoading(false) }) }) }) @@ -73,6 +76,7 @@ const RemoteClientsAuthProvider = forwardRef((pro }) } catch (e) { console.error(e) + setInitializationLoading(false) setAuthError(e as string) } } else if (authenticationMode === DEVICE_AUTH_MODE.PRE_SHARED_KEY) { @@ -81,8 +85,9 @@ const RemoteClientsAuthProvider = forwardRef((pro initializedByPreShared(preSharedSubjectId, preSharedKey) .then((r) => { if (r.status === 200) { - console.log('init done PSK') + console.log('%c init done PSK! ', 'background: #bada55; color: #1a1a1a') setInitialize(true) + setInitializationLoading(false) } }) .catch((e) => { @@ -97,16 +102,17 @@ const RemoteClientsAuthProvider = forwardRef((pro } catch (e) { console.error(e) setAuthError(e as string) + setInitializationLoading(false) } } else { - setAuthError('Bad parameters for PRE_SHARED_KEY mode') + setAuthError('Wrong parameters for PRE_SHARED_KEY mode') } } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [wellKnownConfig, setAuthError, setInitialize]) - if (!wellKnownConfig || !wellKnownConfig?.isInitialized) { + if (!wellKnownConfig || !wellKnownConfig?.isInitialized || initializationLoading) { return ( void - setInitialize: (isInitialize?: boolean) => void + setInitialize: (isInitialize: boolean) => void unauthorizedCallback: () => void wellKnownConfig?: WellKnownConfigType + reInitialization?: boolean } diff --git a/http-gateway/web/src/containers/RemoteClients/RemoteClientsPage/RemoteClientsPage.tsx b/http-gateway/web/src/containers/RemoteClients/RemoteClientsPage/RemoteClientsPage.tsx index 185e46d1d..2e87be43b 100644 --- a/http-gateway/web/src/containers/RemoteClients/RemoteClientsPage/RemoteClientsPage.tsx +++ b/http-gateway/web/src/containers/RemoteClients/RemoteClientsPage/RemoteClientsPage.tsx @@ -33,7 +33,12 @@ const RemoteClientsPage: FC = (props) => { }, }) const [httpGatewayAddress] = useState(getClientUrl(clientData?.clientUrl)) - const [wellKnownConfig, setWellKnownConfig, reFetchConfig, wellKnownConfigError] = useWellKnownConfiguration(httpGatewayAddress, hubWellKnownConfig) + const [loading, setLoading] = useState(false) + const [wellKnownConfig, setWellKnownConfig, reFetchConfig, wellKnownConfigError] = useWellKnownConfiguration( + httpGatewayAddress, + hubWellKnownConfig, + () => loading && setLoading(false) + ) const [authError, setAuthError] = useState(undefined) const [initializedByAnother, setInitializedByAnother] = useState(false) @@ -42,23 +47,38 @@ const RemoteClientsPage: FC = (props) => { const setInitialize = useCallback( (value = true) => { + setLoading(true) setWellKnownConfig( { isInitialized: value, } as WellKnownConfigType, 'update' ) + + reFetchConfig().then(() => setLoading(false)) }, - [setWellKnownConfig] + [reFetchConfig, setWellKnownConfig] ) clientAppSettings.setGeneralConfig({ httpGatewayAddress, }) + const reInitialization = useMemo( + () => + wellKnownConfig && + wellKnownConfig.deviceAuthenticationMode !== DEVICE_AUTH_MODE.UNINITIALIZED && + wellKnownConfig.deviceAuthenticationMode !== clientData.authenticationMode, + [wellKnownConfig, clientData] + ) + const compareOwners = useCallback((wellKnownConfig?: WellKnownConfigType) => { const userData = clientAppSettings.getUserData() if (userData && wellKnownConfig) { + if (!wellKnownConfig.isInitialized) { + return true + } + const parsedData = jwtDecode(userData.access_token) const ownerId = get(parsedData, wellKnownConfig?.remoteProvisioning?.jwtOwnerClaim as string, '') @@ -67,29 +87,28 @@ const RemoteClientsPage: FC = (props) => { } } + // TODO! + // setInitializedByAnother(true) return false }, []) const unauthorizedCallback = useCallback(() => { - if (clientData.authenticationMode === DEVICE_AUTH_MODE.PRE_SHARED_KEY) { - setSuspectedUnauthorized(true) - - reFetchConfig().then((newWellKnownConfig: WellKnownConfigType) => { - if (compareOwners(newWellKnownConfig)) { - setSuspectedUnauthorized(false) - } else { - setInitializedByAnother(true) - } - }) - } - }, [clientData.authenticationMode, compareOwners, reFetchConfig]) + setSuspectedUnauthorized(true) + + reFetchConfig().then((newWellKnownConfig: WellKnownConfigType) => { + if (compareOwners(newWellKnownConfig)) { + setSuspectedUnauthorized(false) + } else { + setInitializedByAnother(true) + } + }) + }, [compareOwners, reFetchConfig]) const contextValue = useMemo( () => ({ unauthorizedCallback, - useToken: compareOwners(wellKnownConfig) && clientData.authenticationMode === DEVICE_AUTH_MODE.X509, }), - [clientData.authenticationMode, compareOwners, unauthorizedCallback, wellKnownConfig] + [unauthorizedCallback] ) if (error) { @@ -100,10 +119,13 @@ const RemoteClientsPage: FC = (props) => { return
{wellKnownConfigError?.message}
} - if (!wellKnownConfig) { + if (!wellKnownConfig || !clientData || loading) { return } else { clientAppSettings.setWellKnowConfig(wellKnownConfig) + clientAppSettings.setUseToken(compareOwners(wellKnownConfig) && clientData.authenticationMode === DEVICE_AUTH_MODE.X509) + + console.log({ setUseToken: compareOwners(wellKnownConfig) && clientData.authenticationMode === DEVICE_AUTH_MODE.X509 }) if (wellKnownConfig.remoteProvisioning) { clientAppSettings.setWebOAuthConfig({ @@ -128,13 +150,14 @@ const RemoteClientsPage: FC = (props) => { {!initializedByAnother && !suspectedUnauthorized && ( - {clientData.reInitialization ? : children(clientData, wellKnownConfig)} + {reInitialization ? : children(clientData, wellKnownConfig)} )} diff --git a/http-gateway/web/src/containers/RemoteClients/slice.ts b/http-gateway/web/src/containers/RemoteClients/slice.ts index 05664e215..fb1aa77b6 100644 --- a/http-gateway/web/src/containers/RemoteClients/slice.ts +++ b/http-gateway/web/src/containers/RemoteClients/slice.ts @@ -39,13 +39,12 @@ const initialState: StoreType = { id: '789', created: '2023-07-22T17:58:11.427Z', version: '0.6.0', - clientName: 'Test X509 RE', + clientName: 'Test X509 ffff', clientUrl: 'https://212.89.237.161:50080', status: remoteClientStatuses.REACHABLE, authenticationMode: 'X509', preSharedSubjectId: '', preSharedKey: '', - reInitialization: true, }, ] : [], @@ -73,24 +72,10 @@ const { reducer, actions } = createSlice({ const index = state.remoteClients.findIndex((originRemoteClient) => originRemoteClient.id === payload.id) if (index >= 0) { - const remoteClient = state.remoteClients[index] + // const remoteClient = state.remoteClients[index] state.remoteClients[index] = { ...state.remoteClients[index], ...payload, - reInitialization: - remoteClient.authenticationMode !== payload.authenticationMode || - remoteClient.preSharedSubjectId !== payload.preSharedSubjectId || - remoteClient.preSharedKey !== payload.preSharedKey, - } - } - }, - unInitializeRemoteClient(state, { payload }) { - const index = state.remoteClients.findIndex((originRemoteClient) => originRemoteClient.id === payload) - - if (index >= 0) { - state.remoteClients[index] = { - ...state.remoteClients[index], - reInitialization: false, } } }, @@ -107,7 +92,7 @@ const { reducer, actions } = createSlice({ }) // Actions -export const { addRemoteClient, deleteRemoteClients, deleteAllRemoteClients, updateRemoteClients, updateRemoteClient, unInitializeRemoteClient } = actions +export const { addRemoteClient, deleteRemoteClients, deleteAllRemoteClients, updateRemoteClients, updateRemoteClient } = actions // Reducer export default reducer