LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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

Browse Source 
This reverts commit 3653db3a6a113e73075687ad35b5d15e8dd74132.
This commit is contained in:
Gabe Kangas 2023-03-03 14:40:03 -08:00
parent d3282c3b1a
commit 5b1f36c314
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
4 changed files with 40 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
web/components/admin/TextField.tsx
View File

@ -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-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 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>
) : (
<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>
)}
<FormStatusIndicator status={status} />
<p className="field-tip">{tip}</p>
</div>
</div>
);
};
@ -231,11 +168,9 @@ TextField.defaultProps = {
pattern: '',
useTrim: false,
useTrimLead: false,
hasComplexityRequirements: false,
onSubmit: () => {},
onBlur: () => {},
onChange: () => {},
onPressEnter: () => {},
onHandleSubmit: () => {},
};

26
web/components/admin/TextFieldWithSubmit.tsx
View File

@ -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 } =
textFieldProps;
const { fieldName, required, tip, status, value, onChange, onSubmit } = 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
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
)}
<Button
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
</div>
</div>
</div>

59
web/components/admin/config/server/StreamKeys.tsx
View File

@ -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
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} />
<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} />
</Item>
<Item
style={{ width: '60%', marginRight: '5px' }}
label="Comment"
name="comment"
tooltip="For remembering why you added this key"
>
<Item 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>

27
web/utils/config-constants.tsx
View File

@ -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}$/;