fix(admin): sanitize fediverse username (#3437)

* test: add config federation test

* fix: santize fediverse username

fixes #3424

* refactor: remove commented code

* refactor: change username const to usernameValue

* refactor: use shorthand property

* build: move stories page out of build directory

* fix: allow only alphanumeric chars in username

* fix: filter out special chars in username

Added a regex filter to strip non-alphanumeric chars in username field.

* chore: clean unused fields

web/pages/admin/config-federation.tsx

@@ -112,6 +112,17 @@ const ConfigFederation = () => {
     });
   };
 
+  const handleUsernameChange = ({ fieldName, value }: UpdateArgs) => {
+    handleFieldChange({
+      fieldName,
+      value,
+    });
+    setFormDataValues({
+      ...formDataValues,
+      username: value.replace(/\W/g, ''),
+    });
+  };
+
   const handleEnabledSwitchChange = (value: boolean) => {
     if (!value) {
       setFormDataValues({
@@ -304,7 +315,7 @@ const ConfigFederation = () => {
             {...TEXTFIELD_PROPS_FEDERATION_DEFAULT_USER}
             value={formDataValues.username}
             initialValue={username}
-            onChange={handleFieldChange}
+            onChange={handleUsernameChange}
             disabled={!enabled}
           />
           <TextFieldWithSubmit

web/stories/config-federation.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+import ConfigFederation from '../pages/admin/config-federation';
+
+const meta = {
+  title: 'owncast/Admin/Config/Federation',
+  component: ConfigFederation,
+  parameters: {},
+} satisfies Meta<typeof ConfigFederation>;
+
+export default meta;
+
+const Template = arguments_ => <ConfigFederation {...arguments_} />;
+
+export const Default = Template.bind({});
+
+Default.args = {};

web/utils/config-constants.tsx

@@ -65,8 +65,7 @@ export async function postConfigUpdateToAPI(args: ApiPostArgs) {
     } else if (onError) {
       onError(result.message);
     }
-  }
+  } catch (e) {
-  catch (e) {
     if (onError) {
       onError(e.message);
     }
@@ -331,7 +330,7 @@ export const TEXTFIELD_PROPS_FEDERATION_DEFAULT_USER = {
   placeholder: 'owncast',
   default: 'owncast',
   label: 'Username',
-  tip: 'The username used for sending and receiving activities from the Fediverse. For example, if you use "bob" as a username you would send messages to the fediverse from @bob@yourserver. Once people start following your instance you should not change this.',
+  tip: 'The username used for sending and receiving activities from the Fediverse. For example, if you use "bob" as a username you would send messages to the fediverse from @bob@yourserver. Once people start following your instance you should not change this.\nNote: Username cannot have special characters. ',
 };
 
 export const TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL = {