Update the "Forbidden usernames" UI (#259)

* Add new component for adding/removing forbidden name strings. Closes https://github.com/owncast/owncast/issues/1230

* make editing string styling shareable and consistent with tag editor

* Prettified Code!

Co-authored-by: gingervitis <omqmail@gmail.com>
Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>

web/pages/config-chat.tsx

@@ -3,20 +3,27 @@ import React, { useContext, useEffect, useState } from 'react';
 import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield';
 import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
 import ToggleSwitch from '../components/config/form-toggleswitch';
+import EditValueArray from '../components/config/edit-string-array';
+import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
+
 import { UpdateArgs } from '../types/config-section';
 import {
   FIELD_PROPS_DISABLE_CHAT,
   TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES,
   TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE,
+  API_CHAT_FORBIDDEN_USERNAMES,
+  postConfigUpdateToAPI,
+  RESET_TIMEOUT,
 } from '../utils/config-constants';
 import { ServerStatusContext } from '../utils/server-status-context';
 
 export default function ConfigChat() {
   const { Title } = Typography;
   const [formDataValues, setFormDataValues] = useState(null);
+  const [forbiddenUsernameSaveState, setForbidenUsernameSaveState] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
 
-  const { serverConfig } = serverStatusData || {};
   const { chatDisabled, forbiddenUsernames } = serverConfig;
   const { instanceDetails } = serverConfig;
   const { welcomeMessage } = instanceDetails;
@@ -32,9 +39,41 @@ export default function ConfigChat() {
     handleFieldChange({ fieldName: 'chatDisabled', value: disabled });
   }
 
-  function handleChatForbiddenUsernamesChange(args: UpdateArgs) {
-    const updatedForbiddenUsernameList = args.value.split(',');
-    handleFieldChange({ fieldName: args.fieldName, value: updatedForbiddenUsernameList });
+  function resetForbiddenUsernameState() {
+    setForbidenUsernameSaveState(null);
+  }
+
+  function saveForbiddenUsernames() {
+    postConfigUpdateToAPI({
+      apiPath: API_CHAT_FORBIDDEN_USERNAMES,
+      data: { value: formDataValues.forbiddenUsernames },
+      onSuccess: () => {
+        setFieldInConfigState({
+          fieldName: 'forbiddenUsernames',
+          value: formDataValues.forbiddenUsernames,
+        });
+        setForbidenUsernameSaveState(STATUS_SUCCESS);
+        setTimeout(resetForbiddenUsernameState, RESET_TIMEOUT);
+      },
+      onError: (message: string) => {
+        setForbidenUsernameSaveState(createInputStatus(STATUS_ERROR, message));
+        setTimeout(resetForbiddenUsernameState, RESET_TIMEOUT);
+      },
+    });
+  }
+
+  function handleDeleteUsername(index: number) {
+    formDataValues.forbiddenUsernames.splice(index, 1);
+    saveForbiddenUsernames();
+  }
+
+  function handleCreateUsername(tag: string) {
+    formDataValues.forbiddenUsernames.push(tag);
+    handleFieldChange({
+      fieldName: 'forbiddenUsernames',
+      value: formDataValues.forbiddenUsernames,
+    });
+    saveForbiddenUsernames();
   }
 
   useEffect(() => {
@@ -59,13 +98,6 @@ export default function ConfigChat() {
           checked={formDataValues.chatDisabled}
           onChange={handleChatDisableChange}
         />
-        <TextFieldWithSubmit
-          fieldName="forbiddenUsernames"
-          {...TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES}
-          type={TEXTFIELD_TYPE_TEXTAREA}
-          value={formDataValues.forbiddenUsernames}
-          onChange={handleChatForbiddenUsernamesChange}
-        />
         <TextFieldWithSubmit
           fieldName="welcomeMessage"
           {...TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE}
@@ -74,6 +106,17 @@ export default function ConfigChat() {
           initialValue={welcomeMessage}
           onChange={handleFieldChange}
         />
+        <br />
+        <br />
+        <EditValueArray
+          title={TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES.label}
+          placeholder={TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES.placeholder}
+          description={TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES.tip}
+          values={formDataValues.forbiddenUsernames}
+          handleDeleteIndex={handleDeleteUsername}
+          handleCreateString={handleCreateUsername}
+          submitStatus={createInputStatus(forbiddenUsernameSaveState)}
+        />
       </div>
     </div>
   );