diff --git a/app/scenes/Settings/Security.tsx b/app/scenes/Settings/Security.tsx index 96861eca4..ed85e5549 100644 --- a/app/scenes/Settings/Security.tsx +++ b/app/scenes/Settings/Security.tsx @@ -36,9 +36,17 @@ function Security() { defaultUserRole: team.defaultUserRole, memberCollectionCreate: team.memberCollectionCreate, inviteRequired: team.inviteRequired, - allowedDomains: team.allowedDomains, }); + const [allowedDomains, setAllowedDomains] = useState([ + ...(team.allowedDomains ?? []), + ]); + const [lastKnownDomainCount, updateLastKnownDomainCount] = useState( + allowedDomains.length + ); + + const [existingDomainsTouched, setExistingDomainsTouched] = useState(false); + const authenticationMethods = team.signinMethods; const showSuccessMessage = React.useMemo( @@ -51,17 +59,13 @@ function Security() { [showToast, t] ); - const [domainsChanged, setDomainsChanged] = useState(false); - const saveData = React.useCallback( async (newData) => { try { setData(newData); await auth.updateTeam(newData); showSuccessMessage(); - setDomainsChanged(false); } catch (err) { - setDomainsChanged(true); showToast(err.message, { type: "error", }); @@ -77,6 +81,21 @@ function Security() { [data, saveData] ); + const handleSaveDomains = React.useCallback(async () => { + try { + await auth.updateTeam({ + allowedDomains, + }); + showSuccessMessage(); + setExistingDomainsTouched(false); + updateLastKnownDomainCount(allowedDomains.length); + } catch (err) { + showToast(err.message, { + type: "error", + }); + } + }, [auth, allowedDomains, showSuccessMessage, showToast]); + const handleDefaultRoleChange = React.useCallback( async (newDefaultRole: string) => { await saveData({ ...data, defaultUserRole: newDefaultRole }); @@ -123,34 +142,41 @@ function Security() { ); const handleRemoveDomain = async (index: number) => { - const newData = { - ...data, - }; - newData.allowedDomains && newData.allowedDomains.splice(index, 1); + const newDomains = allowedDomains.filter((_, i) => index !== i); - setData(newData); - setDomainsChanged(true); + setAllowedDomains(newDomains); + + const touchedExistingDomain = index < lastKnownDomainCount; + if (touchedExistingDomain) { + setExistingDomainsTouched(true); + } }; const handleAddDomain = () => { - const newData = { - ...data, - allowedDomains: [...(data.allowedDomains || []), ""], - }; + const newDomains = [...allowedDomains, ""]; - setData(newData); + setAllowedDomains(newDomains); }; const createOnDomainChangedHandler = (index: number) => ( ev: React.ChangeEvent ) => { - const newData = { ...data }; + const newDomains = allowedDomains.slice(); - newData.allowedDomains![index] = ev.currentTarget.value; - setData(newData); - setDomainsChanged(true); + newDomains[index] = ev.currentTarget.value; + setAllowedDomains(newDomains); + + const touchedExistingDomain = index < lastKnownDomainCount; + if (touchedExistingDomain) { + setExistingDomainsTouched(true); + } }; + const showSaveChanges = + existingDomainsTouched || + allowedDomains.filter((value: string) => value !== "").length > // New domains were added + lastKnownDomainCount; + return ( }> {t("Security")} @@ -264,35 +290,34 @@ function Security() { "The domains which should be allowed to create new accounts using SSO. Changing this setting does not affect existing user accounts." )} > - {data.allowedDomains && - data.allowedDomains.map((domain, index) => ( - - - - - handleRemoveDomain(index)}> - - - - - - ))} + {allowedDomains.map((domain, index) => ( + + + + + handleRemoveDomain(index)}> + + + + + + ))} - {!data.allowedDomains?.length || - data.allowedDomains[data.allowedDomains.length - 1] !== "" ? ( + {!allowedDomains.length || + allowedDomains[allowedDomains.length - 1] !== "" ? (