Add the Client-side Input Validators for Stream Keys and the Admin Password (#2619)
* add the minimum stream key complexity rules on the client side * add an admin password validator * merge TextField and TextFieldAdmin components * update Input Validators for Streak Keys and Admin Password * fix a small regex typo * code cleanup * update Textfield and TextFieldWithSubmit * Prettified Code! * update the TextFieldWithSubmit component * correct the admin password endpoind API * refactor the Admin Password Input field and add a new boolean field for it * refactor the Form Input field name from adminPassword to InputFieldPassword * put password regex rules into config-constants.tsx * regex constant typo fix * change the boolean variable isAdminPwdField to hasComplexityRequirements * fix a merge conflict * Prettified Code! --------- Co-authored-by: dorj222 <dorj222@users.noreply.github.com>
This commit is contained in:
Jambaldorj Ochirpurev
committed by
GitHub
GitHub
parent
e3a63606eb
commit
3653db3a6a
@@ -1,10 +1,11 @@
|
||||
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 +18,7 @@ export type TextFieldProps = {
|
||||
|
||||
onSubmit?: () => void;
|
||||
onPressEnter?: () => void;
|
||||
|
||||
onHandleSubmit?: () => void;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
@@ -31,6 +32,7 @@ export type TextFieldProps = {
|
||||
useTrim?: boolean;
|
||||
useTrimLead?: boolean;
|
||||
value?: string | number;
|
||||
hasComplexityRequirements?: boolean;
|
||||
onBlur?: FieldUpdaterFunc;
|
||||
onChange?: FieldUpdaterFunc;
|
||||
};
|
||||
@@ -44,6 +46,7 @@ export const TextField: FC<TextFieldProps> = ({
|
||||
onBlur,
|
||||
onChange,
|
||||
onPressEnter,
|
||||
onHandleSubmit,
|
||||
pattern,
|
||||
placeholder,
|
||||
required,
|
||||
@@ -52,15 +55,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 +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
|
||||
@@ -88,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,
|
||||
@@ -128,25 +150,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 +231,11 @@ TextField.defaultProps = {
|
||||
pattern: '',
|
||||
useTrim: false,
|
||||
useTrimLead: false,
|
||||
hasComplexityRequirements: false,
|
||||
|
||||
onSubmit: () => {},
|
||||
onBlur: () => {},
|
||||
onChange: () => {},
|
||||
onPressEnter: () => {},
|
||||
onHandleSubmit: () => {},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user