fix: Minor usability improves to team domain management

app/scenes/Settings/Security.tsx

@@ -7,6 +7,7 @@ import { useTranslation, Trans } from "react-i18next";
 import styled from "styled-components";
 import Button from "~/components/Button";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
@@ -138,7 +139,6 @@ function Security() {
     };
 
     setData(newData);
-    setDomainsChanged(true);
   };
 
   const createOnDomainChangedHandler = (index: number) => (
@@ -276,8 +276,10 @@ function Security() {
                 key={index}
                 id={`allowedDomains${index}`}
                 value={domain}
+                autoFocus={!domain}
                 placeholder="example.com"
-                flex={true}
+                required
+                flex
                 onChange={createOnDomainChangedHandler(index)}
               />
               <Remove>
@@ -293,21 +295,29 @@ function Security() {
         <Flex justify="space-between" gap={4} style={{ flexWrap: "wrap" }}>
           {!data.allowedDomains?.length ||
           data.allowedDomains[data.allowedDomains.length - 1] !== "" ? (
-            <Button type="button" onClick={handleAddDomain} neutral>
+            <Fade>
-              <Trans>Add another</Trans>
+              <Button type="button" onClick={handleAddDomain} neutral>
-            </Button>
+                {data.allowedDomains?.length ? (
+                  <Trans>Add another</Trans>
+                ) : (
+                  <Trans>Add a domain</Trans>
+                )}
+              </Button>
+            </Fade>
           ) : (
             <span />
           )}
 
           {domainsChanged && (
-            <Button
+            <Fade>
-              type="button"
+              <Button
-              onClick={handleChange}
+                type="button"
-              disabled={auth.isSaving}
+                onClick={handleChange}
-            >
+                disabled={auth.isSaving}
-              <Trans>Save changes</Trans>
+              >
-            </Button>
+                <Trans>Save changes</Trans>
+              </Button>
+            </Fade>
           )}
         </Flex>
       </SettingRow>

shared/i18n/locales/en_US/translation.json

@@ -661,6 +661,7 @@
   "Allowed Domains": "Allowed Domains",
   "The domains which should be allowed to create accounts. This applies to both SSO and Email logins. Changing this setting does not affect existing user accounts.": "The domains which should be allowed to create accounts. This applies to both SSO and Email logins. Changing this setting does not affect existing user accounts.",
   "Remove domain": "Remove domain",
+  "Add a domain": "Add a domain",
   "Save changes": "Save changes",
   "Sharing is currently disabled.": "Sharing is currently disabled.",
   "You can globally enable and disable public document sharing in the <em>security settings</em>.": "You can globally enable and disable public document sharing in the <em>security settings</em>.",