LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

put password regex rules into config-constants.tsx

Browse Source
This commit is contained in:
dorj222 2023-02-07 17:22:52 +01:00
parent 3711588909
commit aa2504b354
3 changed files with 44 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
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: !@#$%^&*',
},
]}
>
<Form.Item name="inputFieldPassword" rules={passwordComplexityRules}>
<Input.Password
id={fieldId}
className={`field ${className} ${fieldId}`}

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

@ -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={[
{ 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: !@#$%^&*',
},
]}
rules={PASSWORD_COMPLEXITY_RULES}
>
<Input onChange={handleInputChange} />
</Item>

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

@ -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;