Overview

UI specs of Pre-Registration module are used to configure the form fields in the Demographic Details and Document Upload functionality. UI specs are saved as a JSON file with a list of fields. Each field has a set of attributes/ properties that can be configured which affects the look and feel along with the functionality of the field. Below is the list of all the properties available for each field in the UI specs:

Overview

The documentation here will guide you through the pre-requisites required for developer setup.

Software setup

Below are the list of tools required in Pre-registration

1. JDK 11

2. Any IDE (Eclipse, IntelliJ IDEA)

3. Apache Maven (zip folder)

4. pgAdmin

5. Postman

6. Git

7. (file)

8. MOSIP Pre-registration specific JARs: The version will depend on which Pre Registration branch you have cloned. If it is "release-1.2.0.1" then you can download 1.2.0.1.B1 or 1.2.0.1.B2 version of below jars whichever is available.

10. Notepad++ (optional)

Follow the steps below to setup Pre-registration on your local system

2. Clone the forked repository into your local machine.

   • git clone https://github.com/${urgithubaccname}/pre-registration.git

   • git remote add upstream https://github.com/mosip/pre-registration.git

   • git remote set-url --push upstream no_push

   • git remote -v

   • git checkout -b my-release-1.2.0.1

   • git fetch upstream

   • git rebase upstream/release-1.2.0.1

3. Inside settings.xml change local repository directory to your directory name where .m2 folder is located. E.g.: <localRepository>C:/Users/username/.m2/repository</localRepository>

4. Add settings.xml inside .m2 folder (Maven Folder). E.g.: C:\Users\username\.m2

5. Import the project in Eclipse IDE and it starts updating Maven projects configuration, refreshing workspaces, project starts building (downloading sources, javadoc).

6. Add downloaded lombok.jar to project, click on downloaded JAR and install specifying Eclipse IDE(eclipse.exe) location.

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

1. • Adding JARs to Build Path: Right click on service -> Build Path -> Configure Build Path -> click on Classpath -> Add External JARs -> Add required JARs -> Apply and close.

1. Add auth-adapter, transliteration, ref-idobjectvalidator, virusscanner, lombok JARs to pre-registration-application-service, pre-registration-datasync-service classpath.

2. Add auth-adapter, lombok JARs to pre-registration-core, pre-registration-batchjob, pre-registration-captcha-service, pre-registration-booking-service classpath.

3. Run mvn clean install -Dgpg.skip=true command to build locally and to execute test cases.

4. Update Maven dependencies: Maven syncs the Eclipse project settings with that of the pom. It downloads dependencies required for the project.

5. Build and run the Project.

6. To run the pre-registration-application-service locally without config server, update values in application.properties and bootstrap.properties:

• spring.cloud.config.uri=https://localhost:8080

• spring.cloud.config.label=develop

• spring.cloud.config.name=pre-registration

• spring.application.name=pre-registration-application-service

• spring.profiles.active=default Point below urls to a valid env which has MOSIP setup:

• mosip.base.url=https://yourenvurl

• auth-token-generator.rest.issuerUrl:https://iam.yourenvurl/auth/realms/mosip

• javax.persistence.jdbc.password: XXXXXX

• javax.persistence.jdbc.url=jdbc:postgresql://yourenvurl:5432/mosip_prereg

• mosip.batch.token.authmanager.password: XXXXXX

• mosip.iam.adapter.appid=prereg

• mosip.iam.adapter.clientsecret=XXXXXX

• auth.server.admin.issuer.uri=https://iam.yourenvurl/auth/realms/

Developer setup for MOSIP Pre-registration UI

2. Clone the forked repository into your local machine.

• git clone https://github.com/${urgithubaccname}/pre-registration-ui.git

• git remote add upstream https://github.com/mosip/pre-registration-ui.git

• git remote set-url --push upstream no_push

• git remote -v

• git checkout -b my-release-1.2.0.1

• git fetch upstream

• git rebase upstream/release-1.2.0.1

1. Install all dependencies with npm install.

2. Install Angular JS npm install -g @angular/cli.

3. Start the Angular JS server ng serve.

4. Open http://localhost:4200 to access the application.

5. You will face CORS issue since API Services are hosted on https://{env}.

Using the Angular CLI proxy solution to get around CORS issue

1. Update the API services BASE_URL in config.json:

   • config.json is found inside assets directory.

   • E.g.: C:\MOSIP\pre-registration-ui\pre-registration-ui\src\assets\config.json
2. Create a new file named proxy.conf.json:

   Location should be in C:\MOSIP\pre-registration-ui\pre-registration-ui\proxy.conf.json project folder.
3. Start the server by executing ng serve --proxy-config proxy.conf.json --ssl true.

4. Open the browser, load the app with https://localhost:4200.

Pre-registration API

2. The APIs can be tested with the help of Swagger-UI and Postman.

3. Swagger is an interface description language for describing restful APIs expressed using JSON. You can access Swagger-UI of pre-registration here:

   • Pre-registration Application service : https://{env}/preregistration/v1/application-service/swagger-ui.html

   • Pre-registration Datasync Service : https://{env}/preregistration/v1/sync/datasync-service/swagger-ui.html

   • Pre-registration Captcha service : https://{env}/preregistration/v1/captcha/swagger-ui.html

   • Pre-registration Booking service : https://{env}/preregistration/v1/appointment/booking-service/swagger-ui.html

Overview

Pre-registration module enables a resident to:

• enter demographic data and upload supporting documents,

• book an appointment for one or many users for registration by choosing a suitable registration center and a convenient time slot,

• receive appointment notifications,

• reschedule and cancel appointments.

Once the resident completes the above process, their data is downloaded at the respective registration centers prior to their appointment, thus, saving enrollment time. The module supports multiple languages.

MOSIP provides backend APIs for this module along with a reference implementation of pre-registration portal.

Pre-registration process

Create an application

• User provides consent

• User provides demographic information

• User uploads supporting documents (Proof of Address, Birth certificate, etc.)

• A pre-registration request ID known as AID is generated and provided to the user.

Note: The AID was formerly called PRID in the pre-registration context.

Book an appointment

• User selects a registration center based on postal code, geo-location, etc.

• The available slots are displayed

• An option to cancel and re-book the appointment is made available

Receiving acknowledgement notifications

• An acknowledgement is sent via email/SMS

• The user can print the acknowledgement containing AID and QR code.

• This QR code can be scanned at the in-person registration centers.

Download of pre-registration data at registration centers

• User provides the AID/ QR code at the registration center.

• The registration form gets pre-filled with the pre-registration data.

Pre-registration module

The relationship of the pre-registration module with other services is explained here. NOTE: The numbers do not signify sequence of operations or control flow

1. Fetch ID Schema details with the help of Syncdata service.

2. Fetch a new OTP for the user on the login page.

3. Log all events.

4. Pre-Registration interacts with Keycloak via kernel-auth-adapater. The Pre-Reg module communicates with endpoints of other MOSIP modules. However, to access these endpoints, a token is required. This token is obtained from Keycloak.

5. Database used by pre-reg.

6. Generate a new AID for the application.

7. Send OTP in the email/SMS to the user.

8. Registration Processor uses reverse sync to mark the pre-reg application as consumed.

9. Registration clients use Datasync service to get the pre-reg application details for a given registration center, booking date and AID.

10. Request data from MasterData service to get data for dropdowns, locations, consent forms etc..

Services

Pre-registration module consists of the following services:

• Application

• Booking

• Batchjob

• Datasync

• Captcha

For more details, refer to Pre-registration repo.

Pre-registration portal

MOSIP provides a reference implementation of the pre-registration portal that may be customized as per country needs. The sample implementation is available at reference implementation repository. For getting started with the pre-registration, refer to the Pre-registration user guide

Build and deploy

To access the build and read through the deployment instructions, refer to Pre-registration repo.

Configurations

For details related to Pre-registration configurations, refer to Pre-registration configuration.

Developer Guide

To know more about the developer setup, read Pre-registration Developers Guide.

API

Refer API Documentation.

Source code

Github repo.

Overview

This guide helps in understanding the pre-registration sample UI implementation. The pre-registration portal can be used in self-service as well as in assisted mode.

Self-service mode- In this mode, residents can pre-register themselves by accessing the pre-registration portal. They can login with their email address or phone number and fill up the demographic form, upload relevant documents to book an appointment for themselves and their family/friends. Finally, they would receive an acknowledgement along with a pre-registration ID that can be used at the registration center.

Assisted mode- When used in an assisted mode, the operator could be handling the portal and helping other residents in filling up the details and creating an application on their behalf. The languages that the operator and the resident understands, may or may not be the same. If we consider a country with linguistic diversity, the possibilities increase. In such cases, the operator might log in with a language that they are familiar with, and also select a language (data capture language) familiar to the resident for filling up the demographic form and other details.

Pre-registration process

The key steps in this process are:

• Login/create a user account

• Create an application

• Book an appointment

• Receive appointment acknowledgement

To create an application, the resident/operator can follow the steps below:

Login/create a user account

1. Open the browser and visit the pre-registration portal.

2. Select the language of your preference from the dropdown.

3. Enter your valid email address or phone number in the text box.

4. Select the Captcha field.

5. Click Send OTP to receive a One Time Password (OTP) on your provided email address or mobile number.

6. Enter the OTP and click Verify.

Note: If you have not received the One-Time Password (OTP), please click on Send to request another OTP. Enter the newly received OTP to proceed. Once your OTP has been successfully verified, you will be able to create, view, or update your pre-registration application.

Create an application

Step 1: Select the language for providing data

1. Once the OTP is verified, you will see a pop up for selecting the languages for data entry.

2. Select the languages and click Submit.

Note:

• This choice will be available only if the ID issuer has configured the usage of optional languages.

• Countries will have multiple languages some of which will be mandatory while others could be optional(regional languages). MOSIP provides a configuration using which a country can mandate the capture of demographic data in required number of languages (combination of mandatory and optional).

Step 2: Provide consent

1. On the Demographic details page, read the Terms and Conditions and select the check box to agree. This agreement is to provide consent for the storage and processing of your personal information.

2. Click Accept and proceed.

Note: User consent is mandatory for creating/updating applications. The contents on this page will be displayed in all data capture languages selected.

Step 3: Enter Demographic details

1. Enter your demographic details, which includes Name, Age/DOB, Gender, Residential Status, Address, Mobile Number, Email Id, etc.

2. You can also change or verify your demographic details in the other selected language.

3. After you have filled and verified your demographic details, click Continue.

Note: The mandatory fields/labels have a * mark. Field and button labels, error and information messages will be displayed in the user preferred language selected in the login screen. The fields displayed on this screen are configurable based on the ID schema defined by the country.

UI specs of Pre-registration module are used to configure the form fields in the Demographic Details and Document Upload functionality pages. These specs are saved as a JSON file with a list of fields.

Step 4: Upload documents

1. Select the document (e.g. Passport, Reference Identity Number, etc.) from the document drop-down list.

2. Click Browse to locate the scanned document on your machine.

3. Select the file that you want to upload.

4. When the file is uploaded successfully, the document will appear on the right side. Verify that you have uploaded the correct document.

5. Repeat the steps above to upload document(s) for each applicable document category.

6. When adding an applicant, if a newly added applicant’s Proof of Address (POA) document is same as that of the existing user’s POA, which has been already uploaded, click Same As option and select the name of the applicant.

7. Click Continue to preview your application.

Step 5: Preview data

1. To change the demographic details (Name, Age, etc.), click modify at the top-right corner adjacent to the Demographic details section.

2. To modify the uploaded documents, click modify at the bottom-right corner adjacent to the Documents Uploaded section and make changes.

3. To add a new applicant, click Add Applicant. On clicking the Add Applicant option, you will be navigated to the Demographic details page to provide Consent and proceed with providing the required demographic data and upload of documents.

4. Click Continue.

Add new application

On Your Applications page, click Create New Application to generate a new application.

Viewing applications

Once the application is created, there could be multiple statuses depending on the data filled by the user/resident or the actions performed by them. The user can view all the pre-registration applications created by them in the Dashboard. The different statuses with a brief explanation are mentioned below:

• The applications are sorted and displayed by the order of creation of application. The last application created appears first in the list.

• If the user visits the registration center and consumes the appointment, then the application will be removed from the list.

• If the appointment date has passed, the status changes to "Expired" and is retained on the dashboard for further rebooking/modification as required.

Book an appointment

Choose a registration center

• The recommended registration centers are automatically displayed based on your demographic details (Postal Code)

• On the Book Appointment page, you can find a registration center through the three options as follows:

  • Click Nearby centers to view the registration centers based on your geographical location.

  • Use the search box to find the registration center based on your search criteria.

  • Click Recommended Centers to view registration centers based on your demographic details. (Postal Code)

• Click Continue.

Note: The default display of registration centers will be based on the Postal Code of the user. To modify this setting, please update the location hierarchy in the pre-registration-default.properties file using the property: preregistration.recommended.centers.locCode.

Select an appointment time-slot

• Select your preferred date from the list of available calendar days and the number of available bookings.

• The list of available time slots for your selected date is categorized between Morning and Afternoon.

• Select your preferred time slot from the list.

• Select the particular applicant name to book an appointment (click + to add the applicant). Note: On clicking the Add Applicant option, you will be navigated to the Demographic Details page to provide Consent and proceed with providing the required demographic data/documents.

• Verify the time slot(s) as selected against the applicant name(s).

• Click Continue.

• On the confirmation pop-up, click Confirm.

• Click OK.

Receive appointment acknowledgement

• After successful completion of the Pre-registration application, you will receive an acknowledgment on the registered phone number (SMS) or email address as per details provided in the demographic form.

• The acknowledgement contains the following information: name, pre-registration ID, age/DOB, mobile number, email id and registration center details, appointment date, appointment time)

• A QR code containing the pre-registration ID is generated. This QR code can be scanned at the registration center to fetch the details to be used during the registration process.

• You can print, download, email or SMS your acknowledgment.

  • To print your acknowledgement, click Print.

  • To download your acknowledgement, click Download PDF.

• To add the additional recipient(s) to receive the acknowledgment of your application, follow these steps:

  • Click Send Email/SMS.

  • Enter the mobile number and/or enter the email ID.

  • Click Send to receive the acknowledgement on your provided e-mail address or mobile number.

Re-book appointment

1. On Your Applications page, select the check box for the applicable applicant.

2. Click Book/Modify Appointment to re-book an appointment (on the top right corner)..

3. The user can select any appointment date available and the appointment slot available

4. A user cannot re-book the appointment if the appointment booking is less than 48 hours (configurable) from the time of booking

Discard application

1. On Your Applications page, click on delete icon against pre-registration application of an applicant, a pop-up window appears on the screen.

2. Select the Discard entire application option in the pop-up window.

3. Click SUBMIT to discard your application.

Cancel appointment

1. On Your Applications page, click on delete icon against pre-registration application of an applicant, a pop-up window appears on the screen.

2. Select Cancel appointment and save the details option in the pop-up window.

3. Click SUBMIT to cancel an appointment.

Following a successful appointment cancellation, the system unlocks the time slot of the registration center to ensure that someone else can book it.