Revert "Add the Client-side Input Validators for Stream Keys and the Admin Password (#2619)"

This reverts commit 3653db3a6a113e73075687ad35b5d15e8dd74132.

web/components/admin/TextField.tsx

@@ -1,11 +1,10 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC } from 'react';
 import classNames from 'classnames';
-import { Input, Form, InputNumber, Button } from 'antd';
+import { Input, InputNumber } from 'antd';
 import { FieldUpdaterFunc } from '../../types/config-section';
 // import InfoTip from '../info-tip';
 import { StatusState } from '../../utils/input-statuses';
 import { FormStatusIndicator } from './FormStatusIndicator';
-import { PASSWORD_COMPLEXITY_RULES, REGEX_PASSWORD } from '../../utils/config-constants';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -18,7 +17,7 @@ export type TextFieldProps = {
 
   onSubmit?: () => void;
   onPressEnter?: () => void;
-  onHandleSubmit?: () => void;
+
   className?: string;
   disabled?: boolean;
   label?: string;
@@ -32,7 +31,6 @@ export type TextFieldProps = {
   useTrim?: boolean;
   useTrimLead?: boolean;
   value?: string | number;
-  hasComplexityRequirements?: boolean;
   onBlur?: FieldUpdaterFunc;
   onChange?: FieldUpdaterFunc;
 };
@@ -46,7 +44,6 @@ export const TextField: FC<TextFieldProps> = ({
   onBlur,
   onChange,
   onPressEnter,
-  onHandleSubmit,
   pattern,
   placeholder,
   required,
@@ -55,30 +52,15 @@ export const TextField: FC<TextFieldProps> = ({
   type,
   useTrim,
   value,
-  hasComplexityRequirements,
 }) => {
-  const [hasPwdChanged, setHasPwdChanged] = useState(false);
-  const [showPwdButton, setShowPwdButton] = useState(false);
-  const [form] = Form.useForm();
   const handleChange = (e: any) => {
     // if an extra onChange handler was sent in as a prop, let's run that too.
     if (onChange) {
       const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
-      setShowPwdButton(true);
-      if (hasComplexityRequirements && REGEX_PASSWORD.test(val)) {
-        setHasPwdChanged(true);
-      } else {
-        setHasPwdChanged(false);
-      }
-
       onChange({ fieldName, value: useTrim ? val.trim() : val });
     }
   };
 
-  useEffect(() => {
-    form.setFieldsValue({ inputFieldPassword: value });
-  }, [value]);
-
   // if you blur a required field with an empty value, restore its original value in state (parent's state), if an onChange from parent is available.
   const handleBlur = (e: any) => {
     const val = e.target.value;
@@ -92,8 +74,7 @@ export const TextField: FC<TextFieldProps> = ({
       onPressEnter();
     }
   };
-  // Password Complexity rules
+
-  const passwordComplexityRules = [];
   // display the appropriate Ant text field
   let Field = Input as
     | typeof Input
@@ -107,9 +88,6 @@ export const TextField: FC<TextFieldProps> = ({
       autoSize: true,
     };
   } else if (type === TEXTFIELD_TYPE_PASSWORD) {
-    PASSWORD_COMPLEXITY_RULES.forEach(element => {
-      passwordComplexityRules.push(element);
-    });
     Field = Input.Password;
     fieldProps = {
       visibilityToggle: true,
@@ -150,66 +128,25 @@ export const TextField: FC<TextFieldProps> = ({
         </div>
       ) : null}
 
-      {!hasComplexityRequirements ? (
+      <div className="input-side">
-        <div className="input-side">
+        <div className="input-group">
-          <div className="input-group">
+          <Field
-            <Field
+            id={fieldId}
-              id={fieldId}
+            className={`field ${className} ${fieldId}`}
-              className={`field ${className} ${fieldId}`}
+            {...fieldProps}
-              {...fieldProps}
+            {...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
-              {...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
+            placeholder={placeholder}
-              placeholder={placeholder}
+            maxLength={maxLength}
-              maxLength={maxLength}
+            onChange={handleChange}
-              onChange={handleChange}
+            onBlur={handleBlur}
-              onBlur={handleBlur}
+            onPressEnter={handlePressEnter}
-              onPressEnter={handlePressEnter}
+            disabled={disabled}
-              disabled={disabled}
+            value={value as number | (readonly string[] & number)}
-              value={value as number | (readonly string[] & number)}
+          />
-            />
-          </div>
-          <FormStatusIndicator status={status} />
-          <p className="field-tip">{tip}</p>
         </div>
-      ) : (
+        <FormStatusIndicator status={status} />
-        <div className="input-side">
+        <p className="field-tip">{tip}</p>
-          <div className="input-group">
+      </div>
-            <Form
-              name="basic"
-              form={form}
-              initialValues={{ inputFieldPassword: value }}
-              style={{ width: '100%' }}
-            >
-              <Form.Item name="inputFieldPassword" rules={passwordComplexityRules}>
-                <Input.Password
-                  id={fieldId}
-                  className={`field ${className} ${fieldId}`}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  placeholder={placeholder}
-                  onPressEnter={handlePressEnter}
-                  disabled={disabled}
-                  value={value as number | (readonly string[] & number)}
-                />
-              </Form.Item>
-              {showPwdButton && (
-                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
-                  <Button
-                    type="primary"
-                    size="small"
-                    className="submit-button"
-                    onClick={onHandleSubmit}
-                    disabled={!hasPwdChanged}
-                  >
-                    Update
-                  </Button>
-                </div>
-              )}
-              <FormStatusIndicator status={status} />
-              <p className="field-tip">{tip}</p>
-            </Form>
-          </div>
-        </div>
-      )}
     </div>
   );
 };
@@ -231,11 +168,9 @@ TextField.defaultProps = {
   pattern: '',
   useTrim: false,
   useTrimLead: false,
-  hasComplexityRequirements: false,
 
   onSubmit: () => {},
   onBlur: () => {},
   onChange: () => {},
   onPressEnter: () => {},
-  onHandleSubmit: () => {},
 };

web/components/admin/TextFieldWithSubmit.tsx

@@ -24,7 +24,6 @@ export type TextFieldWithSubmitProps = TextFieldProps & {
   apiPath: string;
   configPath?: string;
   initialValue?: string;
-  hasComplexityRequirements?: boolean;
 };
 
 export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
@@ -44,8 +43,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
 
   let resetTimer = null;
 
-  const { fieldName, required, tip, status, value, hasComplexityRequirements, onChange, onSubmit } =
+  const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
-    textFieldProps;
 
   // Clear out any validation states and messaging
   const resetStates = () => {
@@ -120,7 +118,6 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
     'textfield-with-submit-container': true,
     submittable: hasChanged,
   });
-
   return (
     <div className={textfieldContainerClass}>
       <div className="textfield-component">
@@ -129,7 +126,6 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
           onSubmit={null}
           onBlur={handleBlur}
           onChange={handleChange}
-          onHandleSubmit={handleSubmit}
         />
       </div>
       <div className="formfield-container lower-container">
@@ -138,17 +134,15 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
           <div className="field-tip">{tip}</div>
           <FormStatusIndicator status={status || submitStatus} />
           <div className="update-button-container">
-            {!hasComplexityRequirements && (
+            <Button
-              <Button
+              type="primary"
-                type="primary"
+              size="small"
-                size="small"
+              className="submit-button"
-                className="submit-button"
+              onClick={handleSubmit}
-                onClick={handleSubmit}
+              disabled={!hasChanged}
-                disabled={!hasChanged}
+            >
-              >
+              Update
-                Update
+            </Button>
-              </Button>
-            )}
           </div>
         </div>
       </div>

web/components/admin/config/server/StreamKeys.tsx

@@ -1,12 +1,12 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Table, Space, Button, Typography, Alert, Input, Form } from 'antd';
 import dynamic from 'next/dynamic';
 import { ServerStatusContext } from '../../../../utils/server-status-context';
 
 import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
-import { PASSWORD_COMPLEXITY_RULES, REGEX_PASSWORD } from '../../../../utils/config-constants';
 
 const { Paragraph } = Typography;
+const { Item } = Form;
 
 // Lazy loaded components
 
@@ -54,18 +54,6 @@ const generateRndKey = () => {
 };
 
 const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setError }) => {
-  const [hasChanged, setHasChanged] = useState(true);
-  const [form] = Form.useForm();
-  const { Item } = Form;
-  // Password Complexity rules
-  const passwordComplexityRules = [];
-
-  useEffect(() => {
-    PASSWORD_COMPLEXITY_RULES.forEach(element => {
-      passwordComplexityRules.push(element);
-    });
-  }, []);
-
   const handleAddKey = (newkey: any) => {
     const updatedKeys = [...streamKeys, newkey];
 
@@ -79,50 +67,19 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
     setShowAddKeyForm(false);
   };
 
-  const handleInputChange = (event: any) => {
-    const val = event.target.value;
-    if (REGEX_PASSWORD.test(val)) {
-      setHasChanged(true);
-    } else {
-      setHasChanged(false);
-    }
-  };
-
   // Default auto-generated key
   const defaultKey = generateRndKey();
 
   return (
-    <Form
+    <Form layout="inline" autoComplete="off" onFinish={handleAddKey}>
-      layout="horizontal"
+      <Item label="Key" name="key" tooltip="The key you provide your broadcasting software">
-      autoComplete="off"
+        <Input placeholder="def456" defaultValue={defaultKey} />
-      onFinish={handleAddKey}
-      form={form}
-      style={{ display: 'flex', flexDirection: 'row' }}
-    >
-      <Item
-        style={{ width: '60%', marginRight: '5px' }}
-        label="Key"
-        name="key"
-        tooltip={
-          <p>
-            The key you provide your broadcasting software. Please note that the key must be a
-            minimum of eight characters and must include at least one uppercase letter, at least one
-            lowercase letter, at least one special character, and at least one number.
-          </p>
-        }
-        rules={PASSWORD_COMPLEXITY_RULES}
-      >
-        <Input placeholder="def456" defaultValue={defaultKey} onChange={handleInputChange} />
       </Item>
-      <Item
+      <Item label="Comment" name="comment" tooltip="For remembering why you added this key">
-        style={{ width: '60%', marginRight: '5px' }}
-        label="Comment"
-        name="comment"
-        tooltip="For remembering why you added this key"
-      >
         <Input placeholder="My OBS Key" />
       </Item>
-      <Button type="primary" htmlType="submit" disabled={!hasChanged}>
+
+      <Button type="primary" htmlType="submit">
         Add
       </Button>
     </Form>

web/utils/config-constants.tsx

@@ -122,7 +122,6 @@ export const TEXTFIELD_PROPS_ADMIN_PASSWORD = {
   label: 'Admin Password',
   tip: 'Save this password somewhere safe, you will need it to login to the admin dashboard!',
   required: true,
-  hasComplexityRequirements: true,
 };
 export const TEXTFIELD_PROPS_FFMPEG = {
   apiPath: API_FFMPEG,
@@ -132,7 +131,6 @@ export const TEXTFIELD_PROPS_FFMPEG = {
   label: 'FFmpeg Path',
   tip: 'Absolute file path of the FFMPEG application on your server',
   required: true,
-  hasComplexityRequirements: false,
 };
 export const TEXTFIELD_PROPS_WEB_PORT = {
   apiPath: API_WEB_PORT,
@@ -142,7 +140,6 @@ export const TEXTFIELD_PROPS_WEB_PORT = {
   label: 'Owncast port',
   tip: 'What port is your Owncast web server listening? Default is 8080',
   required: true,
-  hasComplexityRequirements: false,
 };
 export const TEXTFIELD_PROPS_RTMP_PORT = {
   apiPath: API_RTMP_PORT,
@@ -152,7 +149,6 @@ export const TEXTFIELD_PROPS_RTMP_PORT = {
   label: 'RTMP port',
   tip: 'What port should accept inbound broadcasts? Default is 1935',
   required: true,
-  hasComplexityRequirements: false,
 };
 export const TEXTFIELD_PROPS_INSTANCE_URL = {
   apiPath: API_INSTANCE_URL,
@@ -562,26 +558,3 @@ export const BROWSER_PUSH_CONFIG_FIELDS = {
     placeholder: `I've gone live! Come watch!`,
   },
 };
-
-export const PASSWORD_COMPLEXITY_RULES = [
-  { min: 8, message: '- minimum 8 characters' },
-  { max: 192, message: '- maximum 192 characters' },
-  {
-    pattern: /^(?=.*[a-z])/,
-    message: '- at least one lowercase letter',
-  },
-  {
-    pattern: /^(?=.*[A-Z])/,
-    message: '- at least one uppercase letter',
-  },
-  {
-    pattern: /\d/,
-    message: '- at least one digit',
-  },
-  {
-    pattern: /^(?=.*?[#?!@$%^&*-])/,
-    message: '- at least one special character: !@#$%^&*',
-  },
-];
-
-export const REGEX_PASSWORD = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$%^&*]).{8,192}$/;