LogalDeveloper/owncast
0
Fork 0
Code Activity

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

Browse Source 
* 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
2023-03-03 06:20:53 +01:00
committed by GitHub
parent e3a63606eb
commit 3653db3a6a
4 changed files with 181 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,7 @@ export type TextFieldWithSubmitProps = TextFieldProps & {
apiPath: string;
configPath?: string;
initialValue?: string;
hasComplexityRequirements?: boolean;
};
export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
@@ -43,7 +44,8 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
let resetTimer = null;
const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
const { fieldName, required, tip, status, value, hasComplexityRequirements, onChange, onSubmit } =
textFieldProps;
// Clear out any validation states and messaging
const resetStates = () => {
@@ -118,6 +120,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
'textfield-with-submit-container': true,
submittable: hasChanged,
});
return (
<div className={textfieldContainerClass}>
<div className="textfield-component">
@@ -126,6 +129,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
onSubmit={null}
onBlur={handleBlur}
onChange={handleChange}
onHandleSubmit={handleSubmit}
/>
</div>
<div className="formfield-container lower-container">
@@ -134,15 +138,17 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
<div className="field-tip">{tip}</div>
<FormStatusIndicator status={status || submitStatus} />
<div className="update-button-container">
<Button
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
{!hasComplexityRequirements && (
<Button
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
)}
</div>
</div>
</div>