put password regex rules into config-constants.tsx

web/components/admin/TextField.tsx

@@ -5,6 +5,7 @@ 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
@@ -58,14 +59,13 @@ export const TextField: FC<TextFieldProps> = ({
 }) => {
   const [hasPwdChanged, setHasPwdChanged] = useState(false);
   const [showPwdButton, setShowPwdButton] = useState(false);
-  const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$%^&*]).{8,192}$/;
   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 (isAdminPwdField && regex.test(val)) {
+      if (isAdminPwdField && REGEX_PASSWORD.test(val)) {
         setHasPwdChanged(true);
       } else {
         setHasPwdChanged(false);
@@ -92,7 +92,8 @@ export const TextField: FC<TextFieldProps> = ({
       onPressEnter();
     }
   };
-
+  // Password Complexity rules
+  const passwordComplexityRules = [];
   // display the appropriate Ant text field
   let Field = Input as
     | typeof Input
@@ -106,6 +107,9 @@ 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,
@@ -175,29 +179,7 @@ export const TextField: FC<TextFieldProps> = ({
               initialValues={{ inputFieldPassword: value }}
               style={{ width: '100%' }}
             >
-              <Form.Item
+              <Form.Item name="inputFieldPassword" rules={passwordComplexityRules}>
-                name="inputFieldPassword"
-                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: !@#$%^&*',
-                  },
-                ]}
-              >
                 <Input.Password
                   id={fieldId}
                   className={`field ${className} ${fieldId}`}

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

@@ -1,14 +1,13 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, 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 regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$%^&*]).{8,192}$/;
-
 // Lazy loaded components
 
 const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
@@ -40,6 +39,15 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
   const [hasChanged, setHasChanged] = useState(false);
   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];
 
@@ -55,7 +63,7 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
 
   const handleInputChange = (event: any) => {
     const val = event.target.value;
-    if (regex.test(val)) {
+    if (REGEX_PASSWORD.test(val)) {
       setHasChanged(true);
     } else {
       setHasChanged(false);
@@ -81,26 +89,7 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
             lowercase letter, at least one special character, and at least one number.
           </p>
         }
-        rules={[
+        rules={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: !@#$%^&*',
-          },
-        ]}
       >
         <Input onChange={handleInputChange} />
       </Item>

web/utils/config-constants.tsx

@@ -562,3 +562,26 @@ 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}$/g;