UI component for the Payment Hub EE application.
This project is based on the openMF/web-app to provide the same UX as we have for Fineract 1.x.
Ensure you have the following installed in your system:
Install angular-cli globally.
npm install -g @angular/cli@16.2.3
Clone the project locally into your system.
git clone https://github.com/openMF/ph-ee-operations-web.git
cd
into project root directory and make sure you are on the master branch.
Install the dependencies.
npm install
Before to run the app, set the environment variables as you need it, please see the environment variable details above
To preview the app, run the following command and navigate to http://localhost:4200/
.
ng serve
The application is using the demo server with basic authentication by default. The credentials for the same are:
Username - mifos
Password - password
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
You can set the parameters now using environment variables: Please modify them accordingly your needs (serverUrl, authServerUrl, etc.)
The environment variables to be set are:
PH_OPS_BACKEND_SERVER_URL
Setting for the Payment Hub server url to Operations backend services
PH_OPS_BULK_CONNECTOR_URL
Setting for the Payment Hub server url to Bulk Import Batch creation backend services
PH_OPS_BATCH_KEY
Setting for the Private Key used to sign the Bulk Import Batch creation
PH_VOU_BACKEND_SERVER_URL
Setting for the Payment Hub server url to Vouchers backend services
PH_VOU_CALLBACK_URL
Setting for the callback url to Vouchers creation process
PH_ACT_BACKEND_SERVER_URL
Setting for the Payment Hub server url to Account Management backend services
PH_PLATFORM_TENANT_ID
Setting for the Platform Tenant Identifier used in the APIs calls, Default value phdefault
PH_OAUTH_ENABLED
Boolean value to Enable or Disable the OAuth authentication
PH_OAUTH_SERVER_URL
Setting for the server url to OAuth services
PH_OAUTH_BASIC_AUTH
Boolean value to Enable or Disable the Basic Authentication for OAuth
PH_OAUTH_BASIC_AUTH_TOKEN
Setting the Authentication Token for OAuth authentication
PH_OAUTH_TYPE
Set the OAuth authentication type, currently is only supported keycloak
PH_OAUTH_REALM
For the OAuth authentication with keycloak we need to define the realm
PH_OAUTH_CLIENT_ID
For the OAuth authentication with keycloak we need to define the client identifier to be used
PH_OAUTH_CLIENT_SECRET
For the OAuth authentication with keycloak we could to define the client secret to be used
PH_DEFAULT_LANGUAGE
Setting for Languages (i18n) still under development
Default language to be used, by default en
(English US)
PH_SUPPORTED_LANGUAGES
Language list of available languages, splited by colon, like en,fr,es
There are 3 profiles at the moment:
environment.ts
environment.prod.ts
environment.kubernetes.ts
You can define various settings based on these profiles.
npm [build|server] --configuration [prod|kubernetes]
To build the application with the kubernetes profile: npm build --configuration kubernetes
It is possible to do a 'one-touch' installation of Mifos X Web App using containers (AKA "Docker"). Fineract now packs the Mifos community-app web UI in it's docker deploy.
As Prerequisites, you must have docker
and docker-compose
installed on your machine; see
Docker Install and
Docker Compose Install.
Now to run a new MifosX Web App instance you can simply:
git clone https://github.com/openMF/ph-ee-operations-web.git ; cd ph-ee-operations-web
for windows, use git clone https://github.com/openMF/ph-ee-operations-web.git --config core.autocrlf=input ; cd ph-ee-operations-web
docker-compose up -d
Access the webapp on http://localhost:4200 in your browser.
To use mocked responses please do the following modifications:
Change
login(loginContext: LoginContext) {
this.alertService.alert({ type: 'Authentication Start', message: 'Please wait...' });
this.rememberMe = loginContext.remember;
this.storage = this.rememberMe ? localStorage : sessionStorage;
this.authenticationInterceptor.setTenantId(loginContext.tenant);
let httpParams = new HttpParams();
httpParams = httpParams.set('username', loginContext.username);
httpParams = httpParams.set('password', loginContext.password);
//httpParams = httpParams.set('tenantIdentifier', loginContext.tenant);
if (environment.oauth.enabled === 'true') {
httpParams = httpParams.set('grant_type', 'password');
if (environment.oauth.basicAuth) {
this.authenticationInterceptor.setAuthorization(`Basic ${environment.oauth.basicAuthToken}`);
}
return this.http.disableApiPrefix().post(`${environment.oauth.serverUrl}/oauth/token`, {}, { params: httpParams })
.pipe(
map((tokenResponse: OAuth2Token) => {
// TODO: fix UserDetails API
this.storage.setItem(this.oAuthTokenDetailsStorageKey, JSON.stringify(tokenResponse));
this.onLoginSuccess({ username: loginContext.username, accessToken: tokenResponse.access_token, authenticated: true, tenantId: loginContext.tenant } as any);
return of(true);
})
);
} else {
return this.http.post('/authentication', {}, { params: httpParams })
.pipe(
map((credentials: Credentials) => {
this.onLoginSuccess(credentials);
return of(true);
})
);
}
}
To
login(loginContext: LoginContext) {
this.alertService.alert({ type: 'Authentication Start', message: 'Please wait...' });
this.rememberMe = loginContext.remember;
this.storage = this.rememberMe ? localStorage : sessionStorage;
this.authenticationInterceptor.setTenantId(loginContext.tenant);
let httpParams = new HttpParams();
httpParams = httpParams.set('username', loginContext.username);
httpParams = httpParams.set('password', loginContext.password);
//httpParams = httpParams.set('tenantIdentifier', loginContext.tenant);
this.onLoginSuccess({} as any);
return of(true);
}