[Console] Add UI Support for Multiple Email Addresses and Mobile Numbers per User

.changeset/cyan-rockets-switch.md

@@ -0,0 +1,7 @@
+---
+"@wso2is/admin.users.v1": minor
+"@wso2is/admin.server-configurations.v1": patch
+"@wso2is/i18n": patch
+---
+
+Add UI support for multiple email and mobile numbers per user

apps/console/java/org.wso2.identity.apps.console.server.feature/resources/deployment.config.json.j2

@@ -207,6 +207,9 @@
         {% if console.ui.show_app_switch_button is defined %}
         "showAppSwitchButton": {{ console.ui.show_app_switch_button }},
         {% endif %}
+        {% if identity_mgt.user_claim_update.enable_multiple_emails_and_mobile_numbers is defined %}
+        "isMultipleEmailsAndMobileNumbersEnabled": {{ identity_mgt.user_claim_update.enable_multiple_emails_and_mobile_numbers }},
+        {% endif %}
         "features": {
             {% if console.extensions.features is defined %}
             {% for name, feature in console.extensions.features.items() %}

apps/console/src/public/deployment.config.json

@@ -1247,6 +1247,7 @@
         "isHeaderAvatarLabelAllowed": false,
         "isLeftNavigationCategorized": true,
         "isMarketingConsentBannerEnabled": false,
+        "isMultipleEmailsAndMobileNumbersEnabled": false,
         "isPasswordInputValidationEnabled": true,
         "isRequestPathAuthenticationEnabled": false,
         "isSAASDeployment": false,

features/admin.core.v1/configs/app.ts

@@ -331,7 +331,9 @@ export class Config {
             isGroupAndRoleSeparationEnabled: window[ "AppUtils" ]?.getConfig()?.ui?.isGroupAndRoleSeparationEnabled,
             isHeaderAvatarLabelAllowed: window[ "AppUtils" ]?.getConfig()?.ui?.isHeaderAvatarLabelAllowed,
             isLeftNavigationCategorized: window[ "AppUtils" ]?.getConfig()?.ui?.isLeftNavigationCategorized,
-            isMarketingConsentBannerEnabled: window[ "AppUtils" ]?.getConfig()?.ui?.isMarketingConsentBannerEnabled,
+            isMarketingConsentBannerEnabled: window["AppUtils"]?.getConfig()?.ui?.isMarketingConsentBannerEnabled,
+            isMultipleEmailsAndMobileNumbersEnabled:
+                window["AppUtils"]?.getConfig()?.ui?.isMultipleEmailsAndMobileNumbersEnabled,
             isPasswordInputValidationEnabled: window["AppUtils"]?.getConfig()?.ui?.isPasswordInputValidationEnabled,
             isRequestPathAuthenticationEnabled:
                 window[ "AppUtils" ]?.getConfig()?.ui?.isRequestPathAuthenticationEnabled,

features/admin.core.v1/models/config.ts

@@ -479,6 +479,10 @@ export interface UIConfigInterface extends CommonUIConfigInterface<FeatureConfig
      * Config to check whether consent is required for trusted apps.
      */
     isTrustedAppConsentRequired?: boolean;
+    /**
+     * Config to check whether the multiple emails and mobile numbers per user feature is enabled.
+     */
+    isMultipleEmailsAndMobileNumbersEnabled?: boolean;
 }
 
 /**

features/admin.server-configurations.v1/constants/server-configurations-constants.ts

@@ -19,9 +19,9 @@
 export class ServerConfigurationsConstants {
 
     /**
-	 * Private constructor to avoid object instantiation from outside the class.
-	 *
-	 */
+     * Private constructor to avoid object instantiation from outside the class.
+     *
+     */
     /* eslint-disable @typescript-eslint/no-empty-function */
     private constructor() { }
 
@@ -314,6 +314,18 @@ export class ServerConfigurationsConstants {
     public static readonly PASSWORD_POLICY_PATTERN: string = "passwordPolicy.pattern";
     public static readonly PASSWORD_POLICY_ERROR_MESSAGE: string = "passwordPolicy.errorMsg";
 
+    /**
+     * User claim update - API Keyword constants.
+     */
+    public static readonly ENABLE_MOBILE_VERIFICATION: string = "UserClaimUpdate.MobileNumber.EnableVerification";
+
+    public static readonly ENABLE_EMAIL_VERIFICATION: string = "UserClaimUpdate.Email.EnableVerification";
+    public static readonly ENABLE_MOBILE_VERIFICATION_BY_PRIVILEGED_USER: string
+        = "UserClaimUpdate.MobileNumber.EnableVerificationByPrivilegedUser";
+
+    public static readonly ENABLE_MULTIPLE_EMAILS_AND_MOBILE_NUMBERS: string =
+        "UserClaimUpdate.EnableMultipleEmailsAndMobileNumbers";
+
     /**
 	 * Real Configurations constants.
 	 */
@@ -335,7 +347,7 @@ export class ServerConfigurationsConstants {
 		"configurations.";
 
     public static readonly ADMIN_ADVISORY_BANNER_CONFIGS_UPDATE_REQUEST_ERROR: string = "An error occurred " +
-		"while updating the admin advisory banner configurations.";
+        "while updating the admin advisory banner configurations.";
 
     public static readonly ADMIN_ADVISORY_BANNER_CONFIGS_INVALID_INPUT_ERROR: string = "An invalid input value " +
 		"in the request.";

features/admin.users.v1/components/user-profile.scss

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.multi-valued-accordion {
+    .accordion-summary {
+        display: flex;
+        padding: 0px 12px 0px 8px;
+        flex-wrap: nowrap;
+        align-items: center; 
+        gap: 4px;
+        border-radius: 8px;
+
+        .accordion-label {
+            margin: 0 0 0 8px;
+            flex-shrink: 0;
+            padding-right: 4px;
+            min-width: 250px; 
+
+            &.mobile-label {
+                min-width: 150px; 
+            }
+        }
+
+        .verified-icon, .primary-icon {
+            align-items: center;
+            padding: 0 4px;
+        }
+    }
+
+    .accordion-details {
+        border-radius: 8px;
+
+        .multi-value-table {
+
+            .multi-value-table-data-row {
+                &:last-child td, &:last-child th {
+                    border: none;
+                }
+            }
+
+            .table-c1 {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                font-size: 1rem;
+
+                .c1-value{
+                    margin-bottom: 0;
+                    flex-shrink: 0;
+                    padding-right: 12px;
+                    min-width: 250px; 
+
+                    &.mobile-label {
+                        min-width: 150px; 
+                    }
+                }
+
+                .verified-icon, .primary-icon {
+                    align-items: center;
+                    padding: 0 4px;
+                }
+            }
+
+            .table-c2 {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                justify-content: flex-end;
+                gap: 4px;
+            }
+        }
+    }
+
+    .MuiAccordionDetails-root {
+        padding: 0px;
+    }
+
+    .MuiAccordionSummary-root {
+        min-height: 48px;
+    }
+}