diff --git a/web/pages/components/config/edit-server-details.tsx b/web/pages/components/config/edit-server-details.tsx index 2b048c7e5..2164e70c3 100644 --- a/web/pages/components/config/edit-server-details.tsx +++ b/web/pages/components/config/edit-server-details.tsx @@ -64,23 +64,27 @@ export default function EditInstanceDetails() { return (
- -
- +
+
+ +
+ +
+
+
Save this key somewhere safe, you will need it to stream or login to the admin dashboard! - - -
Social Links

Add all your social media handles and links to your other profiles here.

- + - +
- + ); diff --git a/web/pages/components/config/input-status-info.tsx b/web/pages/components/config/form-status-indicator.tsx similarity index 81% rename from web/pages/components/config/input-status-info.tsx rename to web/pages/components/config/form-status-indicator.tsx index bd7626f96..28c61771e 100644 --- a/web/pages/components/config/input-status-info.tsx +++ b/web/pages/components/config/form-status-indicator.tsx @@ -3,10 +3,10 @@ import classNames from 'classnames'; import { StatusState } from '../../../utils/input-statuses'; -interface InputStatusInfoProps { +interface FormStatusIndicatorProps { status: StatusState; } -export default function InputStatusInfo({ status }: InputStatusInfoProps) { +export default function FormStatusIndicator({ status }: FormStatusIndicatorProps) { const { type, icon, message } = status || {}; const classes = classNames({ 'status-container': true, diff --git a/web/pages/components/config/form-textfield-with-submit.tsx b/web/pages/components/config/form-textfield-with-submit.tsx index a06c29982..5505aeb7c 100644 --- a/web/pages/components/config/form-textfield-with-submit.tsx +++ b/web/pages/components/config/form-textfield-with-submit.tsx @@ -13,7 +13,7 @@ import { STATUS_SUCCESS, } from '../../../utils/input-statuses'; import { UpdateArgs } from '../../../types/config-section'; -import InputStatusInfo from './input-status-info'; +import FormStatusIndicator from './form-status-indicator'; export const TEXTFIELD_TYPE_TEXT = 'default'; export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password @@ -124,7 +124,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {

{tip}
- +
- +

{tip} {/* */} diff --git a/web/pages/components/config/form-toggleswitch-with-submit.tsx b/web/pages/components/config/form-toggleswitch-with-submit.tsx index 6410636d9..4676625f2 100644 --- a/web/pages/components/config/form-toggleswitch-with-submit.tsx +++ b/web/pages/components/config/form-toggleswitch-with-submit.tsx @@ -7,7 +7,7 @@ import { STATUS_PROCESSING, STATUS_SUCCESS, } from '../../../utils/input-statuses'; -import InputStatusInfo from './input-status-info'; +import FormStatusIndicator from './form-status-indicator'; import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants'; @@ -76,7 +76,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) { {label}

- + ); } diff --git a/web/pages/config-page-content.tsx b/web/pages/config-page-content.tsx index 88b6137dd..e2beca697 100644 --- a/web/pages/config-page-content.tsx +++ b/web/pages/config-page-content.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect, useContext } from 'react'; import { Typography, Button } from 'antd'; -import { FormItemProps } from 'antd/lib/form'; import dynamic from 'next/dynamic'; import MarkdownIt from 'markdown-it'; @@ -8,11 +7,17 @@ import { ServerStatusContext } from '../utils/server-status-context'; import { postConfigUpdateToAPI, RESET_TIMEOUT, - SUCCESS_STATES, API_CUSTOM_CONTENT, } from './components/config/constants'; - +import { + createInputStatus, + StatusState, + STATUS_ERROR, + STATUS_PROCESSING, + STATUS_SUCCESS, +} from '../utils/input-statuses'; import 'react-markdown-editor-lite/lib/index.css'; +import FormStatusIndicator from './components/config/form-status-indicator'; const { Title } = Typography; @@ -24,8 +29,7 @@ const MdEditor = dynamic(() => import('react-markdown-editor-lite'), { export default function PageContentEditor() { const [content, setContent] = useState(''); - const [submitStatus, setSubmitStatus] = useState(''); - const [submitStatusMessage, setSubmitStatusMessage] = useState(''); + const [submitStatus, setSubmitStatus] = useState(null); const [hasChanged, setHasChanged] = useState(false); const serverStatusData = useContext(ServerStatusContext); @@ -47,7 +51,7 @@ export default function PageContentEditor() { // Clear out any validation states and messaging const resetStates = () => { - setSubmitStatus(''); + setSubmitStatus(null); setHasChanged(false); clearTimeout(resetTimer); resetTimer = null; @@ -55,21 +59,20 @@ export default function PageContentEditor() { // posts all the tags at once as an array obj async function handleSave() { - setSubmitStatus('validating'); + setSubmitStatus(createInputStatus(STATUS_PROCESSING)); await postConfigUpdateToAPI({ apiPath: API_CUSTOM_CONTENT, data: { value: content }, - onSuccess: () => { + onSuccess: (message: string) => { setFieldInConfigState({ fieldName: 'extraPageContent', value: content, path: 'instanceDetails', }); - setSubmitStatus('success'); + setSubmitStatus(createInputStatus(STATUS_SUCCESS, message)); }, onError: (message: string) => { - setSubmitStatus('error'); - setSubmitStatusMessage(`There was an error: ${message}`); + setSubmitStatus(createInputStatus(STATUS_ERROR, message)); }, }); resetTimer = setTimeout(resetStates, RESET_TIMEOUT); @@ -79,9 +82,6 @@ export default function PageContentEditor() { setContent(initialContent); }, [instanceDetails]); - const { icon: newStatusIcon = null, message: newStatusMessage = '' } = - SUCCESS_STATES[submitStatus] || {}; - return (
Edit custom content @@ -107,9 +107,8 @@ export default function PageContentEditor() { Save ) : null} -
- {newStatusIcon} {newStatusMessage} {submitStatusMessage} -
+ +
); diff --git a/web/styles/config.scss b/web/styles/config.scss index 04ec318a6..74b584599 100644 --- a/web/styles/config.scss +++ b/web/styles/config.scss @@ -350,4 +350,33 @@ &:nth-child(even) { background-color: rgba(0,0,0,.25); } +} + + + +.field-streamkey-container { + .left-side { + display: flex; + flex-direction: row; + align-items: flex-start; + } + .textfield-with-submit-container { + margin-bottom: 0; + .textfield-container { + max-width: 400px; + } + } + + .streamkey-actions { + max-width: 90px; + button { + margin: .25em; + } + } + .streamkey-notice { + font-size: 0.75em; + color: var(--ant-error); + margin-left: 12em; + margin-bottom: 1em; + } } \ No newline at end of file