Whitelabel Guide

The Landing Page

1. Drop a new logo in the images folder and update the import in config.js. If the logo needs to be resized, tweak the styles in Header.js

2. The logo link-off URL can be changed in config.js (home.logoLink)

3. The app name is retrieved from home.name in config.js

4. Edit index.html to change the page title and add meta tags

5. Replace favicon.png with your own favicon

Flows

uPortlandia supports one Registration flow and multiple Service flows. The Registration flow can be configured by changing the registration object in config.js.

Registration Form

The form is generated by parsing the registration.form json. Each field is described like so:

// config.js
firstName: {
  label: "First Name",
  defaultValue: "",
  type: "text",
  required: true
}

type can be one of text, dropdown, date or tnc (Terms and conditions checkbox).

Validation

A custom validation method, named isValid can be added to the field json. registration.form.dob is an example of how to use isValid.

If you wish to change the parse logic, check out Form.js.

Services

Add as many Services as you like in config.js.

Example:

// config.js
const PHARMACY = {
  id: "PHARMACY",
  name: "Prescription Drug",
  displayName: "pharmacyDisplayName",
  icon: PharmacyIcon,
  entity: "Your Health Medical Center",
  description: "pharmacyDescription",
  url: "/pharmacy",
  claim: "Prescription Drug",
  steps: [
    "pharmacyStep1",
    "pharmacyStep2",
    "pharmacyStep3"
  ],
  details: [
    "pharmacyDetail1"
  ],
  claimData: {
    "Prescription Drug": "Yes"
  }
}

Here, pharmacyDisplayName, pharmacyStep1, pharmacyStep2, ... are string IDs defined in the i18 resource bundles i18-en.js and i18-es.js.

claimData is the Verified Credential which is issued on the successful completion of the Service flow.

Each Service may depend on several Claims or other Services. Dependencies needs to be defined as such:

// config.js
PHARMACY.requiredClaims = [FIRST_NAME, LAST_NAME, POLICY_NUMBER, GRADUATION_YEAR, DEPENDENCIES];
PHARMACY.requiredServices = [CITY_ID, INSURANCE, DIPLOMA];

Combine all Services into the SERVICES object:

// config.js
export const SERVICES = {
  CITY_ID, DIPLOMA, COMPANY, INSURANCE, PHARMACY, TRANSPORT, MUSEUM
}

Translation Tables

uPortlandia uses i18 translation tables for all static text. Support for English and Español exists out of the box. To make changes, edit i18-en.js and i18-es.js files.

For example:

// i18-en.js
{
  "The City of uPortlandia": "Cytherea"
}

Replaces all occurrences of 'The City of uPortlandia' with 'Cytherea'.

Preparing to Deploy

uPortlandia is built to be deployed to AWS S3 and Lambda. If you don't have an AWS account, uPortlandia works just fine with an AWS Always Free Account

1. Issuing Entities

Each Service required an Issuer Entity with its own Private Key and DID. This is automatically created for you! All you need to do is populate the ISSUER_PROFILES array in setup_config.js and drop a logo image in the src/images folder. Here is a sample:

// setup_config.js
[{
  id: "SERVICE_1",
  name: "Entity 1 Name",
  url: "https://your.domain",
  profileImage: "src/images/logo1.png"
}, {
  id: "SERVICE_2",
  name: "Entity 2 Name",
  url: "https://your.domain",
  profileImage: "src/images/logo2.png"
}]

2. Sentry DSN

If you use Sentry, update the value of SENTRY_DSN in config.js. Set it to an empty string otherwise.

3. Themes

The color palette can be tweaked in theme.js.

Initial Setup

yarn run setup --env prod

Build & Deploy

yarn deploy:static --env prod
yarn deploy:api --env prod

Custom Domains

If you have a custom domain CNAME-mapped to the S3 bucket, add them to setup_config.js

The README has more details about the development and build process.