fix(console): disable conflicted sign-up identifiers (#7186)

* fix(console): disable conflicted sign-up identifiers

disaable conflicted sign-up identifiers

* style(console): remove hover style

remove hover style of the disabled elements

Author: simeng-li

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/SignUpIdentifiersEditBox/index.tsx

@@ -83,35 +83,39 @@ function SignUpIdentifiersEditBox({ syncSignInMethods }: Props) {
     Array<{
       value: SignUpIdentifier;
       label: string;
+      disabled?: boolean;
     }>
   >(() => {
     const identifiersSet = new Set(signUpIdentifiers.map(({ identifier }) => identifier));
-
-    return signUpIdentifierOptions.filter(({ value }) => {
-      // Basic condition: filter out if identifiers include the value
-      if (identifiersSet.has(value)) {
-        return false;
-      }
-
-      // Condition 2: If identifiers include EmailOrPhone, filter out Email and Phone
-      if (
-        identifiersSet.has(AlternativeSignUpIdentifier.EmailOrPhone) &&
-        (value === SignInIdentifier.Email || value === SignInIdentifier.Phone)
-      ) {
-        return false;
+    const availableOptions = signUpIdentifierOptions.filter(
+      ({ value }) => !identifiersSet.has(value)
+    );
+
+    return availableOptions.map(({ value, label }) => {
+      // Disable email and phone options if email or phone is selected
+      if (value === SignInIdentifier.Email || value === SignInIdentifier.Phone) {
+        return {
+          value,
+          label,
+          disabled: identifiersSet.has(AlternativeSignUpIdentifier.EmailOrPhone),
+        };
       }
 
-      // Condition 3: If identifiers include Email or Phone, filter out EmailOrPhone
-      if (
-        (identifiersSet.has(SignInIdentifier.Email) ||
-          identifiersSet.has(SignInIdentifier.Phone)) &&
-        value === AlternativeSignUpIdentifier.EmailOrPhone
-      ) {
-        return false;
+      // Disable emailOrPhone option if email or phone is selected
+      if (value === AlternativeSignUpIdentifier.EmailOrPhone) {
+        return {
+          value,
+          label,
+          disabled:
+            identifiersSet.has(SignInIdentifier.Email) ||
+            identifiersSet.has(SignInIdentifier.Phone),
+        };
       }
 
-      // If none of the conditions matched, keep the value
-      return true;
+      return {
+        value,
+        label,
+      };
     });
   }, [signUpIdentifiers]);
 

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/components/IdentifiersAddButton/index.module.scss

@@ -1,7 +1,18 @@
+@use '@/scss/underscore' as _;
+
 .addAnotherIdentifierDropdown {
   min-width: 208px;
 }
 
 .addIdentifierDropDown {
   min-width: unset;
 }
+
+.disabledDropdownItem {
+  cursor: not-allowed;
+  color: var(--color-placeholder);
+
+  &:hover {
+    background-color: transparent;
+  }
+}

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/components/IdentifiersAddButton/index.tsx

@@ -15,6 +15,7 @@ type MethodsType = 'sign-in' | 'sign-up';
 type Options<T> = Array<{
   value: T;
   label: string;
+  disabled?: boolean;
 }>;
 
 type Props<T> = {
@@ -60,10 +61,14 @@ function IdentifiersAddButton<T extends SignInIdentifier | SignUpIdentifier>({
       )}
       isDropdownFullWidth={!hasSelectedIdentifiers}
     >
-      {options.map(({ value, label }) => (
+      {options.map(({ value, label, disabled }) => (
         <DropdownItem
           key={value}
+          className={disabled ? styles.disabledDropdownItem : undefined}
           onClick={() => {
+            if (disabled) {
+              return;
+            }
             onSelected(value);
           }}
         >