golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-02 03:54:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

update Textfield and TextFieldWithSubmit

Browse Source
This commit is contained in:
dorj222
2023-01-28 16:38:33 +01:00
parent 7920ec17a9
commit d5132cf2c1
2 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,18 +54,19 @@ export const TextField: FC<TextFieldProps> = ({
useTrim, useTrim,
value, value,
}) => { }) => {
const [hasChanged, setHasChanged] = useState(false); const [hasPwdChanged, setHasPwdChanged] = useState(false);
const [showPwdButton, setShowPwdButton] = useState(false);
const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$%^&*]).{8,192}$/; const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$%^&*]).{8,192}$/;
const [form] = Form.useForm(); const [form] = Form.useForm();
const handleChange = (e: any) => { const handleChange = (e: any) => {
// if an extra onChange handler was sent in as a prop, let's run that too. // if an extra onChange handler was sent in as a prop, let's run that too.
if (onChange) { if (onChange) {
const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value; const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
setShowPwdButton(true);
if (fieldName === 'adminPassword' && regex.test(val)) { if (fieldName === 'adminPassword' && regex.test(val)) {
setHasChanged(true); setHasPwdChanged(true);
} else { } else {
setHasChanged(false); setHasPwdChanged(false);
} }
onChange({ fieldName, value: useTrim ? val.trim() : val }); onChange({ fieldName, value: useTrim ? val.trim() : val });
@ -143,7 +144,7 @@ export const TextField: FC<TextFieldProps> = ({
</div> </div>
) : null} ) : null}
{fieldName !== 'adminPassword' ? ( {type !== TEXTFIELD_TYPE_PASSWORD ? (
<div className="input-side"> <div className="input-side">
<div className="input-group"> <div className="input-group">
<Field <Field
@ -198,7 +199,6 @@ export const TextField: FC<TextFieldProps> = ({
<Input.Password <Input.Password
id={fieldId} id={fieldId}
className={`field ${className} ${fieldId}`} className={`field ${className} ${fieldId}`}
{...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
placeholder={placeholder} placeholder={placeholder}
@ -207,17 +207,19 @@ export const TextField: FC<TextFieldProps> = ({
value={value as number | (readonly string[] & number)} value={value as number | (readonly string[] & number)}
/> />
</Form.Item> </Form.Item>
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}> {showPwdButton && (
<Button <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
type="primary" <Button
size="small" type="primary"
className="submit-button" size="small"
onClick={onHandleSubmit} className="submit-button"
disabled={!hasChanged} onClick={onHandleSubmit}
> disabled={!hasPwdChanged}
Update >
</Button> Update
</div> </Button>
</div>
)}
<FormStatusIndicator status={status} /> <FormStatusIndicator status={status} />
<p className="field-tip">{tip}</p> <p className="field-tip">{tip}</p>
</Form> </Form>

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

@ -118,6 +118,14 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
'textfield-with-submit-container': true, 'textfield-with-submit-container': true,
submittable: hasChanged, submittable: hasChanged,
}); });
const isPasswordInput = () => {
if (fieldName === 'adminPassword') {
return false;
}
return true;
};
return ( return (
<div className={textfieldContainerClass}> <div className={textfieldContainerClass}>
<div className="textfield-component"> <div className="textfield-component">
@ -135,7 +143,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
<div className="field-tip">{tip}</div> <div className="field-tip">{tip}</div>
<FormStatusIndicator status={status || submitStatus} /> <FormStatusIndicator status={status || submitStatus} />
<div className="update-button-container"> <div className="update-button-container">
{fieldName !== 'adminPassword' && ( {isPasswordInput() && (
<Button <Button
type="primary" type="primary"
size="small" size="small"