SDP-981: Default Organization name from hostname prefix when possible (…

…#56)
stellar · Dec 13, 2023 · 30b52b2 · 30b52b2
1 parent a9e6d9b
commit 30b52b2
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/src/constants/settings.ts b/src/constants/settings.ts
@@ -22,6 +22,8 @@ export const LOCAL_STORAGE_SESSION_TOKEN = "sdp_session";
 export const LOCAL_STORAGE_DEVICE_ID = "sdp_deviceID";
 export const UI_STATUS_DISBURSEMENT = "STARTED,PAUSED,COMPLETED";
 export const UI_STATUS_DISBURSEMENT_DRAFT = "DRAFT,READY";
+export const ORG_NAME_INFO_TEXT =
+  "You can find your organization name in the invitation email";
 
 export enum Routes {
   MFA = "/mfa",

diff --git a/src/pages/ForgotPassword.tsx b/src/pages/ForgotPassword.tsx
@@ -10,7 +10,9 @@ import {
 import { useNavigate } from "react-router-dom";
 
 import { useForgotPasswordLink } from "apiQueries/useForgotPasswordLink";
-import { RECAPTCHA_SITE_KEY } from "constants/settings";
+import { RECAPTCHA_SITE_KEY, ORG_NAME_INFO_TEXT } from "constants/settings";
+import { InfoTooltip } from "components/InfoTooltip";
+import { getSdpTenantName } from "helpers/getSdpTenantName";
 
 export const ForgotPassword = () => {
   const {
@@ -25,7 +27,7 @@ export const ForgotPassword = () => {
   const navigate = useNavigate();
   const recaptchaRef = useRef<Recaptcha>(null);
 
-  const [organizationName, setOrganizationName] = useState("");
+  const [organizationName, setOrganizationName] = useState(getSdpTenantName());
   const [email, setEmail] = useState("");
   const [recaptchaToken, setRecaptchaToken] = useState("");
 
@@ -84,7 +86,11 @@ export const ForgotPassword = () => {
             fieldSize="sm"
             id="fp-organization-name"
             name="fp-organization-name"
-            label="Organization name"
+            label={
+              <InfoTooltip infoText={ORG_NAME_INFO_TEXT}>
+                Organization name
+              </InfoTooltip>
+            }
             onChange={(e) => setOrganizationName(e.target.value)}
             value={organizationName}
             type="text"

diff --git a/src/pages/MFAuth.tsx b/src/pages/MFAuth.tsx
@@ -18,10 +18,12 @@ import {
   USE_SSO,
   RECAPTCHA_SITE_KEY,
   LOCAL_STORAGE_DEVICE_ID,
+  ORG_NAME_INFO_TEXT,
 } from "constants/settings";
 import { useRedux } from "hooks/useRedux";
 import { mfaAction, signInAction } from "store/ducks/userAccount";
 import { getSdpTenantName } from "helpers/getSdpTenantName";
+import { InfoTooltip } from "components/InfoTooltip";
 
 export const MFAuth = () => {
   const dispatch: AppDispatch = useDispatch();
@@ -30,7 +32,7 @@ export const MFAuth = () => {
   const recaptchaRef = useRef<Recaptcha>(null);
 
   const { userAccount } = useRedux("userAccount");
-  const [organizationName, setOrganizationName] = useState("");
+  const [organizationName, setOrganizationName] = useState(getSdpTenantName());
   const [recaptchaToken, setRecaptchaToken] = useState("");
   const [mfaCode, setMfaCode] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
@@ -132,7 +134,11 @@ export const MFAuth = () => {
                 fieldSize="sm"
                 id="2fa-organization-name"
                 name="2fa-organization-name"
-                label="Organization name"
+                label={
+                  <InfoTooltip infoText={ORG_NAME_INFO_TEXT}>
+                    Organization name
+                  </InfoTooltip>
+                }
                 onChange={(e) => setOrganizationName(e.target.value)}
                 value={organizationName}
                 type="text"

diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx
@@ -8,17 +8,20 @@ import {
 } from "@stellar/design-system";
 import { useNavigate } from "react-router-dom";
 
+import { ORG_NAME_INFO_TEXT } from "constants/settings";
 import { useResetPassword } from "apiQueries/useResetPassword";
 import { validateNewPassword } from "helpers/validateNewPassword";
 import { validatePasswordMatch } from "helpers/validatePasswordMatch";
+import { getSdpTenantName } from "helpers/getSdpTenantName";
+import { InfoTooltip } from "components/InfoTooltip";
 
 export const ResetPassword = () => {
   const { isSuccess, isLoading, error, mutateAsync, reset } =
     useResetPassword();
 
   const navigate = useNavigate();
 
-  const [organizationName, setOrganizationName] = useState("");
+  const [organizationName, setOrganizationName] = useState(getSdpTenantName());
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [confirmationToken, setConfirmationToken] = useState("");
@@ -114,7 +117,11 @@ export const ResetPassword = () => {
             fieldSize="sm"
             id="rp-organization-name"
             name="rp-organization-name"
-            label="Organization name"
+            label={
+              <InfoTooltip infoText={ORG_NAME_INFO_TEXT}>
+                Organization name
+              </InfoTooltip>
+            }
             onChange={(e) => setOrganizationName(e.target.value)}
             value={organizationName}
             type="text"

diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
@@ -18,10 +18,12 @@ import {
   USE_SSO,
   RECAPTCHA_SITE_KEY,
   LOCAL_STORAGE_DEVICE_ID,
+  ORG_NAME_INFO_TEXT,
 } from "constants/settings";
 import { useRedux } from "hooks/useRedux";
 import { signInRedirect } from "helpers/singleSingOn";
 import { getSdpTenantName } from "helpers/getSdpTenantName";
+import { InfoTooltip } from "components/InfoTooltip";
 
 export const SignIn = () => {
   const dispatch: AppDispatch = useDispatch();
@@ -30,7 +32,7 @@ export const SignIn = () => {
   const recaptchaRef = useRef<Recaptcha>(null);
 
   const { userAccount } = useRedux("userAccount");
-  const [organizationName, setOrganizationName] = useState("");
+  const [organizationName, setOrganizationName] = useState(getSdpTenantName());
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [recaptchaToken, setRecaptchaToken] = useState("");
@@ -135,8 +137,13 @@ export const SignIn = () => {
                 fieldSize="sm"
                 id="si-organization-name"
                 name="si-organization-name"
-                label="Organization name"
+                label={
+                  <InfoTooltip infoText={ORG_NAME_INFO_TEXT}>
+                    Organization name
+                  </InfoTooltip>
+                }
                 onChange={(e) => setOrganizationName(e.target.value)}
+                value={organizationName}
                 type="text"
               />
               <Input