Redesign of the desktop browser extension
Ability to export passwords

Updating a library
Changing "Contact Us" URL

# yoti-upm-browser

Universal Password Manager browser extension code

The codebase consists of three parts:

- **Content script** runs on every page which loaded in the browser and interact with them
- **Popup pages** contains the extension settings and feature pages
- **Background script** running in the background and orchestrating communication between the different components and the backend

### Content script

Responsible to scan all the loaded pages in the browser and search for username and password fields. If field is found then tries get the user info from the server to fill it out the form and places the yoti logo inside form field. Clicking on the icon inside the form fields should show a context menu for the page helping the user to fill out the forms with the proper values.

### Popup pages

Main entry point to UPM. It authenticates the user, shows the QR Code, the password generator page, list of stored pwd, etc...

### Background script

One instance is running inside of the browser and is responsible for the communication between the popup, the content script and servers. Handles:

- sesssion timeout
- communication with the backend services (content cloud, channel service)
- hook into webrequests
- sends messages between the content script and popup pages

## Development notes

This application uses preact with `preact-compat`.

`babel-module-resolver` is used to not overuse relative paths (`../../../../../`).
Instead @aliases are provided.

List of current aliases:

- @shared: ./src/shared,
- @utils: ./src/shared/utils,
- @components: ./src/shared/components,
- @popup: ./src/popup

Example usage:
`import SomeComponent from '@components/SomeComponent';`

To modify aliases change `.babelrc` and `jsconfig.json` files.

_Note: `@yoti` is not an alias, but an npm module!_

### Coding style

- Linting suggestions with `eslint` - airbnb-based rules
- Auto-formatter with `prettier`, applied at:
- pre-commit, only for the staged files (see `lint-staged`)
- at save (if you have prettier extension inside your code editor and `formatOnSave` set to true)

**Note** More strict CSS rules could be applied with `stylelint`.

### Before first run:

- install bower globally (`npm install -g bower`)
- `npm ci`
- `bower update`
- `node_modules/gulp/bin/gulp.js proto-compile` _(This will genereate `popup/generated/*` files)_

### Build

- node_modules/gulp/bin/gulp.js --env <staging/preprod/production/test> --browser <firefox/chrome> --cc <content_cloud_url> --cs <channel_service_url> --portal <portal_url> --code <code_url> --watch

##### parameters

- --watch: optional, will run build in watch mode (rebuild automatically whenever files change)
- --env: optional, if not provided the default is development. values: staging/preprod/production/test
- --browser: for which browser to build. The default is chrome. values: firefox/chrome
- --cc: content cloud url. Must be set according to environment
- --cs: channel service url. Must be set according to environment
- --portal: portal url. It is now the same across environments
- --code: yoti code site url. Must be set according to environment

### Production build

Production build takes the pre-prod build from concourse and updates the configuration to production.

- node_modules/gulp/bin/gulp.js create-prod-release --cc <content_cloud_url> --ppd <pre_prod_zip_input> --prod <prod_output> --cs <channel_service_url> --portal <portal_url> --code <code_url>

##### parameters

- --ppd: path to pre-prod zip file used as input
- --prod: path to prod output zip file
- --browser: for which browser to build. values: firefox/chrome
- --cc: content cloud url. Must be set according to environment
- --cs: channel service url. Must be set according to environment
- --portal: portal url. It is now the same across environments.
- --code: yoti code site url. Must be set according to environment

### Run tests

- npm test

You can also debug a specific test with:

- `node --inspect-brk node_modules/.bin/jest --runInBand YOUR_TEST.js --config jest-config.json`

The chrome extension **Node.js V8 --inspector Manager** can then automatically open a Chrome DevTools tab for you.
Breakpoints in your test can be added with `debugger`

## Other gulp tasks

### Generate change log

Generated changelog from the commit names. Gets the ticket number from the commit names, the tries to grab the ticket from jira

- node_modules/gulp/bin/gulp.js change-log --from <tag/commit_hash> --to <tag/commit_hash> --username <jira_username> --password <jira_password>

##### parameters

- --from: the start commit hash or tag name (for example: 1.0.1)
- --to: optional and the default is HEAD. The end commit hash or tag name (for example: 1.0.2)
- --username: username for jira
- --password: password for jira