diff --git a/web/components/config/notification/twitter.tsx b/web/components/config/notification/twitter.tsx index 309809393..590781722 100644 --- a/web/components/config/notification/twitter.tsx +++ b/web/components/config/notification/twitter.tsx @@ -26,15 +26,21 @@ export default function ConfigNotify() { const { notifications } = serverConfig || {}; const { twitter } = notifications || {}; - const { enabled, apiKey, apiSecret, accessToken, accessTokenSecret, bearerToken, goLiveMessage } = - twitter || {}; - const [formDataValues, setFormDataValues] = useState({}); const [submitStatus, setSubmitStatus] = useState(null); const [enableSaveButton, setEnableSaveButton] = useState(false); useEffect(() => { + const { + enabled, + apiKey, + apiSecret, + accessToken, + accessTokenSecret, + bearerToken, + goLiveMessage, + } = twitter || {}; setFormDataValues({ enabled, apiKey, @@ -46,7 +52,27 @@ export default function ConfigNotify() { }); }, [twitter]); - const canSave = (): boolean => true; + const canSave = (): boolean => { + const { + enabled, + apiKey, + apiSecret, + accessToken, + accessTokenSecret, + bearerToken, + goLiveMessage, + } = formDataValues; + + return ( + enabled && + !!apiKey && + !!apiSecret && + !!accessToken && + !!accessTokenSecret && + !!bearerToken && + !!goLiveMessage + ); + }; // update individual values in state const handleFieldChange = ({ fieldName, value }: UpdateArgs) => { @@ -60,7 +86,11 @@ export default function ConfigNotify() { // toggle switch. const handleSwitchChange = (switchEnabled: boolean) => { + const previouslySaved = formDataValues.enabled; + handleFieldChange({ fieldName: 'enabled', value: switchEnabled }); + + return switchEnabled !== previouslySaved; }; let resetTimer = null; @@ -68,6 +98,7 @@ export default function ConfigNotify() { setSubmitStatus(null); resetTimer = null; clearTimeout(resetTimer); + setEnableSaveButton(false); }; const save = async () => { @@ -100,11 +131,7 @@ export default function ConfigNotify() {

- + Read how to configure your Twitter account {' '} to support posting from Owncast. diff --git a/web/pages/config-notify.tsx b/web/pages/config-notify.tsx index 36f68d01e..3a952cf25 100644 --- a/web/pages/config-notify.tsx +++ b/web/pages/config-notify.tsx @@ -12,6 +12,7 @@ import TextFieldWithSubmit, { import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../utils/config-constants'; import { ServerStatusContext } from '../utils/server-status-context'; import { UpdateArgs } from '../types/config-section'; +import isValidUrl from '../utils/urls'; const { Title } = Typography; @@ -21,6 +22,7 @@ export default function ConfigNotify() { const { serverConfig } = serverStatusData || {}; const { yp } = serverConfig; const { instanceUrl } = yp; + const [urlValid, setUrlValid] = useState(false); useEffect(() => { setFormDataValues({ @@ -29,6 +31,10 @@ export default function ConfigNotify() { }, [yp]); const handleSubmitInstanceUrl = () => { + if (!urlValid) { + return; + } + setFormDataValues({ ...formDataValues, enabled: false, @@ -36,6 +42,8 @@ export default function ConfigNotify() { }; const handleFieldChange = ({ fieldName, value }: UpdateArgs) => { + setUrlValid(isValidUrl(value)); + setFormDataValues({ ...formDataValues, [fieldName]: value, @@ -43,7 +51,6 @@ export default function ConfigNotify() { }; const enabled = instanceUrl !== ''; - console.log(enabled); const configurationWarning = !enabled && ( <>