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/components/config/edit-string-array.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useState } from 'react';
+import { Typography, Tag } from 'antd';
+
+import TextField from './form-textfield';
+import { UpdateArgs } from '../../types/config-section';
+import { StatusState } from '../../utils/input-statuses';
+
+const { Title } = Typography;
+
+export const TAG_COLOR = '#5a67d8';
+
+interface EditStringArrayProps {
+  title: string;
+  description?: string;
+  placeholder: string;
+  maxLength?: number;
+  values: string[];
+  submitStatus?: StatusState;
+  handleDeleteIndex: (index: number) => void;
+  handleCreateString: (arg: string) => void;
+}
+
+export default function EditValueArray(props: EditStringArrayProps) {
+  const [newStringInput, setNewStringInput] = useState<string>('');
+  const {
+    title,
+    description,
+    placeholder,
+    maxLength,
+    values,
+    handleDeleteIndex,
+    handleCreateString,
+    submitStatus,
+  } = props;
+
+  const handleInputChange = ({ value }: UpdateArgs) => {
+    setNewStringInput(value);
+  };
+
+  const handleSubmitNewString = () => {
+    const newString = newStringInput.trim();
+    handleCreateString(newString);
+    setNewStringInput('');
+  };
+
+  return (
+    <div className="edit-string-array-container">
+      <Title level={3} className="section-title">
+        {title}
+      </Title>
+      <p className="description">{description}</p>
+
+      <div className="edit-current-strings">
+        {values.map((tag, index) => {
+          const handleClose = () => {
+            handleDeleteIndex(index);
+          };
+          return (
+            <Tag closable onClose={handleClose} color={TAG_COLOR} key={`tag-${tag}-${index}`}>
+              {tag}
+            </Tag>
+          );
+        })}
+      </div>
+
+      <div className="add-new-string-section">
+        <TextField
+          fieldName="string-input"
+          value={newStringInput}
+          onChange={handleInputChange}
+          onPressEnter={handleSubmitNewString}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          status={submitStatus}
+        />
+      </div>
+    </div>
+  );
+}
+
+EditValueArray.defaultProps = {
+  maxLength: 50,
+  description: null,
+  submitStatus: null,
+};

web/components/config/edit-tags.tsx

@@ -18,11 +18,10 @@ import {
   STATUS_SUCCESS,
   STATUS_WARNING,
 } from '../../utils/input-statuses';
+import { TAG_COLOR } from './edit-string-array';
 
 const { Title } = Typography;
 
-const TAG_COLOR = '#5a67d8';
-
 export default function EditInstanceTags() {
   const [newTagInput, setNewTagInput] = useState<string>('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
@@ -110,7 +109,7 @@ export default function EditInstanceTags() {
         This is a great way to categorize your Owncast server on the Directory!
       </p>
 
-      <div className="tag-current-tags">
+      <div className="edit-current-strings">
         {tags.map((tag, index) => {
           const handleClose = () => {
             handleDeleteTag(index);
@@ -123,7 +122,7 @@ export default function EditInstanceTags() {
         })}
       </div>
 
-      <div className="add-new-tag-section">
+      <div className="add-new-string-section">
         <TextField
           fieldName="tag-input"
           value={newTagInput}

web/pages/_app.tsx

@@ -11,7 +11,7 @@ import '../styles/form-textfields.scss';
 import '../styles/form-misc-elements.scss';
 import '../styles/config-socialhandles.scss';
 import '../styles/config-storage.scss';
-import '../styles/config-tags.scss';
+import '../styles/config-edit-string-tags.scss';
 import '../styles/config-video-variants.scss';
 import '../styles/config-public-details.scss';
 

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) {
+  function resetForbiddenUsernameState() {
-    const updatedForbiddenUsernameList = args.value.split(',');
+    setForbidenUsernameSaveState(null);
-    handleFieldChange({ fieldName: args.fieldName, value: updatedForbiddenUsernameList });
+  }
+
+  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>
   );

web/styles/config-edit-string-tags.scss

@@ -1,18 +1,18 @@
 // config tags block
 
-.tag-current-tags {
+.edit-current-strings {
   .ant-tag {
-    margin: .1rem;
+    margin: 0.1rem;
-    font-size: .85rem;
+    font-size: 0.85rem;
     border-radius: 10em;
-    padding: .25em 1em;
+    padding: 0.25em 1em;
     &:hover {
       opacity: 1;
     }
 
     .ant-tag-close-icon {
       transform: translateY(-1px);
-      margin-left: .3rem;
+      margin-left: 0.3rem;
       padding: 2px;
       border-radius: 5rem;
       color: var(--black);
@@ -30,7 +30,7 @@
   }
 }
 
-.add-new-tag-section {
+.add-new-string-section {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;

web/utils/config-constants.tsx

@@ -185,9 +185,9 @@ export const FIELD_PROPS_DISABLE_CHAT = {
 
 export const TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES = {
   apiPath: API_CHAT_FORBIDDEN_USERNAMES,
-  placeholder: 'admin,god,owncast,stewiegriffin',
+  placeholder: 'username',
   label: 'Forbidden usernames',
-  tip: 'A comma separated list of chat usernames you disallow.',
+  tip: 'A list of words in chat usernames you disallow.',
 };
 
 export const VIDEO_VARIANT_SETTING_DEFAULTS = {