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/[email protected]
- 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:
- DEV (default):
environment.ts
- PROD:
environment.prod.ts
- KUBERNETES:
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);
}
#Auto