diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx index 83ba74c124..ba33dc9da8 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx @@ -26,6 +26,7 @@ interface BasicBlockProps { isEdit: boolean; errorFields: string[]; + onBlur: (name: string) => void; } function getImageDimensions( @@ -74,6 +75,7 @@ const BasicBlock = ({ isEdit, errorFields, + onBlur, }: BasicBlockProps) => { const onChange = (e: React.ChangeEvent) => { const target = e.target; @@ -144,6 +146,7 @@ const BasicBlock = ({ onChange={onChange} isRequired isError={errorFields.includes("name")} + onBlur={onBlur} /> void; } const InputGroup = ({ @@ -47,6 +49,7 @@ const InputGroup = ({ error, onChange, + onBlur, helpButtonText, @@ -110,6 +113,7 @@ const InputGroup = ({ iconName={withCopy ? CopyReactSvgUrl : null} onIconClick={withCopy && onCopyClick} type={isPassword ? "password" : "text"} + onBlur={() => onBlur?.(name)} /> )} {buttonLabel && ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx index e37cc9f32a..619563cc68 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx @@ -44,7 +44,7 @@ const MultiInputGroup = ({ isDisabled, }: MultiInputGroupProps) => { const [value, setValue] = React.useState(""); - const timer = React.useRef>(null); + const [isError, setIsError] = React.useState(false); const onChange = (e: React.ChangeEvent) => { @@ -53,23 +53,17 @@ const MultiInputGroup = ({ setValue(value); }; - React.useEffect(() => { - if (timer.current) { - clearTimeout(timer.current); - } - + const onBlur = () => { if (value) { if (isValidUrl(value)) { setIsError(false); } else { - timer.current = setTimeout(() => { - setIsError(true); - }, 300); + setIsError(true); } } else { setIsError(false); } - }, [value]); + }; return ( @@ -94,6 +88,7 @@ const MultiInputGroup = ({ tabIndex={0} maxLength={255} isDisabled={isDisabled} + onBlur={onBlur} /> { diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx index 9d764ba78a..67cd510c11 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx @@ -135,26 +135,29 @@ const ScopesBlock = ({ — {t(`Common:${scope.read?.tKey}`)} )} - - {/* @ts-ignore */} - - {/* @ts-ignore */} - - {scope.write?.name} - {" "} - — {t(`Common:${scope.write?.tKey}`)} - + {scope.write?.name && ( + <> + {/* @ts-ignore */} + + {/* @ts-ignore */} + + {scope.write?.name} + {" "} + — {t(`Common:${scope.write?.tKey}`)} + + + )} void; } const SupportBlock = ({ @@ -25,6 +26,7 @@ const SupportBlock = ({ isEdit, errorFields, + onBlur, }: SupportBlockProps) => { const onChange = (e: React.ChangeEvent) => { const target = e.target; @@ -47,6 +49,7 @@ const SupportBlock = ({ disabled={isEdit} isRequired isError={errorFields.includes("policy_url")} + onBlur={onBlur} /> diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx index 186ec7767b..0ea03e3f38 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx @@ -74,11 +74,6 @@ const ClientForm = ({ scopes: [], }); - const nameTimer = React.useRef>(null); - const websiteTimer = React.useRef>(null); - const policyTimer = React.useRef>(null); - const termsTimer = React.useRef>(null); - const [errorFields, setErrorFields] = React.useState([]); const { t } = useTranslation(["OAuth", "Common"]); @@ -193,8 +188,6 @@ const ClientForm = ({ } catch (e) { setIsLoading(false); - console.log("11"); - console.log(e); } }, [id, fetchScopes]); @@ -204,6 +197,28 @@ const ClientForm = ({ getClientData(); }, [getClientData, fetchScopes]); + const onBlur = (key: string) => { + if ( + key === "name" && + form[key] && + !errorFields.includes(key) && + (form[key].length < 3 || form[key].length > 256) + ) { + setErrorFields((value) => { + return [...value, key]; + }); + } else if ( + (key === "website_url" || key === "terms_url" || key === "policy_url") && + form[key] && + !errorFields.includes(key) && + !isValidUrl(form[key]) + ) { + setErrorFields((value) => { + return [...value, key]; + }); + } + }; + const compareAndValidate = () => { let isValid = true; @@ -220,11 +235,9 @@ const ClientForm = ({ ) { isValid = false; - return (nameTimer.current = setTimeout(() => { - setErrorFields((value) => { - return [...value, key]; - }); - }, 300)); + return setErrorFields((value) => { + return [...value, key]; + }); } if ( @@ -234,8 +247,6 @@ const ClientForm = ({ setErrorFields((value) => { return value.filter((n) => n !== key); }); - if (nameTimer.current) clearTimeout(nameTimer.current); - nameTimer.current = null; return; } @@ -265,20 +276,6 @@ const ClientForm = ({ case "name": isValid = isValid && !!form[key]; - if ( - form[key] && - !errorFields.includes(key) && - (form[key].length < 3 || form[key].length > 256) - ) { - isValid = false; - - nameTimer.current = setTimeout(() => { - setErrorFields((value) => { - return [...value, key]; - }); - }, 300); - } - if ( errorFields.includes(key) && (!form[key] || (form[key].length > 2 && form[key].length < 256)) @@ -286,8 +283,6 @@ const ClientForm = ({ setErrorFields((value) => { return value.filter((n) => n !== key); }); - if (nameTimer.current) clearTimeout(nameTimer.current); - nameTimer.current = null; } isValid = isValid && !errorFields.includes(key); @@ -304,22 +299,6 @@ const ClientForm = ({ case "website_url": isValid = isValid && !!form[key]; - if ( - form[key] && - !errorFields.includes(key) && - !isValidUrl(form[key]) - ) { - isValid = false; - - websiteTimer.current = setTimeout( - () => - setErrorFields((value) => { - return [...value, key]; - }), - 300 - ); - } - if ( errorFields.includes(key) && (!form[key] || isValidUrl(form[key])) @@ -327,8 +306,6 @@ const ClientForm = ({ setErrorFields((value) => { return value.filter((n) => n !== key); }); - if (websiteTimer.current) clearTimeout(websiteTimer.current); - websiteTimer.current = null; } break; @@ -347,22 +324,6 @@ const ClientForm = ({ case "terms_url": isValid = isValid && !!form[key]; - if ( - form[key] && - !errorFields.includes(key) && - !isValidUrl(form[key]) - ) { - isValid = false; - - termsTimer.current = setTimeout( - () => - setErrorFields((value) => { - return [...value, key]; - }), - 300 - ); - } - if ( errorFields.includes(key) && (!form[key] || isValidUrl(form[key])) @@ -370,30 +331,12 @@ const ClientForm = ({ setErrorFields((value) => { return value.filter((n) => n !== key); }); - if (termsTimer.current) clearTimeout(termsTimer.current); - termsTimer.current = null; } break; case "policy_url": isValid = isValid && !!form[key]; - if ( - form[key] && - !errorFields.includes(key) && - !isValidUrl(form[key]) - ) { - isValid = false; - - policyTimer.current = setTimeout( - () => - setErrorFields((value) => { - return [...value, key]; - }), - 300 - ); - } - if ( errorFields.includes(key) && (!form[key] || isValidUrl(form[key])) @@ -401,8 +344,6 @@ const ClientForm = ({ setErrorFields((value) => { return value.filter((n) => n !== key); }); - if (policyTimer.current) clearTimeout(policyTimer.current); - policyTimer.current = null; } break; @@ -439,6 +380,7 @@ const ClientForm = ({ changeValue={onChangeForm} isEdit={isEdit} errorFields={errorFields} + onBlur={onBlur} /> {isEdit && (