Inji Web is built using tailwind CSS library.

Below sections provides instructions on how themes can be customized in Inji Web application.

Steps:

InjiWeb uses two different files to handle the customization in UI.

1. tailwind.config.js:

Here, properties related to the font and colors for each component is maintained.

```jsx
/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'selector',
    content: [
        "./src/**/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {
            fontFamily:{
                base: 'var(--iw-font-base)',
            },
            colors: {
                iw: {
                    background: 'var(--iw-color-background)',
                    header: 'var(--iw-color-header)',
                    footer: 'var(--iw-color-footer)',
                    title: 'var(--iw-color-title)',
                    subTitle: 'var(--iw-color-subTitle)',
                    searchTitle: 'var(--iw-color-searchTitle)',
                    primary: 'var(--iw-color-primary)',
                    helpAccordionHover: 'var(--iw-color-helpAccordionHover)',
                    shadow: 'var(--iw-color-shadow)',
                    spinningLoaderPrimary: 'var(--iw-color-spinningLoaderPrimary)',
                    spinningLoaderSecondary: 'var(--iw-color-spinningLoaderSecondary)',
                    navigationBar: 'var(--iw-color-navigationBar)',
                    languageGlobeIcon: 'var(--iw-color-languageGlobeIcon)',
                    languageArrowIcon: 'var(--iw-color-languageArrowIcon)',
                    languageCheckIcon: 'var(--iw-color-languageCheckIcon)',
                    closeIcon: 'var(--iw-color-closeIcon)',
                    searchIcon: 'var(--iw-color-searchIcon)',
                    tileBackground: 'var(--iw-color-tileBackground)',
                    shieldSuccessIcon: 'var(--iw-color-shieldSuccessIcon)',
                    shieldErrorIcon: 'var(--iw-color-shieldErrorIcon)',
                    shieldLoadingIcon: 'var(--iw-color-shieldLoadingIcon)',
                    shieldSuccessShadow: 'var(--iw-color-shieldSuccessShadow)',
                    shieldErrorShadow: 'var(--iw-color-shieldErrorShadow)',
                    shieldLoadingShadow: 'var(--iw-color-shieldLoadingShadow)',
                }
            }
        },
    },
    plugins: [require('tailwindcss-rtl')],
}

```

2. index.css

    * This file maintains the css properties for each theme in the css variables.
    * During the deployment, the theme properties will get applied based on the theme selected.

```jsx

@layer base {
    :root {
        --iw-font-base: "Inter", sans-serif;
        --iw-color-background: #FFFFFF;
        --iw-color-header: #000000;
        --iw-color-shieldLoadingIcon: #ff914b;
        --iw-color-shieldSuccessShadow: #f1f7ee;
        --iw-color-shieldErrorShadow: #FEF2F2;
        --iw-color-shieldLoadingShadow: #f6dfbe;
    }
    .purple_theme {
        --iw-font-base: "Gentium Plus", serif;
        --iw-color-background: #bcaaf3;
        --iw-color-header: #8f69ec;
        --iw-color-shieldErrorIcon: #4518de;
        --iw-color-shieldLoadingIcon: #5b32f1;
        --iw-color-shieldSuccessShadow: #f1f7ee;
        --iw-color-shieldErrorShadow: #FEF2F2;
        --iw-color-shieldLoadingShadow: #f6dfbe;
    }
}
```

Setting Defaults for Inji Web Application :

In the env.config.js file, below properties is used to customize the application during the deployment.

```jsx
window._env_ = {
		...
		DEFAULT_LANG: "en",
    DEFAULT_THEME: "",
    DEFAULT_TITLE: "Inji Web",
    ...
};
```

DEFAULT_THEME: This property helps you to customize the theme, currently Inji Web Supports two different Themes

1. Default Theme - “”
2. Purple Theme - “purple_theme”

DEFAULT_LANG: - This property helps you to specify the default language during the deployment.

DEFAULT_TITLE: - This property helps you to specify the default title of the INJIWEB during the deployment.

Inji Web offers multi-lingual support. At present, 3 Indian and 3 international Languages are supported.

1. English

2. Arabic

3. French

4. Tamil

5. Hindi

6. Kannada

Steps to support a new language

1. Under locales folder, localization of a particular language JSON file has to be added.

2. Language JSON has to be imported in i18n.ts and load the resources to i18next as follows:

• import ta from './locales/ta.json';

• const resources = { en, fr, ar, hi, kn, ta };

1. Ensure the language display mapping is done in the LanguagesSupported variable in i18n.ts

   Copy

   export const LanguagesSupported: LanguageObject[] = [
       {label: "English", value: 'en'},
       {label: "தமிழ்", value: 'ta'},
       {label: "ಕನ್ನಡ", value: 'kn'},
       {label: "हिंदी", value: 'hi'},
       {label: "Français", value: 'fr'},
       {label: "عربي", value: 'ar'}
   ]

2. To use with react, must include the key with the 't' function <Text>{t('editLabel')}</Text>

About libraries

Below specified libraries are used in the Inji Web react project to support localization:

1. i18next: i18next is an internationalization framework. It provides the standard i18n features such as plurals, context, interpolation, and format. It provides a complete solution to localize products in the web.

2. react-i18next: react-i18next is a set of components, hooks, and plugins that sit on top of i18next, and is specifically designed for React.

Inji Web currently provides support for following credential providers:

Download VC using OpenID for VC Issuance Flow (eSignet)

• National ID

• Insurance

To set up a new provider that can issue VC, it can be accomplished by making a few configuration changes.

Steps:

1. The configuration details can be found in the mimoto-issuers-config.json property file. This file is maintained separately for each deployment environment. In this repository, each environment's configuration is stored in a dedicated branch specific to that environment.

Refer to of Collab environment.

These values will be used by Inji Wallet via Mimoto. Mimoto exposes APIs which is used by the Inji Wallet application to fetch, store the issuers and their configurations in the local storage.

• API used to fetch issuers: https://api.mosip.io/v1/mimoto/residentmobileapp/issuers

• API used to fetch issuer's configuration: https://api.mosip.io/v1/mimoto/residentmobileapp/issuers/${issuerId}

1. In mimoto-issuers-config.json, new providers can be added as per the well-known schema defined by OpenID4VCI standards.

After adding the provider in configuration, it will be displayed on the UI on Add new card screen.

• If new provider supports protocol, it is recommended to use issuerMachine.ts and EsignetMosipVCItemMachine.ts for workflow to download VC.

• If it doesn't support OpenID4VCI protocol, new state machine needs to be added. Please refer to issuerMachine.ts and EsignetMosipVCItemMachine.ts.

1. At present, Inji Wallet supports verification of VCs which has RSA proof type. If VC is issued with any other proof type, verification will fail and VC will not be downloaded. To bypass this VC verification, we need to use issuer id as "Sunbird".

Refer https://github.com/mosip/mosip-config/blob/collab1/mimoto-issuers-config.json#L71 as reference. Here, credential_issuer should be "Sunbird" and then add all the configuration.

1. Token endpoint should also use same issuer id. Refer https://github.com/mosip/mosip-config/blob/collab1/mimoto-issuers-config.json#L143

2. Onboarding Mimoto as OIDC Client for a new Issuer:

• Mimoto OIDC client is now added as an optional partner, which can be onboarded through partner onboarder as per requirement.

• Client ID is created randomly by using the PMS API, and there is no client Secret for that.

• Clients can be renewed upon request, however, this will require some manual adjustments. It is recommended to create a client only once per environment as they do not expire.

• Modifications were made to the install.sh script within the Mimoto software, along with adjustments to the helm charts in the Mimoto repository, in order to facilitate the storage and mounting of the oidckeystore.p12 file.

• For Onboarding the new issuer, the same steps have to be followed and p12 has to be generated.

• Once the p12 file is generated, the existing keystore file should be exported from the Mimoto pod. The newly created p12 file must then be imported and remounted in the Mimoto POD.

Countries have the option to customize Inji Web as per their requirements. Refer to the documents below for more information on the same.

The following customizations are available in Inji Web: