Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00: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
Show Stats 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,
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 [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 (fieldName === 'adminPassword' && regex.test(val)) {
setHasChanged(true);
setHasPwdChanged(true);
} else {
setHasChanged(false);
setHasPwdChanged(false);
}
onChange({ fieldName, value: useTrim ? val.trim() : val });
@ -143,7 +144,7 @@ export const TextField: FC<TextFieldProps> = ({
</div>
) : null}
{fieldName !== 'adminPassword' ? (
{type !== TEXTFIELD_TYPE_PASSWORD ? (
<div className="input-side">
<div className="input-group">
<Field
@ -198,7 +199,6 @@ export const TextField: FC<TextFieldProps> = ({
<Input.Password
id={fieldId}
className={`field ${className} ${fieldId}`}
{...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
onChange={handleChange}
onBlur={handleBlur}
placeholder={placeholder}
@ -207,17 +207,19 @@ export const TextField: FC<TextFieldProps> = ({
value={value as number | (readonly string[] & number)}
/>
</Form.Item>
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
<Button
type="primary"
size="small"
className="submit-button"
onClick={onHandleSubmit}
disabled={!hasChanged}
>
Update
</Button>
</div>
{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>

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

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