update Input Validators for Streak Keys and Admin Password

web/components/admin/TextField.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { Input, Form, InputNumber } from 'antd';
+import { Input, Form, InputNumber, Button } from 'antd';
 import { FieldUpdaterFunc } from '../../types/config-section';
 // import InfoTip from '../info-tip';
 import { StatusState } from '../../utils/input-statuses';
@@ -17,7 +17,7 @@ export type TextFieldProps = {
 
   onSubmit?: () => void;
   onPressEnter?: () => void;
-
+  onHandleSubmit?: () => void;
   className?: string;
   disabled?: boolean;
   label?: string;
@@ -44,6 +44,7 @@ export const TextField: FC<TextFieldProps> = ({
   onBlur,
   onChange,
   onPressEnter,
+  onHandleSubmit,
   pattern,
   placeholder,
   required,
@@ -53,16 +54,25 @@ export const TextField: FC<TextFieldProps> = ({
   useTrim,
   value,
 }) => {
+  const [hasChanged, setHasChanged] = useState(false);
+  const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
+  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;
+      // console.log('val: ', val, 'fieldname: ', fieldName);
+
+      if (fieldName === 'adminPassword' && regex.test(val)) {
+        setHasChanged(true);
+      } else {
+        setHasChanged(false);
+      }
+
       onChange({ fieldName, value: useTrim ? val.trim() : val });
     }
   };
 
-  const [form] = Form.useForm();
-
   useEffect(() => {
     // console.log('value: ', value);
     form.setFieldsValue({ adminPassword: value });
@@ -199,6 +209,17 @@ export const TextField: FC<TextFieldProps> = ({
                   value={value as number | (readonly string[] & number)}
                 />
               </Form.Item>
+              <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                <Button
+                  type="primary"
+                  size="small"
+                  className="submit-button"
+                  onClick={onHandleSubmit}
+                  disabled={!hasChanged}
+                >
+                  Update
+                </Button>
+              </div>
               <FormStatusIndicator status={status} />
               <p className="field-tip">{tip}</p>
             </Form>
@@ -231,4 +252,5 @@ TextField.defaultProps = {
   onBlur: () => {},
   onChange: () => {},
   onPressEnter: () => {},
+  onHandleSubmit: () => {},
 };

web/components/admin/TextFieldWithSubmit.tsx

@@ -126,6 +126,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
           onSubmit={null}
           onBlur={handleBlur}
           onChange={handleChange}
+          onHandleSubmit={handleSubmit}
         />
       </div>
       <div className="formfield-container lower-container">
@@ -134,15 +135,17 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
           <div className="field-tip">{tip}</div>
           <FormStatusIndicator status={status || submitStatus} />
           <div className="update-button-container">
-            <Button
-              type="primary"
-              size="small"
-              className="submit-button"
-              onClick={handleSubmit}
-              disabled={!hasChanged}
-            >
-              Update
-            </Button>
+            {fieldName !== 'adminPassword' && (
+              <Button
+                type="primary"
+                size="small"
+                className="submit-button"
+                onClick={handleSubmit}
+                disabled={!hasChanged}
+              >
+                Update
+              </Button>
+            )}
           </div>
         </div>
       </div>

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

@@ -6,7 +6,8 @@ import { ServerStatusContext } from '../../../../utils/server-status-context';
 import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
 
 const { Paragraph } = Typography;
-const { Item } = Form;
+
+const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
 
 // Lazy loaded components
 
@@ -36,6 +37,9 @@ const saveKeys = async (keys, setError) => {
 };
 
 const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setError }) => {
+  const [hasChanged, setHasChanged] = useState(false);
+  const [form] = Form.useForm();
+  const { Item } = Form;
   const handleAddKey = (newkey: any) => {
     const updatedKeys = [...streamKeys, newkey];
 
@@ -49,11 +53,21 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
     setShowAddKeyForm(false);
   };
 
+  const handleInputChange = (event: any) => {
+    const val = event.target.value;
+    if (regex.test(val)) {
+      setHasChanged(true);
+    } else {
+      setHasChanged(false);
+    }
+  };
+
   return (
     <Form
       layout="horizontal"
       autoComplete="off"
       onFinish={handleAddKey}
+      form={form}
       style={{ display: 'flex', flexDirection: 'row' }}
     >
       <Item
@@ -88,7 +102,7 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
           },
         ]}
       >
-        <Input placeholder="def456" />
+        <Input placeholder="def456" onChange={handleInputChange} />
       </Item>
       <Item
         style={{ width: '60%', marginRight: '5px' }}
@@ -98,7 +112,7 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
       >
         <Input placeholder="My OBS Key" />
       </Item>
-      <Button type="primary" htmlType="submit">
+      <Button type="primary" htmlType="submit" disabled={!hasChanged}>
         Add
       </Button>
     </Form>