Merge pull request #5550 from sandushi/alternative-login-improvement

Refactor the UI for email attribute option of alternative login identifiers when email username type is enabled
wso2 · Mar 15, 2024 · cc4618a · cc4618a
2 parents 677328f + fc19806
commit cc4618a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/.changeset/nasty-lobsters-dance.md b/.changeset/nasty-lobsters-dance.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/console": patch
+---
+
+Improve the alternative login identifier UI
diff --git a/...nsole/src/extensions/components/account-login/pages/alternative-login-identifier-edit.tsx b/...nsole/src/extensions/components/account-login/pages/alternative-login-identifier-edit.tsx
@@ -22,6 +22,7 @@ import List from "@oxygen-ui/react/List";
 import ListItem from "@oxygen-ui/react/ListItem";
 import ListItemText from "@oxygen-ui/react/ListItemText";
 import Typography from "@oxygen-ui/react/Typography";
+import { IdentityAppsError } from "@wso2is/core/errors";
 import {
     AlertLevels,
     Claim,
@@ -40,12 +41,8 @@ import {
     Message,
     PageLayout
 } from "@wso2is/react-components";
-import {
-    ServerConfigurationsConstants
-} from "../../../../features/server-configurations/constants";
 import { AxiosError } from "axios";
 import isEmpty from "lodash-es/isEmpty";
-import { IdentityAppsError } from "@wso2is/core/errors";
 import React, {
     FunctionComponent,
     ReactElement,
@@ -74,6 +71,9 @@ import {
     getConnectorDetails,
     updateGovernanceConnector
 } from "../../../../features/server-configurations/api";
+import {
+    ServerConfigurationsConstants
+} from "../../../../features/server-configurations/constants";
 import {
     ConnectorPropertyInterface,
     GovernanceConnectorInterface,
@@ -237,8 +237,8 @@ export const AlternativeLoginIdentifierEditPage: FunctionComponent<AlternativeLo
 
         resolvedInitialValues = {
             ...resolvedInitialValues,
-            email: isEnabled && allowedAttributes?.includes(ClaimManagementConstants.EMAIL_CLAIM_URI) &&
-                isAlphanumericUsername,
+            email: (isEnabled && allowedAttributes?.includes(ClaimManagementConstants.EMAIL_CLAIM_URI)) ||
+                !isAlphanumericUsername,
             mobile: isEnabled && allowedAttributes?.includes(ClaimManagementConstants.MOBILE_CLAIM_URI)
         };
 
@@ -432,11 +432,16 @@ export const AlternativeLoginIdentifierEditPage: FunctionComponent<AlternativeLo
     const handleSubmit = (values: AlternativeLoginIdentifierFormInterface) => {
 
         const processedFormValues: AlternativeLoginIdentifierFormInterface = { ...values };
-        const checkedClaims: string[] = availableClaims
+        let checkedClaims: string[] = availableClaims
             .filter((claim: Claim) =>
                 processedFormValues[claim?.displayName?.toLowerCase()] !== undefined
                     ? processedFormValues[claim?.displayName?.toLowerCase()] : false)
             .map((claim: Claim) => claim?.claimURI);
+
+        // Remove the email attribute from the allowed attributes list when email username type is enabled
+        if (!isAlphanumericUsername) {
+            checkedClaims = checkedClaims.filter((item: string) => item !== ClaimManagementConstants.EMAIL_CLAIM_URI);
+        }
         const updatedConnectorData: any = getUpdatedConfigurations(checkedClaims);
 
         updateConnector(updatedConnectorData, checkedClaims);

diff --git a/apps/console/src/extensions/i18n/resources/en-US/extensions.ts b/apps/console/src/extensions/i18n/resources/en-US/extensions.ts
@@ -2918,7 +2918,7 @@ export const extensions: Extensions = {
                     " the login flow.",
                 warning: "Ensure that each user in your organization has a unique value assigned for the selected" +
                     " login identifiers.",
-                info: "You have selected email as the username type which makes it the primary login identifier.",
+                info: "You've chosen email as your username type, and it automatically serves as a login identifier.",
                 notification: {
                     error: {
                         description: "Error updating the alternative login identifier configuration.",