From 39e146b4e66eca7c6e3aaf2ef4a6834b37b36c2e Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 19 May 2022 18:28:19 +0100
Subject: [PATCH] fix: Minor usability improves to team domain management

---
 app/scenes/Settings/Security.tsx           | 34 ++++++++++++++--------
 shared/i18n/locales/en_US/translation.json |  1 +
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/scenes/Settings/Security.tsx b/app/scenes/Settings/Security.tsx
index 82947e0e7..b286ff474 100644
--- a/app/scenes/Settings/Security.tsx
+++ b/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>
-              <Trans>Add another</Trans>
-            </Button>
+            <Fade>
+              <Button type="button" onClick={handleAddDomain} neutral>
+                {data.allowedDomains?.length ? (
+                  <Trans>Add another</Trans>
+                ) : (
+                  <Trans>Add a domain</Trans>
+                )}
+              </Button>
+            </Fade>
           ) : (
             <span />
           )}
 
           {domainsChanged && (
-            <Button
-              type="button"
-              onClick={handleChange}
-              disabled={auth.isSaving}
-            >
-              <Trans>Save changes</Trans>
-            </Button>
+            <Fade>
+              <Button
+                type="button"
+                onClick={handleChange}
+                disabled={auth.isSaving}
+              >
+                <Trans>Save changes</Trans>
+              </Button>
+            </Fade>
           )}
         </Flex>
       </SettingRow>
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 2bb10a561..2140fea83 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/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>.",