# FE Tech Assessment

# Introduction
The primary objective of this assessment is to provide you with a chance to showcase your frontend chops within a context relevant to some of the work we're doing at TBD. This README will (hopefully) provide you with all of the context needed for you understand what you'll be building, and instructions for how submit what you've built. Don't worry if some of this is confusing. We'll have a chance to meet and discuss all of it before you dive in.

# Context

The current state of the web has a heavy reliance on forms. Individuals encounter forms all over the web, particularly when they’re signing up for new apps or services. Today, creating a bank account online may look something like this:


This form is then submitted to the bank’s backend server, and the user supplied inputs are sent out to external parties (e.g. IDV vendors) to verify. If all checks out, your account is created.

Account creation / registration (often called onboarding) processes like the one described above are one of the largest pain points for individuals and companies. Individuals despise filling out large forms because it’s confusing and time consuming which leads to a high volume of drop-off during registration.

Using Verifiable Credentials in place of traditional forms, when possible, has the potential to drastically reduce onboarding friction. **The objective of this assessment is to build a UI that leverages Verifiable Credentials instead of traditional forms, where possible.**

Issuance, verification and, presentation of Verifiable Credentials is a dense and technical area comprised of several specifications and standards. We've intentionally stripped away the vast majority of that complexity and kept only what we feel is necessary for the sake of the assessment. So, definitely don't worry about not having any prior experience with or exposure to various cryptographic signature schemes or a deep understanding of any of the relevant specs. This README contains an orientation of everything you need to know.

# Orientation

Alright, so here's the TL;DR so far - forms suck. Verifiable Credentials might be better. Let's build a UI that leverages Verifiable Credentials. Here's what the general flow looks like

sequenceDiagram

  autonumber
  participant A as Alice
  participant C as Browser
  participant BE as https://somesite.org
  
  A->>A: visit https://somesite.org
  C->>BE: request https://somesite.org
  BE->>C: html/css/js
  C->>C: render
  A->>C: Click Signup
  C->>BE: Give me the Credential Manifest
  BE->>C: Credential Manifest
  C->>C: Process Credential Manifest against available VCs
  C->>C: Render Human Verification Prompt
  A->>C: Click Yes
  C->>BE: Submit Verifiable Credentials

You'll be focused on steps 8-11. We'll give you what you need for the rest.

Cool, now what the eff is a Credential Manifest, and where do these magical Verifiable Credentials come from?

## `CredentialManifest`
a Credentials Manifest is a codified declaration of what verifiable credentials the asking party is requesting from another party. More simply put, a Credential Manifest states "Yo, here are the credentials i need from you." e.g.

{
  "name": "KYC Requirements",
  "purpose": "Cash App is legally required to collect certain information before you can use the app",
  "input_descriptors": [
    {
      "id": "kyc1",
      "name": "Personal Info",
      "constraints": {
        "fields": [
          {
            "id": "givenName",
            "path": [
              "$.vc.credentialSubject.givenName"
            ],
            "filter": {
              "type": "string",
              "pattern": "[a-zA-Z \\-\\.].+"
            }
          },
          {
            "id": "additionalName",
            "path": [
              "$.vc.credentialSubject.additionalName"
            ],
            "optional": true,
            "filter": {
              "type": "string",
              "pattern": "[a-zA-Z \\-\\.].+"
            }
          },
          {
            "id": "familyName",
            "path": [
              "$.vc.credentialSubject.familyName"
            ],
            "filter": {
              "type": "string",
              "pattern": "[a-zA-Z \\-\\.].+"
            }
          }
        ]
      }
    }
  ]
}

In simple terms, this Credential Manifest is stating that it needs a credential that contains a first name, middle name, and last name.

## Verifiable Credentials
So, what on earth is a Verifiable Credential? for the sake of this assessment, you can consider them as "independently verifiable data containers" or.. far more simply put, a JSON object with some properties in it. e.g.

{
  "vc": {
    "@context": ["https://www.w3.org/2018/credentials/v1"],
    "type": ["DriversLicense"],
    "issuer": "did:janky:texas-dps",
    "issuanceDate": "2022-09-29T00:00:00Z",
    "credentialSchema": {
      "id": "https://texas.gov/DriversLicense",
    },
    "credentialSubject": {
      "id": "did:janky:alice",
      "driversLicenseNumber": "12345678",
      "issuedDate": "2016/10/23",
      "dateOfBirth": "1988/02/38"
      "drivingClass": "C",
      "givenName": "Randy",
      "familyName": "McJanky",
      "height": "5ft 4in",
      "gender": "M",
      "eyeColor": "BRO"
    }
  }
}

The above example is of a Drivers License as a Verifiable Credential. Just a JSON object with a `vc` property that contains some metadata about the credential i.e. `type`, `issuer`, `issuanceDate` in addition to data specific to an instance of a drivers license credential which you can find within the `credentialSubject` object.

Upon closer inspection, you'll notice that the Verifiable Credential example satisfies the requirements declared in the Credential Manifest example.

# Instructions
This repo includes a sets of inputs which includes:
- A Credential Manifest
- A set of Verifiable Credentials

your task is to build the logic and UI to fulfill the requirements codified in the respective credential manifest. You're free to use whatever frameworks or libraries you want. We've provided a list of libraries that may be helpful below. Using them is not a requirement.

The UI aspect of this assessment has been left intentionally open-ended. There's really no right answer here with respect to how/what a user is engaged or presented they're presented with. This puts you in the driver's seat to decide what UX makes sense to you.

## Logistics
- Fork the repo
- Implement your submission
- Open a PR

## What we'll be looking for
- Does the submission work? Can I start it and use it?
- Is the code easy to follow? is it well documented?

:warning: TODO: Finish writing

# :warning: NOT MEANT FOR CANDIDATE

## Evaluation Criteria
:warning: TODO: Finish writing

## Cold Start, No Matches

### VCs

NONE

### CM

{
    "name": "KYC Requirements",
    "purpose": "TBD. i donno rn",
    "input_descriptors": [
      {
        "id": "kyc1",
        "name": "Personal Info",
        "constraints": {
          "subject_is_issuer": "required"
          "fields": [
            {
              "id": "kycSchema",
              "path": [
                "$.vc.credentialSchema.id"
              ],
              "filter": {
                "type": "string",
                "const": "https://compliance-is-kewl.com/json-schemas/kyc.json"
              }
            },
            {
              "id": "givenName",
              "path": [
                "$.vc.credentialSubject.givenName"
              ],
              "filter": {
                "type": "string",
                "pattern": "[a-zA-Z \\-\\.].+"
              }
            },
            {
              "id": "additionalName",
              "path": [
                "$.vc.credentialSubject.additionalName"
              ],
              "filter": {
                "type": "string",
                "pattern": "[a-zA-Z \\-\\.].+"
              }
            },
            {
              "id": "familyName",
              "path": [
                "$.vc.credentialSubject.familyName"
              ],
              "filter": {
                "type": "string",
                "pattern": "[a-zA-Z \\-\\.].+"
              }
            },
            {
              "id": "birthDate",
              "path": [
                "$.vc.credentialSubject.birthDate"
              ],
              "filter": {
                "type": "string",
                "format": "date"
              }
            },
            {
              "id": "postalAddress",
              "path": [
                "$.vc.credentialSubject.postalAddress"
              ],
              "filter": {
                "type": "string"
              }
            },
            {
              "id": "taxID",
              "path": [
                "$.vc.credentialSubject.taxID"
              ],
              "filter": {
                "type": "string"
              }
            }
          ]
        }
      }
    ]
}

## Multiple Matches
Signing up for CashApp
- Input Descriptor: 2 VCs: `Passport || DL && Phone Number`
- VCs in Possession: Library Card, Passport, Email Address, College Degree, Phone #

### VCs

#### Passport

{
  "vc": {
    "@context": ["https://www.w3.org/2018/credentials/v1"],
    "type": ["USPassport"],
    "issuer": "did:janky:usgov",
    "issuanceDate": "2022-09-29T00:00:00Z",
    "credentialSchema": {
      "id": "https://official.gov/Passport",
    },
    "credentialSubject": {
      "id": "did:janky:alice",
      "givenName": "Randy",
      "familyName": "McJanky",
      "birthDate": "1988-03-28",
      "passportNumber": "123456789"
    }
  }
}

### DL

{
  "vc": {
    "@context": ["https://www.w3.org/2018/credentials/v1"],
    "type": ["DriversLicense"],
    "issuer": "did:janky:texas-dps",
    "issuanceDate": "2022-09-29T00:00:00Z",
    "credentialSchema": {
      "id": "https://texas.gov/DriversLicense",
    },
    "credentialSubject": {
      "id": "did:janky:alice",
      "driversLicenseNumber": "12345678",
      "issuedDate": "2016/10/23",
      "dateOfBirth": "1988/02/38"
      "drivingClass": "C",
      "firstName": "Randy",
      "lastName": "McJanky",
      "height": "5ft 4in",
      "gender": "M",
      "eyeColor": "BRO"
    }
  }
}

### Library Card

{
  "vc": {
    "@context": ["https://www.w3.org/2018/credentials/v1"],
    "type": ["LibraryCard"],
    "issuer": "did:janky:some-municipality",
    "issuanceDate": "2022-09-29T00:00:00Z",
    "credentialSchema": {
      "id": "https://somecity.gov/LibraryCard",
    },
    "credentialSubject": {
      "id": "did:janky:alice",
      "libraryCardNumber": "ABCD-EFGH-1234-5678"
    }
  }
}

### Credential Manifest

{
  "presentation_definition": {
    "id": "32f54163-7166-48f1-93d8-ff217bdb0653",
    "submission_requirements": [{
      "name": "Citizenship Information",
      "rule": "pick",
      "count": 1,
      "from": "A"
    }, {
      "name": "Phone Number",
      "rule": "pick",
      "count": 1,
      "from": "B"
    }],
    "input_descriptors": [
      {
        "id": "citizenship_input_1",
        "name": "Driver's License",
        "group": ["A"],
        "constraints": {
          "fields": [
            {
              "path": ["$.credentialSchema.id", "$.vc.credentialSchema.id"],
              "filter": {
                "type": "string",
                "const": "https://feds.gov/DriversLicense"
              }
            },
            {
              "path": ["$.issuer", "$.vc.issuer", "$.iss"],
              "purpose": "We can only accept digital driver's licenses issued by national authorities of member states or trusted notarial auditors.",
              "filter": {
                "type": "string",
                "pattern": "did:janky:texas-dps|did:jank:oklahoma-dps"
              }
            },
            {
              "path": ["$.credentialSubject.dob", "$.vc.credentialSubject.dob", "$.dateOfBirth", "$.credentialSubject.dateOfBirth", "$.vc.credentialSubject.dateOfBirth"],
              "filter": {
                "type": "string",
                "format": "date"
              }
            }
          ]
        }
      },
      {
        "id": "citizenship_input_2",
        "name": "US Passport",
        "group": ["A"],
        "constraints": {
          "fields": [
            {
              "path": ["$.credentialSchema.id", "$.vc.credentialSchema.id"],
              "filter": {
                "type": "string",
                "const": "https://official.gov/Passport"
              }
            },
            {
              "path": ["$.credentialSubject.birth_date", "$.vc.credentialSubject.birth_date", "$.birth_date"],
              "filter": {
                "type": "string",
                "format": "date"
              }
            }
          ]
        }
      },
      {
        "id": "phone_number_input_1",
        "name": "US Phone Number",
        "group": ["B"],
        "constraints": {
          "fields": [
            {
              "path": ["$.issuer", "$.vc.issuer", "$.iss"],
              "purpose": "We use your phone number to verify your identity",
              "filter": {
                "type": "string",
                "pattern": "did:janky:att|did:jank:verizon|did:jank:sprint|did:jank:tmobile"
              }
            }
          ]
        }
      },
      {
        "id": "phone_number_input_2",
        "name": "US Phone Number",
        "group": ["B"],
        "constraints": {
          "subject_is_issuer": "required",
          "fields": [
            {
              "id": "phoneNumber",
              "path": [
                "$.vc.credentialSubject.phoneNumber"
              ],
              "filter": {
                "type": "string",
                "pattern": "^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$"
              }
            }
          ]
        }
      }
    ]
  }
}