Add password/key complexity rules in input fields.

web/components/admin/TextField.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { Input, 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';
 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
@@ -17,7 +17,7 @@ export type TextFieldProps = {
 
   onSubmit?: () => void;
   onPressEnter?: () => void;
-
+  onHandleSubmit?: () => void;
   className?: string;
   disabled?: boolean;
   label?: string;
@@ -31,6 +31,7 @@ export type TextFieldProps = {
   useTrim?: boolean;
   useTrimLead?: boolean;
   value?: string | number;
+  hasComplexityRequirements?: boolean;
   onBlur?: FieldUpdaterFunc;
   onChange?: FieldUpdaterFunc;
 };
@@ -44,6 +45,7 @@ export const TextField: FC<TextFieldProps> = ({
   onBlur,
   onChange,
   onPressEnter,
+  onHandleSubmit,
   pattern,
   placeholder,
   required,
@@ -52,15 +54,30 @@ 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;
@@ -74,7 +91,8 @@ export const TextField: FC<TextFieldProps> = ({
       onPressEnter();
     }
   };
-
+  // Password Complexity rules
+  const passwordComplexityRules = [];
   // display the appropriate Ant text field
   let Field = Input as
     | typeof Input
@@ -88,6 +106,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,
@@ -128,6 +149,7 @@ export const TextField: FC<TextFieldProps> = ({
         </div>
       ) : null}
 
+      {!hasComplexityRequirements ? (
         <div className="input-side">
           <div className="input-group">
             <Field
@@ -147,6 +169,46 @@ export const TextField: FC<TextFieldProps> = ({
           <FormStatusIndicator status={status} />
           <p className="field-tip">{tip}</p>
         </div>
+      ) : (
+        <div className="input-side">
+          <div className="input-group">
+            <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>
   );
 };
@@ -168,9 +230,11 @@ TextField.defaultProps = {
   pattern: '',
   useTrim: false,
   useTrimLead: false,
+  hasComplexityRequirements: false,
 
   onSubmit: () => {},
   onBlur: () => {},
   onChange: () => {},
   onPressEnter: () => {},
+  onHandleSubmit: () => {},
 };

web/components/admin/TextFieldWithSubmit.tsx

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

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

@@ -1,12 +1,12 @@
-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 { Item } = Form;
 
 // Lazy loaded components
 
@@ -54,6 +54,18 @@ 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];
 
@@ -67,19 +79,50 @@ 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 layout="inline" autoComplete="off" onFinish={handleAddKey}>
+    <Form
-      <Item label="Key" name="key" tooltip="The key you provide your broadcasting software">
+      layout="horizontal"
-        <Input placeholder="def456" defaultValue={defaultKey} />
+      autoComplete="off"
+      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 label="Comment" name="comment" tooltip="For remembering why you added this key">
+      <Item
+        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

@@ -1,7 +1,6 @@
 // DEFAULT VALUES
 import { fetchData, SERVER_CONFIG_UPDATE_URL } from './apis';
 import { ApiPostArgs, VideoVariant, SocialHandle } from '../types/config-section';
-import { TEXTFIELD_TYPE_URL } from '../components/admin/TextField';
 import { DEFAULT_TEXTFIELD_URL_PATTERN } from './urls';
 
 export const TEXT_MAXLENGTH = 255;
@@ -49,6 +48,8 @@ export const API_FEDERATION_GOLIVE_MESSAGE = '/federation/livemessage';
 export const API_FEDERATION_SHOW_ENGAGEMENT = '/federation/showengagement';
 export const API_FEDERATION_BLOCKED_DOMAINS = '/federation/blockdomains';
 
+const TEXTFIELD_TYPE_URL = 'url';
+
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const { apiPath, data, onSuccess, onError } = args;
   const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, {
@@ -122,6 +123,7 @@ 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,
@@ -131,6 +133,7 @@ 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,
@@ -140,6 +143,7 @@ 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,
@@ -149,6 +153,7 @@ 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,
@@ -558,3 +563,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}$/;