Merge remote-tracking branch 'upstream/main' into feat/39

2026-10-10 10:29:17 +00:00 · 2022-11-28 12:24:20 +09:00
parent 2c1398e71c c4711fc328
commit 914a78fb15
174 changed files with 23100 additions and 20563 deletions
@@ -0,0 +1,22 @@
+name: Close inactive issues
+on:
+  schedule:
+    - cron: "30 1 * * *"
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v4
+        with:
+          days-before-issue-stale: 30
+          days-before-issue-close: 14
+          stale-issue-label: "stale"
+          stale-issue-message: "This issue is stale because it has been open for 30 days with no activity."
+          close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale."
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
@@ -10,7 +10,7 @@
  <a href="https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g">Slack</a> |
  <a href="https://infisical.com/signup">Infisical Cloud</a> |
  <a href="https://infisical.com/docs/self-hosting/overview">Self-Hosting</a> |
-  <a href="https://infisical.com/docs/gettingStarted">Docs</a> |
+  <a href="https://infisical.com/docs/getting-started/introduction">Docs</a> |
  <a href="https://www.infisical.com">Website</a>
 </h4>

@@ -31,11 +31,11 @@
 **[Infisical](https://infisical.com)** is an open source, E2EE tool to help teams manage and sync environment variables across their development workflow and infrastructure. It's designed to be simple and take minutes to get going.

 - **User-Friendly Dashboard** to manage your team's environment variables within projects
- **[Language-Agnostic CLI](https://infisical.com/docs/CLI)** that pulls and injects environment variables into your local workflow
- **[Complete control over your data](https://infisical.com/docs/self_host_overview)** - host it yourself on any infrastructure
+- **[Language-Agnostic CLI](https://infisical.com/docs/cli/overview)** that pulls and injects environment variables into your local workflow
+- **[Complete control over your data](https://infisical.com/docs/self-hosting/overview)** - host it yourself on any infrastructure
 - **Navigate Multiple Environments** per project (e.g. development, staging, production, etc.)
 - **Personal/Shared** scoping for environment variables
- **[Integrations](https://infisical.com/docs/Heroku)** with CI/CD and production infrastructure (Heroku available, more coming soon)
+- **[Integrations](https://infisical.com/docs/integrations/heroku)** with CI/CD and production infrastructure (Heroku available, more coming soon)
 - 🔜 **1-Click Deploy** to Digital Ocean and Heroku
 - 🔜 **Authentication/Authorization** for projects (read/write controls soon)
 - 🔜 **Automatic Secret Rotation**
@@ -49,12 +49,6 @@ And more.

 To quickly get started, visit our [get started guide](https://infisical.com/docs/getting-started/introduction).

-## Stay Up-to-Date
-
-Infisical officially launched as v.1.0 on November 21st, 2022. However, a lot of new features are coming very quickly. Watch **releases** of this repository to be notified about future updates:
-
-![infisical-star-github](https://github.com/Infisical/infisical/blob/main/.github/images/star-infisical.gif?raw=true)
-
 ## What's cool about this?

 Infisical is simple, E2EE, and (soon to be) complete.
@@ -65,12 +59,10 @@ We're on a mission to make secret management more accessible to everyone — tha

 If you care about efficiency and security, then Infisical is right for you.

-Need any integrations or want a new feature? Feel free to [create an issue](https://github.com/Infisical/infisical/issues) or [contribute](https://infisical.com/docs/contributing) directly to the repository.
+Need any integrations or want a new feature? Feel free to [create an issue](https://github.com/Infisical/infisical/issues) or [contribute](https://infisical.com/docs/contributing/overview) directly to the repository.

 ## Contributing

-For full documentation, visit [infisical.com/docs](https://infisical.com/docs).
-
 Whether it's big or small, we love contributions ❤️ Check out our guide to see how to [get started](https://infisical.com/docs/contributing/overview).

 Not sure where to get started? [Book a free, non-pressure pairing sessions with one of our teammates](mailto:[email protected]?subject=Pairing%20session&body=I'd%20like%20to%20do%20a%20pairing%20session!)!
@@ -79,7 +71,7 @@ Not sure where to get started? [Book a free, non-pressure pairing sessions with

 - [GitHub Discussions](https://github.com/Infisical/infisical/discussions) for help with building and discussion.
 - [GitHub Issues](https://github.com/Infisical/infisical-cli/issues) for any bugs and errors you encounter using Infisical.
- [Community Slack](https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA) for hanging out with the community and quick communication with the team.
+- [Community Slack](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g) for hanging out with the community and quick communication with the team.

 ## Status

@@ -89,13 +81,19 @@ Not sure where to get started? [Book a free, non-pressure pairing sessions with

 We're currently in Public Alpha.

+## Stay Up-to-Date
+
+Infisical officially launched as v.1.0 on November 21st, 2022. However, a lot of new features are coming very quickly. Watch **releases** of this repository to be notified about future updates:
+
+![infisical-star-github](https://github.com/Infisical/infisical/blob/main/.github/images/star-infisical.gif?raw=true)
+
 ## Integrations

 We're currently setting the foundation and building integrations so secrets can be synced everywhere. Any help is welcome! :)

- [x] Docker
- [x] Docker Compose
- [x] Heroku
+- [x] [Docker](https://infisical.com/docs/integrations/docker)
+- [x] [Docker Compose](https://infisical.com/docs/integrations/docker-compose)
+- [x] [Heroku](https://infisical.com/docs/integrations/heroku)
 - [ ] Vercel
 - [ ] Kubernetes
 - [ ] AWS
@@ -121,4 +119,4 @@ Looking to report a security vulnerability? Please don't post about it in GitHub
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->

-<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/vlad-matsiiako"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a>
+<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a>
@@ -31,6 +31,8 @@
        "query-string": "^7.1.1",
        "rimraf": "^3.0.2",
        "stripe": "^10.7.0",
+        "swagger-jsdoc": "^6.2.5",
+        "swagger-ui-express": "^4.6.0",
        "tweetnacl": "^1.0.3",
        "tweetnacl-util": "^0.15.1",
        "typescript": "^4.8.4"
@@ -43,6 +45,8 @@
        "@types/jsonwebtoken": "^8.5.9",
        "@types/node": "^18.11.3",
        "@types/nodemailer": "^6.4.6",
+        "@types/swagger-jsdoc": "^6.0.1",
+        "@types/swagger-ui-express": "^4.1.3",
        "@typescript-eslint/eslint-plugin": "^5.40.1",
        "@typescript-eslint/parser": "^5.40.1",
        "eslint": "^8.26.0",
@@ -70,6 +74,46 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@apidevtools/json-schema-ref-parser": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.1.0.tgz",
+      "integrity": "sha512-teB30tFooE3iQs2HQIKJ02D8UZA1Xy1zaczzhUjJs0CymYxeC0g+y5rCY2p8NHBM6DBUVoR8rSM4kHLj1WE9mQ==",
+      "dependencies": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.6",
+        "call-me-maybe": "^1.0.1",
+        "js-yaml": "^4.1.0"
+      }
+    },
+    "node_modules/@apidevtools/openapi-schemas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@apidevtools/openapi-schemas/-/openapi-schemas-2.1.0.tgz",
+      "integrity": "sha512-Zc1AlqrJlX3SlpupFGpiLi2EbteyP7fXmUOGup6/DnkRgjP9bgMM/ag+n91rsv0U1Gpz0H3VILA/o3bW7Ua6BQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@apidevtools/swagger-methods": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-methods/-/swagger-methods-3.0.2.tgz",
+      "integrity": "sha512-QAkD5kK2b1WfjDS/UQn/qQkbwF31uqRjPTrsCs5ZG9BQGAkjwvqGFjjPqAuzac/IYzpPtRzjCP1WrTuAIjMrXg=="
+    },
+    "node_modules/@apidevtools/swagger-parser": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-parser/-/swagger-parser-10.0.2.tgz",
+      "integrity": "sha512-JFxcEyp8RlNHgBCE98nwuTkZT6eNFPc1aosWV6wPcQph72TSEEu1k3baJD4/x1qznU+JiDdz8F5pTwabZh+Dhg==",
+      "dependencies": {
+        "@apidevtools/json-schema-ref-parser": "^9.0.6",
+        "@apidevtools/openapi-schemas": "^2.0.4",
+        "@apidevtools/swagger-methods": "^3.0.2",
+        "@jsdevtools/ono": "^7.1.3",
+        "call-me-maybe": "^1.0.1",
+        "z-schema": "^4.2.3"
+      },
+      "peerDependencies": {
+        "openapi-types": ">=7"
+      }
+    },
    "node_modules/@aws-crypto/ie11-detection": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/@aws-crypto/ie11-detection/-/ie11-detection-2.0.2.tgz",
@@ -2532,6 +2576,11 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg=="
+    },
    "node_modules/@juanelas/base64": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@juanelas/base64/-/base64-1.0.5.tgz",
@@ -2843,8 +2892,7 @@
    "node_modules/@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-      "dev": true
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
    },
    "node_modules/@types/jsonwebtoken": {
      "version": "8.5.9",
@@ -2915,6 +2963,22 @@
      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
      "dev": true
    },
+    "node_modules/@types/swagger-jsdoc": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@types/swagger-jsdoc/-/swagger-jsdoc-6.0.1.tgz",
+      "integrity": "sha512-+MUpcbyxD528dECUBCEVm6abNuORdbuGjbrUdHDeAQ+rkPuo2a+L4N02WJHF3bonSSE6SJ3dUJwF2V6+cHnf0w==",
+      "dev": true
+    },
+    "node_modules/@types/swagger-ui-express": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@types/swagger-ui-express/-/swagger-ui-express-4.1.3.tgz",
+      "integrity": "sha512-jqCjGU/tGEaqIplPy3WyQg+Nrp6y80DCFnDEAvVKWkJyv0VivSSDCChkppHRHAablvInZe6pijDFMnavtN0vqA==",
+      "dev": true,
+      "dependencies": {
+        "@types/express": "*",
+        "@types/serve-static": "*"
+      }
+    },
    "node_modules/@types/webidl-conversions": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -3279,8 +3343,7 @@
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
    "node_modules/array-flatten": {
      "version": "1.1.1",
@@ -3617,6 +3680,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ=="
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3816,6 +3884,14 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/commander": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.0.tgz",
+      "integrity": "sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4055,7 +4131,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
      "dependencies": {
        "esutils": "^2.0.2"
      },
@@ -4396,7 +4471,6 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -5954,7 +6028,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
      "dependencies": {
        "argparse": "^2.0.1"
      },
@@ -6150,6 +6223,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
    "node_modules/lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -6160,6 +6238,11 @@
      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
    "node_modules/lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -6186,6 +6269,11 @@
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
      "dev": true
    },
+    "node_modules/lodash.mergewith": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
+      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
+    },
    "node_modules/lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -9247,6 +9335,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/openapi-types": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.0.2.tgz",
+      "integrity": "sha512-GuTo7FyZjOIWVhIhQSWJVaws6A82sWIGyQogxxYBYKZ0NBdyP2CYSIgOwFfSB+UVoPExk/YzFpyYitHS8KVZtA==",
+      "peer": true
+    },
    "node_modules/optionator": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -10284,6 +10378,74 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/swagger-jsdoc": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.5.tgz",
+      "integrity": "sha512-l+cdsKS2y+QDhrH1TJSUiE0y9XKuf5xaGSatjf0hR/wjTlMpO8WfubBK9d/nASdbHPMtj9iJZLBH2ogBEhL7Sw==",
+      "dependencies": {
+        "commander": "6.2.0",
+        "doctrine": "3.0.0",
+        "glob": "7.1.6",
+        "lodash.mergewith": "^4.6.2",
+        "swagger-parser": "10.0.2",
+        "yaml": "2.0.0-1"
+      },
+      "bin": {
+        "swagger-jsdoc": "bin/swagger-jsdoc.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/swagger-jsdoc/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/swagger-parser": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/swagger-parser/-/swagger-parser-10.0.2.tgz",
+      "integrity": "sha512-9jHkHM+QXyLGFLk1DkXBwV+4HyNm0Za3b8/zk/+mjr8jgOSiqm3FOTHBSDsBjtn9scdL+8eWcHdupp2NLM8tDw==",
+      "dependencies": {
+        "@apidevtools/swagger-parser": "10.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/swagger-ui-dist": {
+      "version": "4.15.5",
+      "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-4.15.5.tgz",
+      "integrity": "sha512-V3eIa28lwB6gg7/wfNvAbjwJYmDXy1Jo1POjyTzlB6wPcHiGlRxq39TSjYGVjQrUSAzpv+a7nzp7mDxgNy57xA=="
+    },
+    "node_modules/swagger-ui-express": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/swagger-ui-express/-/swagger-ui-express-4.6.0.tgz",
+      "integrity": "sha512-ZxpQFp1JR2RF8Ar++CyJzEDdvufa08ujNUJgMVTMWPi86CuQeVdBtvaeO/ysrz6dJAYXf9kbVNhWD7JWocwqsA==",
+      "dependencies": {
+        "swagger-ui-dist": ">=4.11.0"
+      },
+      "engines": {
+        "node": ">= v0.10.32"
+      },
+      "peerDependencies": {
+        "express": ">=4.0.0"
+      }
+    },
    "node_modules/test-exclude": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -10758,6 +10920,14 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
+    "node_modules/yaml": {
+      "version": "2.0.0-1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.0-1.tgz",
+      "integrity": "sha512-W7h5dEhywMKenDJh2iX/LABkbFnBxasD27oyXWDS/feDsxiw0dD5ncXdYXgkvAsXIY2MpW/ZKkr9IU30DBdMNQ==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/yargs": {
      "version": "17.6.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
@@ -10805,6 +10975,31 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/z-schema": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-4.2.4.tgz",
+      "integrity": "sha512-YvBeW5RGNeNzKOUJs3rTL4+9rpcvHXt5I051FJbOcitV8bl40pEfcG0Q+dWSwS0/BIYrMZ/9HHoqLllMkFhD0w==",
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.6.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^2.7.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "optional": true
    }
  },
  "dependencies": {
@@ -10818,6 +11013,40 @@
        "@jridgewell/trace-mapping": "^0.3.9"
      }
    },
+    "@apidevtools/json-schema-ref-parser": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.1.0.tgz",
+      "integrity": "sha512-teB30tFooE3iQs2HQIKJ02D8UZA1Xy1zaczzhUjJs0CymYxeC0g+y5rCY2p8NHBM6DBUVoR8rSM4kHLj1WE9mQ==",
+      "requires": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.6",
+        "call-me-maybe": "^1.0.1",
+        "js-yaml": "^4.1.0"
+      }
+    },
+    "@apidevtools/openapi-schemas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@apidevtools/openapi-schemas/-/openapi-schemas-2.1.0.tgz",
+      "integrity": "sha512-Zc1AlqrJlX3SlpupFGpiLi2EbteyP7fXmUOGup6/DnkRgjP9bgMM/ag+n91rsv0U1Gpz0H3VILA/o3bW7Ua6BQ=="
+    },
+    "@apidevtools/swagger-methods": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-methods/-/swagger-methods-3.0.2.tgz",
+      "integrity": "sha512-QAkD5kK2b1WfjDS/UQn/qQkbwF31uqRjPTrsCs5ZG9BQGAkjwvqGFjjPqAuzac/IYzpPtRzjCP1WrTuAIjMrXg=="
+    },
+    "@apidevtools/swagger-parser": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-parser/-/swagger-parser-10.0.2.tgz",
+      "integrity": "sha512-JFxcEyp8RlNHgBCE98nwuTkZT6eNFPc1aosWV6wPcQph72TSEEu1k3baJD4/x1qznU+JiDdz8F5pTwabZh+Dhg==",
+      "requires": {
+        "@apidevtools/json-schema-ref-parser": "^9.0.6",
+        "@apidevtools/openapi-schemas": "^2.0.4",
+        "@apidevtools/swagger-methods": "^3.0.2",
+        "@jsdevtools/ono": "^7.1.3",
+        "call-me-maybe": "^1.0.1",
+        "z-schema": "^4.2.3"
+      }
+    },
    "@aws-crypto/ie11-detection": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/@aws-crypto/ie11-detection/-/ie11-detection-2.0.2.tgz",
@@ -12978,6 +13207,11 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg=="
+    },
    "@juanelas/base64": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@juanelas/base64/-/base64-1.0.5.tgz",
@@ -13265,8 +13499,7 @@
    "@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-      "dev": true
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
    },
    "@types/jsonwebtoken": {
      "version": "8.5.9",
@@ -13337,6 +13570,22 @@
      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
      "dev": true
    },
+    "@types/swagger-jsdoc": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@types/swagger-jsdoc/-/swagger-jsdoc-6.0.1.tgz",
+      "integrity": "sha512-+MUpcbyxD528dECUBCEVm6abNuORdbuGjbrUdHDeAQ+rkPuo2a+L4N02WJHF3bonSSE6SJ3dUJwF2V6+cHnf0w==",
+      "dev": true
+    },
+    "@types/swagger-ui-express": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@types/swagger-ui-express/-/swagger-ui-express-4.1.3.tgz",
+      "integrity": "sha512-jqCjGU/tGEaqIplPy3WyQg+Nrp6y80DCFnDEAvVKWkJyv0VivSSDCChkppHRHAablvInZe6pijDFMnavtN0vqA==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*",
+        "@types/serve-static": "*"
+      }
+    },
    "@types/webidl-conversions": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -13569,8 +13818,7 @@
    "argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
    },
    "array-flatten": {
      "version": "1.1.1",
@@ -13819,6 +14067,11 @@
        "get-intrinsic": "^1.0.2"
      }
    },
+    "call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ=="
+    },
    "callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -13959,6 +14212,11 @@
        "delayed-stream": "~1.0.0"
      }
    },
+    "commander": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.0.tgz",
+      "integrity": "sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q=="
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -14140,7 +14398,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
      "requires": {
        "esutils": "^2.0.2"
      }
@@ -14386,8 +14643,7 @@
    "esutils": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
    },
    "etag": {
      "version": "1.8.1",
@@ -15550,7 +15806,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
      "requires": {
        "argparse": "^2.0.1"
      }
@@ -15708,6 +15963,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
    "lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -15718,6 +15978,11 @@
      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
    "lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -15744,6 +16009,11 @@
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
      "dev": true
    },
+    "lodash.mergewith": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
+      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
+    },
    "lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -17905,6 +18175,12 @@
        "mimic-fn": "^2.1.0"
      }
    },
+    "openapi-types": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.0.2.tgz",
+      "integrity": "sha512-GuTo7FyZjOIWVhIhQSWJVaws6A82sWIGyQogxxYBYKZ0NBdyP2CYSIgOwFfSB+UVoPExk/YzFpyYitHS8KVZtA==",
+      "peer": true
+    },
    "optionator": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -18649,6 +18925,55 @@
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
      "dev": true
    },
+    "swagger-jsdoc": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.5.tgz",
+      "integrity": "sha512-l+cdsKS2y+QDhrH1TJSUiE0y9XKuf5xaGSatjf0hR/wjTlMpO8WfubBK9d/nASdbHPMtj9iJZLBH2ogBEhL7Sw==",
+      "requires": {
+        "commander": "6.2.0",
+        "doctrine": "3.0.0",
+        "glob": "7.1.6",
+        "lodash.mergewith": "^4.6.2",
+        "swagger-parser": "10.0.2",
+        "yaml": "2.0.0-1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
+    "swagger-parser": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/swagger-parser/-/swagger-parser-10.0.2.tgz",
+      "integrity": "sha512-9jHkHM+QXyLGFLk1DkXBwV+4HyNm0Za3b8/zk/+mjr8jgOSiqm3FOTHBSDsBjtn9scdL+8eWcHdupp2NLM8tDw==",
+      "requires": {
+        "@apidevtools/swagger-parser": "10.0.2"
+      }
+    },
+    "swagger-ui-dist": {
+      "version": "4.15.5",
+      "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-4.15.5.tgz",
+      "integrity": "sha512-V3eIa28lwB6gg7/wfNvAbjwJYmDXy1Jo1POjyTzlB6wPcHiGlRxq39TSjYGVjQrUSAzpv+a7nzp7mDxgNy57xA=="
+    },
+    "swagger-ui-express": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/swagger-ui-express/-/swagger-ui-express-4.6.0.tgz",
+      "integrity": "sha512-ZxpQFp1JR2RF8Ar++CyJzEDdvufa08ujNUJgMVTMWPi86CuQeVdBtvaeO/ysrz6dJAYXf9kbVNhWD7JWocwqsA==",
+      "requires": {
+        "swagger-ui-dist": ">=4.11.0"
+      }
+    },
    "test-exclude": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -18984,6 +19309,11 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
+    "yaml": {
+      "version": "2.0.0-1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.0-1.tgz",
+      "integrity": "sha512-W7h5dEhywMKenDJh2iX/LABkbFnBxasD27oyXWDS/feDsxiw0dD5ncXdYXgkvAsXIY2MpW/ZKkr9IU30DBdMNQ=="
+    },
    "yargs": {
      "version": "17.6.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
@@ -19016,6 +19346,25 @@
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
      "dev": true
+    },
+    "z-schema": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-4.2.4.tgz",
+      "integrity": "sha512-YvBeW5RGNeNzKOUJs3rTL4+9rpcvHXt5I051FJbOcitV8bl40pEfcG0Q+dWSwS0/BIYrMZ/9HHoqLllMkFhD0w==",
+      "requires": {
+        "commander": "^2.7.1",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.6.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "optional": true
+        }
+      }
    }
  }
 }
@@ -22,6 +22,8 @@
    "query-string": "^7.1.1",
    "rimraf": "^3.0.2",
    "stripe": "^10.7.0",
+    "swagger-jsdoc": "^6.2.5",
+    "swagger-ui-express": "^4.6.0",
    "tweetnacl": "^1.0.3",
    "tweetnacl-util": "^0.15.1",
    "typescript": "^4.8.4"
@@ -56,6 +58,8 @@
    "@types/jsonwebtoken": "^8.5.9",
    "@types/node": "^18.11.3",
    "@types/nodemailer": "^6.4.6",
+    "@types/swagger-jsdoc": "^6.0.1",
+    "@types/swagger-ui-express": "^4.1.3",
    "@typescript-eslint/eslint-plugin": "^5.40.1",
    "@typescript-eslint/parser": "^5.40.1",
    "eslint": "^8.26.0",
@@ -1,5 +1,5 @@
 const PORT = process.env.PORT || 4000;
-const EMAIL_TOKEN_LIFETIME = process.env.EMAIL_TOKEN_LIFETIME! || '86400'; // investigate
+const EMAIL_TOKEN_LIFETIME = process.env.EMAIL_TOKEN_LIFETIME! || '86400';
 const ENCRYPTION_KEY = process.env.ENCRYPTION_KEY!;
 const JWT_AUTH_LIFETIME = process.env.JWT_AUTH_LIFETIME! || '10d';
 const JWT_AUTH_SECRET = process.env.JWT_AUTH_SECRET!;
@@ -8,6 +8,7 @@ import {
 	STRIPE_PRODUCT_CARD_AUTH
 } from '../config';
 import Stripe from 'stripe';
+
 const stripe = new Stripe(STRIPE_SECRET_KEY, {
 	apiVersion: '2022-08-01'
 });
@@ -3,7 +3,7 @@ import rateLimit from 'express-rate-limit';
 // 300 requests per 15 minutes
 const apiLimiter = rateLimit({
 	windowMs: 15 * 60 * 1000,
-	max: 300,
+	max: 400,
 	standardHeaders: true,
 	legacyHeaders: false
 });
@@ -11,7 +11,7 @@ const apiLimiter = rateLimit({
 // 5 requests per hour
 const signupLimiter = rateLimit({
 	windowMs: 60 * 60 * 1000,
-	max: 5,
+	max: 10,
 	standardHeaders: true,
 	legacyHeaders: false
 });
@@ -19,7 +19,7 @@ const signupLimiter = rateLimit({
 // 10 requests per hour
 const loginLimiter = rateLimit({
 	windowMs: 60 * 60 * 1000,
-	max: 10,
+	max: 20,
 	standardHeaders: true,
 	legacyHeaders: false
 });
@@ -27,7 +27,7 @@ const loginLimiter = rateLimit({
 // 5 requests per hour
 const passwordLimiter = rateLimit({
 	windowMs: 60 * 60 * 1000,
-	max: 5,
+	max: 10,
 	standardHeaders: true,
 	legacyHeaders: false
 });
@@ -4,9 +4,11 @@ import cors from 'cors';
 import cookieParser from 'cookie-parser';
 import mongoose from 'mongoose';
 import dotenv from 'dotenv';
+import swaggerJSDoc from 'swagger-jsdoc';
+import swaggerUi from 'swagger-ui-express';
+
 dotenv.config();
 import * as Sentry from '@sentry/node';
-// import { PostHogClient } from './services';
 import { PORT, SENTRY_DSN, NODE_ENV, MONGO_URL, SITE_URL, POSTHOG_PROJECT_API_KEY, POSTHOG_HOST, TELEMETRY_ENABLED } from './config';
 import { apiLimiter } from './helpers/rateLimiter';

@@ -19,12 +21,6 @@ Sentry.init({
 	environment: NODE_ENV
 });

-// PostHogClient.init({
-// 	projectApiKey: POSTHOG_PROJECT_API_KEY,
-// 	host: POSTHOG_HOST,
-// 	telemetryEnabled: TELEMETRY_ENABLED
-// });
-
 import {
 	signup as signupRouter,
 	auth as authRouter,
@@ -72,6 +68,39 @@ if (NODE_ENV === 'production') {
 	app.use(helmet());
 }

+if (NODE_ENV === 'development') {
+	const swaggerDefinition = {
+		openapi: '3.0.0',
+		info: {
+			title: 'Infisical API',
+			version: '1.0.0',
+			description: 'Infisical is an open-source, E2EE tool to sync environment variables across your team and infrastructure.',
+			license: {
+				name: 'License',
+				url: 'https://github.com/Infisical/infisical/blob/main/LICENSE'
+			},
+			contact: {
+				name: 'Infisical',
+				url: 'https://infisical.com'
+			},
+		},
+		servers: [
+			{
+				url: 'http://localhost:8080/api/v1',
+				description: 'Development server'
+			}
+		]
+	}
+	
+	const options = {
+		swaggerDefinition,
+		apis: ['./src/routes/*.ts']
+	}
+	
+	const swaggerSpec = swaggerJSDoc(options);
+	app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
+}
+
 app.use(express.json());

 // routers
@@ -11,6 +11,53 @@ router.post(
 	authController.getNewToken
 );

+/**
+ * @swagger
+ * /auth/login1:
+ *   post:
+ *     summary: Return server's public key and user's salt for login via SRP.
+ *     description: As part of the 1st step of secure remote password (SRP), return server's public key and user's salt.
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               email:
+ *                 type: string
+ *                 description: Email of user
+ *                 example: '[email protected]'
+ *               clientPublicKey:
+ *                 type: string
+ *                 description: Client-side SRP-generated public key
+ *                 example: 'b13dc83cb...'
+ *     responses:
+ *       200:
+ *         description: Object containing the server's public key and user's salt.
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 serverPublicKey:
+ *                   type: string
+ *                   description: Server-side SRP-generated public key
+ *                   example: 'b13dc83cb...'
+ *                 salt:
+ *                   type: string
+ *                   description: User's salt
+ *                   example: 'dc1ac694f...'
+ *       400:
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: 'Failed to start authentication process'
+ */
 router.post(
 	'/login1',
 	loginLimiter,
@@ -15,7 +15,7 @@ var rootCmd = &cobra.Command{
 	Short:             "Infisical CLI is used to inject environment variables into any process",
 	Long:              `Infisical is a simple, end-to-end encrypted service that enables teams to sync and manage their environment variables across their development life cycle.`,
 	CompletionOptions: cobra.CompletionOptions{DisableDefaultCmd: true},
-	Version:           "0.1.4",
+	Version:           "0.1.5",
 }

 // Execute adds all child commands to the root command and sets flags appropriately.
@@ -33,6 +33,13 @@ var runCmd = &cobra.Command{
 			return
 		}

+		shouldExpandSecrets, err := cmd.Flags().GetBool("expand")
+		if err != nil {
+			log.Errorln("Unable to parse the substitute flag")
+			log.Debugln(err)
+			return
+		}
+
 		projectId, err := cmd.Flags().GetString("projectId")
 		if err != nil {
 			log.Errorln("Unable to parse the project id flag")
@@ -82,7 +89,13 @@ var runCmd = &cobra.Command{
 			}
 		}

+		if shouldExpandSecrets {
+			substitutions := util.SubstituteSecrets(envsFromApi)
+			execCmd(args[0], args[1:], substitutions)
+		} else {
 			execCmd(args[0], args[1:], envsFromApi)
+		}
+
 	},
 }

@@ -90,6 +103,7 @@ func init() {
 	rootCmd.AddCommand(runCmd)
 	runCmd.Flags().StringP("env", "e", "dev", "Set the environment (dev, prod, etc.) from which your secrets should be pulled from")
 	runCmd.Flags().String("projectId", "", "The project ID from which your secrets should be pulled from")
+	runCmd.Flags().Bool("expand", true, "Parse shell parameter expansions in your secrets")
 }

 // Credit: inspired by AWS Valut
@@ -0,0 +1,14 @@
+package models
+
+import log "github.com/sirupsen/logrus"
+
+// Custom error type so that we can give helpful messages in CLI
+type Error struct {
+	Err             error
+	DebugMessage    string
+	FriendlyMessage string
+}
+
+func (e *Error) printFriendlyMessage() {
+	log.Infoln(e.FriendlyMessage)
+}
@@ -4,6 +4,7 @@ import (
 	"encoding/base64"
 	"errors"
 	"fmt"
+	"regexp"
 	"strings"

 	"github.com/Infisical/infisical-merge/packages/models"
@@ -205,3 +206,73 @@ func GetWorkSpacesFromAPI(userCreds models.UserCredentials) (workspaces []models

 	return getWorkSpacesResponse.Workspaces, nil
 }
+
+func getExpandedEnvVariable(secrets []models.SingleEnvironmentVariable, variableWeAreLookingFor string, hashMapOfCompleteVariables map[string]string, hashMapOfSelfRefs map[string]string) string {
+	if value, found := hashMapOfCompleteVariables[variableWeAreLookingFor]; found {
+		return value
+	}
+
+	for _, secret := range secrets {
+		if secret.Key == variableWeAreLookingFor {
+			regex := regexp.MustCompile(`\${([^\}]*)}`)
+			variablesToPopulate := regex.FindAllString(secret.Value, -1)
+
+			// case: variable is a constant so return its value
+			if len(variablesToPopulate) == 0 {
+				return secret.Value
+			}
+
+			valueToEdit := secret.Value
+			for _, variableWithSign := range variablesToPopulate {
+				variableWithoutSign := strings.Trim(variableWithSign, "}")
+				variableWithoutSign = strings.Trim(variableWithoutSign, "${")
+
+				// case: reference to self
+				if variableWithoutSign == secret.Key {
+					hashMapOfSelfRefs[variableWithoutSign] = variableWithoutSign
+					continue
+				} else {
+					var expandedVariableValue string
+
+					if preComputedVariable, found := hashMapOfCompleteVariables[variableWithoutSign]; found {
+						expandedVariableValue = preComputedVariable
+					} else {
+						expandedVariableValue = getExpandedEnvVariable(secrets, variableWithoutSign, hashMapOfCompleteVariables, hashMapOfSelfRefs)
+						hashMapOfCompleteVariables[variableWithoutSign] = expandedVariableValue
+					}
+
+					// If after expanding all the vars above, is the current var a self ref? if so no replacement needed for it
+					if _, found := hashMapOfSelfRefs[variableWithoutSign]; found {
+						continue
+					} else {
+						valueToEdit = strings.ReplaceAll(valueToEdit, variableWithSign, expandedVariableValue)
+					}
+				}
+			}
+
+			return valueToEdit
+
+		} else {
+			continue
+		}
+	}
+
+	return "${" + variableWeAreLookingFor + "}"
+}
+
+func SubstituteSecrets(secrets []models.SingleEnvironmentVariable) []models.SingleEnvironmentVariable {
+	hashMapOfCompleteVariables := make(map[string]string)
+	hashMapOfSelfRefs := make(map[string]string)
+	expandedSecrets := []models.SingleEnvironmentVariable{}
+
+	for _, secret := range secrets {
+		expandedVariable := getExpandedEnvVariable(secrets, secret.Key, hashMapOfCompleteVariables, hashMapOfSelfRefs)
+		expandedSecrets = append(expandedSecrets, models.SingleEnvironmentVariable{
+			Key:   secret.Key,
+			Value: expandedVariable,
+		})
+
+	}
+
+	return expandedSecrets
+}
@@ -0,0 +1,160 @@
+package util
+
+import (
+	"testing"
+
+	"github.com/Infisical/infisical-merge/packages/models"
+)
+
+// References to self should return the value unaltered
+func Test_SubstituteSecrets_When_ReferenceToSelf(t *testing.T) {
+
+	var tests = []struct {
+		Key           string
+		Value         string
+		ExpectedValue string
+	}{
+		{Key: "A", Value: "${A}", ExpectedValue: "${A}"},
+		{Key: "A", Value: "${A} ${A}", ExpectedValue: "${A} ${A}"},
+		{Key: "A", Value: "${A}${A}", ExpectedValue: "${A}${A}"},
+	}
+
+	for _, test := range tests {
+		secret := models.SingleEnvironmentVariable{
+			Key:   test.Key,
+			Value: test.Value,
+		}
+
+		secrets := []models.SingleEnvironmentVariable{secret}
+		result := SubstituteSecrets(secrets)
+
+		if result[0].Value != test.ExpectedValue {
+			t.Errorf("Test_SubstituteSecrets_When_ReferenceToSelf: expected %s but got %s for input %s", test.ExpectedValue, result[0].Value, test.Value)
+		}
+
+	}
+}
+
+func Test_SubstituteSecrets_When_ReferenceDoesNotExist(t *testing.T) {
+
+	var tests = []struct {
+		Key           string
+		Value         string
+		ExpectedValue string
+	}{
+		{Key: "A", Value: "${X}", ExpectedValue: "${X}"},
+		{Key: "A", Value: "${H}HELLO", ExpectedValue: "${H}HELLO"},
+		{Key: "A", Value: "${L}${S}", ExpectedValue: "${L}${S}"},
+	}
+
+	for _, test := range tests {
+		secret := models.SingleEnvironmentVariable{
+			Key:   test.Key,
+			Value: test.Value,
+		}
+
+		secrets := []models.SingleEnvironmentVariable{secret}
+		result := SubstituteSecrets(secrets)
+
+		if result[0].Value != test.ExpectedValue {
+			t.Errorf("Test_SubstituteSecrets_When_ReferenceToSelf: expected %s but got %s for input %s", test.ExpectedValue, result[0].Value, test.Value)
+		}
+
+	}
+}
+
+func Test_SubstituteSecrets_When_ReferenceDoesNotExist_And_Self_Referencing(t *testing.T) {
+
+	tests := []struct {
+		Key           string
+		Value         string
+		ExpectedValue string
+	}{
+		{
+			Key:           "O",
+			Value:         "${P} ==$$ ${X} ${UNKNOWN} ${A}",
+			ExpectedValue: "DOMAIN === ${A} DOMAIN >>> ==$$ DOMAIN ${UNKNOWN} ${A}",
+		},
+		{
+			Key:           "X",
+			Value:         "DOMAIN",
+			ExpectedValue: "DOMAIN",
+		},
+		{
+			Key:           "A",
+			Value:         "*${A}* ${X}",
+			ExpectedValue: "*${A}* DOMAIN",
+		},
+		{
+			Key:           "H",
+			Value:         "${X} >>>",
+			ExpectedValue: "DOMAIN >>>",
+		},
+		{
+			Key:           "P",
+			Value:         "DOMAIN === ${A} ${H}",
+			ExpectedValue: "DOMAIN === ${A} DOMAIN >>>",
+		},
+		{
+			Key:           "T",
+			Value:         "${P} ==$$ ${X} ${UNKNOWN} ${A} ${P} ==$$ ${X} ${UNKNOWN} ${A}",
+			ExpectedValue: "DOMAIN === ${A} DOMAIN >>> ==$$ DOMAIN ${UNKNOWN} ${A} DOMAIN === ${A} DOMAIN >>> ==$$ DOMAIN ${UNKNOWN} ${A}",
+		},
+		{
+			Key:           "S",
+			Value:         "${ SSS$$ ${HEY}",
+			ExpectedValue: "${ SSS$$ ${HEY}",
+		},
+	}
+
+	secrets := []models.SingleEnvironmentVariable{}
+	for _, test := range tests {
+		secrets = append(secrets, models.SingleEnvironmentVariable{Key: test.Key, Value: test.Value})
+	}
+
+	results := SubstituteSecrets(secrets)
+
+	for index, expanded := range results {
+		if expanded.Value != tests[index].ExpectedValue {
+			t.Errorf("Test_SubstituteSecrets_When_ReferenceToSelf: expected [%s] but got [%s] for input [%s]", tests[index].ExpectedValue, expanded.Value, tests[index].Value)
+		}
+	}
+}
+
+func Test_SubstituteSecrets_When_No_SubstituteNeeded(t *testing.T) {
+
+	tests := []struct {
+		Key           string
+		Value         string
+		ExpectedValue string
+	}{
+		{
+			Key:           "DOMAIN",
+			Value:         "infisical.com",
+			ExpectedValue: "infisical.com",
+		},
+		{
+			Key:           "API_KEY",
+			Value:         "hdgsvjshcgkdckhevdkd",
+			ExpectedValue: "hdgsvjshcgkdckhevdkd",
+		},
+		{
+			Key:           "ENV",
+			Value:         "PROD",
+			ExpectedValue: "PROD",
+		},
+	}
+
+	secrets := []models.SingleEnvironmentVariable{}
+	for _, test := range tests {
+		secrets = append(secrets, models.SingleEnvironmentVariable{Key: test.Key, Value: test.Value})
+	}
+
+	results := SubstituteSecrets(secrets)
+
+	for index, expanded := range results {
+		if expanded.Value != tests[index].ExpectedValue {
+			t.Errorf("Test_SubstituteSecrets_When_ReferenceToSelf: expected [%s] but got [%s] for input [%s]", tests[index].ExpectedValue, expanded.Value, tests[index].Value)
+		}
+	}
+}
@@ -57,6 +57,8 @@ services:
      - NEXT_PUBLIC_WEBSITE_URL=${SITE_URL}
      - NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST}
      - NEXT_PUBLIC_POSTHOG_API_KEY=${POSTHOG_PROJECT_API_KEY}
+      - NEXT_PUBLIC_STRIPE_PRODUCT_PRO=${STRIPE_PRODUCT_PRO}
+      - NEXT_PUBLIC_STRIPE_PRODUCT_STARTER=${STRIPE_PRODUCT_STARTER}
      - NEXT_PUBLIC_TELEMETRY_ENABLED=${TELEMETRY_ENABLED}
    networks:
      - infisical-dev
@@ -49,6 +49,9 @@ services:
      - NEXT_PUBLIC_WEBSITE_URL=${SITE_URL}
      - NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST}
      - NEXT_PUBLIC_POSTHOG_API_KEY=${POSTHOG_PROJECT_API_KEY}
+      - NEXT_PUBLIC_STRIPE_PRODUCT_PRO=${STRIPE_PRODUCT_PRO}
+      - NEXT_PUBLIC_STRIPE_PRODUCT_STARTER=${STRIPE_PRODUCT_STARTER}
+      - NEXT_PUBLIC_TELEMETRY_ENABLED=${TELEMETRY_ENABLED}
    networks:
      - infisical

@@ -1,10 +1,12 @@
 ---
-title: "Installation"
+title: "Overview"
 ---

-Prerequisite: [Setup an account](../../getting-started/dashboard/create-account) with Infisical Cloud or via self-hosted installation.
+Prerequisite: Set up an account with [Infisical Cloud](https://app.infisical.com) or via a [self-hosted installation](/self-hosting/overview).

-Follow the guide for your OS below to install the CLI.
+The Infisical CLI provides a way to inject environment variables from the platform into your apps and infrastructure.
+
+## Installation

 <Tabs>
   <Tab title="MacOS">
@@ -18,7 +20,7 @@ Follow the guide for your OS below to install the CLI.
    	infisical --version
    	```

-    	To update:
+    	## Updates

    	```bash
    	brew upgrade infisical
@@ -37,7 +39,7 @@ Follow the guide for your OS below to install the CLI.
    		infisical --version
    		```

-    		To update:
+    		## Updates

    		```bash
    		scoop update infisical
@@ -0,0 +1,20 @@
+---
+title: "Commands"
+---
+
+## Commands
+
+| Command | Description                                                          |
+| ------- | -------------------------------------------------------------------- |
+| `login` | Used to authenticate and set the logged in user.                     |
+| `init`  | Used to link a local project to the platform.                        |
+| `run`   | Used to inject envars from the platform into an application process. |
+
+## Global options
+
+| Option            | Description                                     |
+| ----------------- | ----------------------------------------------- |
+| `--help`, `-h`    | List help for any command                       |
+| `--debug`, `-d`   | Enable verbose logging                          |
+| `--domain`        | Use to direct Infisical to a self-hosted domain |
+| `--version`, `-v` | Print version information and quit              |
@@ -0,0 +1,13 @@
+---
+title: "infisical init"
+---
+
+```bash
+infisical init
+```
+
+## Description
+
+Link a local project to the platform
+
+The command creates a `infisical.json` file containing your Project ID.
@@ -0,0 +1,13 @@
+---
+title: "infisical login"
+---
+
+```bash
+infisical login
+```
+
+## Description
+
+Verify a user and save credentials to the system keyring.
+
+To change the logged in user, run the command again to overwrite the previous login.
@@ -0,0 +1,19 @@
+---
+title: "infisical run"
+---
+
+```bash
+infisical run [options] -- [your application start command]
+```
+
+## Description
+
+Inject environment variables from the platform into an application process.
+
+## Options
+
+| Option         | Description                                                                                                 | Default value |
+| -------------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
+| `--env`        | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
+| `--projectId`  | Used to link a local project to the platform (required only if injecting via the service token method)      | `None`        |
+| `--expand`     | Parse shell parameter expansions in your secrets (e.g., `${DOMAIN}`)      | `true`        |
@@ -0,0 +1,52 @@
+---
+title: "Usage"
+---
+
+Prerequisite: [Install the CLI](/cli/overview)
+
+## Log in to the Infisical CLI
+
+```bash
+infisical login
+```
+
+## Initialize Infisical for your project
+
+```bash
+# move to your project
+cd /path/to/project
+
+# initialize infisical
+infisical init
+```
+
+## Inject environment variables
+
+```bash
+# inject environment variables into app
+infisical run -- [your application start command]
+```
+
+Options you can specify:
+
+| Option         | Description                                                                                                 | Default value |
+| -------------  | ----------------------------------------------------------------------------------------------------------- | ------------- |
+| `--env`        | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
+| `--projectId`  | Used to link a local project to the platform (required only if injecting via the service token method)      | `None`        |
+| `--expand`     | Parse shell parameter expansions in your secrets (e.g., `${DOMAIN}`)      | `true`        |
+
+## Examples:
+
+```bash
+# example with node
+infisical run -- node index.js
+
+# example with node (nodemon)
+infisical run -- nodemon index.js
+
+# example with node (nodemon) pulling in secrets from test environment
+infisical run --env=test -- nodemon index.js
+
+# example with flask
+infisical run -- flask run
+```
@@ -1,27 +0,0 @@
---
-title: "Architecture"
---
-
-Infisical is an open-source collection of services for simple secret management built on top of Typescript, Javascript (ongoing conversion to TS), and Go. It's all dockerized and can be spun up with Docker Compose.
-
-![architecture](../images/architecture-diagram2.png)
-
-## NGINX
-
-NGINX is a reverse-proxy and load balancer that sits in front of Infisical. It forwards requests to the frontend and backend services.
-
-## Frontend
-
-The frontend service renders the Web UI using Next.js.
-
-## Backend
-
-The backend service provides the back-of-house logic for secret management.
-
-## Database
-
-The (MongoDB) database stores all data and (encrypted) secrets.
-
-## CLI
-
-The platform-agnostic CLI allows you to inject environment variables from Infisical into apps and infrastructure.
@@ -40,6 +40,7 @@ docker-compose -f docker-compose.dev.yml up

 The docker-compose development environment consists of:

+- nginx
 - frontend
 - backend
 - mongo
@@ -1,56 +0,0 @@
---
-title: "Usage"
---
-
-Prerequisite: [Install the CLI](../../getting-started/cli/installation)
-
-## Login
-
-Login in using the `login` command in your terminal. Logging in is a one-time, post-installation action that authenticates you with the platform — to change users, you can run the command again.
-
-```bash
-infisical login
-```
-
-## Initialization
-
-In the root of your local project, initialize Infisical and follow steps to connect your project to the platform.
-
-```bash
-cd /path/to/project
-
-# initialization
-infisical init
-```
-
-## Injecting environment variables
-
-To inject environment variables from the platform to your project, use the `run` command.
-
-```bash
-# command
-infisical run -- [your application start command]
-```
-
-Options you can specify:
-
-| Option        | Description                                                                                                 | Default value |
-| ------------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
-| `--env`       | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
-| `--projectId` | Used to link a local project to the platform (required only if injecting via the service token method)      | `None`        |
-
-Examples:
-
-```bash
-# example with node
-infisical run -- node index.js
-
-# example with node (nodemon)
-infisical run -- nodemon index.js
-
-# example with node (nodemon) pulling in secrets from test environment
-infisical run --env=test -- nodemon index.js
-
-# example with flask
-infisical run -- flask run
-```
@@ -1,55 +0,0 @@
---
-title: "Reference"
---
-
-## Commands
-
-| Command | Description                                                          | Options                |
-| ------- | -------------------------------------------------------------------- | ---------------------- |
-| `login` | Used to authenticate and set the logged in user.                     |
-| `init`  | Used to link a local project to the platform.                        |
-| `run`   | Used to inject envars from the platform into an application process. | `--projectId`, `--env` |
-
-## Global options
-
-| Option            | Description                        |
-| ----------------- | ---------------------------------- |
-| `--help`, `-h`    | List help for any command          |
-| `--debug`, `-d`   | Enable verbose logging             |
-| `--domain`        | Use to direct Infisical to         |
-| `--version`, `-v` | Print version information and quit |
-
-### Login
-
-Used to authenticate and set the logged in user.
-
-Post-authentication credentials are saved securely in your system keyring. Since only one user can be logged in at a time, to change the logged in user, run the command again to overwrite the previous login.
-
-```bash
-infisical login
-```
-
-### Init
-
-Used to link a local project to the platform (cloud or self-hosted)
-
-Run this command at the root of your local project. You will have to run this command for each new project you create locally.
-
-```bash
-infisical init
-```
-
-### Run
-
-Used to inject environment variables from the platform into an application process.
-
-```bash
-infisical run [options] -- [your application start command]
-```
-
-Options you can specify:
-
-| Option        | Description                                                                                                 | Default value |
-| ------------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
-| `--env`       | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
-| `--projectId` | Used to link a local project to the platform (required only if injecting via the service token method)      | `None`        |
@@ -4,7 +4,7 @@ title: "Sign up"

 ## Self-hosted

-If you're using a self-hosted installation, follow the [setup](/self-hosting/overview) then open your website URL `{WEBSITE_URL}/login`.
+If you're using a self-hosted installation, follow the [setup](/self-hosting/overview) then open your site URL `{SITE_URL}`.

 ## Infisical Cloud

@@ -8,6 +8,6 @@ We’re still early with integrations but you’ll be able to sync environment v

 Check out integrations:

- Heroku
- Docker
- Docker Compose
+- [Heroku](/integrations/heroku)
+- [Docker](/integrations/docker)
+- [Docker Compose](/integrations/docker-compose)
@@ -4,11 +4,11 @@ title: "Infisical Token"

 An Infisical Token is needed to authenticate the CLI when there isn't an easy way to manually type in your login credentials to sync environment variables to your applications.

-It grants read-only access to a particular environment and project for a specified amount of time; once the token expires, any CLI application that relies on it for authentication will be denied access to retrieve related secrets.
+It grants read-only access to a particular environment and project for a specified amount of time.

 This is useful in the following contexts:

- [Docker](../../integrations/docker)/[Docker-Compose](../../integrations/docker-compose) integration: An Infisical Token can be passed to a Docker container as an environment variable for the CLI to authenticate and pull its corresponding secrets.
+- [Docker](/integrations/docker)/[Docker-Compose](/integrations/docker-compose) integration: An Infisical Token can be passed to a Docker container as an environment variable for the CLI to authenticate and pull its corresponding secrets.

 ## Generate an Infisical Token

@@ -19,5 +19,3 @@ It's possible to generate an Infisical token in the settings of a project.
 ![token name](../../images/project-token-name.png)

 ![token added](../../images/project-token-added.png)
-
-To use the Infisical Token in the CLI, check out the docs for that [here](../../getting-started/cli/token).
@@ -20,46 +20,24 @@ The CLI is used to inject environment variables into applications and infrastruc
 - Inject environment variables.
 - Inject environment variables into containers via service tokens for Docker.

-## Integrations
-
-We're still early with integrations but you'll be able to sync environment variables across your entire infrastructure from local development to CI/CD and production.
-
-| Integration    | Status      |
-| -------------- | ----------- |
-| Docker         | Available   |
-| Docker-Compose | Available   |
-| Kubernetes     | Coming soon |
-| Vercel         | Coming soon |
-| AWS            | Coming soon |
-| GCP            | Coming soon |
-| Azure          | Coming soon |
-| DigitalOcean   | Coming soon |
-| GitLab         | Coming soon |
-| CircleCI       | Coming soon |
-| TravisCI       | Coming soon |
-| GitHub Actions | Coming soon |
-| Jenkins        | Coming soon |
-
-Missing an integration? Throw in a request.
-
 ## Roadmap

 We're building the future of secret management, one that's comprehensive and accessible to all. Some high-level features we have in mind:

 | Feature                               | Status      |
-| ------------------------------------- | --------------- |
+| ------------------------------------- | ----------- |
 | Integrations                          | Ongoing     |
 | More hosting options                  | Ongoing     |
 | 1-Click Deploys                       | Ongoing     |
 | Account recovery: Backup key          | Ongoing     |
-| Account recovery: Member-assisted     | Not yet started |
-| Slack & MS teams integrations         | Not yet started |
-| Access logs                           | Not yet started |
-| Version control for secrets           | Not yet started |
-| 2FA                                   | Not yet started |
-| Restricted IPs                        | Not yet started |
-| Read/write access controls            | Not yet started |
-| Secret rotation                       | Not yet started |
-| Comparing secrets across environments | Not yet started |
+| Account recovery: Member-assisted     | Coming soon |
+| Slack & MS teams integrations         | Coming soon |
+| Access logs                           | Coming soon |
+| Version control for secrets           | Coming soon |
+| 2FA                                   | Coming soon |
+| Restricted IPs                        | Coming soon |
+| Read/write access controls            | Coming soon |
+| Secret rotation                       | Coming soon |
+| Comparing secrets across environments | Coming soon |

-Interested in contributing? Check out the guide.
+Interested in contributing? Check out the [guide](/contributing/overview).
@@ -2,20 +2,36 @@
 title: "Introduction"
 ---

-<iframe
-  src="https://www.youtube.com/embed/JS3OKYU2078"
-  width="100%"
-  height="400"
-></iframe>
+Infisical is an [open-source](https://opensource.com/resources/what-open-source), [end-to-end encrypted](https://en.wikipedia.org/wiki/End-to-end_encryption) secret manager that enables teams to easily manage and sync their environment variables.

-Infisical is an [open-source](https://opensource.com/resources/what-open-source), end-to-end encrypted (E2EE) secret manager that enables teams to easily manage and sync their environment variables.
+Start syncing environment variables with [Infisical Cloud](https://app.infisical.com) or learn how to [host Infisical](/self-hosting/overview) yourself.

-It stops [secret sprawl](https://www.gitguardian.com/glossary/secret-sprawl-definition) by providing a single source-of-truth for environment variables. It offers a dashboard for teams to manage environment variables and a platform-agnostic CLI to inject them into apps and infrastructure.
-
-Some problems we solve:
-
- Leaking .env files to version control.
- Debugging missing environment variables.
- Sending environment variables over email.
-
-Infisical uses [end-to-end encryption](https://en.wikipedia.org/wiki/End-to-end_encryption) to ensure that only designated team members can read their environment variables; unless intended for specific integrations, environment variables are always encrypted before being sent to the server.
+<CardGroup cols={2}>
+  <Card
+    title="Quickstart"
+    href="/getting-started/quickstart"
+    icon="timer"
+    color="#ea5a0c"
+  >
+    Tour Infisical in a few minutes.
+  </Card>
+  <Card href="/cli/overview" title="CLI" icon="square-terminal" color="#16a34a">
+    Install the CLI to inject secrets into apps and infra.
+  </Card>
+  <Card
+    href="/self-hosting/overview"
+    title="Self-hosting"
+    icon="server"
+    color="#0285c7"
+  >
+    Learn how to configure and deploy Infisical.
+  </Card>
+  <Card
+    href="/integrations/heroku"
+    title="Integrations"
+    icon="plug"
+    color="#dc2626"
+  >
+    Explore integrations for Docker, AWS, Heroku, etc.
+  </Card>
+</CardGroup>
@@ -0,0 +1,43 @@
+---
+title: "Quickstart"
+---
+
+This example demonstrates how to store and inject environment variables from [Infisical Cloud](https://app.infisical.com) into your application.
+
+Note that the Infisical CLI is platform-agnostic and can inject environment variables across many tech stacks and frameworks.
+
+## Set up Infisical Cloud
+
+1. Login or create an accout at `app.infisical.com`.
+2. Create a new project.
+3. Populate your environment variables as in the image below.
+
+![project quickstart](../images/project-quickstart.png)
+
+## Set up the CLI
+
+1. Follow the instructions to [install the CLI](/cli/overview).
+
+2. Initialize Infisical for your project.
+
+```bash
+# move to your project
+cd /path/to/project
+
+# initialize infisical
+infisical init
+```
+
+## Start your app with environment variables injected
+
+```bash
+# inject environment variables into app
+infisical run -- [your application start command]
+```
+
+<Info>
+  Check out our [integrations](/integrations/overview) for injecting environment
+  variables into frameworks and platforms like Docker.
+</Info>
+
+Your app should be running with the environment variables injected.
@@ -1,11 +0,0 @@
---
-title: "Statement"
---
-
-As a secrets manager, we are deeply committed to enforcing the privacy and security of all users and data on the platform but acknowledge that it is virtually impossible to guarantee perfect security; unfortunately, even the most secure systems have vulnerabilities.
-
-As part of our commitment, we do our best to maintain platform privacy and security, notify users if anything goes wrong, and rectify adverse situations immediately if anything happens. As Infisical grows, we will be adding more opt-in security measures to ensure better data protection and maintain trust within the growing community. With that, let’s make the most simple and secure secrets management system out there!
-
-Best,
-
-Infisical Team
@@ -3,23 +3,26 @@ title: "Docker Compose"
 ---

 ### Step 1: Add CLI to your Dockerfile
-Follow steps 1 through 3 on our [guide to configure Infisical CLI](/docker) in your Dockerfile. 
+
+Follow steps 1 through 3 on our [guide to configure Infisical CLI](../getting-started/cli/installation) in your Dockerfile.

 ### Step 2: Generate Infisical Token
+
 In order for Infisical CLI to authenticate and retrieve your project's secrets without exposing your login credentials, you must generate a Infisical Token.
 To learn how, visit [Infisical Token](../getting-started/cli/infisical-token). Once you have generated the token, keep it handy.

 <Info>
-If you have multiple services and they do not use the same secrets, you will have to generate a Infisical Token for each service.
+  If you have multiple services and they do not use the same secrets, you will
+  have to generate a Infisical Token for each service.
 </Info>

 ### Step 3: Tell Docker Compose your Infisical Token
+
 For each service you want to inject secrets into, set an environment variable called `INFISICAL_TOKEN` equal to a helpful identifier variable.
 This will ensure that you can set Infisical Tokens for multiple services.

 For the example below, we have set `INFISICAL_TOKEN_FOR_WEB` and `INFISICAL_TOKEN_FOR_API` as the `INFISICAL_TOKEN` for the corresponding service.

-
 ```yaml
 # Example Docker Compose file
 services:
@@ -36,9 +39,10 @@ services:
    container_name: auledge-backend
    environment:
      - INFISICAL_TOKEN=${INFISICAL_TOKEN_FOR_API}
-
 ```
+
 ### 4: Export shell variables
+
 Next, set the shell variables you defined in your compose file. This can be done manually or via your CI/CD environment. Once done, it will be used to populate the corresponding `INFISICAL_TOKEN`
 in your Docker Compose file.

@@ -2,8 +2,6 @@
 title: "Docker"
 ---

-Prerequisite: [Infisical Token and How to Generate One](../../getting-started/dashboard/token).
-
 ## Step 1: Add CLI to your Dockerfile

 <Tabs>
@@ -33,7 +31,7 @@ Prerequisite: [Infisical Token and How to Generate One](../../getting-started/da

 ## Step 2: Generate Infisical Token

-In order for the CLI to authenticate and retrieve your project's secrets without requiring your login credentials, you must [generate an Infisical Token](../../getting-started/dashboard/token); keep it handy.
+[Generate an Infisical Token](../../getting-started/dashboard/token) and keep it handy.

 ## Step 3: Set start command of your container

@@ -56,7 +54,7 @@ Required options:
 The CLI looks out for an environment variable called the `INFISICAL_TOKEN` which you can set depending on where you run the CLI. If `INFISICAL_TOKEN` is detected by the CLI, it will authenticate and retrieve the environment variables which the token is authorized for.

 ```bash
- docker run --env INFISICAL_TOKEN=<the-token-you-got-from-step-2>...
+ docker run --env INFISICAL_TOKEN=[the-token-you-got-from-step-2]...
 ```

 Note: `INFISICAL_TOKEN` is the token you generated in step 2.
@@ -5,20 +5,22 @@ description: "With this integration, you can automatically sync your secrets to

 ## Instructions

-### Step 1: Open the integrations csonsole
+### Step 1: Open the integrations console

 Open the Infisical Dashboard. Choose the project in which you want to set up the intergation. Go to the integrations tab in the left sidebar.

 ### Step 2: Authenticate with Heroku

-Click on Heroku in the list of available integrations. Log in if asked by Heroku and provide the necessary permissions to Infisical. You will afterwards be redirected back to the integrations page.
+Click on "Heroku" tile. Log in if required and provide the necessary permissions to Infisical. You will afterwards be redirected back to the integrations page.

-Note: during an integration with Heroku, for security reasons, it is impossible to maintain end-to-end encryption. In theory, this lets Infisical decrypt yor environment variables. In practice, we can assure you that this will never be done, and it allows us to protect your secrets from bad actors online. The core Infisical service will always stay end-to-end encrypted. With any questions, reach out [email protected].
+Note: during an integration with Heroku, for security reasons, it is impossible to maintain end-to-end encryption. In theory, this lets Infisical decrypt yor environment variables. In practice, we can assure you that this will never be done, and it allows us to protect your secrets from bad actors online. With any questions, reach out [email protected].

 ### Step 3: Start integration

-Once the integration is set up, choose a Heroku App that you want to sync the secrets to, and the Infisical project environment that you would to sync the secrets from. Click on the "Start Integration" button.
+Choose a Heroku App that you want to sync the secrets to, and the Infisical project environment that you want to sync the secrets from. Start the integration.

-### Step 4: You're good to go!
+The integration should now show status 'In Sync'. Every time you edit secrets, they will be automatically pushed to Heroku. 

-The integration should now show status 'In Sync'. Every time you edit the secrets, they will be automatically pushed to Heroku. If you want to update anything in your integration, you will have to delete the current one and create a new one.
+<Info> 
+  If you need to update your integration, you will have to delete the current one and create a new one.
+</Info>
@@ -0,0 +1,24 @@
+---
+title: "Overview"
+---
+
+Integrations allow environment variables to be synced across your entire infrastructure from local development to CI/CD and production.
+
+Missing an integration? Throw in a [request](https://github.com/Infisical/infisical/issues).
+
+| Integration                                    | Status      |
+| ---------------------------------------------- | ----------- |
+| [Docker](/integrations/docker)                 | Available   |
+| [Docker-Compose](/integrations/docker-compose) | Available   |
+| [Heroku](/integrations/heroku)                 | Available   |
+| Kubernetes                                     | Coming soon |
+| Vercel                                         | Coming soon |
+| AWS                                            | Coming soon |
+| GCP                                            | Coming soon |
+| Azure                                          | Coming soon |
+| DigitalOcean                                   | Coming soon |
+| GitLab                                         | Coming soon |
+| CircleCI                                       | Coming soon |
+| TravisCI                                       | Coming soon |
+| GitHub Actions                                 | Coming soon |
+| Jenkins                                        | Coming soon |
@@ -35,17 +35,22 @@
  ],
  "navigation": [
    {
-      "group": "Platform",
+      "group": " ",
+      "pages": [
+        {
+          "group": "Overview",
          "pages": [
            "getting-started/introduction",
-        "getting-started/features",
+            "getting-started/quickstart",
+            "getting-started/features"
+          ]
+        },
        {
          "group": "Security",
          "pages": [
-            "getting-started/security/overview",
-            "getting-started/security/data-model",
-            "getting-started/security/mechanics",
-            "getting-started/security/statement"
+            "security/overview",
+            "security/data-model",
+            "security/mechanics"
          ]
        },
        {
@@ -59,12 +64,17 @@
          ] 
        },
        {
-          "group": "Command Line",
+          "group": "CLI",
          "pages": [
-            "getting-started/cli/installation", 
-            "getting-started/cli/cli-guide", 
-            "getting-started/cli/token",
-            "getting-started/cli/reference"
+            "cli/overview",
+            "cli/usage",
+            {
+              "group": "Reference",
+              "pages": [
+                "cli/reference/commands",
+                "cli/reference/login",
+                "cli/reference/init",
+                "cli/reference/run"
              ]
            }
          ]
@@ -72,6 +82,7 @@
        {
          "group": "Integrations",
          "pages": [
+            "integrations/overview",
            "integrations/heroku",
            "integrations/docker",
            "integrations/docker-compose"
@@ -96,8 +107,9 @@
          "pages": [
            "contributing/overview",
            "contributing/code-of-conduct",
-        "contributing/developing",
-        "contributing/architecture"
+            "contributing/developing"
+          ]
+        }
      ]
    }
  ],
@@ -18,3 +18,13 @@ In subsequent sections, we refer:

 - To users uploading their secrets to Infisical as “senders” and those receiving secrets as “receivers". For instance, if Bob and Alice are both enrolled in a project and Bob adds new secrets to the project to be pulled by Alice, then Bob is considered to be the sender and Alice the receiver.
 - To any activity involving uploading or modifying secrets to Infisical as "pushing" and fetching secrets from Infisical as "pulling."
+
+## Statement
+
+As a secrets manager, we are deeply committed to enforcing the privacy and security of all users and data on the platform but acknowledge that it is virtually impossible to guarantee perfect security; unfortunately, even the most secure systems have vulnerabilities.
+
+As part of our commitment, we do our best to maintain platform privacy and security, notify users if anything goes wrong, and rectify adverse situations immediately if anything happens. As Infisical grows, we will be adding more opt-in security measures to ensure better data protection and maintain trust within the growing community. With that, let’s make the most simple and secure secrets management system out there!
+
+Best,
+
+Infisical Team
@@ -17,6 +17,10 @@ Infisical Cloud also comes with some extra features unavailabe in the self-hoste

 Infisical can be deployed on a Linux VM with docker-compose. We're rolling out more specific deployment options for DigitalOcean, AWS, GCP, and Azure soon.

+Options:
+
+- [Linux VM](/self-hosting/deployments/linux)
+
 ## Telemetry

 Infisical collects telemetry data about general usage.
@@ -0,0 +1,46 @@
+{
+  "extends": "next/core-web-vitals",
+  "plugins": [
+    "simple-import-sort"
+  ],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "simple-import-sort/exports": "warn",
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        "groups": [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          // Note that if you use the `node:` prefix for Node.js builtins,
+          // you can avoid this complexity: You can simply use "^node:".
+          [
+            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
+          ],
+          // Packages `react` related packages
+          [
+            "^react",
+            "^next",
+            "^@?\\w"
+          ],
+          // Internal packages.
+          [
+            "^~(/.*|$)"
+          ],
+          // Relative imports
+          [
+            "^\\.\\.(?!/?$)",
+            "^\\.\\./?$",
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$"
+          ],
+          // Style imports.
+          [
+            "^.+\\.?(css|scss)$"
+          ]
+        ]
+      }
+    ]
+  }
+}
@@ -1,4 +1,4 @@
 {
-	"tabWidth": 4,
-	"useTabs": true
+  "tabWidth": 2,
+  "useTabs": false
 }
@@ -1,8 +1,9 @@
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import checkAuth from "../pages/api/auth/CheckAuth";
+import { useEffect, useState } from "react";
 import Image from "next/image";
-import { publicPaths } from "../const";
+import { useRouter } from "next/router";
+
+import { publicPaths } from "~/const";
+import checkAuth from "~/pages/api/auth/CheckAuth";

 // #TODO: finish spinner only when the data loads fully
 // #TODO: Redirect somewhere if the page does not exist
@@ -11,9 +12,11 @@ export default function RouteGuard({ children }) {
  const router = useRouter();
  const [authorized, setAuthorized] = useState(false);

-	useEffect(async () => {
+  useEffect(() => {
    // on initial load - run auth check
+    (async () => {
      await authCheck(router.asPath);
+    })();

    // on route change start - hide page content by setting authorized to false
    // #TODO: add the loading page when not yet authorized.
@@ -31,7 +34,6 @@ export default function RouteGuard({ children }) {
      router.events.off("routeChangeComplete", authCheck);
      // router.events.off("routeChangeError", onError);
    };
-
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

@@ -1,63 +0,0 @@
-/**
- * @fileoverview Provides easy encryption/decryption methods using AES 256 GCM.
- */
-
-"use strict";
-
-const crypto = require("crypto");
-
-const ALGORITHM = "aes-256-gcm";
-const BLOCK_SIZE_BYTES = 16; // 128 bit
-
-/**
- * Provides easy encryption/decryption methods using AES 256 GCM.
- */
-class Aes256Gcm {
-	/**
-	 * No need to run the constructor. The class only has static methods.
-	 */
-	constructor() {}
-
-	/**
-	 * Encrypts text with AES 256 GCM.
-	 * @param {string} text - Cleartext to encode.
-	 * @param {string} secret - Shared secret key, must be 32 bytes.
-	 * @returns {object}
-	 */
-	static encrypt(text, secret) {
-		const iv = crypto.randomBytes(BLOCK_SIZE_BYTES);
-		const cipher = crypto.createCipheriv(ALGORITHM, secret, iv);
-
-		let ciphertext = cipher.update(text, "utf8", "base64");
-		ciphertext += cipher.final("base64");
-		return {
-			ciphertext,
-			iv: iv.toString("base64"),
-			tag: cipher.getAuthTag().toString("base64"),
-		};
-	}
-
-	/**
-	 * Decrypts AES 256 CGM encrypted text.
-	 * @param {string} ciphertext - Base64-encoded ciphertext.
-	 * @param {string} iv - The base64-encoded initialization vector.
-	 * @param {string} tag - The base64-encoded authentication tag generated by getAuthTag().
-	 * @param {string} secret - Shared secret key, must be 32 bytes.
-	 * @returns {string}
-	 */
-	static decrypt(ciphertext, iv, tag, secret) {
-		const decipher = crypto.createDecipheriv(
-			ALGORITHM,
-			secret,
-			Buffer.from(iv, "base64")
-		);
-		decipher.setAuthTag(Buffer.from(tag, "base64"));
-
-		let cleartext = decipher.update(ciphertext, "base64", "utf8");
-		cleartext += decipher.final("utf8");
-
-		return cleartext;
-	}
-}
-
-module.exports = Aes256Gcm;
@@ -1,5 +1,11 @@
 import posthog from "posthog-js";
-import { ENV, POSTHOG_API_KEY, POSTHOG_HOST, TELEMETRY_ENABLED } from "../utilities/config";
+
+import {
+  ENV,
+  POSTHOG_API_KEY,
+  POSTHOG_HOST,
+  TELEMETRY_ENABLED,
+} from "../utilities/config";

 export const initPostHog = () => {
  if (typeof window !== "undefined") {
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 export default function Error({ text }) {
  return (
@@ -10,9 +10,7 @@ export default function Error({ text }) {
        className="text-white mt-1.5 mb-2 mx-2"
      />
      {text && (
-				<p className="relative top-0 text-white mr-2 text-sm py-1">
-					{text}
-				</p>
+        <p className="relative top-0 text-white mr-2 text-sm py-1">{text}</p>
      )}
    </div>
  );
@@ -1,6 +1,6 @@
 import React from "react";
-import Error from "./Error";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { useRouter } from "next/router";
 import {
  faCircle,
  faCircleExclamation,
@@ -8,9 +8,10 @@ import {
  faEye,
  faEyeSlash,
 } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import guidGenerator from "../utilities/randomId";
-import { useState } from "react";
-import { useRouter } from "next/router";
+import Error from "./Error";

 const InputField = (props) => {
  const [passwordVisible, setPasswordVisible] = useState(false);
@@ -75,9 +76,7 @@ const InputField = (props) => {
                ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
                : ""
            } ${
-							props.error
-								? "focus:ring-red/50"
-								: "focus:ring-primary/50"
+              props.error ? "focus:ring-red/50" : "focus:ring-primary/50"
            } relative peer bg-bunker-800 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
            name={props.name}
            spellCheck="false"
@@ -1,9 +1,13 @@
 import React from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faPlus, faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import { Fragment } from "react";
 import { useRouter } from "next/router";
+import {
+  faAngleDown,
+  faCheck,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Listbox, Transition } from "@headlessui/react";

 /**
 * This is the component that we use for drop down lists.
@@ -55,9 +59,7 @@ export default function ListBox({
                  key={personIdx}
                  className={({ active, selected }) =>
                    `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
-											selected
-												? "bg-white/10 text-gray-400 font-bold"
-												: ""
+                      selected ? "bg-white/10 text-gray-400 font-bold" : ""
                    } ${
                      active & !selected
                        ? "bg-white/5 text-mineshaft-200 cursor-pointer"
@@ -70,16 +72,17 @@ export default function ListBox({
                    <>
                      <span
                        className={`block truncate text-primary${
-													selected
-														? "font-medium"
-														: "font-normal"
+                          selected ? "font-medium" : "font-normal"
                        }`}
                      >
                        {person}
                      </span>
                      {selected ? (
                        <span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
-													<FontAwesomeIcon icon={faCheck} className="text-md ml-1"/>
+                          <FontAwesomeIcon
+                            icon={faCheck}
+                            className="text-md ml-1"
+                          />
                        </span>
                      ) : null}
                    </>
@@ -1,111 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-
-var classNames = require("classnames");
-
-export default function Button({
-	text,
-	onButtonPressed,
-	link,
-	loading,
-	color,
-	size,
-	icon,
-	active = true,
-	iconDisabled,
-	textDisabled
-}) {
-	let styleButton = classNames(
-		"group m-auto md:m-0 inline-block rounded-md duration-200",
-
-		// Setting background colors and hover modes
-		color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
-		color == "mineshaft" && !active && "bg-mineshaft",
-		(color == "primary" || !color) && active && "bg-primary hover:opacity-80",
-		(color == "primary" || !color) && !active && "bg-primary",
-		color == "red" && "bg-red",
-		
-		// Changing the opacity when active vs when not
-		active ? "opacity-100 cursor-pointer" : "opacity-40",
-
-		// Setting the button sizes
-		size == "md" && "h-10 w-full px-2 md:px-4",
-		size == "lg" && "h-12 w-full px-2 md:px-8",
-		!size && "md:py-1 px-3 md:px-8",
-		size == "icon-md" && "h-10 w-10 flex items-center justify-center",
-		size == "icon-sm" && "h-9 w-9 flex items-center justify-center",
-	);
-
-	let styleMainDiv = classNames(
-		"relative font-medium flex items-center",
-
-		// Setting the text color for the text and icon
-		color == "mineshaft" && "text-gray-400",
-		color != "mineshaft" && color != "red" && "text-black",
-		color == "red" && "text-gray-200",
-		active && color != "red" ? "group-hover:text-black" : "",
-
-		size == "icon" && "flex items-center justify-center",
-	);
-
-	let textStyle = classNames(
-		"relative duration-200",
-
-		// Show the loading sign if the loading indicator is on
-		loading == true ? "opacity-0" : "opacity-100",
-		size == "md" && "text-sm",
-		size == "lg" && "text-lg"
-	);
-
-	const button = (
-		<button 
-			disabled={!active}
-			onClick={onButtonPressed}
-			className={styleButton}
-		>
-			<div className={styleMainDiv}>
-				<div
-					className={`${
-						loading == true ? "opacity-100" : "opacity-0"
-					} absolute flex items-center px-2 duration-200`}
-				>
-					<Image
-						src="/images/loading/loadingblack.gif"
-						height={25}
-						width={42}
-						alt="loading animation"
-						className={`rounded-xl`}
-					></Image>
-				</div>
-				{icon && 
-					<FontAwesomeIcon
-						icon={icon}
-						className={`flex my-auto font-extrabold ${size == "icon-sm" ? "text-sm" : "text-md"} ${(text || textDisabled) && "mr-2"}`}
-					/>
-				}
-				{iconDisabled && 
-					<FontAwesomeIcon
-						icon={iconDisabled}
-						className={`flex my-auto font-extrabold ${size == "icon-sm" ? "text-sm" : "text-md"} ${(text || textDisabled) && "mr-2"}`}
-					/>
-				}
-				{(text || textDisabled) &&
-					<p
-						className={textStyle}
-					>
-						{active ? text : textDisabled}
-					</p>
-				}
-			</div>
-		</button>
-	);
-
-	if (link) {
-		return <Link href={link}>{button}</Link>;
-	}
-
-	return button;
-}
@@ -0,0 +1,111 @@
+import React from "react";
+import Image from "next/image";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+var classNames = require("classnames");
+
+type ButtonProps = {
+  text: string;
+  onButtonPressed: () => void;
+  loading: boolean;
+  color: string;
+  size: string;
+  icon: IconProp;
+  active: boolean;
+  iconDisabled: string;
+  textDisabled: string;
+}
+
+export default function Button (props: ButtonProps): JSX.Element {
+  // Check if the button show always be 'active' - then true;
+  // or if it should switch between 'active' and 'disabled' - then give the status
+  const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
+  
+  let styleButton = classNames(
+    "group m-auto md:m-0 inline-block rounded-md duration-200",
+
+    // Setting background colors and hover modes
+    props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
+    props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
+    (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
+    props.color == "red" && "bg-red",
+
+    // Changing the opacity when active vs when not
+    activityStatus ? "opacity-100 cursor-pointer" : "opacity-40",
+
+    // Setting the button sizes
+    props.size == "md" && "h-10 w-full px-2 md:px-4",
+    props.size == "lg" && "h-12 w-full px-2 md:px-8",
+    !props.size && "md:py-1 px-3 md:px-8",
+    props.size == "icon-md" && "h-10 w-10 flex items-center justify-center",
+    props.size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
+  );
+
+  let styleMainDiv = classNames(
+    "relative font-medium flex items-center",
+
+    // Setting the text color for the text and icon
+    props.color == "mineshaft" && "text-gray-400",
+    props.color != "mineshaft" && props.color != "red" && "text-black",
+    props.color == "red" && "text-gray-200",
+    activityStatus && props.color != "red" ? "group-hover:text-black" : "",
+
+    props.size == "icon" && "flex items-center justify-center"
+  );
+
+  let textStyle = classNames(
+    "relative duration-200",
+
+    // Show the loading sign if the loading indicator is on
+    props.loading == true ? "opacity-0" : "opacity-100",
+    props.size == "md" && "text-sm",
+    props.size == "lg" && "text-lg"
+  );
+
+  const button = (
+    <button
+      disabled={!activityStatus}
+      onClick={props.onButtonPressed}
+      className={styleButton}
+    >
+      <div className={styleMainDiv}>
+        <div
+          className={`${
+            props.loading == true ? "opacity-100" : "opacity-0"
+          } absolute flex items-center px-2 duration-200`}
+        >
+          <Image
+            src="/images/loading/loadingblack.gif"
+            height={25}
+            width={42}
+            alt="loading animation"
+            className={`rounded-xl`}
+          ></Image>
+        </div>
+        {props.icon && (
+          <FontAwesomeIcon
+            icon={props.icon as IconProp}
+            className={`flex my-auto font-extrabold ${
+              props.size == "icon-sm" ? "text-sm" : "text-md"
+            } ${(props.text || props.textDisabled) && "mr-2"}`}
+          />
+        )}
+        {props.iconDisabled && (
+          <FontAwesomeIcon
+            icon={props.iconDisabled as IconProp}
+            className={`flex my-auto font-extrabold ${
+              props.size == "icon-sm" ? "text-sm" : "text-md"
+            } ${(props.text || props.textDisabled) && "mr-2"}`}
+          />
+        )}
+        {(props.text || props.textDisabled) && (
+          <p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
+        )}
+      </div>
+    </button>
+  );
+
+  return button;
+}
@@ -1,8 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import InputField from "../InputField";
-import addIncidentContact from "../../../pages/api/organization/addIncidentContact";
+import { Dialog, Transition } from "@headlessui/react";
+
+import addIncidentContact from "~/pages/api/organization/addIncidentContact";
+
 import Button from "../buttons/Button";
+import InputField from "../InputField";

 const AddIncidentContactDialog = ({
  isOpen,
@@ -19,7 +21,10 @@ const AddIncidentContactDialog = ({
        ? incidentContacts.concat([incidentContactEmail])
        : [incidentContactEmail]
    );
-		addIncidentContact(localStorage.getItem("orgData.id"), incidentContactEmail);
+    addIncidentContact(
+      localStorage.getItem("orgData.id"),
+      incidentContactEmail
+    );
    closeModal();
  };
  return (
@@ -58,16 +63,14 @@ const AddIncidentContactDialog = ({
                  </Dialog.Title>
                  <div className="mt-2 mb-2">
                    <p className="text-sm text-gray-500">
-											This contact will be notified in the
-											unlikely event of a severe incident.
+                      This contact will be notified in the unlikely event of a
+                      severe incident.
                    </p>
                  </div>
                  <div className="max-h-28">
                    <InputField
                      label="Email"
-											onChangeHandler={
-												setIncidentContactEmail
-											}
+                      onChangeHandler={setIncidentContactEmail}
                      type="varName"
                      value={incidentContactEmail}
                      placeholder=""
@@ -1,10 +1,11 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import ListBox from "../Listbox";
 import { useRouter } from "next/router";
-import Button from "../buttons/Button";
-import useTranslation from "next-translate/useTranslation";
 import Trans from "next-translate/Trans";
+import useTranslation from "next-translate/useTranslation";
+import { Dialog, Transition } from "@headlessui/react";
+
+import Button from "../buttons/Button";
+import ListBox from "../Listbox";

 const AddProjectMemberDialog = ({
  isOpen,
@@ -51,53 +52,44 @@ const AddProjectMemberDialog = ({
                      as="h3"
                      className="text-lg font-medium leading-6 text-gray-400 z-50"
                    >
-											{t(
-												"settings:add-member-dialog.add-member-to-project"
-											)}
+                      {t("settings:add-member-dialog.add-member-to-project")}
                    </Dialog.Title>
                  ) : (
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 text-gray-400 z-50"
                    >
-											{t(
-												"settings:add-member-dialog.already-all-invited"
-											)}
+                      {t("settings:add-member-dialog.already-all-invited")}
                    </Dialog.Title>
                  )}
                  <div className="mt-2 mb-4">
                    {data?.length > 0 ? (
                      <div className="flex flex-col">
                        <p className="text-sm text-gray-500">
-													{t(
-														"settings:add-member-dialog.user-will-email"
-													)}
+                          {t("settings:add-member-dialog.user-will-email")}
                        </p>
                        <div className="">
                          <Trans
                            i18nKey="settings:add-member-dialog.looking-add"
                            components={[
+                              // eslint-disable-next-line react/jsx-key
                              <button
                                type="button"
                                className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                                onClick={() =>
                                  router.push(
-																		"/settings/org/" +
-																			router
-																				.query
-																				.id
+                                    "/settings/org/" + router.query.id
                                  )
                                }
                              />,
+                              // eslint-disable-next-line react/jsx-key
                              <button
                                type="button"
                                className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                                onClick={() =>
                                  router.push(
                                    "/settings/org/" +
-																			router
-																				.query
-																				.id +
+                                      router.query.id +
                                      "?invite"
                                  )
                                }
@@ -110,18 +102,14 @@ const AddProjectMemberDialog = ({
                      </div>
                    ) : (
                      <p className="text-sm text-gray-500">
-												{t(
-													"settings:add-member-dialog.add-user-org-first"
-												)}
+                        {t("settings:add-member-dialog.add-user-org-first")}
                      </p>
                    )}
                  </div>
                  <div className="max-h-28">
                    {data?.length > 0 && (
                      <ListBox
-												selected={
-													email ? email : data[0]
-												}
+                        selected={email ? email : data[0]}
                        onChange={setEmail}
                        data={data}
                        width="full"
@@ -132,28 +120,19 @@ const AddProjectMemberDialog = ({
                    {data?.length > 0 ? (
                      <div className="mt-6 flex flex-col justify-start w-max">
                        <Button
-													onButtonPressed={
-														submitModal
-													}
+                          onButtonPressed={submitModal}
                          color="mineshaft"
-													text={t(
-														"settings:add-member-dialog.add-member"
-													)}
+                          text={t("settings:add-member-dialog.add-member")}
                          size="md"
                        />
                      </div>
                    ) : (
                      <Button
                        onButtonPressed={() =>
-													router.push(
-														"/settings/org/" +
-															router.query.id
-													)
+                          router.push("/settings/org/" + router.query.id)
                        }
                        color="mineshaft"
-												text={t(
-													"settings:add-member-dialog.add-user-to-org"
-												)}
+                        text={t("settings:add-member-dialog.add-user-to-org")}
                        size="md"
                      />
                    )}
@@ -1,15 +1,20 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import ListBox from "../Listbox";
 import { useRouter } from "next/router";
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
-import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
-import addServiceToken from "../../../pages/api/serviceToken/addServiceToken";
-import nacl from "tweetnacl";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Dialog, Transition } from "@headlessui/react";
+import nacl from "tweetnacl";
+
+import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+
+import {
+  decryptAssymmetric,
+  encryptAssymmetric,
+} from "../../utilities/cryptography/crypto";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
+import ListBox from "../Listbox";

 const envMapping = {
  Development: "dev",
@@ -28,7 +33,7 @@ const AddServiceTokenDialog = ({
  isOpen,
  closeModal,
  workspaceId,
-	workspaceName
+  workspaceName,
 }) => {
  const router = useRouter();
  const [serviceToken, setServiceToken] = useState("");
@@ -44,7 +49,7 @@ const AddServiceTokenDialog = ({
      ciphertext: latestFileKey.latestKey.encryptedKey,
      nonce: latestFileKey.latestKey.nonce,
      publicKey: latestFileKey.latestKey.sender.publicKey,
-			privateKey: localStorage.getItem("PRIVATE_KEY")
+      privateKey: localStorage.getItem("PRIVATE_KEY"),
    });

    // generate new public/private key pair
@@ -56,7 +61,7 @@ const AddServiceTokenDialog = ({
    const { ciphertext: encryptedKey, nonce } = encryptAssymmetric({
      plaintext: key,
      publicKey,
-			privateKey
+      privateKey,
    });

    let newServiceToken = await addServiceToken({
@@ -66,12 +71,12 @@ const AddServiceTokenDialog = ({
      expiresIn: expiryMapping[serviceTokenExpiresIn],
      publicKey,
      encryptedKey,
-			nonce
-		})
+      nonce,
+    });

-		const serviceToken = newServiceToken + ',' + privateKey;
+    const serviceToken = newServiceToken + "," + privateKey;
    setServiceToken(serviceToken);
-	}
+  };

  function copyToClipboard() {
    // Get the text field
@@ -94,7 +99,7 @@ const AddServiceTokenDialog = ({
    closeModal();
    setServiceTokenName("");
    setServiceToken("");
-	}
+  };

  return (
    <div className="z-50">
@@ -123,8 +128,8 @@ const AddServiceTokenDialog = ({
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
-								{serviceToken == "" 
-								?	<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                {serviceToken == "" ? (
+                  <Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 text-gray-400 z-50"
@@ -134,16 +139,17 @@ const AddServiceTokenDialog = ({
                    <div className="mt-2 mb-4">
                      <div className="flex flex-col">
                        <p className="text-sm text-gray-500">
-													Specify the name, environment, and expiry period. When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.
+                          Specify the name, environment, and expiry period. When
+                          a token is generated, you will only be able to see it
+                          once before it disappears. Make sure to save it
+                          somewhere.
                        </p>
                      </div>
                    </div>
                    <div className="max-h-28 mb-2">
                      <InputField
                        label="Service Token Name"
-												onChangeHandler={
-													setServiceTokenName
-												}
+                        onChangeHandler={setServiceTokenName}
                        type="varName"
                        value={serviceTokenName}
                        placeholder=""
@@ -154,7 +160,12 @@ const AddServiceTokenDialog = ({
                      <ListBox
                        selected={serviceTokenEnv}
                        onChange={setServiceTokenEnv}
-												data={["Development", "Staging", "Production", "Testing"]}
+                        data={[
+                          "Development",
+                          "Staging",
+                          "Production",
+                          "Testing",
+                        ]}
                        width="full"
                        text="Environment: "
                      />
@@ -181,7 +192,8 @@ const AddServiceTokenDialog = ({
                      </div>
                    </div>
                  </Dialog.Panel>
-								:	<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                ) : (
+                  <Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 text-gray-400 z-50"
@@ -191,17 +203,35 @@ const AddServiceTokenDialog = ({
                    <div className="mt-2 mb-4">
                      <div className="flex flex-col">
                        <p className="text-sm text-gray-500">
-													Once you close this popup, you will never see your service token again
+                          Once you close this popup, you will never see your
+                          service token again
                        </p>
                      </div>
                    </div>
                    <div className="w-full">
                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-36">
-												<input type="text" value={serviceToken} id="serviceToken" className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"></input>
-												<div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">{serviceToken}</div>
+                        <input
+                          type="text"
+                          value={serviceToken}
+                          id="serviceToken"
+                          className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"
+                        ></input>
+                        <div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">
+                          {serviceToken}
+                        </div>
                        <div className="group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200">
-													<button onClick={copyToClipboard} className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200">
-														{serviceTokenCopied ? <FontAwesomeIcon icon={faCheck} className="pr-0.5"/> : <FontAwesomeIcon icon={faCopy} />}
+                          <button
+                            onClick={copyToClipboard}
+                            className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
+                          >
+                            {serviceTokenCopied ? (
+                              <FontAwesomeIcon
+                                icon={faCheck}
+                                className="pr-0.5"
+                              />
+                            ) : (
+                              <FontAwesomeIcon icon={faCopy} />
+                            )}
                          </button>
                          <span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
                            Click to Copy
@@ -218,7 +248,7 @@ const AddServiceTokenDialog = ({
                      />
                    </div>
                  </Dialog.Panel>
-									}
+                )}
              </Transition.Child>
            </div>
          </div>
@@ -1,9 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import InputField from "../InputField";
 import { useRouter } from "next/router";
-import Button from "../buttons/Button";
+import { Dialog, Transition } from "@headlessui/react";
+
 import { STRIPE_PRODUCT_STARTER } from "../../utilities/config";
+import Button from "../buttons/Button";
+import InputField from "../InputField";

 const AddUserDialog = ({
  isOpen,
@@ -13,7 +14,7 @@ const AddUserDialog = ({
  workspaceId,
  setEmail,
  currentPlan,
-	orgName
+  orgName,
 }) => {
  const submit = () => {
    submitModal(email);
@@ -56,9 +57,9 @@ const AddUserDialog = ({
                  </Dialog.Title>
                  <div className="mt-2 mb-4">
                    <p className="text-sm text-gray-500">
-											An invite is specific to an email address 
-											and expires after 1 day. For security reasons, 
-											you will need to separately add members to projects.
+                      An invite is specific to an email address and expires
+                      after 1 day. For security reasons, you will need to
+                      separately add members to projects.
                    </p>
                  </div>
                  <div className="max-h-28">
@@ -71,15 +72,13 @@ const AddUserDialog = ({
                      isRequired
                    />
                  </div>
-									{currentPlan == STRIPE_PRODUCT_STARTER && <div className="flex flex-row">
+                  {currentPlan == STRIPE_PRODUCT_STARTER && (
+                    <div className="flex flex-row">
                      <button
                        type="button"
                        className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                        onClick={() =>
-												router.push(
-													"/settings/billing/" +
-														router.query.id
-												)
+                          router.push("/settings/billing/" + router.query.id)
                        }
                      >
                        You can add up to 5 members on a Free tier.
@@ -88,15 +87,13 @@ const AddUserDialog = ({
                        type="button"
                        className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                        onClick={() =>
-												router.push(
-													"/settings/billing/" +
-														router.query.id
-												)
+                          router.push("/settings/billing/" + router.query.id)
                        }
                      >
                        Upgrade now.
                      </button>
-									</div>}
+                    </div>
+                  )}
                  <div className="mt-4 max-w-max">
                    <Button
                      onButtonPressed={submit}
@@ -1,9 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import InputField from "../InputField";
 import Image from "next/image";
-import { Checkbox } from "../table/Checkbox";
+import { Dialog, Transition } from "@headlessui/react";
+
 import Button from "../buttons/Button";
+import InputField from "../InputField";
+import { Checkbox } from "../table/Checkbox";

 /**
 * The dialog modal for when the user wants to create a new workspace
@@ -60,8 +61,7 @@ const AddWorkspaceDialog = ({
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
-											This project will contain your
-											environmental variables.
+                      This project will contain your environmental variables.
                    </p>
                  </div>
                  <div className="max-h-28 mt-4">
@@ -1,14 +1,19 @@
-import { Dialog, Transition } from '@headlessui/react'
-import { Fragment, useState } from 'react'
-import InputField from '../InputField';
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+import InputField from "../InputField";

 // #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.

-
-const DeleteUserDialog = ({isOpen, closeModal, submitModal, userIdToBeDeleted}) => {
+const DeleteUserDialog = ({
+  isOpen,
+  closeModal,
+  submitModal,
+  userIdToBeDeleted,
+}) => {
  const submit = () => {
    submitModal(userIdToBeDeleted);
-    }
+  };
  return (
    <div>
      <Transition appear show={isOpen} as={Fragment}>
@@ -41,7 +46,8 @@ const DeleteUserDialog = ({isOpen, closeModal, submitModal, userIdToBeDeleted})
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-400"
                  >
-                        Are you sure you want to remove this user from the workspace?
+                    Are you sure you want to remove this user from the
+                    workspace?
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
@@ -1,30 +1,33 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import useTranslation from "next-translate/useTranslation";
+import {
+  faGear,
+  faHouse,
+  faLink,
+  faMobile,
+  faUser,
+} from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import getOrganizations from "~/pages/api/organization/getOrgs";
+import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
+import getOrganizationUsers from "~/pages/api/organization/GetOrgUsers";
+import addUserToWorkspace from "~/pages/api/workspace/addUserToWorkspace";
+import createWorkspace from "~/pages/api/workspace/createWorkspace";
+import getWorkspaces from "~/pages/api/workspace/getWorkspaces";

 import NavBarDashboard from "../navigation/NavBarDashboard";
-import Listbox from "./Listbox";
-import getWorkspaces from "../../pages/api/workspace/getWorkspaces";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-	faHouse,
-	faUser,
-	faGear,
-	faMobile,
-	faLink,
-} from "@fortawesome/free-solid-svg-icons";
-import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
-import createWorkspace from "../../pages/api/workspace/createWorkspace";
-import getOrganizationUserProjects from "../../pages/api/organization/GetOrgUserProjects";
-import getOrganizationUsers from "../../pages/api/organization/GetOrgUsers";
-import addUserToWorkspace from "../../pages/api/workspace/addUserToWorkspace";
-import getOrganizations from "../../pages/api/organization/getOrgs";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-
-import { decryptAssymmetric, encryptAssymmetric } from "../utilities/crypto";
+  decryptAssymmetric,
+  encryptAssymmetric,
+} from "../utilities/cryptography/crypto";
 import Button from "./buttons/Button";
-
-import useTranslation from "next-translate/useTranslation";
+import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
+import Listbox from "./Listbox";

 export default function Layout({ children }) {
  const router = useRouter();
@@ -75,8 +78,7 @@ export default function Layout({ children }) {
              newWorkspaceId
            );
            if (result?.invitee && result?.latestKey) {
-							const PRIVATE_KEY =
-								localStorage.getItem("PRIVATE_KEY");
+              const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");

              // assymmetrically decrypt symmetric key with local private key
              const key = decryptAssymmetric({
@@ -92,12 +94,7 @@ export default function Layout({ children }) {
                privateKey: PRIVATE_KEY,
              });

-							uploadKeys(
-								newWorkspaceId,
-								result.invitee._id,
-								ciphertext,
-								nonce
-							);
+              uploadKeys(newWorkspaceId, result.invitee._id, ciphertext, nonce);
            }
          }
        });
@@ -118,9 +115,7 @@ export default function Layout({ children }) {
  const menuItems = [
    {
      href:
-				"/dashboard/" +
-				workspaceMapping[workspaceSelected] +
-				"?Development",
+        "/dashboard/" + workspaceMapping[workspaceSelected] + "?Development",
      title: t("nav:menu.secrets"),
      emoji: <FontAwesomeIcon icon={faHouse} />,
    },
@@ -173,27 +168,17 @@ export default function Layout({ children }) {
          .map((workspace) => workspace._id)
          .includes(intendedWorkspaceId)
      ) {
-				router.push(
-					"/dashboard/" + userWorkspaces[0]._id + "?Development"
-				);
+        router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
      } else {
-				setWorkspaceList(
-					userWorkspaces.map((workspace) => workspace.name)
-				);
+        setWorkspaceList(userWorkspaces.map((workspace) => workspace.name));
        setWorkspaceMapping(
          Object.fromEntries(
-						userWorkspaces.map((workspace) => [
-							workspace.name,
-							workspace._id,
-						])
+            userWorkspaces.map((workspace) => [workspace.name, workspace._id])
          )
        );
        setWorkspaceSelected(
          Object.fromEntries(
-						userWorkspaces.map((workspace) => [
-							workspace._id,
-							workspace.name,
-						])
+            userWorkspaces.map((workspace) => [workspace._id, workspace.name])
          )[
            router.asPath
              .split("/")
@@ -214,9 +199,7 @@ export default function Layout({ children }) {
            [router.asPath.split("/").length - 1].split("?")[0]
      ) {
        router.push(
-					"/dashboard/" +
-						workspaceMapping[workspaceSelected] +
-						"?Development"
+          "/dashboard/" + workspaceMapping[workspaceSelected] + "?Development"
        );
        localStorage.setItem(
          "projectData.id",
@@ -263,37 +246,22 @@ export default function Layout({ children }) {
                {workspaceList.length > 0 &&
                  menuItems.map(({ href, title, emoji }) => (
                    <li className="mt-1.5 mx-2" key={title}>
-											{router.asPath.split("/")[1] ===
-												href.split("/")[1] &&
-											([
-												"project",
-												"billing",
-												"org",
-												"personal",
-											].includes(
+                      {router.asPath.split("/")[1] === href.split("/")[1] &&
+                      (["project", "billing", "org", "personal"].includes(
                        router.asPath.split("/")[2]
                      )
-												? router.asPath.split(
-														"/"
-												  )[2] === href.split("/")[2]
+                        ? router.asPath.split("/")[2] === href.split("/")[2]
                        : true) ? (
                        <div
                          className={`flex p-2 text-white text-sm rounded cursor-pointer bg-mineshaft-50/10`}
                        >
                          <div className="bg-primary w-1 rounded-xl mr-1"></div>
-													<p className="ml-2 mr-4">
-														{emoji}
-													</p>
+                          <p className="ml-2 mr-4">{emoji}</p>
                          {title}
                        </div>
-											) : router.asPath ==
-											  "/noprojects" ? (
-												<div
-													className={`flex p-2 text-white text-sm rounded`}
-												>
-													<p className="ml-2 mr-4">
-														{emoji}
-													</p>
+                      ) : router.asPath == "/noprojects" ? (
+                        <div className={`flex p-2 text-white text-sm rounded`}>
+                          <p className="ml-2 mr-4">{emoji}</p>
                          {title}
                        </div>
                      ) : (
@@ -301,9 +269,7 @@ export default function Layout({ children }) {
                          <div
                            className={`flex p-2 text-white text-sm rounded cursor-pointer hover:bg-mineshaft-50/5`}
                          >
-														<p className="ml-2 mr-4">
-															{emoji}
-														</p>
+                            <p className="ml-2 mr-4">{emoji}</p>
                            {title}
                          </div>
                        </Link>
@@ -331,7 +297,7 @@ export default function Layout({ children }) {
          className="text-gray-300 text-7xl mb-8"
        />
        <p className="text-gray-200 px-6 text-center text-lg max-w-sm">
-					{` ${t("need-login")} `}
+          {` ${t("common:no-mobile")} `}
        </p>
      </div>
    </>
@@ -1,8 +1,6 @@
 import React from "react";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-	faXmark,
-} from "@fortawesome/free-solid-svg-icons";

 export default function BottonRightPopup({
  buttonText,
@@ -11,22 +9,34 @@ export default function BottonRightPopup({
  emoji,
  textLine1,
  textLine2,
-	setCheckDocsPopUpVisible
+  setCheckDocsPopUpVisible,
 }) {
  return (
-		<div class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6" role="alert">
+    <div
+      class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
+      role="alert"
+    >
      <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
        <div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
          <div>{titleText}</div>
          <div class="ml-2.5">{emoji}</div>
        </div>
-				<button className="mt-1" onClick={() => setCheckDocsPopUpVisible(false)}>
-					<FontAwesomeIcon icon={faXmark} className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer" />
+        <button
+          className="mt-1"
+          onClick={() => setCheckDocsPopUpVisible(false)}
+        >
+          <FontAwesomeIcon
+            icon={faXmark}
+            className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer"
+          />
        </button>
      </div>
-			<div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">{textLine1}</div>
+      <div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
+        {textLine1}
+      </div>
      <div class="block sm:inline mb-4 px-6">{textLine2}</div>
      <div className="flex flex-row px-6 w-full">
+        {/*eslint-disable-next-line react/jsx-no-target-blank */}
        <a
          class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
          href={buttonLink}
@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { faX } from "@fortawesome/free-solid-svg-icons";
-import Button from "../buttons/Button";
+
 import guidGenerator from "../../utilities/randomId";
+import Button from "../buttons/Button";

 const roles = ["admin", "user"];

 const reverseEnvMapping = {
-	"dev": "Development",
-	"staging": "Staging",
-	"prod": "Production",
-	"test": "Testing"
-}
+  dev: "Development",
+  staging: "Staging",
+  prod: "Production",
+  test: "Testing",
+};

 /**
 * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
@@ -19,10 +20,7 @@ const reverseEnvMapping = {
 * @param {*} props
 * @returns
 */
-const ServiceTokenTable = ({
-	data,
-	workspaceName
-}) => {
+const ServiceTokenTable = ({ data, workspaceName }) => {
  const router = useRouter();

  return (
@@ -39,11 +37,13 @@ const ServiceTokenTable = ({
          </tr>
        </thead>
        <tbody>
-					{data?.length > 0 
-					? 	data
-							.map((row, index) => {
+          {data?.length > 0 ? (
+            data.map((row, index) => {
              return (
-									<tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-800/5 duration-100">
+                <tr
+                  key={guidGenerator()}
+                  className="bg-bunker-800 hover:bg-bunker-800/5 duration-100"
+                >
                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
                    {row.name}
                  </td>
@@ -69,9 +69,13 @@ const ServiceTokenTable = ({
                </tr>
              );
            })
-						: 	<tr>
-								<td colSpan="4" className="text-center pt-7 pb-4 text-bunker-400">No service tokens yet</td>
-							</tr>}
+          ) : (
+            <tr>
+              <td colSpan="4" className="text-center pt-7 pb-4 text-bunker-400">
+                No service tokens yet
+              </td>
+            </tr>
+          )}
        </tbody>
      </table>
    </div>
@@ -1,19 +1,21 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import Listbox from "../Listbox";
-import uploadKeys from "../../../pages/api/workspace/uploadKeys";
-import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
-import deleteUserFromWorkspace from "../../../pages/api/workspace/deleteUserFromWorkspace";
-import changeUserRoleInWorkspace from "../../../pages/api/workspace/changeUserRoleInWorkspace";
-import deleteUserFromOrganization from "../../../pages/api/organization/deleteUserFromOrganization";
 import { faX } from "@fortawesome/free-solid-svg-icons";
-import Button from "../buttons/Button";
+
+import deleteUserFromOrganization from "~/pages/api/organization/deleteUserFromOrganization";
+import changeUserRoleInWorkspace from "~/pages/api/workspace/changeUserRoleInWorkspace";
+import deleteUserFromWorkspace from "~/pages/api/workspace/deleteUserFromWorkspace";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+import uploadKeys from "~/pages/api/workspace/uploadKeys";
+
 import guidGenerator from "../../utilities/randomId";
+import Button from "../buttons/Button";
+import Listbox from "../Listbox";

 const {
  decryptAssymmetric,
  encryptAssymmetric,
-} = require("../../utilities/crypto");
+} = require("../../utilities/cryptography/crypto");
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");

@@ -81,7 +83,7 @@ const UserTable = ({
    ]);
  };

-	useEffect(async () => {
+  useEffect(() => {
    setMyRole(userData.filter((user) => user.email == myUser)[0]?.role);
  }, [userData, myUser]);

@@ -135,17 +137,16 @@ const UserTable = ({
            userData
              ?.filter(
                (user) =>
-									user.firstName
-										?.toLowerCase()
-										.includes(filter) ||
-									user.lastName
-										?.toLowerCase()
-										.includes(filter) ||
+                  user.firstName?.toLowerCase().includes(filter) ||
+                  user.lastName?.toLowerCase().includes(filter) ||
                  user.email?.toLowerCase().includes(filter)
              )
              .map((row, index) => {
                return (
-									<tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-800/5">
+                  <tr
+                    key={guidGenerator()}
+                    className="bg-bunker-800 hover:bg-bunker-800/5"
+                  >
                    <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
                      {row.firstName}
                    </td>
@@ -158,52 +159,33 @@ const UserTable = ({
                    <td className="flex flex-row justify-end pr-8 py-2 border-t border-0.5 border-mineshaft-700">
                      <div className="flex justify-end mr-6 w-3/4 mx-2 w-full h-full flex flex-row items-center">
                        {row.status == "granted" &&
-												((myRole == "admin" &&
-													row.role != "owner") ||
+                        ((myRole == "admin" && row.role != "owner") ||
                          myRole == "owner") &&
                        myUser !== row.email ? (
                          <Listbox
                            selected={row.role}
-														onChange={(e) =>
-															handleRoleUpdate(
-																index,
-																e
-															)
-														}
+                            onChange={(e) => handleRoleUpdate(index, e)}
                            data={
                              myRole == "owner"
-																? [
-																		"owner",
-																		"admin",
-																		"member",
-																  ]
-																: [
-																		"admin",
-																		"member",
-																  ]
+                                ? ["owner", "admin", "member"]
+                                : ["admin", "member"]
                            }
                            text="Role: "
-														membershipId={
-															row.membershipId
-														}
+                            membershipId={row.membershipId}
                          />
                        ) : (
                          row.status != "invited" &&
-													row.status !=
-														"verified" && (
+                          row.status != "verified" && (
                            <Listbox
                              selected={row.role}
                              text="Role: "
-															membershipId={
-																row.membershipId
-															}
+                              membershipId={row.membershipId}
                            />
                          )
                        )}
                        {(row.status == "invited" ||
-													row.status ==
-														"verified") && (
-													<div className="w-full pl-12">
+                          row.status == "verified") && (
+                          <div className="w-full pl-9">
                            <Button
                              onButtonPressed={() =>
                                deleteMembershipAndResendInvite(
@@ -217,15 +199,11 @@ const UserTable = ({
                            />
                          </div>
                        )}
-												{row.status == "completed" &&
-													myUser !== row.email && (
+                        {row.status == "completed" && myUser !== row.email && (
                          <div className="border border-mineshaft-700 rounded-md bg-white/5 hover:bg-primary text-white hover:text-black duration-200">
                            <Button
                              onButtonPressed={() =>
-																	grantAccess(
-																		row.userId,
-																		row.publicKey
-																	)
+                                grantAccess(row.userId, row.publicKey)
                              }
                              color="mineshaft"
                              text="Grant Access"
@@ -240,11 +218,7 @@ const UserTable = ({
                        <div className="opacity-50 hover:opacity-100 flex items-center">
                          <Button
                            onButtonPressed={(e) =>
-															handleDelete(
-																row.membershipId,
-																index,
-																e
-															)
+                              handleDelete(row.membershipId, index, e)
                            }
                            color="red"
                            size="icon-sm"
@@ -1,72 +0,0 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
-import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
-
-export default function Card({ card, changeSelectedCard, selected }) {
-	function creditCardBrandIcon(cc) {
-		if (cc == "visa") {
-			return faCcVisa;
-		} else if ((cc = "mastercard")) {
-			return faCcMastercard;
-		} else return faQuestionCircle;
-	}
-
-	return (
-		<button onClick={() => changeSelectedCard(card.id)}>
-			<div
-				className={`flex flex-col p-3 items-start justify-between mr-2 w-52 h-28 bg-primary/5 rounded-lg duration-200 ${
-					card.id == selected
-						? "border-primary text-primary"
-						: "border-gray-500 text-gray-300"
-				} hover:border-primary border-2 hover:text-primary cursor-pointer`}
-			>
-				<div className="flex flex-row items-center justify-between w-full">
-					<FontAwesomeIcon
-						className="text-3xl mr-4"
-						icon={creditCardBrandIcon(card.card.brand)}
-					/>
-					{card.id == selected && (
-						<FontAwesomeIcon
-							className="text-xl ml-2 mr-2"
-							icon={faCheck}
-						/>
-					)}
-				</div>
-				<div className="flex flex-row items-center justify-between w-full">
-					<div className="flex flex-row items-center">
-						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
-								<FontAwesomeIcon
-									className="text-xxxs mr-0.5"
-									icon={faCircle}
-								/>
-							))}
-						</p>
-						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
-								<FontAwesomeIcon
-									className="text-xxxs mr-0.5"
-									icon={faCircle}
-								/>
-							))}
-						</p>
-						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
-								<FontAwesomeIcon
-									className="text-xxxs mr-0.5"
-									icon={faCircle}
-								/>
-							))}
-						</p>
-						<p className="text-xs">{card.card.last4}</p>
-					</div>
-					<p className="text-xs">
-						{card.card.exp_month + "/" + card.card.exp_year}
-					</p>
-				</div>
-			</div>
-		</button>
-	);
-}
@@ -1,5 +1,6 @@
 import React from "react";
-import StripeRedirect from "../../pages/api/organization/StripeRedirect";
+
+import StripeRedirect from "~/pages/api/organization/StripeRedirect";

 export default function Plan({ plan }) {
  return (
@@ -13,9 +14,7 @@ export default function Plan({ plan }) {
    >
      <div className="flex flex-col">
        <div className="flex flex-row justify-between items-center relative z-10">
-					<p
-						className={`px-6 py-4 text-3xl font-semibold text-gray-400`}
-					>
+          <p className={`px-6 py-4 text-3xl font-semibold text-gray-400`}>
            {plan.name}
          </p>
        </div>
@@ -38,10 +37,7 @@ export default function Plan({ plan }) {
        {plan.current == false ? (
          <>
            {plan.buttonTextMain == "Schedule a Demo" ? (
-							<a
-								href="/scheduledemo"
-								target='_blank rel="noopener"'
-							>
+              <a href="/scheduledemo" target='_blank rel="noopener"'>
                <div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
                  {plan.buttonTextMain}
                </div>
@@ -54,7 +50,15 @@ export default function Plan({ plan }) {
                    : "hover:bg-primary hover:text-black hover:border-primary"
                } bg-bunker duration-200 cursor-pointer rounded-md flex w-max`}
              >
-								<button onClick={() => StripeRedirect({orgId: localStorage.getItem("orgData.id")})}>{plan.buttonTextMain}</button>
+                <button
+                  onClick={() =>
+                    StripeRedirect({
+                      orgId: localStorage.getItem("orgData.id"),
+                    })
+                  }
+                >
+                  {plan.buttonTextMain}
+                </button>
              </div>
            )}
            <a href="/pricing" target='_blank rel="noopener"'>
@@ -71,9 +75,7 @@ export default function Plan({ plan }) {
                : "bg-chicago-700"
            }`}
          >
-						<p className="text-xs text-black font-semibold">
-							CURRENT PLAN
-						</p>
+            <p className="text-xs text-black font-semibold">CURRENT PLAN</p>
          </div>
        )}
      </div>
@@ -1,8 +1,8 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { Fragment } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import guidGenerator from "../utilities/randomId";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

+import guidGenerator from "../utilities/randomId";

 /**
 * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
@@ -10,18 +10,18 @@ import guidGenerator from "../utilities/randomId";
 * @returns
 */
 const findReferences = (text) => {
-	var splitText = text.split('${');
+  var splitText = text.split("${");
  let textArray = [splitText[0]];
  for (var i = 1; i < splitText.length; i++) {
-		let insideBrackets = "${" + splitText[i].split('}')[0]
-		if (splitText[i].includes('}')) {
-			insideBrackets += "}"
+    let insideBrackets = "${" + splitText[i].split("}")[0];
+    if (splitText[i].includes("}")) {
+      insideBrackets += "}";
    }
-		textArray.push(insideBrackets)
-		textArray.push(splitText[i].split('}')[1])
+    textArray.push(insideBrackets);
+    textArray.push(splitText[i].split("}")[1]);
  }
  return textArray;
-}
+};

 /**
 * This component renders the input fields on the dashboard
@@ -33,7 +33,13 @@ const findReferences = (text) => {
 * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
 * @returns
 */
-const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => {
+const DashboardInputField = ({
+  index,
+  onChangeHandler,
+  type,
+  value,
+  blurred,
+}) => {
  if (type === "varName") {
    return (
      <div className="flex-col w-full">
@@ -72,20 +78,34 @@ const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) =>
              blurred
                ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                : ""
-						} flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-100`}
+            } flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-100`}
          >
-						{findReferences(value).map((text, id) => 
-							id % 2 == 0 || text.length <= 2
-							? <span className="ph-no-capture">{text}</span> 
-							: <span className="ph-no-capture text-yellow">
-								{text.slice(0, 2)}
-								<span className="ph-no-capture text-yellow-200/80">
-									{text.slice(2, text.length - 1)}
+            {findReferences(value).map((texts, id) => {
+              if (id % 2 == 0 || texts.length <= 2) {
+                return (
+                  <span className="ph-no-capture" key={id}>
+                    {texts}
                  </span>
-								{text.slice(text.length - 1, text.length) == "}" 
-								? <span className="ph-no-capture text-yellow">{text.slice(text.length - 1, text.length)} </span> 
-								: <span className="ph-no-capture text-yellow-400">{text.slice(text.length - 1, text.length)} </span>}
-							</span>)}
+                );
+              }
+              return (
+                <span className="ph-no-capture text-yellow" key={id}>
+                  {texts.slice(0, 2)}
+                  <span className="ph-no-capture text-yellow-200/80">
+                    {texts.slice(2, texts.length - 1)}
+                  </span>
+                  {texts.slice(texts.length - 1, texts.length) == "}" ? (
+                    <span className="ph-no-capture text-yellow">
+                      {texts.slice(texts.length - 1, texts.length)}{" "}
+                    </span>
+                  ) : (
+                    <span className="ph-no-capture text-yellow-400">
+                      {texts.slice(texts.length - 1, texts.length)}{" "}
+                    </span>
+                  )}
+                </span>
+              );
+            })}
          </div>
          {blurred && (
            <div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
@@ -1,15 +1,13 @@
 import { useState } from "react";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import guidGenerator from "../utilities/randomId";
-
-import Error from "../basic/Error";
 import Image from "next/image";
-import parse from "../utilities/file";
-import Button from "../basic/buttons/Button";
-
 import useTranslation from "next-translate/useTranslation";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import Button from "../basic/buttons/Button";
+import Error from "../basic/Error";
+import parse from "../utilities/file";
+import guidGenerator from "../utilities/randomId";

 const DropZone = ({
  setData,
@@ -132,9 +130,7 @@ const DropZone = ({
          icon={faUpload}
          className="text-gray-300 text-3xl mr-6"
        />
-				<p className="text-gray-300 mt-1">
-					{t("common:drop-zone-keys")}
-				</p>
+        <p className="text-gray-300 mt-1">{t("common:drop-zone-keys")}</p>
      </div>
      {errorDragAndDrop ? (
        <div className="mt-8 max-w-xl opacity-80">
@@ -1,28 +1,26 @@
-import React, { useState, Fragment, useEffect, useMemo } from "react";
-import { useRouter } from "next/router";
-
+/* eslint-disable react/jsx-key */
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import Image from "next/image";
-
-import logout from "../../pages/api/auth/Logout";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
 import {
-	faBook,
-	faGear,
-	faCoins,
-	faRightFromBracket,
-	faEnvelope,
-	faPlus,
  faAngleDown,
+  faBook,
+  faCoins,
+  faEnvelope,
+  faGear,
+  faPlus,
+  faRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
-import { faSlack, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, Transition } from "@headlessui/react";
-import getUser from "../../pages/api/user/getUser";
-import getOrganizations from "../../pages/api/organization/getOrgs";
-import getOrganization from "../../pages/api/organization/GetOrg";
-import guidGenerator from "../utilities/randomId";
-import useTranslation from "next-translate/useTranslation";

+import getOrganization from "../../pages/api/organization/GetOrg";
+import getOrganizations from "../../pages/api/organization/getOrgs";
+import getUser from "../../pages/api/user/getUser";
+import guidGenerator from "../utilities/randomId";
 /**
 * @param {(key: string) => string} t
 */
@@ -88,19 +86,14 @@ export default function Navbar({ onButtonPressed }) {
              alt="logo"
            />
          </div>
-					<a className="text-2xl text-white font-semibold mx-2">
-						Infisical
-					</a>
+          <a className="text-2xl text-white font-semibold mx-2">Infisical</a>
        </div>
      </div>
      <div className="relative flex justify-start items-center mx-2 z-40">
        <Menu as="div" className="relative inline-block text-left">
          <div className="mr-4">
            <Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-							<FontAwesomeIcon
-								className="text-xl"
-								icon={faCircleQuestion}
-							/>
+              <FontAwesomeIcon className="text-xl" icon={faCircleQuestion} />
            </Menu.Button>
          </div>
          <Transition
@@ -117,7 +110,7 @@ export default function Navbar({ onButtonPressed }) {
                <a
                  key={guidGenerator()}
                  target="_blank"
-									rel="noopener"
+                  rel="noopener noreferrer"
                  href={url}
                  className="font-normal text-gray-300 duration-200 rounded-md w-full flex items-center py-0.5"
                >
@@ -156,10 +149,7 @@ export default function Navbar({ onButtonPressed }) {
                </div>
                <div
                  onClick={() =>
-										router.push(
-											"/settings/personal/" +
-												router.query.id
-										)
+                    router.push("/settings/personal/" + router.query.id)
                  }
                  className="flex flex-row items-center px-1 mx-1 my-1 hover:bg-white/5 cursor-pointer rounded-md"
                >
@@ -170,8 +160,7 @@ export default function Navbar({ onButtonPressed }) {
                    <div>
                      <p className="text-gray-300 px-2 pt-1 text-sm">
                        {" "}
-												{user?.firstName}{" "}
-												{user?.lastName}
+                        {user?.firstName} {user?.lastName}
                      </p>
                      <p className="text-gray-400 px-2 pb-1 text-xs">
                        {" "}
@@ -191,9 +180,7 @@ export default function Navbar({ onButtonPressed }) {
                </div>
                <div
                  onClick={() =>
-										router.push(
-											"/settings/org/" + router.query.id
-										)
+                    router.push("/settings/org/" + router.query.id)
                  }
                  className="flex flex-row items-center px-2 mt-2 py-1 hover:bg-white/5 cursor-pointer rounded-md"
                >
@@ -216,10 +203,7 @@ export default function Navbar({ onButtonPressed }) {
                >
                  <div
                    onClick={() =>
-											router.push(
-												"/settings/billing/" +
-													router.query.id
-											)
+                      router.push("/settings/billing/" + router.query.id)
                    }
                    className="mt-1 relative flex justify-start cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/5 duration-200 hover:text-gray-200"
                  >
@@ -227,9 +211,7 @@ export default function Navbar({ onButtonPressed }) {
                      className="text-lg pl-1.5 pr-3"
                      icon={faCoins}
                    />
-										<div className="text-sm">
-											{t("nav:user.usage-billing")}
-										</div>
+                    <div className="text-sm">{t("nav:user.usage-billing")}</div>
                  </div>
                </button>
                <button
@@ -239,22 +221,15 @@ export default function Navbar({ onButtonPressed }) {
                  <div
                    onClick={() =>
                      router.push(
-												"/settings/org/" +
-													router.query.id +
-													"?invite"
+                        "/settings/org/" + router.query.id + "?invite"
                      )
                    }
                    className="relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-primary/100 duration-200 hover:text-black hover:font-semibold mt-1"
                  >
                    <span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
-											<FontAwesomeIcon
-												icon={faPlus}
-												className="ml-1"
-											/>
+                      <FontAwesomeIcon icon={faPlus} className="ml-1" />
                    </span>
-										<div className="text-sm ml-1">
-											{t("nav:user.invite")}
-										</div>
+                    <div className="text-sm ml-1">{t("nav:user.invite")}</div>
                  </div>
                </button>
              </div>
@@ -266,20 +241,13 @@ export default function Navbar({ onButtonPressed }) {
                  <div className="flex flex-col items-start px-1 mt-3 mb-2">
                    {orgs
                      .filter(
-												(org) =>
-													org._id !=
-													localStorage.getItem(
-														"orgData.id"
-													)
+                        (org) => org._id != localStorage.getItem("orgData.id")
                      )
                      .map((org) => (
                        <div
                          key={guidGenerator()}
                          onClick={() => {
-														localStorage.setItem(
-															"orgData.id",
-															org._id
-														);
+                            localStorage.setItem("orgData.id", org._id);
                            router.reload();
                          }}
                          className="flex flex-row justify-start items-center hover:bg-white/5 w-full p-1.5 cursor-pointer rounded-md"
@@ -1,18 +1,23 @@
 import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleRight, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
-import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import getOrganization from "../../pages/api/organization/GetOrg";
-import getWorkspaceInfo from "../../pages/api/workspace/getWorkspaceInfo";
 import { useRouter } from "next/router";
+import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
+import {
+  faAngleRight,
+  faQuestionCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import getOrganization from "~/pages/api/organization/GetOrg";
+import getWorkspaceInfo from "~/pages/api/workspace/getWorkspaceInfo";

 export default function NavHeader({ pageName, isProjectRelated }) {
  const [orgName, setOrgName] = useState("");
  const [workspaceName, setWorkspaceName] = useState("");
  const router = useRouter();

-    useEffect(async () => {
+  useEffect(() => {
+    (async () => {
      let org = await getOrganization({
        orgId: localStorage.getItem("orgData.id"),
      });
@@ -21,6 +26,8 @@ export default function NavHeader({ pageName, isProjectRelated}) {
        workspaceId: router.query.id,
      });
      setWorkspaceName(workspace.name);
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
@@ -28,20 +35,23 @@ export default function NavHeader({ pageName, isProjectRelated}) {
      <div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
        {orgName?.charAt(0)}
      </div>
-            <div className="text-primary text-sm font-semibold">
-                {orgName}
-            </div>
-            {isProjectRelated && <>
-                <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
+      <div className="text-primary text-sm font-semibold">{orgName}</div>
+      {isProjectRelated && (
+        <>
+          <FontAwesomeIcon
+            icon={faAngleRight}
+            className="ml-3 text-sm text-gray-400 mr-3"
+          />
          <div className="font-semibold text-primary text-sm">
            {workspaceName}
          </div>
        </>
-            }
-            <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-            <div className="text-gray-400 text-sm">
-                {pageName}
-            </div>
+      )}
+      <FontAwesomeIcon
+        icon={faAngleRight}
+        className="ml-3 text-sm text-gray-400 mr-3"
+      />
+      <div className="text-gray-400 text-sm">{pageName}</div>
    </div>
  );
 }
@@ -1,13 +1,11 @@
-import token from "../../pages/api/auth/Token"
-import { PATH } from '../../const';
+import { PATH } from "~/const";
+import token from "~/pages/api/auth/Token";

 export default class SecurityClient {
-    static authOrigins = [PATH]
-    static #token = '';
+  static authOrigins = [PATH];
+  static #token = "";

-    contructor() {
-
-    }
+  contructor() {}

  static setToken(token) {
    this.#token = token;
@@ -18,11 +16,11 @@ export default class SecurityClient {
    const destOrigin = new URL(req.url).origin;

    if (this.#token == "") {
-            this.setToken(await token())
+      this.setToken(await token());
    }

    if (this.#token && this.authOrigins.includes(destOrigin)) {
-            req.headers.set('Authorization', "Bearer " + this.#token);
+      req.headers.set("Authorization", "Bearer " + this.#token);
      return fetch(req);
    }
  }
@@ -1,12 +1,13 @@
-import login1 from "../../pages/api/auth/Login1";
-import login2 from "../../pages/api/auth/Login2";
-import Aes256Gcm from "../../components/aes-256-gcm";
-import pushKeys from "./pushKeys";
+import Aes256Gcm from "~/components/utilities/cryptography/aes-256-gcm";
+import login1 from "~/pages/api/auth/Login1";
+import login2 from "~/pages/api/auth/Login2";
+import getOrganizations from "~/pages/api/organization/getOrgs";
+import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
+
 import { initPostHog } from "../analytics/posthog";
-import getOrganizations from "../../pages/api/organization/getOrgs";
-import getOrganizationUserProjects from "../../pages/api/organization/GetOrgUserProjects";
-import SecurityClient from "./SecurityClient";
+import pushKeys from "./secrets/pushKeys";
 import { ENV } from "./config";
+import SecurityClient from "./SecurityClient";

 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
@@ -68,8 +69,7 @@ const attemptLogin = async (
            response = await response.json();
            SecurityClient.setToken(response["token"]);
            const publicKey = response["publicKey"];
-						const encryptedPrivateKey =
-							response["encryptedPrivateKey"];
+            const encryptedPrivateKey = response["encryptedPrivateKey"];
            const iv = response["iv"];
            const tag = response["tag"];

@@ -77,23 +77,25 @@ const attemptLogin = async (
              encryptedPrivateKey,
              iv,
              tag,
-							password.slice(0, 32).padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
+              password
+                .slice(0, 32)
+                .padStart(
+                  32 +
+                    (password.slice(0, 32).length - new Blob([password]).size),
+                  "0"
+                )
            );

            try {
              localStorage.setItem("publicKey", publicKey);
-							localStorage.setItem(
-								"encryptedPrivateKey",
-								encryptedPrivateKey
-							);
+              localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
              localStorage.setItem("iv", iv);
              localStorage.setItem("tag", tag);
              localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
            } catch (err) {
              setErrorLogin(true);
              console.error(
-								"Unable to send the tokens in local storage:" +
-									err.message
+                "Unable to send the tokens in local storage:" + err.message
              );
            }
          } else {
@@ -101,7 +103,7 @@ const attemptLogin = async (
          }

          const userOrgs = await getOrganizations();
-					const userOrgsData = userOrgs.map(org => org._id);
+          const userOrgsData = userOrgs.map((org) => org._id);

          let orgToLogin;
          if (userOrgsData.includes(localStorage.getItem("orgData.id"))) {
@@ -115,16 +117,18 @@ const attemptLogin = async (
            orgId: orgToLogin,
          });

-					orgUserProjects = orgUserProjects?.map(project => project._id);
+          orgUserProjects = orgUserProjects?.map((project) => project._id);
          let projectToLogin;
-					if (orgUserProjects.includes(localStorage.getItem("projectData.id"))) {
+          if (
+            orgUserProjects.includes(localStorage.getItem("projectData.id"))
+          ) {
            projectToLogin = localStorage.getItem("projectData.id");
          } else {
            try {
              projectToLogin = orgUserProjects[0];
              localStorage.setItem("projectData.id", projectToLogin);
            } catch (error) {
-							console.log("ERROR: User likely has no projects. ", error)
+              console.log("ERROR: User likely has no projects. ", error);
            }
          }

@@ -140,14 +144,8 @@ const attemptLogin = async (
                  "hgSIwDAKvz8PJfkj6xkzYqzGmAP3HLuG",
                  "shared",
                ],
-								WEBSITE_URL: [
-									"http://localhost:3000",
-									"shared",
-								],
-								STRIPE_SECRET_KEY: [
-									"sk_test_7348oyho4hfq398HIUOH78",
-									"shared",
-								],
+                WEBSITE_URL: ["http://localhost:3000", "shared"],
+                STRIPE_SECRET_KEY: ["sk_test_7348oyho4hfq398HIUOH78", "shared"],
              },
              projectToLogin,
              "Development"
@@ -1,109 +0,0 @@
-import Aes256Gcm from "../aes-256-gcm";
-import SRP1 from "../../pages/api/auth/SRP1";
-import changePassword2 from "../../pages/api/auth/ChangePassword2";
-
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-const jsrp = require("jsrp");
-const clientOldPassword = new jsrp.client();
-const clientNewPassword = new jsrp.client();
-
-/**
- * This function loggs in the user (whether it's right after signup, or a normal login)
- * @param {*} email
- * @param {*} password
- * @param {*} setErrorLogin
- * @param {*} router
- * @param {*} isSignUp
- * @returns
- */
-const changePassword = async (
-	email,
-	currentPassword,
-	newPassword,
-	setCurrentPasswordError,
-	setPasswordChanged,
-	setCurrentPassword,
-	setNewPassword
-) => {
-	try {
-		setPasswordChanged(false);
-		setCurrentPasswordError(false);
-
-		clientOldPassword.init(
-			{
-				username: email,
-				password: currentPassword,
-			},
-			async () => {
-				const clientPublicKey = clientOldPassword.getPublicKey();
-
-				let serverPublicKey, salt;
-				try {
-					const res = await SRP1({
-						clientPublicKey: clientPublicKey
-					});
-					serverPublicKey = res.serverPublicKey;
-					salt = res.salt;
-				} catch (err) {
-					setCurrentPasswordError(true);
-					console.log("Wrong current password", err, 1);
-				}
-
-				clientOldPassword.setSalt(salt);
-				clientOldPassword.setServerPublicKey(serverPublicKey);
-				const clientProof = clientOldPassword.getProof(); // called M1
-
-				clientNewPassword.init({
-					username: email,
-					password: newPassword
-				}, async () => {
-					clientNewPassword.createVerifier(async (err, result) => {
-			
-						let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
-							localStorage.getItem("PRIVATE_KEY"), 
-							newPassword.slice(0, 32).padStart(32 + (newPassword.slice(0, 32).length - new Blob([newPassword]).size), "0")
-						);
-
-						if (ciphertext) {
-							localStorage.setItem(
-								"encryptedPrivateKey",
-								ciphertext
-							);
-							localStorage.setItem("iv", iv);
-							localStorage.setItem("tag", tag);
-					
-							let res;
-							try {
-								res = await changePassword2({
-									encryptedPrivateKey: ciphertext,
-									iv,
-									tag,
-									salt: result.salt,
-									verifier: result.verifier,
-									clientProof
-								});
-								if (res.status == 400) {
-									setCurrentPasswordError(true);
-								} else if (res.status == 200) {
-									setPasswordChanged(true);
-									setCurrentPassword("");
-									setNewPassword("");
-								}
-							} catch (err) {
-								setCurrentPasswordError(true)
-								console.log(err);
-							}
-						}
-					});
-				});
-				
-			}
-		);
-	} catch (error) {
-		console.log("Something went wrong during changing the password", slat, serverPublicKey);
-	}
-	return true;
-};
-
-export default changePassword;
@@ -1,9 +1,11 @@
-const ENV = process.env.NEXT_PUBLIC_ENV! || 'development'; // investigate
+const ENV = process.env.NEXT_PUBLIC_ENV! || "development"; // investigate
 const POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY!;
-const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST! || 'https://app.posthog.com';
+const POSTHOG_HOST =
+  process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
-const TELEMETRY_ENABLED = (process.env.NEXT_PUBLIC_TELEMETRY_ENABLED! !== 'false');
+const TELEMETRY_ENABLED =
+  process.env.NEXT_PUBLIC_TELEMETRY_ENABLED! !== "false";

 export {
  ENV,
@@ -11,5 +13,5 @@ export {
  POSTHOG_HOST,
  STRIPE_PRODUCT_PRO,
  STRIPE_PRODUCT_STARTER,
-    TELEMETRY_ENABLED
+  TELEMETRY_ENABLED,
 };
@@ -0,0 +1,63 @@
+/**
+ * @fileoverview Provides easy encryption/decryption methods using AES 256 GCM.
+ */
+
+"use strict";
+
+const crypto = require("crypto");
+
+const ALGORITHM = "aes-256-gcm";
+const BLOCK_SIZE_BYTES = 16; // 128 bit
+
+/**
+ * Provides easy encryption/decryption methods using AES 256 GCM.
+ */
+class Aes256Gcm {
+  /**
+   * No need to run the constructor. The class only has static methods.
+   */
+  constructor() {}
+
+  /**
+   * Encrypts text with AES 256 GCM.
+   * @param {string} text - Cleartext to encode.
+   * @param {string} secret - Shared secret key, must be 32 bytes.
+   * @returns {object}
+   */
+  static encrypt(text, secret) {
+    const iv = crypto.randomBytes(BLOCK_SIZE_BYTES);
+    const cipher = crypto.createCipheriv(ALGORITHM, secret, iv);
+
+    let ciphertext = cipher.update(text, "utf8", "base64");
+    ciphertext += cipher.final("base64");
+    return {
+      ciphertext,
+      iv: iv.toString("base64"),
+      tag: cipher.getAuthTag().toString("base64"),
+    };
+  }
+
+  /**
+   * Decrypts AES 256 CGM encrypted text.
+   * @param {string} ciphertext - Base64-encoded ciphertext.
+   * @param {string} iv - The base64-encoded initialization vector.
+   * @param {string} tag - The base64-encoded authentication tag generated by getAuthTag().
+   * @param {string} secret - Shared secret key, must be 32 bytes.
+   * @returns {string}
+   */
+  static decrypt(ciphertext, iv, tag, secret) {
+    const decipher = crypto.createDecipheriv(
+      ALGORITHM,
+      secret,
+      Buffer.from(iv, "base64")
+    );
+    decipher.setAuthTag(Buffer.from(tag, "base64"));
+
+    let cleartext = decipher.update(ciphertext, "base64", "utf8");
+    cleartext += decipher.final("utf8");
+
+    return cleartext;
+  }
+}
+
+module.exports = Aes256Gcm;
@@ -0,0 +1,120 @@
+import changePassword2 from "~/pages/api/auth/ChangePassword2";
+import SRP1 from "~/pages/api/auth/SRP1";
+
+import Aes256Gcm from "./aes-256-gcm";
+
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+const jsrp = require("jsrp");
+const clientOldPassword = new jsrp.client();
+const clientNewPassword = new jsrp.client();
+
+/**
+ * This function loggs in the user (whether it's right after signup, or a normal login)
+ * @param {*} email
+ * @param {*} password
+ * @param {*} setErrorLogin
+ * @param {*} router
+ * @param {*} isSignUp
+ * @returns
+ */
+const changePassword = async (
+  email,
+  currentPassword,
+  newPassword,
+  setCurrentPasswordError,
+  setPasswordChanged,
+  setCurrentPassword,
+  setNewPassword
+) => {
+  try {
+    setPasswordChanged(false);
+    setCurrentPasswordError(false);
+
+    clientOldPassword.init(
+      {
+        username: email,
+        password: currentPassword,
+      },
+      async () => {
+        const clientPublicKey = clientOldPassword.getPublicKey();
+
+        let serverPublicKey, salt;
+        try {
+          const res = await SRP1({
+            clientPublicKey: clientPublicKey,
+          });
+          serverPublicKey = res.serverPublicKey;
+          salt = res.salt;
+        } catch (err) {
+          setCurrentPasswordError(true);
+          console.log("Wrong current password", err, 1);
+        }
+
+        clientOldPassword.setSalt(salt);
+        clientOldPassword.setServerPublicKey(serverPublicKey);
+        const clientProof = clientOldPassword.getProof(); // called M1
+
+        clientNewPassword.init(
+          {
+            username: email,
+            password: newPassword,
+          },
+          async () => {
+            clientNewPassword.createVerifier(async (err, result) => {
+              // The Blob part here is needed to account for symbols that count as 2+ bytes (e.g., é, å, ø)
+              let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
+                localStorage.getItem("PRIVATE_KEY"),
+                newPassword
+                  .slice(0, 32)
+                  .padStart(
+                    32 +
+                      (newPassword.slice(0, 32).length -
+                        new Blob([newPassword]).size),
+                    "0"
+                  )
+              );
+
+              if (ciphertext) {
+                localStorage.setItem("encryptedPrivateKey", ciphertext);
+                localStorage.setItem("iv", iv);
+                localStorage.setItem("tag", tag);
+
+                let res;
+                try {
+                  res = await changePassword2({
+                    encryptedPrivateKey: ciphertext,
+                    iv,
+                    tag,
+                    salt: result.salt,
+                    verifier: result.verifier,
+                    clientProof,
+                  });
+                  if (res.status == 400) {
+                    setCurrentPasswordError(true);
+                  } else if (res.status == 200) {
+                    setPasswordChanged(true);
+                    setCurrentPassword("");
+                    setNewPassword("");
+                  }
+                } catch (err) {
+                  setCurrentPasswordError(true);
+                  console.log(err);
+                }
+              }
+            });
+          }
+        );
+      }
+    );
+  } catch (error) {
+    console.log(
+      "Something went wrong during changing the password",
+      slat,
+      serverPublicKey
+    );
+  }
+  return true;
+};
+
+export default changePassword;
@@ -1,6 +1,6 @@
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
-const aes = require("../aes-256-gcm");
+const aes = require("./aes-256-gcm");

 /**
 * Return assymmetrically encrypted [plaintext] using [publicKey] where
@@ -0,0 +1,98 @@
+import issueBackupPrivateKey from "~/pages/api/auth/IssueBackupPrivateKey";
+import SRP1 from "~/pages/api/auth/SRP1";
+
+import generateBackupPDF from "../generateBackupPDF";
+import Aes256Gcm from "./aes-256-gcm";
+
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+const jsrp = require("jsrp");
+const clientPassword = new jsrp.client();
+const clientKey = new jsrp.client();
+const crypto = require("crypto");
+
+/**
+ * This function loggs in the user (whether it's right after signup, or a normal login)
+ * @param {*} email
+ * @param {*} password
+ * @param {*} setErrorLogin
+ * @param {*} router
+ * @param {*} isSignUp
+ * @returns
+ */
+const issueBackupKey = async ({
+  email,
+  password,
+  personalName,
+  setBackupKeyError,
+  setBackupKeyIssued,
+}) => {
+  try {
+    setBackupKeyError(false);
+    setBackupKeyIssued(false);
+    clientPassword.init(
+      {
+        username: email,
+        password: password,
+      },
+      async () => {
+        const clientPublicKey = clientPassword.getPublicKey();
+
+        let serverPublicKey, salt;
+        try {
+          const res = await SRP1({
+            clientPublicKey: clientPublicKey,
+          });
+          serverPublicKey = res.serverPublicKey;
+          salt = res.salt;
+        } catch (err) {
+          setBackupKeyError(true);
+          console.log("Wrong current password", err, 1);
+        }
+
+        clientPassword.setSalt(salt);
+        clientPassword.setServerPublicKey(serverPublicKey);
+        const clientProof = clientPassword.getProof(); // called M1
+
+        const generatedKey = crypto.randomBytes(16).toString("hex");
+
+        clientKey.init(
+          {
+            username: email,
+            password: generatedKey,
+          },
+          async () => {
+            clientKey.createVerifier(async (err, result) => {
+              let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
+                localStorage.getItem("PRIVATE_KEY"),
+                generatedKey
+              );
+
+              const res = await issueBackupPrivateKey({
+                encryptedPrivateKey: ciphertext,
+                iv,
+                tag,
+                salt: result.salt,
+                verifier: result.verifier,
+                clientProof,
+              });
+
+              if (res.status == 400) {
+                setBackupKeyError(true);
+              } else if (res.status == 200) {
+                generateBackupPDF(personalName, email, generatedKey);
+                setBackupKeyIssued(true);
+              }
+            });
+          }
+        );
+      }
+    );
+  } catch (error) {
+    setBackupKeyError(true);
+    console.log("Failed to issue a backup key");
+  }
+  return true;
+};
+
+export default issueBackupKey;
@@ -9,11 +9,11 @@ function generateBackupPDF(personalName, personalEmail, generatedKey) {

  // new jsPDF('p', 'mm', [297, 210]);
  var today = new Date();
-	var dd = String(today.getDate()).padStart(2, '0');
-	var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+  var dd = String(today.getDate()).padStart(2, "0");
+  var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
  var yyyy = today.getFullYear();

-	today = mm + '/' + dd + '/' + yyyy;
+  today = mm + "/" + dd + "/" + yyyy;

  var doc = new jsPDF("p", "pt");
  doc.setFillColor(13, 17, 23);
@@ -34,28 +34,16 @@ function generateBackupPDF(personalName, personalEmail, generatedKey) {
    180,
    "In case you get locked out of you Infisical account, you`ll need these account details"
  );
-	doc.text(
-		32,
-		200,
-		"to sign in —"
-	);
+  doc.text(32, 200, "to sign in —");
  doc.setFont(undefined, "bold");
  doc.text(
    110,
    200,
    "including your Secret Key, which we absolutely cannot access or"
  );
-	doc.text(
-		32,
-		220,
-		"recover for you. "
-	);
+  doc.text(32, 220, "recover for you. ");
  doc.setFont(undefined, "normal");
-	doc.text(
-		32,
-		250,
-		"Recommendations:"
-	);
+  doc.text(32, 250, "Recommendations:");
  doc.text(
    32,
    280,
@@ -66,70 +54,33 @@ function generateBackupPDF(personalName, personalEmail, generatedKey) {
    310,
    "2. Store it somewhere safe (such as with your birth certificate, your will, or on your"
  );
-	doc.text(
-		32,
-		330,
-		"personal cloud storage)."
-	);
+  doc.text(32, 330, "personal cloud storage).");
  doc.setFillColor(206, 217, 111);
-	doc.roundedRect(32, 350, 530, 190, 5, 5, 'F');
-	doc.setDrawColor(228, 255, 0)
-	doc.setLineWidth(1)
-	doc.roundedRect(32, 350, 530, 190, 5, 5, 'S');
+  doc.roundedRect(32, 350, 530, 190, 5, 5, "F");
+  doc.setDrawColor(228, 255, 0);
+  doc.setLineWidth(1);
+  doc.roundedRect(32, 350, 530, 190, 5, 5, "S");
  doc.setTextColor(43, 43, 43);
  doc.setFont(undefined, "bold");
  doc.setFontSize(15);
-	doc.text(
-		290,
-		375,
-		"Infisical Account Details",
-		"center"
-	);
+  doc.text(290, 375, "Infisical Account Details", "center");
  doc.setFont(undefined, "normal");
  doc.setFontSize(12);
-	doc.text(
-		50,
-		420,
-		"SIGN-IN URL"
-	);
-	doc.text(
-		50,
-		465,
-		"EMAIL ADDRESS"
-	);
-	doc.text(
-		50,
-		510,
-		"SECRET KEY"
-	);
+  doc.text(50, 420, "SIGN-IN URL");
+  doc.text(50, 465, "EMAIL ADDRESS");
+  doc.text(50, 510, "SECRET KEY");
  doc.setFillColor(23, 27, 33);
-	doc.roundedRect(170, 398, 375, 35, 5, 5, 'F');
-	doc.roundedRect(170, 443, 375, 35, 5, 5, 'F');
-	doc.roundedRect(170, 488, 375, 35, 5, 5, 'F');
+  doc.roundedRect(170, 398, 375, 35, 5, 5, "F");
+  doc.roundedRect(170, 443, 375, 35, 5, 5, "F");
+  doc.roundedRect(170, 488, 375, 35, 5, 5, "F");
  doc.setTextColor(227, 227, 227);
  doc.setFontSize(14);
-	doc.text(
-		180,
-		420,
-		"https://app.infisical.com/login"
-	);
-	doc.text(
-		180,
-		465,
-		personalEmail
-	);
-	doc.text(
-		180,
-		510,
-		generatedKey
-	);
-	doc.text(
-		32,
-		575,
-		"Need help? Contact us at [email protected]"
-	);
+  doc.text(180, 420, "https://app.infisical.com/login");
+  doc.text(180, 465, personalEmail);
+  doc.text(180, 510, generatedKey);
+  doc.text(32, 575, "Need help? Contact us at support@infisical.com");

  doc.save("Infisical Emergency Kit.pdf");
-};
+}

 export default generateBackupPDF;
@@ -1,106 +0,0 @@
-import getSecrets from "../../pages/api/files/GetSecrets";
-import guidGenerator from "./randomId";
-
-
-const {
-	decryptAssymmetric,
-	decryptSymmetric,
-} = require("../../components/utilities/crypto");
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-
-const envMapping = {
-	Development: "dev",
-	Staging: "staging",
-	Production: "prod",
-	Testing: "test",
-};
-
-const getSecretsForProject = async ({
-	env,
-	setFileState,
-	setIsKeyAvailable,
-	setData,
-	workspaceId
-}) => {
-	try {
-		let file;
-		try {
-			file = await getSecrets(
-				workspaceId,
-				envMapping[env]
-			);
-
-			setFileState(file);
-		} catch (error) {
-			console.log("ERROR: Not able to access the latest file");
-		}
-		// This is called isKeyAvilable but what it really means is if a person is able to create new key pairs
-		setIsKeyAvailable(
-			!file.key ? (file.secrets.length == 0 ? true : false) : true
-		);
-
-		const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-		let tempFileState = [];
-		if (file.key) {
-			// assymmetrically decrypt symmetric key with local private key
-			const key = decryptAssymmetric({
-				ciphertext: file.key.encryptedKey,
-				nonce: file.key.nonce,
-				publicKey: file.key.sender.publicKey,
-				privateKey: PRIVATE_KEY,
-			});
-
-			file.secrets.map((secretPair) => {
-				// decrypt .env file with symmetric key
-				const plainTextKey = decryptSymmetric({
-					ciphertext: secretPair.secretKey.ciphertext,
-					iv: secretPair.secretKey.iv,
-					tag: secretPair.secretKey.tag,
-					key,
-				});
-
-				const plainTextValue = decryptSymmetric({
-					ciphertext: secretPair.secretValue.ciphertext,
-					iv: secretPair.secretValue.iv,
-					tag: secretPair.secretValue.tag,
-					key,
-				});
-				tempFileState.push({
-					key: plainTextKey,
-					value: plainTextValue,
-					type: secretPair.type,
-				});
-			});
-		}
-		setFileState(tempFileState);
-
-		setData(
-			tempFileState.map((line, index) => [
-				guidGenerator(),
-				index,
-				line["key"],
-				line["value"],
-				line["type"],
-			])
-			// .sort((a, b) =>
-			// 	sortMethod == "alphabetical"
-			// 		? a[2].localeCompare(b[2])
-			// 		: b[2].localeCompare(a[2])
-			// )
-		);
-		return tempFileState.map((line, index) => [
-			guidGenerator(),
-			index,
-			line["key"],
-			line["value"],
-			line["type"],
-		]);
-	} catch (error) {
-		console.log("Something went wrong during accessing or decripting secrets.");
-	}
-	return true;
-};
-
-export default getSecretsForProject;
@@ -1,96 +0,0 @@
-import Aes256Gcm from "../aes-256-gcm";
-import SRP1 from "../../pages/api/auth/SRP1";
-import issueBackupPrivateKey from "../../pages/api/auth/IssueBackupPrivateKey";
-import generateBackupPDF from "./generateBackupPDF";
-
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-const jsrp = require("jsrp");
-const clientPassword = new jsrp.client();
-const clientKey = new jsrp.client();
-const crypto = require("crypto");
-
-/**
- * This function loggs in the user (whether it's right after signup, or a normal login)
- * @param {*} email
- * @param {*} password
- * @param {*} setErrorLogin
- * @param {*} router
- * @param {*} isSignUp
- * @returns
- */
-const issueBackupKey = async ({
-	email,
-	password,
-	personalName,
-	setBackupKeyError,
-	setBackupKeyIssued
-}) => {
-	try {
-		setBackupKeyError(false);
-		setBackupKeyIssued(false);
-		clientPassword.init(
-			{
-				username: email,
-				password: password,
-			},
-			async () => {
-				const clientPublicKey = clientPassword.getPublicKey();
-
-				let serverPublicKey, salt;
-				try {
-					const res = await SRP1({
-						clientPublicKey: clientPublicKey
-					});
-					serverPublicKey = res.serverPublicKey;
-					salt = res.salt;
-				} catch (err) {
-					setBackupKeyError(true);
-					console.log("Wrong current password", err, 1);
-				}
-
-				clientPassword.setSalt(salt);
-				clientPassword.setServerPublicKey(serverPublicKey);
-				const clientProof = clientPassword.getProof(); // called M1
-
-				const generatedKey = crypto.randomBytes(16).toString("hex");
-
-				clientKey.init({
-					username: email,
-					password: generatedKey
-				}, async () => {
-					clientKey.createVerifier(async (err, result) => {
-
-
-						let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
-							localStorage.getItem("PRIVATE_KEY"), 
-							generatedKey
-						);
-
-						const res = await issueBackupPrivateKey({
-							encryptedPrivateKey: ciphertext,
-							iv,
-							tag,
-							salt: result.salt,
-							verifier: result.verifier,
-							clientProof
-						});
-
-						if (res.status == 400) {
-							setBackupKeyError(true);
-						} else if (res.status == 200) {
-							generateBackupPDF(personalName, email, generatedKey);
-							setBackupKeyIssued(true);
-						}
-					});
-				})
-			}
-		);
-	} catch (error) {
-		setBackupKeyError(true);
-		console.log("Failed to issue a backup key");
-	}
-	return true;
-};
-
-export default issueBackupKey;
@@ -1,109 +0,0 @@
-import getLatestFileKey from "../../pages/api/workspace/getLatestFileKey";
-import getWorkspaceKeys from "../../pages/api/workspace/getWorkspaceKeys";
-import uploadSecrets from "../../pages/api/files/UploadSecrets";
-
-const crypto = require("crypto");
-const {
-	decryptAssymmetric,
-	decryptSymmetric,
-	encryptSymmetric,
-	encryptAssymmetric,
-} = require("../../components/utilities/crypto");
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-
-const envMapping = {
-	Development: "dev",
-	Staging: "staging",
-	Production: "prod",
-	Testing: "test",
-};
-
-const pushKeys = async (obj, workspaceId, env) => {
-	let sharedKey = await getLatestFileKey(workspaceId);
-
-	const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-	let randomBytes;
-	if (Object.keys(sharedKey).length > 0) {
-		// case: a (shared) key exists for the workspace
-		randomBytes = decryptAssymmetric({
-			ciphertext: sharedKey.latestKey.encryptedKey,
-			nonce: sharedKey.latestKey.nonce,
-			publicKey: sharedKey.latestKey.sender.publicKey,
-			privateKey: PRIVATE_KEY,
-		});
-	} else {
-		// case: a (shared) key does not exist for the workspace
-		randomBytes = crypto.randomBytes(16).toString("hex");
-	}
-
-	const secrets = Object.keys(obj).map((key) => {
-		// encrypt key
-		const {
-			ciphertext: ciphertextKey,
-			iv: ivKey,
-			tag: tagKey,
-		} = encryptSymmetric({
-			plaintext: key,
-			key: randomBytes,
-		});
-
-		// encrypt value
-		const {
-			ciphertext: ciphertextValue,
-			iv: ivValue,
-			tag: tagValue,
-		} = encryptSymmetric({
-			plaintext: obj[key][0],
-			key: randomBytes,
-		});
-
-		const visibility = obj[key][1] != null ? obj[key][1] : "personal";
-
-		return {
-			ciphertextKey,
-			ivKey,
-			tagKey,
-			hashKey: crypto.createHash("sha256").update(key).digest("hex"),
-			ciphertextValue,
-			ivValue,
-			tagValue,
-			hashValue: crypto
-				.createHash("sha256")
-				.update(obj[key][0])
-				.digest("hex"),
-			type: visibility,
-		};
-	});
-
-	// obtain public keys of all receivers (i.e. members in workspace)
-	const publicKeys = await getWorkspaceKeys({
-		workspaceId,
-	});
-
-	// assymmetrically encrypt key with each receiver public keys
-	const keys = publicKeys.map((k) => {
-		const { ciphertext, nonce } = encryptAssymmetric({
-			plaintext: randomBytes,
-			publicKey: k.publicKey,
-			privateKey: PRIVATE_KEY,
-		});
-
-		return {
-			encryptedKey: ciphertext,
-			nonce,
-			userId: k.userId,
-		};
-	});
-
-	// send payload
-	await uploadSecrets({
-		workspaceId,
-		secrets,
-		keys,
-		environment: envMapping[env],
-	});
-};
-
-export default pushKeys;
@@ -1,77 +0,0 @@
-import publicKeyInfical from "../../pages/api/auth/publicKeyInfisical"
-import changeHerokuConfigVars from "../../pages/api/integrations/ChangeHerokuConfigVars";
-
-const crypto = require("crypto");
-const {
-	encryptSymmetric,
-	encryptAssymmetric,
-} = require("./crypto");
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-
-const pushKeysIntegration = async ({ obj, integrationId }) => {
-	const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-	let randomBytes = crypto.randomBytes(16).toString("hex");
-
-	const secrets = Object.keys(obj).map((key) => {
-		// encrypt key
-		const {
-			ciphertext: ciphertextKey,
-			iv: ivKey,
-			tag: tagKey,
-		} = encryptSymmetric({
-			plaintext: key,
-			key: randomBytes,
-		});
-
-		// encrypt value
-		const {
-			ciphertext: ciphertextValue,
-			iv: ivValue,
-			tag: tagValue,
-		} = encryptSymmetric({
-			plaintext: obj[key],
-			key: randomBytes,
-		});
-
-		const visibility = "shared";
-
-		return {
-			ciphertextKey,
-			ivKey,
-			tagKey,
-			hashKey: crypto.createHash("sha256").update(key).digest("hex"),
-			ciphertextValue,
-			ivValue,
-			tagValue,
-			hashValue: crypto
-				.createHash("sha256")
-				.update(obj[key])
-				.digest("hex"),
-			type: visibility,
-		};
-	});
-
-	// obtain public keys of all receivers (i.e. members in workspace)
-	let publicKeyInfisical = await publicKeyInfical();
-
-	publicKeyInfisical = (await publicKeyInfisical.json()).publicKey;
-
-	// assymmetrically encrypt key with each receiver public keys
-
-	const { ciphertext, nonce } = encryptAssymmetric({
-		plaintext: randomBytes,
-		publicKey: publicKeyInfisical,
-		privateKey: PRIVATE_KEY,
-	});
-
-	const key = {
-		encryptedKey: ciphertext,
-		nonce,
-	};
-
-	changeHerokuConfigVars({integrationId, key, secrets})
-};
-
-export default pushKeysIntegration;
@@ -0,0 +1,103 @@
+import getSecrets from "~/pages/api/files/GetSecrets";
+
+import guidGenerator from "../randomId";
+
+const {
+  decryptAssymmetric,
+  decryptSymmetric,
+} = require("../cryptography/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const envMapping = {
+  Development: "dev",
+  Staging: "staging",
+  Production: "prod",
+  Testing: "test",
+};
+
+const getSecretsForProject = async ({
+  env,
+  setFileState,
+  setIsKeyAvailable,
+  setData,
+  workspaceId,
+}) => {
+  try {
+    let file;
+    try {
+      file = await getSecrets(workspaceId, envMapping[env]);
+
+      setFileState(file);
+    } catch (error) {
+      console.log("ERROR: Not able to access the latest file");
+    }
+    // This is called isKeyAvilable but what it really means is if a person is able to create new key pairs
+    setIsKeyAvailable(
+      !file.key ? (file.secrets.length == 0 ? true : false) : true
+    );
+
+    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+    let tempFileState = [];
+    if (file.key) {
+      // assymmetrically decrypt symmetric key with local private key
+      const key = decryptAssymmetric({
+        ciphertext: file.key.encryptedKey,
+        nonce: file.key.nonce,
+        publicKey: file.key.sender.publicKey,
+        privateKey: PRIVATE_KEY,
+      });
+
+      file.secrets.map((secretPair) => {
+        // decrypt .env file with symmetric key
+        const plainTextKey = decryptSymmetric({
+          ciphertext: secretPair.secretKey.ciphertext,
+          iv: secretPair.secretKey.iv,
+          tag: secretPair.secretKey.tag,
+          key,
+        });
+
+        const plainTextValue = decryptSymmetric({
+          ciphertext: secretPair.secretValue.ciphertext,
+          iv: secretPair.secretValue.iv,
+          tag: secretPair.secretValue.tag,
+          key,
+        });
+        tempFileState.push({
+          key: plainTextKey,
+          value: plainTextValue,
+          type: secretPair.type,
+        });
+      });
+    }
+    setFileState(tempFileState);
+
+    setData(
+      tempFileState.map((line, index) => [
+        guidGenerator(),
+        index,
+        line["key"],
+        line["value"],
+        line["type"],
+      ])
+      // .sort((a, b) =>
+      // 	sortMethod == "alphabetical"
+      // 		? a[2].localeCompare(b[2])
+      // 		: b[2].localeCompare(a[2])
+      // )
+    );
+    return tempFileState.map((line, index) => [
+      guidGenerator(),
+      index,
+      line["key"],
+      line["value"],
+      line["type"],
+    ]);
+  } catch (error) {
+    console.log("Something went wrong during accessing or decripting secrets.");
+  }
+  return true;
+};
+
+export default getSecretsForProject;
@@ -0,0 +1,106 @@
+import uploadSecrets from "~/pages/api/files/UploadSecrets";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+import getWorkspaceKeys from "~/pages/api/workspace/getWorkspaceKeys";
+
+const crypto = require("crypto");
+const {
+  decryptAssymmetric,
+  decryptSymmetric,
+  encryptSymmetric,
+  encryptAssymmetric,
+} = require("../cryptography/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const envMapping = {
+  Development: "dev",
+  Staging: "staging",
+  Production: "prod",
+  Testing: "test",
+};
+
+const pushKeys = async (obj, workspaceId, env) => {
+  let sharedKey = await getLatestFileKey(workspaceId);
+
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+  let randomBytes;
+  if (Object.keys(sharedKey).length > 0) {
+    // case: a (shared) key exists for the workspace
+    randomBytes = decryptAssymmetric({
+      ciphertext: sharedKey.latestKey.encryptedKey,
+      nonce: sharedKey.latestKey.nonce,
+      publicKey: sharedKey.latestKey.sender.publicKey,
+      privateKey: PRIVATE_KEY,
+    });
+  } else {
+    // case: a (shared) key does not exist for the workspace
+    randomBytes = crypto.randomBytes(16).toString("hex");
+  }
+
+  const secrets = Object.keys(obj).map((key) => {
+    // encrypt key
+    const {
+      ciphertext: ciphertextKey,
+      iv: ivKey,
+      tag: tagKey,
+    } = encryptSymmetric({
+      plaintext: key,
+      key: randomBytes,
+    });
+
+    // encrypt value
+    const {
+      ciphertext: ciphertextValue,
+      iv: ivValue,
+      tag: tagValue,
+    } = encryptSymmetric({
+      plaintext: obj[key][0],
+      key: randomBytes,
+    });
+
+    const visibility = obj[key][1] != null ? obj[key][1] : "personal";
+
+    return {
+      ciphertextKey,
+      ivKey,
+      tagKey,
+      hashKey: crypto.createHash("sha256").update(key).digest("hex"),
+      ciphertextValue,
+      ivValue,
+      tagValue,
+      hashValue: crypto.createHash("sha256").update(obj[key][0]).digest("hex"),
+      type: visibility,
+    };
+  });
+
+  // obtain public keys of all receivers (i.e. members in workspace)
+  const publicKeys = await getWorkspaceKeys({
+    workspaceId,
+  });
+
+  // assymmetrically encrypt key with each receiver public keys
+  const keys = publicKeys.map((k) => {
+    const { ciphertext, nonce } = encryptAssymmetric({
+      plaintext: randomBytes,
+      publicKey: k.publicKey,
+      privateKey: PRIVATE_KEY,
+    });
+
+    return {
+      encryptedKey: ciphertext,
+      nonce,
+      userId: k.userId,
+    };
+  });
+
+  // send payload
+  await uploadSecrets({
+    workspaceId,
+    secrets,
+    keys,
+    environment: envMapping[env],
+  });
+};
+
+export default pushKeys;
@@ -0,0 +1,74 @@
+import publicKeyInfical from "~/pages/api/auth/publicKeyInfisical";
+import changeHerokuConfigVars from "~/pages/api/integrations/ChangeHerokuConfigVars";
+
+const crypto = require("crypto");
+const {
+  encryptSymmetric,
+  encryptAssymmetric,
+} = require("../cryptography/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const pushKeysIntegration = async ({ obj, integrationId }) => {
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+  let randomBytes = crypto.randomBytes(16).toString("hex");
+
+  const secrets = Object.keys(obj).map((key) => {
+    // encrypt key
+    const {
+      ciphertext: ciphertextKey,
+      iv: ivKey,
+      tag: tagKey,
+    } = encryptSymmetric({
+      plaintext: key,
+      key: randomBytes,
+    });
+
+    // encrypt value
+    const {
+      ciphertext: ciphertextValue,
+      iv: ivValue,
+      tag: tagValue,
+    } = encryptSymmetric({
+      plaintext: obj[key],
+      key: randomBytes,
+    });
+
+    const visibility = "shared";
+
+    return {
+      ciphertextKey,
+      ivKey,
+      tagKey,
+      hashKey: crypto.createHash("sha256").update(key).digest("hex"),
+      ciphertextValue,
+      ivValue,
+      tagValue,
+      hashValue: crypto.createHash("sha256").update(obj[key]).digest("hex"),
+      type: visibility,
+    };
+  });
+
+  // obtain public keys of all receivers (i.e. members in workspace)
+  let publicKeyInfisical = await publicKeyInfical();
+
+  publicKeyInfisical = (await publicKeyInfisical.json()).publicKey;
+
+  // assymmetrically encrypt key with each receiver public keys
+
+  const { ciphertext, nonce } = encryptAssymmetric({
+    plaintext: randomBytes,
+    publicKey: publicKeyInfisical,
+    privateKey: PRIVATE_KEY,
+  });
+
+  const key = {
+    encryptedKey: ciphertext,
+    nonce,
+  };
+
+  changeHerokuConfigVars({ integrationId, key, secrets });
+};
+
+export default pushKeysIntegration;
@@ -1,7 +1,7 @@
 {
  "common": {
    "error_project-already-exists": "A project with this name already exists.",
-		"need-login": " To use Infisical, please log in through a device with larger dimensions. ",
+    "no-mobile": " To use Infisical, please log in through a device with larger dimensions. ",
    "email": "Email",
    "password": "Password",
    "verify": "Verify",
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
@@ -4,11 +4,10 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-		"start:docker": "next build && next start"
+    "start:docker": "next build && next start",
+    "lint": "next lint"
  },
  "dependencies": {
-		"@apihero/github": "^1.1.5",
-		"@apihero/react": "^1.2.3",
    "@emotion/css": "^11.10.0",
    "@emotion/server": "^11.10.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
@@ -17,7 +16,6 @@
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.1.19",
    "@headlessui/react": "^1.6.6",
-		"@heroicons/react": "^1.0.6",
    "@reduxjs/toolkit": "^1.8.3",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.35.0",
@@ -55,9 +53,14 @@
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.4",
+    "@types/node": "18.11.9",
    "autoprefixer": "^10.4.7",
+    "eslint": "^8.28.0",
+    "eslint-config-next": "^13.0.5",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
    "postcss": "^8.4.14",
    "prettier": "2.7.1",
-		"tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.1.4",
+    "typescript": "^4.9.3"
  }
 }
@@ -1,13 +1,15 @@
-import "../styles/globals.css";
-import "@fortawesome/fontawesome-svg-core/styles.css";
-import { config } from "@fortawesome/fontawesome-svg-core";
-import Layout from "../components/basic/layout";
-import RouteGuard from "../components/RouteGuard";
-import { publicPaths } from "../const.js";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
-import { initPostHog } from "../components/analytics/posthog";
-import { ENV } from "../components/utilities/config";
+import { config } from "@fortawesome/fontawesome-svg-core";
+
+import { initPostHog } from "~/components/analytics/posthog";
+import Layout from "~/components/basic/layout";
+import RouteGuard from "~/components/RouteGuard";
+import { publicPaths } from "~/const";
+import { ENV } from "~/utilities/config";
+
+import "@fortawesome/fontawesome-svg-core/styles.css";
+import "../styles/globals.css";

 config.autoAddCss = false;

@@ -39,9 +41,7 @@ const App = ({ Component, pageProps, ...appProps }) => {
    publicPaths.includes("/" + appProps.router.pathname.split("/")[1]) ||
    !Component.requireAuth
  ) {
-		return (
-			<Component {...pageProps} />
-		)
+    return <Component {...pageProps} />;
  }

  return (
@@ -1,33 +1,39 @@
-import SecurityClient from "../../../components/utilities/SecurityClient";
-import { PATH } from "../../../const";
+import { PATH } from "~/const";
+import SecurityClient from "~/utilities/SecurityClient";

 /**
 * This is the second step of the change password process (pake)
 * @param {*} clientPublicKey
 * @returns
 */
-const changePassword2 = ({encryptedPrivateKey, iv, tag, salt, verifier, clientProof}) => {
+const changePassword2 = ({
+  encryptedPrivateKey,
+  iv,
+  tag,
+  salt,
+  verifier,
+  clientProof,
+}) => {
  return SecurityClient.fetchCall(PATH + "/api/v1/password/change-password", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
-			"clientProof": clientProof,
-			"encryptedPrivateKey": encryptedPrivateKey,
-			"iv": iv,
-			"tag": tag,
-			"salt": salt,
-			"verifier": verifier
+      clientProof: clientProof,
+      encryptedPrivateKey: encryptedPrivateKey,
+      iv: iv,
+      tag: tag,
+      salt: salt,
+      verifier: verifier,
    }),
-	})
-	.then(async res => {
+  }).then(async (res) => {
    if (res.status == 200) {
      return res;
    } else {
-			console.log('Failed to change the password');
+      console.log("Failed to change the password");
    }
-	})
+  });
 };

 export default changePassword2;
@@ -1,5 +1,5 @@
-import SecurityClient from "../../../components/utilities/SecurityClient.js";
-import { PATH } from "../../../const.js";
+import { PATH } from "~/const";
+import SecurityClient from "~/utilities/SecurityClient.js";

 /**
 * This function is used to check if the user is authenticated.
@@ -14,14 +14,13 @@ const checkAuth = async (req, res) => {
    headers: {
      "Content-Type": "application/json",
    },
-	})
-	.then(res => {
+  }).then((res) => {
    if (res.status == 200) {
      return res;
    } else {
      console.log("Not authorized");
    }
-	})
+  });
 };

 export default checkAuth;
@@ -1,4 +1,4 @@
-import { PATH } from "../../../const.js";
+import { PATH } from "~/const";

 /**
 * This route check the verification code from the email that user just recieved
@@ -1,4 +1,4 @@
-import { PATH } from "../../../const";
+import { PATH } from "~/const";

 /**
 * This function is called in the end of the signup process.
@@ -26,13 +26,13 @@ const completeAccountInformationSignup = ({
  tag,
  salt,
  verifier,
-	token
+  token,
 }) => {
  return fetch(PATH + "/api/v1/signup/complete-account/signup", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
-			"Authorization": "Bearer " + token,
+      Authorization: "Bearer " + token,
    },
    body: JSON.stringify({
      email,
@@ -1,4 +1,4 @@
-import { PATH } from "../../../const";
+import { PATH } from "~/const";

 /**
 * This function is called in the end of the signup process.
@@ -24,13 +24,13 @@ const completeAccountInformationSignupInvite = ({
  tag,
  salt,
  verifier,
-	token
+  token,
 }) => {
  return fetch(PATH + "/api/v1/signup/complete-account/invite", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
-			"Authorization": "Bearer " + token,
+      Authorization: "Bearer " + token,
    },
    body: JSON.stringify({
      email: email,
@@ -41,7 +41,7 @@ const completeAccountInformationSignupInvite = ({
      iv: iv,
      tag: tag,
      salt: salt,
-			verifier: verifier
+      verifier: verifier,
    }),
  });
 };
@@ -1,32 +1,41 @@
-import SecurityClient from "../../../components/utilities/SecurityClient";
-import { PATH } from "../../../const";
+import { PATH } from "~/const";
+import SecurityClient from "~/utilities/SecurityClient";

 /**
 * This is the route that issues a backup private key that will afterwards be added into a pdf
 */
-const issueBackupPrivateKey = ({encryptedPrivateKey, iv, tag, salt, verifier, clientProof}) => {
-	return SecurityClient.fetchCall(PATH + "/api/v1/password/backup-private-key", {
+const issueBackupPrivateKey = ({
+  encryptedPrivateKey,
+  iv,
+  tag,
+  salt,
+  verifier,
+  clientProof,
+}) => {
+  return SecurityClient.fetchCall(
+    PATH + "/api/v1/password/backup-private-key",
+    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
-			"clientProof": clientProof,
-			"encryptedPrivateKey": encryptedPrivateKey,
-			"iv": iv,
-			"tag": tag,
-			"salt": salt,
-			"verifier": verifier
+        clientProof: clientProof,
+        encryptedPrivateKey: encryptedPrivateKey,
+        iv: iv,
+        tag: tag,
+        salt: salt,
+        verifier: verifier,
      }),
-	})
-	.then(res => {
+    }
+  ).then((res) => {
    if (res.status == 200) {
      return res;
    } else {
      return res;
      console.log("Failed to issue the backup key");
    }
-	})
+  });
 };

 export default issueBackupPrivateKey;
@@ -1,4 +1,4 @@
-import { PATH } from "../../../const.js";
+import { PATH } from "~/const";

 /**
 * This is the first step of the login process (pake)
@@ -1,4 +1,4 @@
-import { PATH } from "../../../const";
+import { PATH } from "~/const";

 /**
 * This is the second step of the login process
@@ -16,16 +16,15 @@ const login2 = (email, clientProof) => {
      email: email,
      clientProof,
    }),
-		credentials: "include"
-	})
-	.then(res => {
+    credentials: "include",
+  }).then((res) => {
    if (res.status == 200) {
      console.log("User logged in", res);
      return res;
    } else {
      console.log("Failed to log in");
    }
-	})
+  });
 };

 export default login2;
--- a/Show More
+++ b/Show More