This repository contains the UI code for Partner Management portal. To know more about the features and functions present on the portal, refer here.

Build and Deployment

Note: The code is written in React JS.

• Install node.js- To build the react JS code that runs on node, recommended Node: 21.7.3, Package Manager: npm 5.2+

• Check out the source code from GIT – To download the source code from git, follow the steps below to download source code on your local system.

  • git clone https://github.com/mosip/partner-management-portal (to clone the source code repository from git)

For Production build

• Build the code

  Follow the steps below to build the source code on your system.

  • Navigate to the pmp-reactjs-ui directory inside the cloned repository.

  • Run the command npm run build in that directory to build the code.

• Build Docker image

  Follow the steps below to build the docker image on your system.

  • docker build -t name . (replace name with the name of the image you want, "." signifies the current directory from where the docker file has to be read.)

  • Example: docker build -t pmp-revamp-ui .

• Run the Docker image

  Follow the steps to build docker image on your system.

  • docker run –d –p 80:80 --name container-name image-name (to run the docker image created with the previous step,-d signifies to run the container in detached mode, -p signifies the port mapping left side of the":" is the external port that will be exposed to the outside world and right side is the internal port of the container that is mapped with the external port. Replace container-name with the name of your choice for the container, replace image-name with the name of the image specified in the previous step)

  • Example: docker run -d -p 3000:3000--name nginx pmp-revamp-ui

• Now you can access the user interface over the internet via browser.

  • Example: http://localhost:3000

For Local build

• Build & deploy the code locally

  Follow the steps below to build the source code on your system.

  • Navigate to the pmp-reactjs-ui directory inside the cloned repository. Then, run the following command in that directory:

    • npm install

    • npm start

• Now, you can access the user interface via browser.

  • Example: http://localhost:3000

Build and Development Guide

This guide contains all the information required for successful deployment and running of Partner Management Portal. It includes information about the Database and roles.

DB scripts

Partner Management Service DB Scripts to be run: DB scripts

Keycloak Roles

mosip-pms-client needs to have below roles in keycloak:

• CREATE_SHARE`

• DEVICE_PROVIDER

• PARTNER

• PARTNER_ADMIN

• PMS_ADMIN

• PMS_USER

• PUBLISH_APIKEY_APPROVED_GENERAL

• PUBLISH_APIKEY_UPDATED_GENERAL

• PUBLISH_CA_CERTIFICATE_UPLOADED_GENERAL

• PUBLISH_MISP_LICENSE_GENERATED_GENERAL

• PUBLISH_MISP_LICENSE_UPDATED_GENERAL

• PUBLISH_OIDC_CLIENT_CREATED_GENERAL

• PUBLISH_OIDC_CLIENT_UPDATED_GENERAL

• PUBLISH_PARTNER_UPDATED_GENERAL

• PUBLISH_POLICY_UPDATED_GENERAL

• REGISTRATION_PROCESSOR

• SUBSCRIBE_CA_CERTIFICATE_UPLOADED_GENERAL

• ZONAL_ADMIN

• view-users (from realm-management roles)

Config Changes:

Add below property to partner-management-default.properties file in mosip-config repository to Deploy PMS Revamp 1.3.0-DP.1 release in your env.

## This property is used by kernel-authcodeflowproxy-api to check request is coming from allowed urls not.
auth.allowed.urls=https://${mosip.pmp.host}/,https://${mosip.pmp.reactjs.ui.host}/

Partner Management Service

Partner Management Service provides various partner services like onboarding partners and providing partner data to other modules.

The diagram below illustrates the relationship of this service to other MOSIP services.

1. Certificates of partner are uploaded to Key Manager as part of onboarding.

2. Registration processor fetches ABIS datashare policy from PMS.

3. PMS sends notification messages to partners via notification service (of Kernel).

4. Audit logs are logged into Auditmanager.

5. ID Repository fetches credential data share partners and their polices from PMS.

6. All PMS data is stored in mosip_pms DB.

7. Certificates of Authentication Partners are sent to IDA module as IDA runs independently. The certificates are shared using Datashare (which futher uses Websub to share data with IDA).

8. PMS invokes the client management endpoint of eSignet to register OIDC client

Rest of the content can be referred to here: https://docs.mosip.io/1.2.0/modules/partner-management-services

PMS Portal UI:

The table below outlines the frameworks, tools, and technologies used in PMS Portal.

Partner Management Services:

The table below outlines the frameworks, tools, and technologies employed by Partner Management Services.

New Language Support

Overview

This guide provides step-by-step instructions for adding support for a new language in PMS application that uses react-i18next for internationalization. The i18n.js file is already configured to dynamically load language files based on the selected locale. Currently, the application supports English, French, and Arabic. For demonstration, we will add Spanish as an additional language.

Repository

Steps to Add a New Language

1. Add a New Translation File

Each language in the application is stored as a separate JSON file inside the /pmp-revamp-ui/public/i18n directory. To add Spanish (es), create a new translation file:

es.json

Open es.json and add the translations required, for example:

{

"dashboard": {

"welcomeMsg": "Bienvenido {{firstName}} {{lastName}}",

"accountStatus": "Estado de la cuenta"

}

}

2. Add Language Locale in Keycloak

We use Keycloak for authentication, and users select their preferred language during login. Once logged in, the selected language is picked up by the i18n bundle. This requires updating Keycloak's supported locales.

Steps to Enable Spanish in Keycloak

1. Log in to Keycloak Admin Console as an administrator.

2. Navigate to Realm Settings:

   • Select the appropriate realm.

   • Go to the "Realm Settings" section.

   • Click on the "Themes" tab.

1. Add Spanish to Supported Locales:

   • Ensure that "Internationalization" is enabled.

   • In the "Supported Locales" field, add es (for Spanish) to the list.

   • Click "Save" to apply changes.
2. Verify Language Selection in Keycloak Login Page:

   • Navigate to the Keycloak login page.

   • Ensure that Spanish appears as an option in the language selection dropdown.

3. Rebuild the Application

After adding the new language bundle, you must rebuild the code to ensure the new translations are correctly loaded into the application.

Steps to Rebuild the React Application

1. Open a terminal or command prompt.

2. Navigate to your React project directory:

cd partner-management-portal\pmp-revamp-ui

1. Install dependencies (if not already installed):

npm install

1. Build the project:

npm run build

1. Deploy the updated build to your hosting environment.

4. Verify Language Support in PMS Application

1. Open the application in a browser.

   • Select Spanish from the language options on the Keycloak login page.

   • Confirm that the UI displays the correct Spanish translations after logging in.

By following these steps, you can easily add support for any new language in your applica

Overview

PMS Portal is used by the Partners to onboard with MOSIP and manage Devices, FTM, Create API Keys and Create OIDC clients etc.

Partner Management module has two services:

• Partner Management service

• Policy Management service

The documentation here will guide you through the prerequisites required for the developer's setup.

Software setup

Below is a list of tools required in Partner Management Services:

1. JDK 11

2. Any IDE (like Eclipse, IntelliJ IDEA)

3. Apache Maven (zip folder)

4. pgAdmin

5. Postman

6. Git

7. Notepad++ (optional)

8. lombok.jar (file)

9. settings.xml (document)

Follow the steps below to set up Partner Management Services on your local system:

2. Install Apache Maven.

3. Copy the settings.xml to ".m2" folder C:\Users\<username>\.m2.

4. Install Eclipse.

5. Open the lombok.jar file and wait for some time until it completes the scan for Eclipse IDE and then click Install/Update. Specify the eclipse installation location if required by clicking the ‘Specify location…’ button. Then, click Install/Update the button to proceed.

1. Check the Eclipse installation folder C:\Users\userName\eclipse\jee-2021-12\eclipse to see if lombok.jar is added. By doing this, you will not have to add the dependency of lombok in your pom.xml file separately as it is auto-configured by Eclipse.

2. Configure the JDK (Standard VM) with your Eclipse by traversing through Preferences → Java → Installed JREs.

Code setup

Importing and building a project

1. Open the project folder partner-management-services\partner where pom.xml is present.

2. Open the command prompt from the same folder.

3. Run the command mvn clean install -Dgpg.skip=true to build the project and wait for the build to complete successfully.

4. After building a project, open Eclipse and select Import Projects → Maven → Existing Maven Projects → Next → Browse to project directory → Finish

5. This will import 5 projects into Eclipse: partner, partner-management-service, pms-common, policy-management-service and policy-validator

1. After successful importing of all the projects, update each project by right-clicking on Project → Maven → Update Project.

Environment setup

• E.g.: You can download kernel-auth-adapter.jar and add to the project Libraries → Classpath → Add External JARs → Select Downloaded JAR → Add → Apply and Close).

• Properties Files - Update application-dev.properties and bootstrap.properties files in below folder partner-management-services\partner\partner-management-service\src\main\resources to run the Partner Management Service locally

• Click the "run" option, the service will start locally on port 9109.

Policy management service also can run by following the above steps.

Partner Management Services API

• The APIs can be tested with the help of Postman or Swagger-UI.

• Swagger is an interface description language for describing restful APIs expressed using JSON. Can access Swagger-UI of partner-management-services for dev-environment from https://dev.mosip.net/v1/partnermanager/swagger-ui/index.html?configUrl=/v1/partnermanager/v3/api-docs/swagger-config and localhost from http://localhost:9109/v1/partnermanager/swagger-ui/index.html?configUrl=/v1/partnermanager/v3/api-docs/swagger-config.

• Can access Swagger-UI of policy-management-services for dev-environment from https://dev.mosip.net/v1/policymanager/swagger-ui/index.html?configUrl=/v1/policymanager/v3/api-docs/swagger-config and localhost from http://localhost:9107/v1/policymanager/swagger-ui/index.html?configUrl=/v1/policymanager/v3/api-docs/swagger-config.

• Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. It is widely used tool for API testing.

PMS Revamp Portal web application is currently compatible and certified with the following list of browsers:

Scope for Release 1.3.0-dp.1 - Compatible on standard browser size (laptop/desktop) and UI responsiveness in laptop/desktop.

Compatibility on Mobile and also on specific tablet and mobile sizes will be taken up only after Release 1.3.0-dp.1.