Add password/key complexity rules in input fields.
This commit is contained in:
Gabe Kangas
commit
59a3d5886c
@ -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,25 +149,66 @@ export const TextField: FC<TextFieldProps> = ({
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="input-side">
|
||||
<div className="input-group">
|
||||
<Field
|
||||
id={fieldId}
|
||||
className={`field ${className} ${fieldId}`}
|
||||
{...fieldProps}
|
||||
{...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
|
||||
placeholder={placeholder}
|
||||
maxLength={maxLength}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onPressEnter={handlePressEnter}
|
||||
disabled={disabled}
|
||||
value={value as number | (readonly string[] & number)}
|
||||
/>
|
||||
{!hasComplexityRequirements ? (
|
||||
<div className="input-side">
|
||||
<div className="input-group">
|
||||
<Field
|
||||
id={fieldId}
|
||||
className={`field ${className} ${fieldId}`}
|
||||
{...fieldProps}
|
||||
{...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
|
||||
placeholder={placeholder}
|
||||
maxLength={maxLength}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onPressEnter={handlePressEnter}
|
||||
disabled={disabled}
|
||||
value={value as number | (readonly string[] & number)}
|
||||
/>
|
||||
</div>
|
||||
<FormStatusIndicator status={status} />
|
||||
<p className="field-tip">{tip}</p>
|
||||
</div>
|
||||
<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: () => {},
|
||||
};
|
||||
|
||||
@ -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,15 +138,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>
|
||||
{!hasComplexityRequirements && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
className="submit-button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!hasChanged}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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}>
|
||||
<Item label="Key" name="key" tooltip="The key you provide your broadcasting software">
|
||||
<Input placeholder="def456" defaultValue={defaultKey} />
|
||||
<Form
|
||||
layout="horizontal"
|
||||
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">
|
||||
<Button type="primary" htmlType="submit" disabled={!hasChanged}>
|
||||
Add
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
@ -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}$/;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user