diff --git a/web/modals/keyserver-selection/add-keyserver-modal.css b/web/modals/keyserver-selection/add-keyserver-modal.css --- a/web/modals/keyserver-selection/add-keyserver-modal.css +++ b/web/modals/keyserver-selection/add-keyserver-modal.css @@ -15,3 +15,8 @@ .button { width: 100%; } + +.errorMessage { + color: var(--text-background-danger-default); + margin-top: 8px; +} diff --git a/web/modals/keyserver-selection/add-keyserver-modal.react.js b/web/modals/keyserver-selection/add-keyserver-modal.react.js --- a/web/modals/keyserver-selection/add-keyserver-modal.react.js +++ b/web/modals/keyserver-selection/add-keyserver-modal.react.js @@ -4,6 +4,7 @@ import { addKeyserverActionType } from 'lib/actions/keyserver-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { useIsKeyserverURLValid } from 'lib/shared/keyserver-utils.js'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import { defaultConnectionInfo } from 'lib/types/socket-types.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; @@ -28,6 +29,8 @@ const [keyserverURL, setKeyserverURL] = React.useState( customServer && staffCanSee ? customServer : '', ); + const [showErrorMessage, setShowErrorMessage] = + React.useState(false); const onChangeKeyserverURL = React.useCallback( (event: SyntheticEvent) => @@ -35,7 +38,20 @@ [], ); - const onClickAddKeyserver = React.useCallback(() => { + const isKeyserverURLValidCallback = useIsKeyserverURLValid(keyserverURL); + + const onClickAddKeyserver = React.useCallback(async () => { + setShowErrorMessage(false); + if (!currentUserID || !keyserverURL) { + return; + } + + const isKeyserverURLValid = await isKeyserverURLValidCallback(); + if (!isKeyserverURLValid) { + setShowErrorMessage(true); + return; + } + const newKeyserverInfo: KeyserverInfo = { cookie: null, updatesCurrentAsOf: 0, @@ -54,7 +70,26 @@ }); popModal(); - }, [currentUserID, dispatch, keyserverURL, popModal]); + }, [ + currentUserID, + dispatch, + keyserverURL, + popModal, + isKeyserverURLValidCallback, + ]); + + const errorMessage = React.useMemo(() => { + if (!showErrorMessage) { + return null; + } + + return ( +
+ Cannot connect to keyserver. Please check the URL or your connection and + try again. +
+ ); + }, [showErrorMessage]); const addKeyserverModal = React.useMemo( () => ( @@ -67,6 +102,7 @@ onChange={onChangeKeyserverURL} placeholder="Keyserver URL" /> + {errorMessage}
), - [keyserverURL, onChangeKeyserverURL, onClickAddKeyserver, popModal], + [ + errorMessage, + keyserverURL, + onChangeKeyserverURL, + onClickAddKeyserver, + popModal, + ], ); return addKeyserverModal; diff --git a/web/redux/action-types.js b/web/redux/action-types.js --- a/web/redux/action-types.js +++ b/web/redux/action-types.js @@ -41,6 +41,18 @@ const threadKeyserverID = thread ? extractKeyserverIDFromID(thread) : null; for (const keyserverID of allKeyserverIDs) { + // As of Nov 2023, the only validation we have for adding a new keyserver + // is we check if the keyserver URL is valid. This is not a very + // extensive check, and gives the user the feeling of a false sucesses + // when they add new keyservers to the keyserver store. ENG-5371 tracks + // the task for initialzing a proper connection with the newly added + // keyserver, and at that point we can make the validation checks + // for adding a new keyserver more extensive. However, for the time being + // we need to add this check below so that we aren't trying to make calls + // to nonexistant keyservers that are in our keyserver store. + if (keyserverID !== ashoatKeyserverID) { + continue; + } const clientUpdatesCurrentAsOf = allUpdatesCurrentAsOf[keyserverID]; const keyserverExcludedData: ExcludedData = { threadStore: !!excludedData.threadStore && !!clientUpdatesCurrentAsOf,