Current situation

There is not an easy way for the community to interact with the project's developers.

Proposed solution

Enable GitHub discussions and/or add Gitter to this project as we do for the main project.

Background

We need a fast way of setting a local environment for the Sormas-Project.
We want to see if using the Sormas-Docker repository can help us with this.

Outcome

We want to investigate and document how we can use the Sormas-Docker repo to start a local Sormas environment with:

• Sormas BE (API)
• Sormas Keyclaok
• PostgreSQL DB
• (other containers that are needed)
  https://github.com/hzi-braunschweig/SORMAS-Docker

Background

The new Angular application currently supports login via the Keycloak integration.

Since a lot of Sormas installations don't use Keyclaok, we need to think about a solution of using the Sormas Rest API without Keyclaok.

Angular setup

The Angular application needs to be configured at build time with an environment variable:

• USE_LEGACY_LOGIN
  If this variable is true, the Angular application should provide a Login Screen where the user can supply his credentials.
  Upon login, the Angular application shall not store those credentials but obtain an Access Token or a Cookie from Sormas Rest.

Sormas Rest

We need to update Sormas Rest so it supports a new safe Auth mechanism.
A new endpoint shall be provided for the Angular client to log in a user. This endpoint should validate the user credentials and return:

• Option A - an access/refresh token pair
• Option B - set a session cookie on the calling client

Current status

We integrated the Angular App with Keycloak and the Rest API using OIDC (using a test BE).
We currently have a docker-compose file that is usable but needs some extra settings because the Rest API rejects Basic or Bearer Authentication.
Read more: #4

Desired state

Update the docker-compose file so the Sormas-Rest Basic and Bearer auth works.

Would be nice to have two options:

• one with Keycloak
• one without Keycloak

Modal component

We want to have a generic Modal component that supports:

• header
• content - dynamic
• footer with - action buttons - Yes / No
• action buttons names are configurable & we can emit an event on click

At this point styling is not the main concern - we will have further tasks to enhance it.

Results

We want the result of this issue to be an example in the Sormas-Angular project with a page containing a button that can toggle the modal component.

Table component

We want to have a generic table component that supports:

• client-side pagination, sorting, filtering
• server-side pagination, sorting, filtering
• column resize

We can select an open-source component that provides this or build our own.
At this point styling is not the main concern - we will have further tasks to enhance it.

Results

We want the result of this issue to be an example in the Sormas-Angular project with a page containing two tables:

• one with client-side pagination, sorting, filtering
• one with server-side pagination, sorting, filtering

Integration

Please take a look at https://github.com/hzi-braunschweig/SORMAS-Angular#auth-with-keycloak

Configuration

We should be able to configure Keyclaok with a new Client for the Angular app:
Client ID: sormas-angular
Client Protocol: openid-connect
Root URL: http://localhost:4200/
Extra scopes to call the Sormas API

Upon login, Angular app can call the Sormas API

The angular client needs to be adjusted to make a sample call to the Sormas API

Disable Material ripple effects

https://material.angular.io/components/ripple/overview#disabling-animation

Theme colors

Adjust theme colors to be the ones from the UX designs.

Components

Adjust defaults Angular Components styles to look like the ones in the UX designs.
This ticket is for the designs of the first set of components - needed for forms:

• radio
• button
• text input
• select / dropdown
• checkbox
• datepicker

More info:
https://material.angular.io/guide/theming-your-components

Background

We want to start using a component library for Sormas Angular that provides developers with a fast way of creating UI components.

Component lib requirements

• rich set of components
• good documentation
• same cross-browser look & feel
• RTL support
• well known in the OSS community

Selection

After our discussions, we decided to go with Angular Material.

Out of scope

Custom theme - this requires UX work first.

Current situation

We currently have the default Unit / Integration testing setup with the Karma (angular default). This also runs the tests in CI.
We want to decide if we use the default Angular E2E test setup (Protractor) or if we setup E2E tests with Cypress, or another solution?

Expected

• create the E2E test setup and a few sample tests
• the E2E tests should spin up the environment with docker-compose and then run the tests. Keycloak and the BE API are not mocked in those tests.

This is an umbrella issue to keep track of some of the non-functional requirements of Sormas Angular.

App interop

• there will be no app interop between the current app & the new app.
• In the future, there will be an opt-in from old to new.

Auth 

Keycloak will be used for environments with Sormas Angular.
Keep in mind - legacy login (without Keycloak) might still be required
 (currently only supported in dev mode)

Internationalization (i18n)   - default Angular approach


https://angular.io/guide/i18n

 Timezones support

Needed to adjust dates to the user's timezone.

RTL (right to left support)

RTL support is necessary.

Devices support

• Desktop
• Tablet (including low resolutions)


Offline / PWA

Would be nice.

SSR?

Still need to consider if it is really needed.

Current issue

For local development, I fixed this using a local Proxy, but for calling the API when running the solution with docker-compose we still have this:

Posible solutions

We can fix this eighter by proxy-ing the calls from Nginx to the Sormas API - then the CORS check is not done server-side, or fix it by adding the proper CORS headers for the API.

Prerequisites

#8

Outcomes

We want a new language example for an Arabic language and create functionality that for those languages the app is correctly displayed (RTL).

Changing back to a non-Arabic language should display the app LTR.

Because in Sormas different countries or settings can affect forms - we want to build those dynamically.

We want to research a prefered way of doing dynamic forms in Sormas Angular.

One way we can do this is to have a JSON file with the form configuration (including validation config) and use a library to apply it.

We want the result of this issue to be an example in the Sormas-Angular project with a page containing a Dynamic form. Changing the configuration file we can see the form elements and validations on the form are changed.

Break down the current design in smaller tasks to be able to start implementing them.