awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
이강준
2022-11-28 08:21:58 +09:00
parent 2c1398e71c c4711fc328
commit 914a78fb15
174 changed files with 23100 additions and 20563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.github/workflows/close_inactive_issues.yml vendored Normal file
View File

@@ -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 }}

34
README.md
View File

@@ -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:tony@infisical.com?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>

379
backend/package-lock.json generated
View File

@@ -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
}
}
}
}
}

4
backend/package.json
View File

@@ -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",

2
backend/src/config/index.ts
View File

@@ -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!;

1
backend/src/controllers/organizationController.ts
View File

@@ -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'
});

8
backend/src/helpers/rateLimiter.ts
View File

@@ -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
});

43
backend/src/index.ts
View File

@@ -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

47
backend/src/routes/auth.ts
View File

@@ -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: 'johndoe@gmail.com'
* 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,

2
cli/packages/cmd/root.go
View File

@@ -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.

16
cli/packages/cmd/run.go
View File

@@ -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{
}
}
execCmd(args[0], args[1:], envsFromApi)
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

14
cli/packages/models/error.go Normal file
View File

@@ -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)
}

71
cli/packages/util/secrets.go
View File

@@ -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
}

160
cli/packages/util/secrets_test.go Normal file
View File

@@ -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)
}
}
}

2
docker-compose.dev.yml
View File

@@ -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

3
docker-compose.yml
View File

@@ -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

12
docs/getting-started/cli/installation.mdx → docs/cli/overview.mdx
View File

@@ -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

20
docs/cli/reference/commands.mdx Normal file
View File

@@ -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 |

13
docs/cli/reference/init.mdx Normal file
View File

@@ -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.

13
docs/cli/reference/login.mdx Normal file
View File

@@ -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.

19
docs/cli/reference/run.mdx Normal file
View File

@@ -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
docs/getting-started/cli/token.mdx → docs/cli/token.mdx
View File

52
docs/cli/usage.mdx Normal file
View File

@@ -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
```

27
docs/contributing/architecture.mdx
View File

@@ -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.

1
docs/contributing/developing.mdx
View File

@@ -40,6 +40,7 @@ docker-compose -f docker-compose.dev.yml up
The docker-compose development environment consists of:
- nginx
- frontend
- backend
- mongo

56
docs/getting-started/cli/cli-guide.mdx
View File

@@ -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
```

55
docs/getting-started/cli/reference.mdx
View File

@@ -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` |

2
docs/getting-started/dashboard/create-account.mdx
View File

@@ -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

6
docs/getting-started/dashboard/integrations.mdx
View File

@@ -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)

6
docs/getting-started/dashboard/token.mdx
View File

@@ -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).

54
docs/getting-started/features.mdx
View File

@@ -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 |
| Feature | Status |
| ------------------------------------- | ----------- |
| Integrations | Ongoing |
| More hosting options | Ongoing |
| 1-Click Deploys | Ongoing |
| Account recovery: Backup key | Ongoing |
| 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).

46
docs/getting-started/introduction.mdx
View File

@@ -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>

43
docs/getting-started/quickstart.mdx Normal file
View File

@@ -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.

11
docs/getting-started/security/statement.mdx
View File

@@ -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

BIN
docs/images/project-quickstart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

26
docs/integrations/docker-compose.mdx
View File

@@ -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.
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.
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,13 +39,14 @@ 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.
``` bash
### 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.
```bash
#Example
# Token refers to the token we generated in step 2 for this service
@@ -51,6 +55,6 @@ export INFISICAL_TOKEN_FOR_WEB=<token>
# Token refers to the token we generated in step 2 for this service
export INFISICAL_TOKEN_FOR_API=<token>
# Then run your compose file in the same terminal.
# Then run your compose file in the same terminal.
docker-compose ...
```

6
docs/integrations/docker.mdx
View 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.

14
docs/integrations/heroku.mdx
View File

@@ -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 support@infisical.com.
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 support@infisical.com.
### 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>

24
docs/integrations/overview.mdx Normal file
View File

@@ -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 |

96
docs/mint.json
View File

@@ -35,17 +35,22 @@
],
"navigation": [
{
"group": "Platform",
"group": " ",
"pages": [
"getting-started/introduction",
"getting-started/features",
{
"group": "Overview",
"pages": [
"getting-started/introduction",
"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"
]
},
{
@@ -56,49 +61,56 @@
"getting-started/dashboard/project",
"getting-started/dashboard/integrations",
"getting-started/dashboard/token"
]
]
},
{
"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"
]
}
]
}
]
},
{
"group": "Integrations",
"pages": [
"integrations/heroku",
"integrations/docker",
"integrations/docker-compose"
]
},
{
"group": "Self-hosting",
"pages": [
"self-hosting/overview",
{
"group": "Deployments",
"pages": ["self-hosting/deployments/linux"]
},
{
"group": "Configuration",
"pages": ["self-hosting/configuration/envars"]
"group": "Integrations",
"pages": [
"integrations/overview",
"integrations/heroku",
"integrations/docker",
"integrations/docker-compose"
]
},
{
"group": "Self-hosting",
"pages": [
"self-hosting/overview",
{
"group": "Deployments",
"pages": ["self-hosting/deployments/linux"]
},
{
"group": "Configuration",
"pages": ["self-hosting/configuration/envars"]
}
]
},
{
"group": "Contributing",
"pages": [
"contributing/overview",
"contributing/code-of-conduct",
"contributing/developing"
]
}
]
},
{
"group": "Contributing",
"pages": [
"contributing/overview",
"contributing/code-of-conduct",
"contributing/developing",
"contributing/architecture"
]
}
],
"backgroundImage": "/images/background.png"

0
docs/getting-started/security/data-model.mdx → docs/security/data-model.mdx
View File

0
docs/getting-started/security/mechanics.mdx → docs/security/mechanics.mdx
View File

10
docs/getting-started/security/overview.mdx → docs/security/overview.mdx
View File

@@ -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

4
docs/self-hosting/overview.mdx
View File

@@ -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.

46
frontend/.eslintrc.json Normal file
View File

@@ -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)$"
]
]
}
]
}
}

4
frontend/.prettierrc
View File

@@ -1,4 +1,4 @@
{
"tabWidth": 4,
"useTabs": true
"tabWidth": 2,
"useTabs": false
}

140
frontend/components/RouteGuard.js
View File

@@ -1,82 +1,84 @@
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
export default function RouteGuard({ children }) {
const router = useRouter();
const [authorized, setAuthorized] = useState(false);
const router = useRouter();
const [authorized, setAuthorized] = useState(false);
useEffect(async () => {
// on initial load - run auth check
await authCheck(router.asPath);
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.
const hideContent = () => setAuthorized(false);
// const onError = () => setAuthorized(true)
router.events.on("routeChangeStart", hideContent);
// router.events.on("routeChangeError", onError);
// on route change start - hide page content by setting authorized to false
// #TODO: add the loading page when not yet authorized.
const hideContent = () => setAuthorized(false);
// const onError = () => setAuthorized(true)
router.events.on("routeChangeStart", hideContent);
// router.events.on("routeChangeError", onError);
// on route change complete - run auth check
router.events.on("routeChangeComplete", authCheck);
// on route change complete - run auth check
router.events.on("routeChangeComplete", authCheck);
// unsubscribe from events in useEffect return function
return () => {
router.events.off("routeChangeStart", hideContent);
router.events.off("routeChangeComplete", authCheck);
// router.events.off("routeChangeError", onError);
};
// unsubscribe from events in useEffect return function
return () => {
router.events.off("routeChangeStart", hideContent);
router.events.off("routeChangeComplete", authCheck);
// router.events.off("routeChangeError", onError);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/**
* redirect to login page if accessing a private page and not logged in
* @param {*} url - the url of the page we are trying to go to
*/
async function authCheck(url) {
// Make sure that we don't redirect when the user is on the following pages.
const path = "/" + url.split("?")[0].split("/")[1];
/**
* redirect to login page if accessing a private page and not logged in
* @param {*} url - the url of the page we are trying to go to
*/
async function authCheck(url) {
// Make sure that we don't redirect when the user is on the following pages.
const path = "/" + url.split("?")[0].split("/")[1];
// Check if the user is authenticated
const response = await checkAuth();
// #TODO: figure our why sometimes it doesn't output a response
if (!publicPaths.includes(path)) {
try {
if (response.status !== 200) {
router.push("/login");
console.log("Unauthorized to access.");
setAuthorized(false);
} else {
setAuthorized(true);
console.log("Authorized to access.");
}
} catch (error) {
console.log(
"Error (probably the authCheck route is stuck again...):",
error
);
}
}
}
// Check if the user is authenticated
const response = await checkAuth();
// #TODO: figure our why sometimes it doesn't output a response
if (!publicPaths.includes(path)) {
try {
if (response.status !== 200) {
router.push("/login");
console.log("Unauthorized to access.");
setAuthorized(false);
} else {
setAuthorized(true);
console.log("Authorized to access.");
}
} catch (error) {
console.log(
"Error (probably the authCheck route is stuck again...):",
error
);
}
}
}
if (authorized) {
return children;
} else {
return (
<div className="w-screen h-screen bg-bunker-800 flex items-center justify-center">
<Image
src="/images/loading/loading.gif"
height={70}
width={120}
alt="google logo"
></Image>
</div>
);
}
}
if (authorized) {
return children;
} else {
return (
<div className="w-screen h-screen bg-bunker-800 flex items-center justify-center">
<Image
src="/images/loading/loading.gif"
height={70}
width={120}
alt="google logo"
></Image>
</div>
);
}
}

63
frontend/components/aes-256-gcm.js
View File

@@ -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;

24
frontend/components/analytics/posthog.js
View File

@@ -1,14 +1,20 @@
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") {
if (ENV == "production" && TELEMETRY_ENABLED) {
posthog.init(POSTHOG_API_KEY, {
api_host: POSTHOG_HOST,
});
}
}
if (typeof window !== "undefined") {
if (ENV == "production" && TELEMETRY_ENABLED) {
posthog.init(POSTHOG_API_KEY, {
api_host: POSTHOG_HOST,
});
}
}
return posthog;
return posthog;
};

26
frontend/components/basic/Error.js
View File

@@ -1,19 +1,17 @@
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 (
<div className="relative bg-red-500 opacity-100 border flex flex-row justify-center m-auto items-center w-fit rounded-full mb-4">
<FontAwesomeIcon
icon={faExclamationTriangle}
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>
)}
</div>
);
return (
<div className="relative bg-red-500 opacity-100 border flex flex-row justify-center m-auto items-center w-fit rounded-full mb-4">
<FontAwesomeIcon
icon={faExclamationTriangle}
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>
)}
</div>
);
}

203
frontend/components/basic/InputField.js
View File

@@ -1,48 +1,49 @@
import React from "react";
import Error from "./Error";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCircle,
faCircleExclamation,
faE,
faEye,
faEyeSlash,
} from "@fortawesome/free-solid-svg-icons";
import guidGenerator from "../utilities/randomId";
import { useState } from "react";
import { useRouter } from "next/router";
import {
faCircle,
faCircleExclamation,
faE,
faEye,
faEyeSlash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import guidGenerator from "../utilities/randomId";
import Error from "./Error";
const InputField = (props) => {
const [passwordVisible, setPasswordVisible] = useState(false);
const router = useRouter();
const [passwordVisible, setPasswordVisible] = useState(false);
const router = useRouter();
if (props.static === true) {
return (
<div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
<p className="text-sm font-semibold text-gray-400 mb-0.5">
{props.label}
</p>
{props.text && (
<p className="text-xs text-gray-400 mb-2">{props.text}</p>
)}
<input
onChange={(e) => props.onChangeHandler(e.target.value)}
type={props.type}
placeholder={props.placeholder}
value={props.value}
required={props.isRequired}
className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
name={props.name}
readOnly
/>
</div>
);
} else {
return (
<div className="flex-col w-full">
<div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
<p className="text-sm font-semibold mr-1">{props.label}</p>
{/* {props.label == "Password" && router.asPath != "/login" && (
if (props.static === true) {
return (
<div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
<p className="text-sm font-semibold text-gray-400 mb-0.5">
{props.label}
</p>
{props.text && (
<p className="text-xs text-gray-400 mb-2">{props.text}</p>
)}
<input
onChange={(e) => props.onChangeHandler(e.target.value)}
type={props.type}
placeholder={props.placeholder}
value={props.value}
required={props.isRequired}
className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
name={props.name}
readOnly
/>
</div>
);
} else {
return (
<div className="flex-col w-full">
<div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
<p className="text-sm font-semibold mr-1">{props.label}</p>
{/* {props.label == "Password" && router.asPath != "/login" && (
<div className="mb-0.5 relative inline-block text-gray-400 underline hover:text-primary duration-200">
<FontAwesomeIcon
icon={faCircleExclamation}
@@ -58,73 +59,71 @@ const InputField = (props) => {
</span>
</div>
)} */}
</div>
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
props.error ? "border-red" : "border-mineshaft-500"
} rounded-md`}
>
<input
onChange={(e) => props.onChangeHandler(e.target.value)}
type={passwordVisible == false ? props.type : "text"}
placeholder={props.placeholder}
value={props.value}
required={props.isRequired}
className={`${
props.blurred
? "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"
} 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"
/>
{props.label?.includes("Password") && (
<button
onClick={() => {
setPasswordVisible(!passwordVisible);
}}
className="absolute self-end mr-3 text-gray-400 cursor-pointer"
>
{passwordVisible ? (
<FontAwesomeIcon icon={faEyeSlash} />
) : (
<FontAwesomeIcon icon={faEye} />
)}
</button>
)}
{props.blurred && (
<div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
<p className="ml-2"></p>
{props.value
.split("")
.slice(0, 54)
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
</div>
)}
{/* {props.error && (
</div>
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
props.error ? "border-red" : "border-mineshaft-500"
} rounded-md`}
>
<input
onChange={(e) => props.onChangeHandler(e.target.value)}
type={passwordVisible == false ? props.type : "text"}
placeholder={props.placeholder}
value={props.value}
required={props.isRequired}
className={`${
props.blurred
? "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"
} 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"
/>
{props.label?.includes("Password") && (
<button
onClick={() => {
setPasswordVisible(!passwordVisible);
}}
className="absolute self-end mr-3 text-gray-400 cursor-pointer"
>
{passwordVisible ? (
<FontAwesomeIcon icon={faEyeSlash} />
) : (
<FontAwesomeIcon icon={faEye} />
)}
</button>
)}
{props.blurred && (
<div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
<p className="ml-2"></p>
{props.value
.split("")
.slice(0, 54)
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
</div>
)}
{/* {props.error && (
<div className="absolute z-20 flex items-end justify-end mt-4 mr-1.5 self-end">
<Error />
</div>
)} */}
</div>
{props.error && (
<p className="text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs">
{props.errorText}
</p>
)}
</div>
);
}
</div>
{props.error && (
<p className="text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs">
{props.errorText}
</p>
)}
</div>
);
}
};
export default React.memo(InputField);

193
frontend/components/basic/Listbox.js
View File

@@ -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.
@@ -11,98 +15,97 @@ import { useRouter } from "next/router";
* @returns
*/
export default function ListBox({
selected,
onChange,
data,
text,
buttonAction,
width,
workspaceMapping = [],
selected,
onChange,
data,
text,
buttonAction,
width,
workspaceMapping = [],
}) {
const router = useRouter();
const router = useRouter();
return (
<Listbox value={selected} onChange={onChange}>
<div className="relative">
<Listbox.Button
className={`text-gray-400 relative ${
width == "full" ? "w-full" : "w-52"
} cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
>
<div className="flex flex-row">
{text}
<span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
{" "}
{selected}
</span>
</div>
{data && (
<div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5"/>
</div>
)}
</Listbox.Button>
{data && (
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{data.map((person, personIdx) => (
<Listbox.Option
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"
: ""
} ${
active & !selected
? "bg-white/5 text-mineshaft-200 cursor-pointer"
: "text-gray-400"
} `
}
value={person}
>
{({ selected }) => (
<>
<span
className={`block truncate text-primary${
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"/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
{buttonAction && (
<button
onClick={buttonAction}
className="cursor-pointer w-full"
>
<div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
<FontAwesomeIcon icon={faPlus} className="text-lg"/>
</span>
Add Project
</div>
</button>
)}
</Listbox.Options>
</Transition>
)}
</div>
</Listbox>
);
return (
<Listbox value={selected} onChange={onChange}>
<div className="relative">
<Listbox.Button
className={`text-gray-400 relative ${
width == "full" ? "w-full" : "w-52"
} cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
>
<div className="flex flex-row">
{text}
<span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
{" "}
{selected}
</span>
</div>
{data && (
<div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5" />
</div>
)}
</Listbox.Button>
{data && (
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{data.map((person, personIdx) => (
<Listbox.Option
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" : ""
} ${
active & !selected
? "bg-white/5 text-mineshaft-200 cursor-pointer"
: "text-gray-400"
} `
}
value={person}
>
{({ selected }) => (
<>
<span
className={`block truncate text-primary${
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"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
{buttonAction && (
<button
onClick={buttonAction}
className="cursor-pointer w-full"
>
<div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
<FontAwesomeIcon icon={faPlus} className="text-lg" />
</span>
Add Project
</div>
</button>
)}
</Listbox.Options>
</Transition>
)}
</div>
</Listbox>
);
}

111
frontend/components/basic/buttons/Button.js
View File

@@ -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;
}

111
frontend/components/basic/buttons/Button.tsx Normal file
View File

@@ -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;
}

173
frontend/components/basic/dialog/AddIncidentContactDialog.js
View File

@@ -1,95 +1,98 @@
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,
closeModal,
workspaceId,
incidentContacts,
setIncidentContacts,
isOpen,
closeModal,
workspaceId,
incidentContacts,
setIncidentContacts,
}) => {
let [incidentContactEmail, setIncidentContactEmail] = useState("");
let [incidentContactEmail, setIncidentContactEmail] = useState("");
const submit = () => {
setIncidentContacts(
incidentContacts?.length > 0
? incidentContacts.concat([incidentContactEmail])
: [incidentContactEmail]
);
addIncidentContact(localStorage.getItem("orgData.id"), incidentContactEmail);
closeModal();
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
const submit = () => {
setIncidentContacts(
incidentContacts?.length > 0
? incidentContacts.concat([incidentContactEmail])
: [incidentContactEmail]
);
addIncidentContact(
localStorage.getItem("orgData.id"),
incidentContactEmail
);
closeModal();
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden 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"
>
Add an Incident Contact
</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.
</p>
</div>
<div className="max-h-28">
<InputField
label="Email"
onChangeHandler={
setIncidentContactEmail
}
type="varName"
value={incidentContactEmail}
placeholder=""
isRequired
/>
</div>
<div className="mt-6 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text="Add Incident Contact"
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden 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"
>
Add an Incident Contact
</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.
</p>
</div>
<div className="max-h-28">
<InputField
label="Email"
onChangeHandler={setIncidentContactEmail}
type="varName"
value={incidentContactEmail}
placeholder=""
isRequired
/>
</div>
<div className="mt-6 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text="Add Incident Contact"
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddIncidentContactDialog;

299
frontend/components/basic/dialog/AddProjectMemberDialog.js
View File

@@ -1,171 +1,150 @@
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,
closeModal,
submitModal,
data,
email,
workspaceId,
setEmail,
isOpen,
closeModal,
submitModal,
data,
email,
workspaceId,
setEmail,
}) => {
const router = useRouter();
const { t } = useTranslation();
const router = useRouter();
const { t } = useTranslation();
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<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">
{data?.length > 0 ? (
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
{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"
)}
</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"
)}
</p>
<div className="">
<Trans
i18nKey="settings:add-member-dialog.looking-add"
components={[
<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
)
}
/>,
<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 +
"?invite"
)
}
>
click here.
</button>,
]}
/>
</div>
</div>
) : (
<p className="text-sm text-gray-500">
{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]
}
onChange={setEmail}
data={data}
width="full"
/>
)}
</div>
<div className="max-w-max">
{data?.length > 0 ? (
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={
submitModal
}
color="mineshaft"
text={t(
"settings:add-member-dialog.add-member"
)}
size="md"
/>
</div>
) : (
<Button
onButtonPressed={() =>
router.push(
"/settings/org/" +
router.query.id
)
}
color="mineshaft"
text={t(
"settings:add-member-dialog.add-user-to-org"
)}
size="md"
/>
)}
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<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">
{data?.length > 0 ? (
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
{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")}
</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")}
</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
)
}
/>,
// 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 +
"?invite"
)
}
>
click here.
</button>,
]}
/>
</div>
</div>
) : (
<p className="text-sm text-gray-500">
{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]}
onChange={setEmail}
data={data}
width="full"
/>
)}
</div>
<div className="max-w-max">
{data?.length > 0 ? (
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={submitModal}
color="mineshaft"
text={t("settings:add-member-dialog.add-member")}
size="md"
/>
</div>
) : (
<Button
onButtonPressed={() =>
router.push("/settings/org/" + router.query.id)
}
color="mineshaft"
text={t("settings:add-member-dialog.add-user-to-org")}
size="md"
/>
)}
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddProjectMemberDialog;

444
frontend/components/basic/dialog/AddServiceTokenDialog.js
View File

@@ -1,231 +1,261 @@
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",
Staging: "staging",
Production: "prod",
Testing: "test",
Development: "dev",
Staging: "staging",
Production: "prod",
Testing: "test",
};
const expiryMapping = {
"1 day": 86400,
"7 days": 604800,
"1 month": 2592000,
"1 day": 86400,
"7 days": 604800,
"1 month": 2592000,
};
const AddServiceTokenDialog = ({
isOpen,
closeModal,
workspaceId,
workspaceName
isOpen,
closeModal,
workspaceId,
workspaceName,
}) => {
const router = useRouter();
const [serviceToken, setServiceToken] = useState("");
const [serviceTokenName, setServiceTokenName] = useState("");
const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
const router = useRouter();
const [serviceToken, setServiceToken] = useState("");
const [serviceTokenName, setServiceTokenName] = useState("");
const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
const generateServiceToken = async () => {
const latestFileKey = await getLatestFileKey(workspaceId);
const generateServiceToken = async () => {
const latestFileKey = await getLatestFileKey(workspaceId);
const key = decryptAssymmetric({
ciphertext: latestFileKey.latestKey.encryptedKey,
nonce: latestFileKey.latestKey.nonce,
publicKey: latestFileKey.latestKey.sender.publicKey,
privateKey: localStorage.getItem("PRIVATE_KEY")
});
const key = decryptAssymmetric({
ciphertext: latestFileKey.latestKey.encryptedKey,
nonce: latestFileKey.latestKey.nonce,
publicKey: latestFileKey.latestKey.sender.publicKey,
privateKey: localStorage.getItem("PRIVATE_KEY"),
});
// generate new public/private key pair
const pair = nacl.box.keyPair();
const publicKey = nacl.util.encodeBase64(pair.publicKey);
const privateKey = nacl.util.encodeBase64(pair.secretKey);
// encrypt workspace key under newly-generated public key
const { ciphertext: encryptedKey, nonce } = encryptAssymmetric({
plaintext: key,
publicKey,
privateKey
});
// generate new public/private key pair
const pair = nacl.box.keyPair();
const publicKey = nacl.util.encodeBase64(pair.publicKey);
const privateKey = nacl.util.encodeBase64(pair.secretKey);
let newServiceToken = await addServiceToken({
name: serviceTokenName,
workspaceId,
environment: envMapping[serviceTokenEnv],
expiresIn: expiryMapping[serviceTokenExpiresIn],
publicKey,
encryptedKey,
nonce
})
const serviceToken = newServiceToken + ',' + privateKey;
setServiceToken(serviceToken);
}
// encrypt workspace key under newly-generated public key
const { ciphertext: encryptedKey, nonce } = encryptAssymmetric({
plaintext: key,
publicKey,
privateKey,
});
function copyToClipboard() {
// Get the text field
var copyText = document.getElementById("serviceToken");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
setServiceTokenCopied(true);
setTimeout(() => setServiceTokenCopied(false), 2000);
// Alert the copied text
// alert("Copied the text: " + copyText.value);
}
let newServiceToken = await addServiceToken({
name: serviceTokenName,
workspaceId,
environment: envMapping[serviceTokenEnv],
expiresIn: expiryMapping[serviceTokenExpiresIn],
publicKey,
encryptedKey,
nonce,
});
const closeAddServiceTokenModal = () => {
closeModal();
setServiceTokenName("");
setServiceToken("");
}
const serviceToken = newServiceToken + "," + privateKey;
setServiceToken(serviceToken);
};
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-bunker-700 bg-opacity-80" />
</Transition.Child>
function copyToClipboard() {
// Get the text field
var copyText = document.getElementById("serviceToken");
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
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">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
Add a service token for {workspaceName}
</Dialog.Title>
<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.
</p>
</div>
</div>
<div className="max-h-28 mb-2">
<InputField
label="Service Token Name"
onChangeHandler={
setServiceTokenName
}
type="varName"
value={serviceTokenName}
placeholder=""
isRequired
/>
</div>
<div className="max-h-28 mb-2">
<ListBox
selected={serviceTokenEnv}
onChange={setServiceTokenEnv}
data={["Development", "Staging", "Production", "Testing"]}
width="full"
text="Environment: "
/>
</div>
<div className="max-h-28">
<ListBox
selected={serviceTokenExpiresIn}
onChange={setServiceTokenExpiresIn}
data={["1 day", "7 days", "1 month"]}
width="full"
text="Expires in: "
/>
</div>
<div className="max-w-max">
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={() => generateServiceToken()}
color="mineshaft"
text="Add Service Token"
textDisabled="Add Service Token"
size="md"
active={serviceTokenName == "" ? false : true}
/>
</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.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
Copy your service token
</Dialog.Title>
<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
</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>
<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>
<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
</span>
</div>
</div>
</div>
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={() => closeAddServiceTokenModal()}
color="mineshaft"
text="Close"
size="md"
/>
</div>
</Dialog.Panel>
}
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
setServiceTokenCopied(true);
setTimeout(() => setServiceTokenCopied(false), 2000);
// Alert the copied text
// alert("Copied the text: " + copyText.value);
}
const closeAddServiceTokenModal = () => {
closeModal();
setServiceTokenName("");
setServiceToken("");
};
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-bunker-700 bg-opacity-80" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
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">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
Add a service token for {workspaceName}
</Dialog.Title>
<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.
</p>
</div>
</div>
<div className="max-h-28 mb-2">
<InputField
label="Service Token Name"
onChangeHandler={setServiceTokenName}
type="varName"
value={serviceTokenName}
placeholder=""
isRequired
/>
</div>
<div className="max-h-28 mb-2">
<ListBox
selected={serviceTokenEnv}
onChange={setServiceTokenEnv}
data={[
"Development",
"Staging",
"Production",
"Testing",
]}
width="full"
text="Environment: "
/>
</div>
<div className="max-h-28">
<ListBox
selected={serviceTokenExpiresIn}
onChange={setServiceTokenExpiresIn}
data={["1 day", "7 days", "1 month"]}
width="full"
text="Expires in: "
/>
</div>
<div className="max-w-max">
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={() => generateServiceToken()}
color="mineshaft"
text="Add Service Token"
textDisabled="Add Service Token"
size="md"
active={serviceTokenName == "" ? false : true}
/>
</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.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
Copy your service token
</Dialog.Title>
<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
</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>
<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>
<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
</span>
</div>
</div>
</div>
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={() => closeAddServiceTokenModal()}
color="mineshaft"
text="Close"
size="md"
/>
</div>
</Dialog.Panel>
)}
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddServiceTokenDialog;

213
frontend/components/basic/dialog/AddUserDialog.js
View File

@@ -1,112 +1,109 @@
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,
closeModal,
submitModal,
email,
workspaceId,
setEmail,
currentPlan,
orgName
isOpen,
closeModal,
submitModal,
email,
workspaceId,
setEmail,
currentPlan,
orgName,
}) => {
const submit = () => {
submitModal(email);
};
const router = useRouter();
const submit = () => {
submitModal(email);
};
const router = useRouter();
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-lg transform overflow-hidden 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"
>
Invite others to {orgName}
</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.
</p>
</div>
<div className="max-h-28">
<InputField
label="Email"
onChangeHandler={setEmail}
type="varName"
value={email}
placeholder=""
isRequired
/>
</div>
{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
)
}
>
You can add up to 5 members on a Free tier.
</button>
<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/billing/" +
router.query.id
)
}
>
Upgrade now.
</button>
</div>}
<div className="mt-4 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text="Invite"
size="md"
/>
</div>
</Dialog.Panel>
{/* <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-lg transform overflow-hidden 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"
>
Invite others to {orgName}
</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.
</p>
</div>
<div className="max-h-28">
<InputField
label="Email"
onChangeHandler={setEmail}
type="varName"
value={email}
placeholder=""
isRequired
/>
</div>
{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)
}
>
You can add up to 5 members on a Free tier.
</button>
<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/billing/" + router.query.id)
}
>
Upgrade now.
</button>
</div>
)}
<div className="mt-4 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text="Invite"
size="md"
/>
</div>
</Dialog.Panel>
{/* <Dialog.Panel className="w-full max-w-md transform overflow-hidden 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-xl font-medium leading-6 text-gray-300 z-50"
@@ -138,13 +135,13 @@ const AddUserDialog = ({
</button>
</div>
</Dialog.Panel> */}
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddUserDialog;

176
frontend/components/basic/dialog/AddWorkspaceDialog.js
View File

@@ -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
@@ -11,94 +12,93 @@ import Button from "../buttons/Button";
* @returns
*/
const AddWorkspaceDialog = ({
isOpen,
closeModal,
submitModal,
workspaceName,
setWorkspaceName,
error,
loading,
isOpen,
closeModal,
submitModal,
workspaceName,
setWorkspaceName,
error,
loading,
}) => {
const [addAllUsers, setAddAllUsers] = useState(true);
const submit = () => {
submitModal(workspaceName, addAllUsers);
};
const [addAllUsers, setAddAllUsers] = useState(true);
const submit = () => {
submitModal(workspaceName, addAllUsers);
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-20" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-20" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto z-50">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl 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"
>
Create a new project
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
This project will contain your
environmental variables.
</p>
</div>
<div className="max-h-28 mt-4">
<InputField
label="Project Name"
onChangeHandler={setWorkspaceName}
type="varName"
value={workspaceName}
placeholder=""
isRequired
error={error.length > 0}
errorText={error}
/>
</div>
<div className="mt-4 ml-1">
<Checkbox
addAllUsers={addAllUsers}
setAddAllUsers={setAddAllUsers}
/>
</div>
<div className="mt-4 max-w-min">
<Button
onButtonPressed={submit}
loading={loading}
color="mineshaft"
text="Create"
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
<div className="fixed inset-0 overflow-y-auto z-50">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl 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"
>
Create a new project
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
This project will contain your environmental variables.
</p>
</div>
<div className="max-h-28 mt-4">
<InputField
label="Project Name"
onChangeHandler={setWorkspaceName}
type="varName"
value={workspaceName}
placeholder=""
isRequired
error={error.length > 0}
errorText={error}
/>
</div>
<div className="mt-4 ml-1">
<Checkbox
addAllUsers={addAllUsers}
setAddAllUsers={setAddAllUsers}
/>
</div>
<div className="mt-4 max-w-min">
<Button
onButtonPressed={submit}
loading={loading}
color="mineshaft"
text="Create"
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddWorkspaceDialog;

138
frontend/components/basic/dialog/DeleteUserDialog.js
View File

@@ -1,77 +1,83 @@
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 submit = () => {
submitModal(userIdToBeDeleted);
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
const DeleteUserDialog = ({isOpen, closeModal, submitModal, userIdToBeDeleted}) => {
const submit = () => {
submitModal(userIdToBeDeleted);
}
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-grey 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"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-grey 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"
>
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">
This action is irrevertible.
</p>
</div>
<div className="mt-6">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={submit}
>
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">
This action is irrevertible.
</p>
</div>
<div className="mt-6">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={submit}
>
Delete
</button>
<button
type="button"
className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={submit}
>
Cancel
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
Delete
</button>
<button
type="button"
className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={submit}
>
Cancel
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition>
</div>
);
</div>
</Dialog>
</Transition>
</div>
);
};
export default DeleteUserDialog;
export default DeleteUserDialog;

598
frontend/components/basic/layout.js
View File

@@ -1,339 +1,305 @@
/* 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();
const [workspaceList, setWorkspaceList] = useState([]);
const [workspaceMapping, setWorkspaceMapping] = useState([{ 1: 2 }]);
const [workspaceSelected, setWorkspaceSelected] = useState("∞");
let [newWorkspaceName, setNewWorkspaceName] = useState("");
let [isOpen, setIsOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const router = useRouter();
const [workspaceList, setWorkspaceList] = useState([]);
const [workspaceMapping, setWorkspaceMapping] = useState([{ 1: 2 }]);
const [workspaceSelected, setWorkspaceSelected] = useState("∞");
let [newWorkspaceName, setNewWorkspaceName] = useState("");
let [isOpen, setIsOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const { t } = useTranslation();
const { t } = useTranslation();
function closeModal() {
setIsOpen(false);
}
function closeModal() {
setIsOpen(false);
}
// TODO: what to do about the fact that 2ids can have the same name
// TODO: what to do about the fact that 2ids can have the same name
/**
* When a user creates a new workspace, redirect them to the page of the new workspace.
* @param {*} workspaceName
*/
async function submitModal(workspaceName, addAllUsers) {
setLoading(true);
setTimeout(() => setLoading(false), 1500);
const workspaces = await getWorkspaces();
const currentWorkspaces = workspaces.map((workspace) => workspace.name);
if (!currentWorkspaces.includes(workspaceName)) {
const newWorkspace = await createWorkspace(
workspaceName,
localStorage.getItem("orgData.id")
);
let newWorkspaceId;
try {
newWorkspaceId = newWorkspace._id;
} catch (error) {
console.log(error);
}
if (addAllUsers) {
let orgUsers = await getOrganizationUsers({
orgId: localStorage.getItem("orgData.id"),
});
orgUsers.map(async (user) => {
if (user.status == "accepted") {
let result = await addUserToWorkspace(
user.user.email,
newWorkspaceId
);
if (result?.invitee && result?.latestKey) {
const PRIVATE_KEY =
localStorage.getItem("PRIVATE_KEY");
/**
* When a user creates a new workspace, redirect them to the page of the new workspace.
* @param {*} workspaceName
*/
async function submitModal(workspaceName, addAllUsers) {
setLoading(true);
setTimeout(() => setLoading(false), 1500);
const workspaces = await getWorkspaces();
const currentWorkspaces = workspaces.map((workspace) => workspace.name);
if (!currentWorkspaces.includes(workspaceName)) {
const newWorkspace = await createWorkspace(
workspaceName,
localStorage.getItem("orgData.id")
);
let newWorkspaceId;
try {
newWorkspaceId = newWorkspace._id;
} catch (error) {
console.log(error);
}
if (addAllUsers) {
let orgUsers = await getOrganizationUsers({
orgId: localStorage.getItem("orgData.id"),
});
orgUsers.map(async (user) => {
if (user.status == "accepted") {
let result = await addUserToWorkspace(
user.user.email,
newWorkspaceId
);
if (result?.invitee && result?.latestKey) {
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
// assymmetrically decrypt symmetric key with local private key
const key = decryptAssymmetric({
ciphertext: result.latestKey.encryptedKey,
nonce: result.latestKey.nonce,
publicKey: result.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY,
});
// assymmetrically decrypt symmetric key with local private key
const key = decryptAssymmetric({
ciphertext: result.latestKey.encryptedKey,
nonce: result.latestKey.nonce,
publicKey: result.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY,
});
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: key,
publicKey: result.invitee.publicKey,
privateKey: PRIVATE_KEY,
});
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: key,
publicKey: result.invitee.publicKey,
privateKey: PRIVATE_KEY,
});
uploadKeys(
newWorkspaceId,
result.invitee._id,
ciphertext,
nonce
);
}
}
});
}
router.push("/dashboard/" + newWorkspaceId + "?Development");
setIsOpen(false);
setNewWorkspaceName("");
} else {
setError(t("error_project-already-exists"));
setLoading(false);
}
}
uploadKeys(newWorkspaceId, result.invitee._id, ciphertext, nonce);
}
}
});
}
router.push("/dashboard/" + newWorkspaceId + "?Development");
setIsOpen(false);
setNewWorkspaceName("");
} else {
setError(t("error_project-already-exists"));
setLoading(false);
}
}
function openModal() {
setIsOpen(true);
}
function openModal() {
setIsOpen(true);
}
const menuItems = [
{
href:
"/dashboard/" +
workspaceMapping[workspaceSelected] +
"?Development",
title: t("nav:menu.secrets"),
emoji: <FontAwesomeIcon icon={faHouse} />,
},
{
href: "/users/" + workspaceMapping[workspaceSelected],
title: t("nav:menu.members"),
emoji: <FontAwesomeIcon icon={faUser} />,
},
{
href: "/integrations/" + workspaceMapping[workspaceSelected],
title: t("nav:menu.integrations"),
emoji: <FontAwesomeIcon icon={faLink} />,
},
{
href: "/settings/project/" + workspaceMapping[workspaceSelected],
title: t("nav:menu.project-settings"),
emoji: <FontAwesomeIcon icon={faGear} />,
},
];
const menuItems = [
{
href:
"/dashboard/" + workspaceMapping[workspaceSelected] + "?Development",
title: t("nav:menu.secrets"),
emoji: <FontAwesomeIcon icon={faHouse} />,
},
{
href: "/users/" + workspaceMapping[workspaceSelected],
title: t("nav:menu.members"),
emoji: <FontAwesomeIcon icon={faUser} />,
},
{
href: "/integrations/" + workspaceMapping[workspaceSelected],
title: t("nav:menu.integrations"),
emoji: <FontAwesomeIcon icon={faLink} />,
},
{
href: "/settings/project/" + workspaceMapping[workspaceSelected],
title: t("nav:menu.project-settings"),
emoji: <FontAwesomeIcon icon={faGear} />,
},
];
useEffect(async () => {
// Put a user in a workspace if they're not in one yet
if (
localStorage.getItem("orgData.id") == null ||
localStorage.getItem("orgData.id") == ""
) {
const userOrgs = await getOrganizations();
localStorage.setItem("orgData.id", userOrgs[0]._id);
}
useEffect(async () => {
// Put a user in a workspace if they're not in one yet
if (
localStorage.getItem("orgData.id") == null ||
localStorage.getItem("orgData.id") == ""
) {
const userOrgs = await getOrganizations();
localStorage.setItem("orgData.id", userOrgs[0]._id);
}
let orgUserProjects = await getOrganizationUserProjects({
orgId: localStorage.getItem("orgData.id"),
});
let userWorkspaces = orgUserProjects;
if (
userWorkspaces.length == 0 &&
router.asPath != "/noprojects" &&
!router.asPath.includes("settings")
) {
router.push("/noprojects");
} else if (router.asPath != "/noprojects") {
const intendedWorkspaceId = router.asPath
.split("/")
[router.asPath.split("/").length - 1].split("?")[0];
let orgUserProjects = await getOrganizationUserProjects({
orgId: localStorage.getItem("orgData.id"),
});
let userWorkspaces = orgUserProjects;
if (
userWorkspaces.length == 0 &&
router.asPath != "/noprojects" &&
!router.asPath.includes("settings")
) {
router.push("/noprojects");
} else if (router.asPath != "/noprojects") {
const intendedWorkspaceId = router.asPath
.split("/")
[router.asPath.split("/").length - 1].split("?")[0];
// If a user is not a member of a workspace they are trying to access, just push them to one of theirs
if (
intendedWorkspaceId != "heroku" &&
!userWorkspaces
.map((workspace) => workspace._id)
.includes(intendedWorkspaceId)
) {
router.push(
"/dashboard/" + userWorkspaces[0]._id + "?Development"
);
} else {
setWorkspaceList(
userWorkspaces.map((workspace) => workspace.name)
);
setWorkspaceMapping(
Object.fromEntries(
userWorkspaces.map((workspace) => [
workspace.name,
workspace._id,
])
)
);
setWorkspaceSelected(
Object.fromEntries(
userWorkspaces.map((workspace) => [
workspace._id,
workspace.name,
])
)[
router.asPath
.split("/")
[router.asPath.split("/").length - 1].split("?")[0]
]
);
}
}
}, []);
// If a user is not a member of a workspace they are trying to access, just push them to one of theirs
if (
intendedWorkspaceId != "heroku" &&
!userWorkspaces
.map((workspace) => workspace._id)
.includes(intendedWorkspaceId)
) {
router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
} else {
setWorkspaceList(userWorkspaces.map((workspace) => workspace.name));
setWorkspaceMapping(
Object.fromEntries(
userWorkspaces.map((workspace) => [workspace.name, workspace._id])
)
);
setWorkspaceSelected(
Object.fromEntries(
userWorkspaces.map((workspace) => [workspace._id, workspace.name])
)[
router.asPath
.split("/")
[router.asPath.split("/").length - 1].split("?")[0]
]
);
}
}
}, []);
useEffect(() => {
try {
if (
workspaceMapping[workspaceSelected] &&
workspaceMapping[workspaceSelected] !==
router.asPath
.split("/")
[router.asPath.split("/").length - 1].split("?")[0]
) {
router.push(
"/dashboard/" +
workspaceMapping[workspaceSelected] +
"?Development"
);
localStorage.setItem(
"projectData.id",
workspaceMapping[workspaceSelected]
);
}
} catch (error) {
console.log(error);
}
}, [workspaceSelected]);
useEffect(() => {
try {
if (
workspaceMapping[workspaceSelected] &&
workspaceMapping[workspaceSelected] !==
router.asPath
.split("/")
[router.asPath.split("/").length - 1].split("?")[0]
) {
router.push(
"/dashboard/" + workspaceMapping[workspaceSelected] + "?Development"
);
localStorage.setItem(
"projectData.id",
workspaceMapping[workspaceSelected]
);
}
} catch (error) {
console.log(error);
}
}, [workspaceSelected]);
return (
<>
<div className="fixed w-full hidden md:block flex flex-col h-screen">
<NavBarDashboard />
<div className="flex flex-col md:flex-row flex-1">
<aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
<nav>
<div className="py-6"></div>
<div className="flex justify-center w-full mt-7 mb-8 bg-bunker-600 w-full h-full flex flex-col items-center px-4">
<div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
{t("nav:menu.project")}
</div>
{workspaceList.length > 0 ? (
<Listbox
selected={workspaceSelected}
onChange={setWorkspaceSelected}
data={workspaceList}
buttonAction={openModal}
text=""
workspaceMapping={workspaceMapping}
/>
) : (
<Button
text="Add Project"
onButtonPressed={openModal}
color="mineshaft"
size="md"
icon={faPlus}
/>
)}
</div>
<ul>
{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("/")[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>
{title}
</div>
) : router.asPath ==
"/noprojects" ? (
<div
className={`flex p-2 text-white text-sm rounded`}
>
<p className="ml-2 mr-4">
{emoji}
</p>
{title}
</div>
) : (
<Link href={href}>
<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>
{title}
</div>
</Link>
)}
</li>
))}
</ul>
</nav>
</aside>
<AddWorkspaceDialog
isOpen={isOpen}
closeModal={closeModal}
submitModal={submitModal}
workspaceName={newWorkspaceName}
setWorkspaceName={setNewWorkspaceName}
error={error}
loading={loading}
/>
<main className="flex-1 bg-bunker-800">{children}</main>
</div>
</div>
<div className="block md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
<FontAwesomeIcon
icon={faMobile}
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")} `}
</p>
</div>
</>
);
return (
<>
<div className="fixed w-full hidden md:block flex flex-col h-screen">
<NavBarDashboard />
<div className="flex flex-col md:flex-row flex-1">
<aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
<nav>
<div className="py-6"></div>
<div className="flex justify-center w-full mt-7 mb-8 bg-bunker-600 w-full h-full flex flex-col items-center px-4">
<div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
{t("nav:menu.project")}
</div>
{workspaceList.length > 0 ? (
<Listbox
selected={workspaceSelected}
onChange={setWorkspaceSelected}
data={workspaceList}
buttonAction={openModal}
text=""
workspaceMapping={workspaceMapping}
/>
) : (
<Button
text="Add Project"
onButtonPressed={openModal}
color="mineshaft"
size="md"
icon={faPlus}
/>
)}
</div>
<ul>
{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("/")[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>
{title}
</div>
) : router.asPath == "/noprojects" ? (
<div className={`flex p-2 text-white text-sm rounded`}>
<p className="ml-2 mr-4">{emoji}</p>
{title}
</div>
) : (
<Link href={href}>
<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>
{title}
</div>
</Link>
)}
</li>
))}
</ul>
</nav>
</aside>
<AddWorkspaceDialog
isOpen={isOpen}
closeModal={closeModal}
submitModal={submitModal}
workspaceName={newWorkspaceName}
setWorkspaceName={setNewWorkspaceName}
error={error}
loading={loading}
/>
<main className="flex-1 bg-bunker-800">{children}</main>
</div>
</div>
<div className="block md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
<FontAwesomeIcon
icon={faMobile}
className="text-gray-300 text-7xl mb-8"
/>
<p className="text-gray-200 px-6 text-center text-lg max-w-sm">
{` ${t("common:no-mobile")} `}
</p>
</div>
</>
);
}

80
frontend/components/basic/popups/BottomRightPopup.js
View File

@@ -1,41 +1,51 @@
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,
buttonLink,
titleText,
emoji,
textLine1,
textLine2,
setCheckDocsPopUpVisible
buttonText,
buttonLink,
titleText,
emoji,
textLine1,
textLine2,
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 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>
</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">
<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}
target="_blank"
rel="noopener"
>
{buttonText}
</a>
</div>
</div>
);
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 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>
</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}
target="_blank"
rel="noopener"
>
{buttonText}
</a>
</div>
</div>
);
}

46
frontend/components/basic/table/Checkbox.js
View File

@@ -1,28 +1,28 @@
import React from "react";
export const Checkbox = ({ addAllUsers, setAddAllUsers }) => {
return (
<>
<div className="flex flex-row items-center">
{addAllUsers == true ? (
<input
type="checkbox"
className="accent-primary h-4 w-4"
checked
readOnly
onClick={() => setAddAllUsers(!addAllUsers)}
/>
) : (
<div
className="h-4 w-4 bg-bunker border border-gray-600 rounded-sm"
onClick={() => setAddAllUsers(!addAllUsers)}
></div>
)}
return (
<>
<div className="flex flex-row items-center">
{addAllUsers == true ? (
<input
type="checkbox"
className="accent-primary h-4 w-4"
checked
readOnly
onClick={() => setAddAllUsers(!addAllUsers)}
/>
) : (
<div
className="h-4 w-4 bg-bunker border border-gray-600 rounded-sm"
onClick={() => setAddAllUsers(!addAllUsers)}
></div>
)}
<label className="ml-2 text-gray-500 text-sm">
Add all members of my organization to this project.
</label>
</div>
</>
);
<label className="ml-2 text-gray-500 text-sm">
Add all members of my organization to this project.
</label>
</div>
</>
);
};

128
frontend/components/basic/table/ServiceTokenTable.js
View File

@@ -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,63 +20,66 @@ const reverseEnvMapping = {
* @param {*} props
* @returns
*/
const ServiceTokenTable = ({
data,
workspaceName
}) => {
const router = useRouter();
const ServiceTokenTable = ({ data, workspaceName }) => {
const router = useRouter();
return (
<div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
<div className="absolute rounded-t-md w-full h-12 bg-white/5"></div>
<table className="w-full my-1">
<thead className="text-bunker-300">
<tr>
<th className="text-left pl-6 pt-2.5 pb-2">Token name</th>
<th className="text-left pl-6 pt-2.5 pb-2">Project</th>
<th className="text-left pl-6 pt-2.5 pb-2">Environment</th>
<th className="text-left pl-6 pt-2.5 pb-2">Valid until</th>
<th></th>
</tr>
</thead>
<tbody>
{data?.length > 0
? data
.map((row, index) => {
return (
<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>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{workspaceName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{reverseEnvMapping[row.environment]}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{new Date(row.expiresAt).toUTCString()}
</td>
<td className="py-2 border-mineshaft-700 border-t">
<div className="opacity-50 hover:opacity-100 duration-200 flex items-center">
<Button
onButtonPressed={() => {}}
color="red"
size="icon-sm"
icon={faX}
/>
</div>
</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>
);
return (
<div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
<div className="absolute rounded-t-md w-full h-12 bg-white/5"></div>
<table className="w-full my-1">
<thead className="text-bunker-300">
<tr>
<th className="text-left pl-6 pt-2.5 pb-2">Token name</th>
<th className="text-left pl-6 pt-2.5 pb-2">Project</th>
<th className="text-left pl-6 pt-2.5 pb-2">Environment</th>
<th className="text-left pl-6 pt-2.5 pb-2">Valid until</th>
<th></th>
</tr>
</thead>
<tbody>
{data?.length > 0 ? (
data.map((row, index) => {
return (
<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>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{workspaceName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{reverseEnvMapping[row.environment]}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{new Date(row.expiresAt).toUTCString()}
</td>
<td className="py-2 border-mineshaft-700 border-t">
<div className="opacity-50 hover:opacity-100 duration-200 flex items-center">
<Button
onButtonPressed={() => {}}
color="red"
size="icon-sm"
icon={faX}
/>
</div>
</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>
);
};
export default ServiceTokenTable;

444
frontend/components/basic/table/UserTable.js
View File

@@ -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");
decryptAssymmetric,
encryptAssymmetric,
} = require("../../utilities/cryptography/crypto");
const nacl = require("tweetnacl");
nacl.util = require("tweetnacl-util");
@@ -26,242 +28,214 @@ const roles = ["admin", "user"];
* @returns
*/
const UserTable = ({
userData,
changeData,
myUser,
filter,
resendInvite,
isOrg,
onClick,
deleteUser,
setUserIdToBeDeleted,
userData,
changeData,
myUser,
filter,
resendInvite,
isOrg,
onClick,
deleteUser,
setUserIdToBeDeleted,
}) => {
const [roleSelected, setRoleSelected] = useState(
Array(userData?.length).fill(userData.map((user) => user.role))
);
const router = useRouter();
const [myRole, setMyRole] = useState("member");
const [roleSelected, setRoleSelected] = useState(
Array(userData?.length).fill(userData.map((user) => user.role))
);
const router = useRouter();
const [myRole, setMyRole] = useState("member");
// Delete the row in the table (e.g. a user)
// #TODO: Add a pop-up that warns you that the user is going to be deleted.
const handleDelete = (membershipId, index, e) => {
// setUserIdToBeDeleted(userId);
// onClick();
if (isOrg) {
deleteUserFromOrganization(membershipId);
} else {
deleteUserFromWorkspace(membershipId);
}
changeData(userData.filter((v, i) => i !== index));
setRoleSelected([
...roleSelected.slice(0, index),
...roleSelected.slice(index + 1, userData?.length),
]);
};
// Delete the row in the table (e.g. a user)
// #TODO: Add a pop-up that warns you that the user is going to be deleted.
const handleDelete = (membershipId, index, e) => {
// setUserIdToBeDeleted(userId);
// onClick();
if (isOrg) {
deleteUserFromOrganization(membershipId);
} else {
deleteUserFromWorkspace(membershipId);
}
changeData(userData.filter((v, i) => i !== index));
setRoleSelected([
...roleSelected.slice(0, index),
...roleSelected.slice(index + 1, userData?.length),
]);
};
// Update the rold of a certain user
const handleRoleUpdate = (index, e) => {
changeUserRoleInWorkspace(userData[index].membershipId, e);
changeData([
...userData.slice(0, index),
...[
{
key: userData[index].key,
firstName: userData[index].firstName,
lastName: userData[index].lastName,
email: userData[index].email,
role: e,
status: userData[index].status,
userId: userData[index].userId,
membershipId: userData[index].membershipId,
publicKey: userData[index].publicKey,
},
],
...userData.slice(index + 1, userData?.length),
]);
};
// Update the rold of a certain user
const handleRoleUpdate = (index, e) => {
changeUserRoleInWorkspace(userData[index].membershipId, e);
changeData([
...userData.slice(0, index),
...[
{
key: userData[index].key,
firstName: userData[index].firstName,
lastName: userData[index].lastName,
email: userData[index].email,
role: e,
status: userData[index].status,
userId: userData[index].userId,
membershipId: userData[index].membershipId,
publicKey: userData[index].publicKey,
},
],
...userData.slice(index + 1, userData?.length),
]);
};
useEffect(async () => {
setMyRole(userData.filter((user) => user.email == myUser)[0]?.role);
}, [userData, myUser]);
useEffect(() => {
setMyRole(userData.filter((user) => user.email == myUser)[0]?.role);
}, [userData, myUser]);
const grantAccess = async (id, publicKey) => {
let result = await getLatestFileKey(router.query.id);
const grantAccess = async (id, publicKey) => {
let result = await getLatestFileKey(router.query.id);
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({
ciphertext: result.latestKey.encryptedKey,
nonce: result.latestKey.nonce,
publicKey: result.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY,
});
// assymmetrically decrypt symmetric key with local private key
const key = decryptAssymmetric({
ciphertext: result.latestKey.encryptedKey,
nonce: result.latestKey.nonce,
publicKey: result.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY,
});
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: key,
publicKey: publicKey,
privateKey: PRIVATE_KEY,
});
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: key,
publicKey: publicKey,
privateKey: PRIVATE_KEY,
});
uploadKeys(router.query.id, id, ciphertext, nonce);
router.reload();
};
uploadKeys(router.query.id, id, ciphertext, nonce);
router.reload();
};
const deleteMembershipAndResendInvite = (email, membershipId) => {
// deleteUserFromWorkspace(membershipId);
resendInvite(email);
};
const deleteMembershipAndResendInvite = (email, membershipId) => {
// deleteUserFromWorkspace(membershipId);
resendInvite(email);
};
return (
<div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
<div className="absolute rounded-t-md w-full h-14 bg-white/5"></div>
<table className="w-full my-1">
<thead className="text-gray-400">
<tr>
<th className="text-left pl-6 py-3.5">First Name</th>
<th className="text-left pl-6 py-3.5">Last Name</th>
<th className="text-left pl-6 py-3.5">Email</th>
<th></th>
</tr>
</thead>
<tbody>
{userData?.filter(
(user) =>
user.firstName?.toLowerCase().includes(filter) ||
user.lastName?.toLowerCase().includes(filter) ||
user.email?.toLowerCase().includes(filter)
).length > 0 &&
userData
?.filter(
(user) =>
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">
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{row.firstName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{row.lastName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{row.email}
</td>
<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 == "owner") &&
myUser !== row.email ? (
<Listbox
selected={row.role}
onChange={(e) =>
handleRoleUpdate(
index,
e
)
}
data={
myRole == "owner"
? [
"owner",
"admin",
"member",
]
: [
"admin",
"member",
]
}
text="Role: "
membershipId={
row.membershipId
}
/>
) : (
row.status != "invited" &&
row.status !=
"verified" && (
<Listbox
selected={row.role}
text="Role: "
membershipId={
row.membershipId
}
/>
)
)}
{(row.status == "invited" ||
row.status ==
"verified") && (
<div className="w-full pl-12">
<Button
onButtonPressed={() =>
deleteMembershipAndResendInvite(
row.email,
row.membershipId
)
}
color="mineshaft"
text="Resend Invite"
size="md"
/>
</div>
)}
{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
)
}
color="mineshaft"
text="Grant Access"
size="md"
/>
</div>
)}
</div>
{myUser !== row.email &&
// row.role != "admin" &&
myRole != "member" ? (
<div className="opacity-50 hover:opacity-100 flex items-center">
<Button
onButtonPressed={(e) =>
handleDelete(
row.membershipId,
index,
e
)
}
color="red"
size="icon-sm"
icon={faX}
/>
</div>
) : (
<div className="w-9 h-9"></div>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
return (
<div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
<div className="absolute rounded-t-md w-full h-14 bg-white/5"></div>
<table className="w-full my-1">
<thead className="text-gray-400">
<tr>
<th className="text-left pl-6 py-3.5">First Name</th>
<th className="text-left pl-6 py-3.5">Last Name</th>
<th className="text-left pl-6 py-3.5">Email</th>
<th></th>
</tr>
</thead>
<tbody>
{userData?.filter(
(user) =>
user.firstName?.toLowerCase().includes(filter) ||
user.lastName?.toLowerCase().includes(filter) ||
user.email?.toLowerCase().includes(filter)
).length > 0 &&
userData
?.filter(
(user) =>
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"
>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{row.firstName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{row.lastName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{row.email}
</td>
<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 == "owner") &&
myUser !== row.email ? (
<Listbox
selected={row.role}
onChange={(e) => handleRoleUpdate(index, e)}
data={
myRole == "owner"
? ["owner", "admin", "member"]
: ["admin", "member"]
}
text="Role: "
membershipId={row.membershipId}
/>
) : (
row.status != "invited" &&
row.status != "verified" && (
<Listbox
selected={row.role}
text="Role: "
membershipId={row.membershipId}
/>
)
)}
{(row.status == "invited" ||
row.status == "verified") && (
<div className="w-full pl-9">
<Button
onButtonPressed={() =>
deleteMembershipAndResendInvite(
row.email,
row.membershipId
)
}
color="mineshaft"
text="Resend Invite"
size="md"
/>
</div>
)}
{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)
}
color="mineshaft"
text="Grant Access"
size="md"
/>
</div>
)}
</div>
{myUser !== row.email &&
// row.role != "admin" &&
myRole != "member" ? (
<div className="opacity-50 hover:opacity-100 flex items-center">
<Button
onButtonPressed={(e) =>
handleDelete(row.membershipId, index, e)
}
color="red"
size="icon-sm"
icon={faX}
/>
</div>
) : (
<div className="w-9 h-9"></div>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
export default UserTable;

72
frontend/components/billing/Card.js
View File

@@ -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>
);
}

156
frontend/components/billing/Plan.js
View File

@@ -1,82 +1,84 @@
import React from "react";
import StripeRedirect from "../../pages/api/organization/StripeRedirect";
import StripeRedirect from "~/pages/api/organization/StripeRedirect";
export default function Plan({ plan }) {
return (
<div
className={`relative flex flex-col justify-between border border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
(plan.name != "Starter") & (plan.current == true)
? "border-primary"
: "border-chicago-700"
}
return (
<div
className={`relative flex flex-col justify-between border border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
(plan.name != "Starter") & (plan.current == true)
? "border-primary"
: "border-chicago-700"
}
`}
>
<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`}
>
{plan.name}
</p>
</div>
<div className="flex flwx-row items-end justify-start mb-4">
<p className="pl-6 text-3xl font-semibold text-primary">
{plan.price}
</p>
<p className="pl-3 mb-1 text-lg text-gray-400">
{plan.priceExplanation}
</p>
</div>
<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
{plan.text}
</p>
<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
{plan.subtext}
</p>
</div>
<div className="flex flex-row items-center">
{plan.current == false ? (
<>
{plan.buttonTextMain == "Schedule a Demo" ? (
<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>
</a>
) : (
<div
className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
plan.buttonTextMain == "Downgrade"
? "hover:bg-red hover:text-white hover:border-red"
: "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>
</div>
)}
<a href="/pricing" target='_blank rel="noopener"'>
<div className="relative z-10 text-gray-400 font-semibold hover:text-primary duration-200 cursor-pointer mb-0.5">
{plan.buttonTextSecondary}
</div>
</a>
</>
) : (
<div
className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
(plan.name != "Starter") & (plan.current == true)
? "bg-primary"
: "bg-chicago-700"
}`}
>
<p className="text-xs text-black font-semibold">
CURRENT PLAN
</p>
</div>
)}
</div>
</div>
);
>
<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`}>
{plan.name}
</p>
</div>
<div className="flex flwx-row items-end justify-start mb-4">
<p className="pl-6 text-3xl font-semibold text-primary">
{plan.price}
</p>
<p className="pl-3 mb-1 text-lg text-gray-400">
{plan.priceExplanation}
</p>
</div>
<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
{plan.text}
</p>
<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
{plan.subtext}
</p>
</div>
<div className="flex flex-row items-center">
{plan.current == false ? (
<>
{plan.buttonTextMain == "Schedule a Demo" ? (
<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>
</a>
) : (
<div
className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
plan.buttonTextMain == "Downgrade"
? "hover:bg-red hover:text-white hover:border-red"
: "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>
</div>
)}
<a href="/pricing" target='_blank rel="noopener"'>
<div className="relative z-10 text-gray-400 font-semibold hover:text-primary duration-200 cursor-pointer mb-0.5">
{plan.buttonTextSecondary}
</div>
</a>
</>
) : (
<div
className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
(plan.name != "Starter") & (plan.current == true)
? "bg-primary"
: "bg-chicago-700"
}`}
>
<p className="text-xs text-black font-semibold">CURRENT PLAN</p>
</div>
)}
</div>
</div>
);
}

206
frontend/components/dashboard/DashboardInputField.js
View File

@@ -1,111 +1,131 @@
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 ${...}
* @param {string} text - the value of the input in the Dashboard Input Field
* @returns
* @returns
*/
const findReferences = (text) => {
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 += "}"
}
textArray.push(insideBrackets)
textArray.push(splitText[i].split('}')[1])
}
return textArray;
}
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 += "}";
}
textArray.push(insideBrackets);
textArray.push(splitText[i].split("}")[1]);
}
return textArray;
};
/**
* This component renders the input fields on the dashboard
* @param {object} obj - the order number of a keyPair
* @param {number} obj.index - the order number of a keyPair
* @param {object} obj - the order number of a keyPair
* @param {number} obj.index - the order number of a keyPair
* @param {function} obj.onChangeHandler - what happens when the input is modified
* @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
* @param {string} obj.value - value of the InputField
* @param {string} obj.value - value of the InputField
* @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
* @returns
*/
const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => {
if (type === "varName") {
return (
<div className="flex-col w-full">
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
>
<input
onChange={(e) => onChangeHandler(e.target.value, index)}
type={type}
value={value}
className="asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white 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-200"
spellCheck="false"
/>
</div>
</div>
);
} else if (type === "value") {
return (
<div className="flex-col w-full">
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
>
<input
onChange={(e) => onChangeHandler(e.target.value, index)}
type={type}
value={value}
className={`${
blurred
? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
: ""
} asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`}
spellCheck="false"
/>
<div
className={`${
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`}
>
{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)}
</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>)}
</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">
<p className="ml-2"></p>
{value
.split("")
.slice(0,42)
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
</div>
)}
</div>
</div>
);
}
const DashboardInputField = ({
index,
onChangeHandler,
type,
value,
blurred,
}) => {
if (type === "varName") {
return (
<div className="flex-col w-full">
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
>
<input
onChange={(e) => onChangeHandler(e.target.value, index)}
type={type}
value={value}
className="asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white 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-200"
spellCheck="false"
/>
</div>
</div>
);
} else if (type === "value") {
return (
<div className="flex-col w-full">
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
>
<input
onChange={(e) => onChangeHandler(e.target.value, index)}
type={type}
value={value}
className={`${
blurred
? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
: ""
} asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`}
spellCheck="false"
/>
<div
className={`${
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 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((texts, id) => {
if (id % 2 == 0 || texts.length <= 2) {
return (
<span className="ph-no-capture" key={id}>
{texts}
</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">
<p className="ml-2"></p>
{value
.split("")
.slice(0, 42)
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
</div>
)}
</div>
</div>
);
}
};
export default React.memo(DashboardInputField);

338
frontend/components/dashboard/DropZone.js
View File

@@ -1,190 +1,186 @@
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
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";
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";
const DropZone = ({
setData,
setErrorDragAndDrop,
createNewFile,
errorDragAndDrop,
addPresetRow,
setButtonReady,
keysExist,
numCurrentRows,
setData,
setErrorDragAndDrop,
createNewFile,
errorDragAndDrop,
addPresetRow,
setButtonReady,
keysExist,
numCurrentRows,
}) => {
const { t } = useTranslation();
const { t } = useTranslation();
const handleDragEnter = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragEnter = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
// set dropEffect to copy i.e copy of the source item
e.dataTransfer.dropEffect = "copy";
};
// set dropEffect to copy i.e copy of the source item
e.dataTransfer.dropEffect = "copy";
};
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(false);
// This function function immediately parses the file after it is dropped
const handleDrop = async (e) => {
setLoading(true);
setTimeout(() => setLoading(false), 5000);
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
// This function function immediately parses the file after it is dropped
const handleDrop = async (e) => {
setLoading(true);
setTimeout(() => setLoading(false), 5000);
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
const keyPairs = parse(event.target.result);
const newData = Object.keys(keyPairs).map((key, index) => [
guidGenerator(),
numCurrentRows + index,
key,
keyPairs[key],
"shared",
]);
setData(newData);
setButtonReady(true);
};
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
const keyPairs = parse(event.target.result);
const newData = Object.keys(keyPairs).map((key, index) => [
guidGenerator(),
numCurrentRows + index,
key,
keyPairs[key],
"shared",
]);
setData(newData);
setButtonReady(true);
};
// If something is wrong show an error
try {
reader.readAsText(file);
setLoading(false);
} catch (error) {
setErrorDragAndDrop(true);
setLoading(false);
}
};
// If something is wrong show an error
try {
reader.readAsText(file);
setLoading(false);
} catch (error) {
setErrorDragAndDrop(true);
setLoading(false);
}
};
// This function is used when the user manually selects a file from the in-browser dircetory (not drag and drop)
const handleFileSelect = (e) => {
setLoading(true);
setTimeout(() => setLoading(false), 5000);
var file = e.target.files[0],
reader = new FileReader();
reader.onload = function (event) {
const newData = event.target.result
.split("\n")
.map((line, index) => [
guidGenerator(),
numCurrentRows + index,
line.split("=")[0],
line.split("=").slice(1, line.split("=").length).join("="),
"shared",
]);
setData(newData);
setButtonReady(true);
};
reader.readAsText(file);
};
// This function is used when the user manually selects a file from the in-browser dircetory (not drag and drop)
const handleFileSelect = (e) => {
setLoading(true);
setTimeout(() => setLoading(false), 5000);
var file = e.target.files[0],
reader = new FileReader();
reader.onload = function (event) {
const newData = event.target.result
.split("\n")
.map((line, index) => [
guidGenerator(),
numCurrentRows + index,
line.split("=")[0],
line.split("=").slice(1, line.split("=").length).join("="),
"shared",
]);
setData(newData);
setButtonReady(true);
};
reader.readAsText(file);
};
return loading ? (
<div className="flex items-center justify-center pt-16 mb-16">
<Image
src="/images/loading/loading.gif"
height={70}
width={120}
alt="google logo"
></Image>
</div>
) : keysExist ? (
<div
className="opacity-60 hover:opacity-100 duration-200 relative bg-bunker outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-gray-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
onDragEnter={(e) => handleDragEnter(e)}
onDragOver={(e) => handleDragOver(e)}
onDragLeave={(e) => handleDragLeave(e)}
onDrop={(e) => handleDrop(e)}
>
<input
id="fileSelect"
type="file"
className="opacity-0 absolute w-full h-full"
accept=".txt,.env"
onChange={(e) => handleFileSelect(e)}
/>
{errorDragAndDrop ? (
<div className="my-3 max-w-xl opacity-80"></div>
) : (
<div className=""></div>
)}
<div className="flex flex-row">
<FontAwesomeIcon
icon={faUpload}
className="text-gray-300 text-3xl mr-6"
/>
<p className="text-gray-300 mt-1">
{t("common:drop-zone-keys")}
</p>
</div>
{errorDragAndDrop ? (
<div className="mt-8 max-w-xl opacity-80">
<Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
</div>
) : (
<></>
)}
</div>
) : (
<div
className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker outline max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
onDragEnter={(e) => handleDragEnter(e)}
onDragOver={(e) => handleDragOver(e)}
onDragLeave={(e) => handleDragLeave(e)}
onDrop={(e) => handleDrop(e)}
>
<FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
<p className="">{t("common:drop-zone")}</p>
<input
id="fileSelect"
type="file"
className="opacity-0 absolute w-full h-full"
accept=".txt,.env"
onChange={(e) => handleFileSelect(e)}
/>
<div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
<div className="border-t border-gray-700 w-1/5"></div>
<p className="text-gray-400 text-xs mx-4">OR</p>
<div className="border-t border-gray-700 w-1/5"></div>
</div>
<div className="z-10 mb-6">
<Button
color="mineshaft"
text="Create a new .env file"
onButtonPressed={createNewFile}
size="md"
/>
</div>
{errorDragAndDrop ? (
<div className="opacity-80">
<Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
</div>
) : (
<div className="py-3">
{/* <p className="text-xs text-gray-500"> If you are expecting to see a file here, contact your administrator for permission. </p> */}
</div>
)}
</div>
);
return loading ? (
<div className="flex items-center justify-center pt-16 mb-16">
<Image
src="/images/loading/loading.gif"
height={70}
width={120}
alt="google logo"
></Image>
</div>
) : keysExist ? (
<div
className="opacity-60 hover:opacity-100 duration-200 relative bg-bunker outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-gray-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
onDragEnter={(e) => handleDragEnter(e)}
onDragOver={(e) => handleDragOver(e)}
onDragLeave={(e) => handleDragLeave(e)}
onDrop={(e) => handleDrop(e)}
>
<input
id="fileSelect"
type="file"
className="opacity-0 absolute w-full h-full"
accept=".txt,.env"
onChange={(e) => handleFileSelect(e)}
/>
{errorDragAndDrop ? (
<div className="my-3 max-w-xl opacity-80"></div>
) : (
<div className=""></div>
)}
<div className="flex flex-row">
<FontAwesomeIcon
icon={faUpload}
className="text-gray-300 text-3xl mr-6"
/>
<p className="text-gray-300 mt-1">{t("common:drop-zone-keys")}</p>
</div>
{errorDragAndDrop ? (
<div className="mt-8 max-w-xl opacity-80">
<Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
</div>
) : (
<></>
)}
</div>
) : (
<div
className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker outline max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
onDragEnter={(e) => handleDragEnter(e)}
onDragOver={(e) => handleDragOver(e)}
onDragLeave={(e) => handleDragLeave(e)}
onDrop={(e) => handleDrop(e)}
>
<FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
<p className="">{t("common:drop-zone")}</p>
<input
id="fileSelect"
type="file"
className="opacity-0 absolute w-full h-full"
accept=".txt,.env"
onChange={(e) => handleFileSelect(e)}
/>
<div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
<div className="border-t border-gray-700 w-1/5"></div>
<p className="text-gray-400 text-xs mx-4">OR</p>
<div className="border-t border-gray-700 w-1/5"></div>
</div>
<div className="z-10 mb-6">
<Button
color="mineshaft"
text="Create a new .env file"
onButtonPressed={createNewFile}
size="md"
/>
</div>
{errorDragAndDrop ? (
<div className="opacity-80">
<Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
</div>
) : (
<div className="py-3">
{/* <p className="text-xs text-gray-500"> If you are expecting to see a file here, contact your administrator for permission. </p> */}
</div>
)}
</div>
);
};
export default DropZone;

586
frontend/components/navigation/NavBarDashboard.js
View File

@@ -1,328 +1,296 @@
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,
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
*/
const supportOptions = (t) => [
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,
t("nav:support.slack"),
"https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
t("nav:support.docs"),
"https://infisical.com/docs/getting-started/introduction",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,
t("nav:support.issue"),
"https://github.com/Infisical/infisical-cli/issues",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faEnvelope} />,
t("nav:support.email"),
"mailto:support@infisical.com",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,
t("nav:support.slack"),
"https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
t("nav:support.docs"),
"https://infisical.com/docs/getting-started/introduction",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,
t("nav:support.issue"),
"https://github.com/Infisical/infisical-cli/issues",
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faEnvelope} />,
t("nav:support.email"),
"mailto:support@infisical.com",
],
];
export default function Navbar({ onButtonPressed }) {
const router = useRouter();
const [user, setUser] = useState({});
const [orgs, setOrgs] = useState([]);
const [currentOrg, setCurrentOrg] = useState([]);
const router = useRouter();
const [user, setUser] = useState({});
const [orgs, setOrgs] = useState([]);
const [currentOrg, setCurrentOrg] = useState([]);
const { t } = useTranslation("");
const { t } = useTranslation("");
const supportOptionsList = useMemo(() => supportOptions(t), [t]);
const supportOptionsList = useMemo(() => supportOptions(t), [t]);
useEffect(async () => {
const userData = await getUser();
setUser(userData);
const orgsData = await getOrganizations();
setOrgs(orgsData);
const currentOrg = await getOrganization({
orgId: localStorage.getItem("orgData.id"),
});
setCurrentOrg(currentOrg);
}, []);
useEffect(async () => {
const userData = await getUser();
setUser(userData);
const orgsData = await getOrganizations();
setOrgs(orgsData);
const currentOrg = await getOrganization({
orgId: localStorage.getItem("orgData.id"),
});
setCurrentOrg(currentOrg);
}, []);
const closeApp = async () => {
console.log("Logging out...");
await logout();
router.push("/");
};
const closeApp = async () => {
console.log("Logging out...");
await logout();
router.push("/");
};
return (
<div className="absolute flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
<div className="m-auto flex justify-start items-center mx-4">
<div className="flex flex-row items-center">
<div className="flex justify-center py-4">
<Image
src="/images/logotransparent.png"
height={23}
width={57}
alt="logo"
/>
</div>
<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}
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-2 py-1.5">
{supportOptionsList.map(([icon, text, url]) => (
<a
key={guidGenerator()}
target="_blank"
rel="noopener"
href={url}
className="font-normal text-gray-300 duration-200 rounded-md w-full flex items-center py-0.5"
>
<div className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full">
{icon}
<div className="text-sm">{text}</div>
</div>
</a>
))}
</Menu.Items>
</Transition>
</Menu>
<Menu as="div" className="relative inline-block text-left mr-4">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md pr-2 pl-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">
{user?.firstName} {user?.lastName}
<FontAwesomeIcon
icon={faAngleDown}
className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
<div className="px-1 py-1 ">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t("nav:user.signed-in-as")}
</div>
<div
onClick={() =>
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"
>
<div className="bg-white/10 h-8 w-9 rounded-full flex items-center justify-center text-gray-300">
{user?.firstName?.charAt(0)}
</div>
<div className="flex items-center justify-between w-full">
<div>
<p className="text-gray-300 px-2 pt-1 text-sm">
{" "}
{user?.firstName}{" "}
{user?.lastName}
</p>
<p className="text-gray-400 px-2 pb-1 text-xs">
{" "}
{user?.email}
</p>
</div>
<FontAwesomeIcon
icon={faGear}
className="text-lg text-gray-400 p-2 mr-1 rounded-md cursor-pointer hover:bg-white/10"
/>
</div>
</div>
</div>
<div className="px-2 pt-2">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t("nav:user.current-organization")}
</div>
<div
onClick={() =>
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"
>
<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
{currentOrg?.name?.charAt(0)}
</div>
<div className="flex items-center justify-between w-full">
<p className="text-gray-300 px-2 text-sm">
{currentOrg?.name}
</p>
<FontAwesomeIcon
icon={faGear}
className="text-lg text-gray-400 p-2 rounded-md cursor-pointer hover:bg-white/10"
/>
</div>
</div>
<button
// onClick={buttonAction}
className="cursor-pointer w-full"
>
<div
onClick={() =>
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"
>
<FontAwesomeIcon
className="text-lg pl-1.5 pr-3"
icon={faCoins}
/>
<div className="text-sm">
{t("nav:user.usage-billing")}
</div>
</div>
</button>
<button
// onClick={buttonAction}
className="cursor-pointer w-full mb-2"
>
<div
onClick={() =>
router.push(
"/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"
/>
</span>
<div className="text-sm ml-1">
{t("nav:user.invite")}
</div>
</div>
</button>
</div>
{orgs?.length > 1 && (
<div className="px-1 pt-1">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t("nav:user.other-organizations")}
</div>
<div className="flex flex-col items-start px-1 mt-3 mb-2">
{orgs
.filter(
(org) =>
org._id !=
localStorage.getItem(
"orgData.id"
)
)
.map((org) => (
<div
key={guidGenerator()}
onClick={() => {
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"
>
<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
{org.name.charAt(0)}
</div>
<div className="flex items-center justify-between w-full">
<p className="text-gray-300 px-2 text-sm">
{org.name}
</p>
</div>
</div>
))}
</div>
</div>
)}
<div className="px-1 py-1">
<Menu.Item>
{({ active }) => (
<button
onClick={closeApp}
className={`${
active
? "bg-red font-semibold text-white"
: "text-gray-400"
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="relative flex justify-start items-center cursor-pointer select-none">
<FontAwesomeIcon
className="text-lg ml-1.5 mr-3"
icon={faRightFromBracket}
/>
{t("common:logout")}
</div>
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
);
return (
<div className="absolute flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
<div className="m-auto flex justify-start items-center mx-4">
<div className="flex flex-row items-center">
<div className="flex justify-center py-4">
<Image
src="/images/logotransparent.png"
height={23}
width={57}
alt="logo"
/>
</div>
<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} />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-2 py-1.5">
{supportOptionsList.map(([icon, text, url]) => (
<a
key={guidGenerator()}
target="_blank"
rel="noopener noreferrer"
href={url}
className="font-normal text-gray-300 duration-200 rounded-md w-full flex items-center py-0.5"
>
<div className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full">
{icon}
<div className="text-sm">{text}</div>
</div>
</a>
))}
</Menu.Items>
</Transition>
</Menu>
<Menu as="div" className="relative inline-block text-left mr-4">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md pr-2 pl-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">
{user?.firstName} {user?.lastName}
<FontAwesomeIcon
icon={faAngleDown}
className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
<div className="px-1 py-1 ">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t("nav:user.signed-in-as")}
</div>
<div
onClick={() =>
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"
>
<div className="bg-white/10 h-8 w-9 rounded-full flex items-center justify-center text-gray-300">
{user?.firstName?.charAt(0)}
</div>
<div className="flex items-center justify-between w-full">
<div>
<p className="text-gray-300 px-2 pt-1 text-sm">
{" "}
{user?.firstName} {user?.lastName}
</p>
<p className="text-gray-400 px-2 pb-1 text-xs">
{" "}
{user?.email}
</p>
</div>
<FontAwesomeIcon
icon={faGear}
className="text-lg text-gray-400 p-2 mr-1 rounded-md cursor-pointer hover:bg-white/10"
/>
</div>
</div>
</div>
<div className="px-2 pt-2">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t("nav:user.current-organization")}
</div>
<div
onClick={() =>
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"
>
<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
{currentOrg?.name?.charAt(0)}
</div>
<div className="flex items-center justify-between w-full">
<p className="text-gray-300 px-2 text-sm">
{currentOrg?.name}
</p>
<FontAwesomeIcon
icon={faGear}
className="text-lg text-gray-400 p-2 rounded-md cursor-pointer hover:bg-white/10"
/>
</div>
</div>
<button
// onClick={buttonAction}
className="cursor-pointer w-full"
>
<div
onClick={() =>
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"
>
<FontAwesomeIcon
className="text-lg pl-1.5 pr-3"
icon={faCoins}
/>
<div className="text-sm">{t("nav:user.usage-billing")}</div>
</div>
</button>
<button
// onClick={buttonAction}
className="cursor-pointer w-full mb-2"
>
<div
onClick={() =>
router.push(
"/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" />
</span>
<div className="text-sm ml-1">{t("nav:user.invite")}</div>
</div>
</button>
</div>
{orgs?.length > 1 && (
<div className="px-1 pt-1">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t("nav:user.other-organizations")}
</div>
<div className="flex flex-col items-start px-1 mt-3 mb-2">
{orgs
.filter(
(org) => org._id != localStorage.getItem("orgData.id")
)
.map((org) => (
<div
key={guidGenerator()}
onClick={() => {
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"
>
<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
{org.name.charAt(0)}
</div>
<div className="flex items-center justify-between w-full">
<p className="text-gray-300 px-2 text-sm">
{org.name}
</p>
</div>
</div>
))}
</div>
</div>
)}
<div className="px-1 py-1">
<Menu.Item>
{({ active }) => (
<button
onClick={closeApp}
className={`${
active
? "bg-red font-semibold text-white"
: "text-gray-400"
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="relative flex justify-start items-center cursor-pointer select-none">
<FontAwesomeIcon
className="text-lg ml-1.5 mr-3"
icon={faRightFromBracket}
/>
{t("common:logout")}
</div>
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
);
}

92
frontend/components/navigation/NavHeader.js
View File

@@ -1,47 +1,57 @@
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";
export default function NavHeader({ pageName, isProjectRelated}) {
const [orgName, setOrgName] = useState("");
const [workspaceName, setWorkspaceName] = useState("");
const router = useRouter();
import getOrganization from "~/pages/api/organization/GetOrg";
import getWorkspaceInfo from "~/pages/api/workspace/getWorkspaceInfo";
useEffect(async () => {
let org = await getOrganization({
orgId: localStorage.getItem("orgData.id"),
});
setOrgName(org.name);
let workspace = await getWorkspaceInfo({
workspaceId: router.query.id,
});
setWorkspaceName(workspace.name);
}, []);
export default function NavHeader({ pageName, isProjectRelated }) {
const [orgName, setOrgName] = useState("");
const [workspaceName, setWorkspaceName] = useState("");
const router = useRouter();
return (
<div className="pt-20 ml-6 flex flex-row items-center">
<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="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>
</div>
);
useEffect(() => {
(async () => {
let org = await getOrganization({
orgId: localStorage.getItem("orgData.id"),
});
setOrgName(org.name);
let workspace = await getWorkspaceInfo({
workspaceId: router.query.id,
});
setWorkspaceName(workspace.name);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div className="pt-20 ml-6 flex flex-row items-center">
<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="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>
</div>
);
}

42
frontend/components/utilities/SecurityClient.js
View File

@@ -1,29 +1,27 @@
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;
}
static async fetchCall(resource, options) {
let req = new Request(resource, options);
const destOrigin = new URL(req.url).origin;
if (this.#token == "") {
this.setToken(await token());
}
static setToken(token) {
this.#token = token;
if (this.#token && this.authOrigins.includes(destOrigin)) {
req.headers.set("Authorization", "Bearer " + this.#token);
return fetch(req);
}
static async fetchCall(resource, options) {
let req = new Request(resource, options);
const destOrigin = new URL(req.url).origin;
if (this.#token == "") {
this.setToken(await token())
}
if (this.#token && this.authOrigins.includes(destOrigin)) {
req.headers.set('Authorization', "Bearer " + this.#token);
return fetch(req);
}
}
}
}
}

302
frontend/components/utilities/attemptLogin.js
View File

@@ -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");
@@ -23,161 +24,158 @@ const client = new jsrp.client();
* @returns
*/
const attemptLogin = async (
email,
password,
setErrorLogin,
router,
isSignUp,
isLogin
email,
password,
setErrorLogin,
router,
isSignUp,
isLogin
) => {
try {
let userWorkspace, userOrg;
client.init(
{
username: email,
password: password,
},
async () => {
const clientPublicKey = client.getPublicKey();
try {
let userWorkspace, userOrg;
client.init(
{
username: email,
password: password,
},
async () => {
const clientPublicKey = client.getPublicKey();
let serverPublicKey, salt;
try {
const res = await login1(email, clientPublicKey);
res = await res.json();
serverPublicKey = res.serverPublicKey;
salt = res.salt;
} catch (err) {
setErrorLogin(true);
console.log("Wrong password", err);
}
let serverPublicKey, salt;
try {
const res = await login1(email, clientPublicKey);
res = await res.json();
serverPublicKey = res.serverPublicKey;
salt = res.salt;
} catch (err) {
setErrorLogin(true);
console.log("Wrong password", err);
}
let response;
try {
client.setSalt(salt);
client.setServerPublicKey(serverPublicKey);
const clientProof = client.getProof(); // called M1
response = await login2(email, clientProof);
} catch (err) {
setErrorLogin(true);
console.log("Password verification failed");
}
let response;
try {
client.setSalt(salt);
client.setServerPublicKey(serverPublicKey);
const clientProof = client.getProof(); // called M1
response = await login2(email, clientProof);
} catch (err) {
setErrorLogin(true);
console.log("Password verification failed");
}
// if everything works, go the main dashboard page.
try {
if (response.status == "200") {
response = await response.json();
SecurityClient.setToken(response["token"]);
const publicKey = response["publicKey"];
const encryptedPrivateKey =
response["encryptedPrivateKey"];
const iv = response["iv"];
const tag = response["tag"];
// if everything works, go the main dashboard page.
try {
if (response.status == "200") {
response = await response.json();
SecurityClient.setToken(response["token"]);
const publicKey = response["publicKey"];
const encryptedPrivateKey = response["encryptedPrivateKey"];
const iv = response["iv"];
const tag = response["tag"];
const PRIVATE_KEY = Aes256Gcm.decrypt(
encryptedPrivateKey,
iv,
tag,
password.slice(0, 32).padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
);
const PRIVATE_KEY = Aes256Gcm.decrypt(
encryptedPrivateKey,
iv,
tag,
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("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
);
}
} else {
setErrorLogin(true);
}
try {
localStorage.setItem("publicKey", publicKey);
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
);
}
} else {
setErrorLogin(true);
}
const userOrgs = await getOrganizations();
const userOrgsData = userOrgs.map(org => org._id);
let orgToLogin;
if (userOrgsData.includes(localStorage.getItem("orgData.id"))) {
orgToLogin = localStorage.getItem("orgData.id");
} else {
orgToLogin = userOrgsData[0];
localStorage.setItem("orgData.id", orgToLogin);
}
const userOrgs = await getOrganizations();
const userOrgsData = userOrgs.map((org) => org._id);
let orgUserProjects = await getOrganizationUserProjects({
orgId: orgToLogin,
});
orgUserProjects = orgUserProjects?.map(project => project._id);
let projectToLogin;
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)
}
}
let orgToLogin;
if (userOrgsData.includes(localStorage.getItem("orgData.id"))) {
orgToLogin = localStorage.getItem("orgData.id");
} else {
orgToLogin = userOrgsData[0];
localStorage.setItem("orgData.id", orgToLogin);
}
// If user is logging in for the first time, add the example keys
if (isSignUp) {
await pushKeys(
{
DATABASE_URL: [
"mongodb+srv://this_is:an_example@mongodb.net",
"personal",
],
TWILIO_AUTH_TOKEN: [
"hgSIwDAKvz8PJfkj6xkzYqzGmAP3HLuG",
"shared",
],
WEBSITE_URL: [
"http://localhost:3000",
"shared",
],
STRIPE_SECRET_KEY: [
"sk_test_7348oyho4hfq398HIUOH78",
"shared",
],
},
projectToLogin,
"Development"
);
}
try {
if (email) {
if (ENV == "production") {
const posthog = initPostHog();
posthog.identify(email);
posthog.capture("User Logged In");
}
}
} catch (error) {
console.log("posthog", error);
}
let orgUserProjects = await getOrganizationUserProjects({
orgId: orgToLogin,
});
if (isLogin) {
router.push("/dashboard/");
}
} catch (error) {
setErrorLogin(true);
console.log("Login response not available");
}
}
);
} catch (error) {
console.log("Something went wrong during authentication");
}
return true;
orgUserProjects = orgUserProjects?.map((project) => project._id);
let projectToLogin;
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);
}
}
// If user is logging in for the first time, add the example keys
if (isSignUp) {
await pushKeys(
{
DATABASE_URL: [
"mongodb+srv://this_is:an_example@mongodb.net",
"personal",
],
TWILIO_AUTH_TOKEN: [
"hgSIwDAKvz8PJfkj6xkzYqzGmAP3HLuG",
"shared",
],
WEBSITE_URL: ["http://localhost:3000", "shared"],
STRIPE_SECRET_KEY: ["sk_test_7348oyho4hfq398HIUOH78", "shared"],
},
projectToLogin,
"Development"
);
}
try {
if (email) {
if (ENV == "production") {
const posthog = initPostHog();
posthog.identify(email);
posthog.capture("User Logged In");
}
}
} catch (error) {
console.log("posthog", error);
}
if (isLogin) {
router.push("/dashboard/");
}
} catch (error) {
setErrorLogin(true);
console.log("Login response not available");
}
}
);
} catch (error) {
console.log("Something went wrong during authentication");
}
return true;
};
export default attemptLogin;

109
frontend/components/utilities/changePassword.js
View File

@@ -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;

104
frontend/components/utilities/checks/PasswordCheck.js
View File

@@ -7,59 +7,59 @@
* @returns
*/
const passwordCheck = (
password,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
currentErrorCheck
password,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
currentErrorCheck
) => {
let errorCheck = currentErrorCheck;
if (!password || password.length < 14) {
setPasswordErrorLength(true);
errorCheck = true;
} else {
setPasswordErrorLength(false);
}
if (!/\d/.test(password)) {
setPasswordErrorNumber(true);
errorCheck = true;
} else {
setPasswordErrorNumber(false);
}
if (!/[a-z]/.test(password)) {
setPasswordErrorLowerCase(true);
errorCheck = true;
// } else if (/(.)(?:(?!\1).){1,2}/.test(password)) {
// console.log(111)
// setPasswordError(true);
// setPasswordErrorMessage("Password should not contain repeating characters.");
// errorCheck = true;
// } else if (RegExp(`[${email}]`).test(password)) {
// console.log(222)
// setPasswordError(true);
// setPasswordErrorMessage("Password should not contain your email.");
// errorCheck = true;
} else {
setPasswordErrorLowerCase(false);
}
// if (!/[A-Z]/.test(password)) {
// setPasswordErrorUpperCase(true);
// errorCheck = true;
// } else {
// setPasswordErrorUpperCase(false);
// }
// if (!/(?=.*[!@#$%^&*])/.test(password)) {
// setPasswordErrorSpecialChar(true);
// // "Please add at least 1 special character (*, !, #, %)."
// errorCheck = true;
// } else {
// setPasswordErrorSpecialChar(false);
// }
return errorCheck;
let errorCheck = currentErrorCheck;
if (!password || password.length < 14) {
setPasswordErrorLength(true);
errorCheck = true;
} else {
setPasswordErrorLength(false);
}
if (!/\d/.test(password)) {
setPasswordErrorNumber(true);
errorCheck = true;
} else {
setPasswordErrorNumber(false);
}
if (!/[a-z]/.test(password)) {
setPasswordErrorLowerCase(true);
errorCheck = true;
// } else if (/(.)(?:(?!\1).){1,2}/.test(password)) {
// console.log(111)
// setPasswordError(true);
// setPasswordErrorMessage("Password should not contain repeating characters.");
// errorCheck = true;
// } else if (RegExp(`[${email}]`).test(password)) {
// console.log(222)
// setPasswordError(true);
// setPasswordErrorMessage("Password should not contain your email.");
// errorCheck = true;
} else {
setPasswordErrorLowerCase(false);
}
// if (!/[A-Z]/.test(password)) {
// setPasswordErrorUpperCase(true);
// errorCheck = true;
// } else {
// setPasswordErrorUpperCase(false);
// }
// if (!/(?=.*[!@#$%^&*])/.test(password)) {
// setPasswordErrorSpecialChar(true);
// // "Please add at least 1 special character (*, !, #, %)."
// errorCheck = true;
// } else {
// setPasswordErrorSpecialChar(false);
// }
return errorCheck;
};
export default passwordCheck;

20
frontend/components/utilities/config/index.ts
View File

@@ -1,15 +1,17 @@
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,
POSTHOG_API_KEY,
POSTHOG_HOST,
STRIPE_PRODUCT_PRO,
STRIPE_PRODUCT_STARTER,
TELEMETRY_ENABLED
ENV,
POSTHOG_API_KEY,
POSTHOG_HOST,
STRIPE_PRODUCT_PRO,
STRIPE_PRODUCT_STARTER,
TELEMETRY_ENABLED,
};

63
frontend/components/utilities/cryptography/aes-256-gcm.js Normal file
View File

@@ -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;

120
frontend/components/utilities/cryptography/changePassword.js Normal file
View File

@@ -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;

94
frontend/components/utilities/crypto.js → frontend/components/utilities/cryptography/crypto.js
View File

@@ -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
@@ -14,18 +14,18 @@ const aes = require("../aes-256-gcm");
* @returns {String} nonce - base64-encoded nonce
*/
const encryptAssymmetric = ({ plaintext, publicKey, privateKey }) => {
const nonce = nacl.randomBytes(24);
const ciphertext = nacl.box(
nacl.util.decodeUTF8(plaintext),
nonce,
nacl.util.decodeBase64(publicKey),
nacl.util.decodeBase64(privateKey)
);
const nonce = nacl.randomBytes(24);
const ciphertext = nacl.box(
nacl.util.decodeUTF8(plaintext),
nonce,
nacl.util.decodeBase64(publicKey),
nacl.util.decodeBase64(privateKey)
);
return {
ciphertext: nacl.util.encodeBase64(ciphertext),
nonce: nacl.util.encodeBase64(nonce),
};
return {
ciphertext: nacl.util.encodeBase64(ciphertext),
nonce: nacl.util.encodeBase64(nonce),
};
};
/**
@@ -39,14 +39,14 @@ const encryptAssymmetric = ({ plaintext, publicKey, privateKey }) => {
* @param {String} plaintext - UTF8 plaintext
*/
const decryptAssymmetric = ({ ciphertext, nonce, publicKey, privateKey }) => {
const plaintext = nacl.box.open(
nacl.util.decodeBase64(ciphertext),
nacl.util.decodeBase64(nonce),
nacl.util.decodeBase64(publicKey),
nacl.util.decodeBase64(privateKey)
);
const plaintext = nacl.box.open(
nacl.util.decodeBase64(ciphertext),
nacl.util.decodeBase64(nonce),
nacl.util.decodeBase64(publicKey),
nacl.util.decodeBase64(privateKey)
);
return nacl.util.encodeUTF8(plaintext);
return nacl.util.encodeUTF8(plaintext);
};
/**
@@ -56,23 +56,23 @@ const decryptAssymmetric = ({ ciphertext, nonce, publicKey, privateKey }) => {
* @param {String} obj.key - 16-byte hex key
*/
const encryptSymmetric = ({ plaintext, key }) => {
let ciphertext, iv, tag;
try {
const obj = aes.encrypt(plaintext, key);
ciphertext = obj.ciphertext;
iv = obj.iv;
tag = obj.tag;
} catch (err) {
console.log("Failed to perform encryption");
console.log(err);
process.exit(1);
}
let ciphertext, iv, tag;
try {
const obj = aes.encrypt(plaintext, key);
ciphertext = obj.ciphertext;
iv = obj.iv;
tag = obj.tag;
} catch (err) {
console.log("Failed to perform encryption");
console.log(err);
process.exit(1);
}
return {
ciphertext,
iv,
tag,
};
return {
ciphertext,
iv,
tag,
};
};
/**
@@ -86,20 +86,20 @@ const encryptSymmetric = ({ plaintext, key }) => {
*
*/
const decryptSymmetric = ({ ciphertext, iv, tag, key }) => {
let plaintext;
try {
plaintext = aes.decrypt(ciphertext, iv, tag, key);
} catch (err) {
console.log("Failed to perform decryption");
process.exit(1);
}
let plaintext;
try {
plaintext = aes.decrypt(ciphertext, iv, tag, key);
} catch (err) {
console.log("Failed to perform decryption");
process.exit(1);
}
return plaintext;
return plaintext;
};
module.exports = {
encryptAssymmetric,
decryptAssymmetric,
encryptSymmetric,
decryptSymmetric,
encryptAssymmetric,
decryptAssymmetric,
encryptSymmetric,
decryptSymmetric,
};

98
frontend/components/utilities/cryptography/issueBackupKey.js Normal file
View File

@@ -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;

0
frontend/components/utilities/csp.js
View File

52
frontend/components/utilities/file.js
View File

@@ -1,5 +1,5 @@
const LINE =
/(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
/(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
/**
* Return text that is the buffer parsed
@@ -7,41 +7,41 @@ const LINE =
* @returns {String} text - text of buffer
*/
function parse(src) {
const obj = {};
const obj = {};
// Convert buffer to string
let lines = src.toString();
// Convert buffer to string
let lines = src.toString();
// Convert line breaks to same format
lines = lines.replace(/\r\n?/gm, "\n");
// Convert line breaks to same format
lines = lines.replace(/\r\n?/gm, "\n");
let match;
while ((match = LINE.exec(lines)) != null) {
const key = match[1];
let match;
while ((match = LINE.exec(lines)) != null) {
const key = match[1];
// Default undefined or null to empty string
let value = match[2] || "";
// Default undefined or null to empty string
let value = match[2] || "";
// Remove whitespace
value = value.trim();
// Remove whitespace
value = value.trim();
// Check if double quoted
const maybeQuote = value[0];
// Check if double quoted
const maybeQuote = value[0];
// Remove surrounding quotes
value = value.replace(/^(['"`])([\s\S]*)\1$/gm, "$2");
// Remove surrounding quotes
value = value.replace(/^(['"`])([\s\S]*)\1$/gm, "$2");
// Expand newlines if double quoted
if (maybeQuote === '"') {
value = value.replace(/\\n/g, "\n");
value = value.replace(/\\r/g, "\r");
}
// Expand newlines if double quoted
if (maybeQuote === '"') {
value = value.replace(/\\n/g, "\n");
value = value.replace(/\\r/g, "\r");
}
// Add to object
obj[key] = value;
}
// Add to object
obj[key] = value;
}
return obj;
return obj;
}
export default parse;

201
frontend/components/utilities/generateBackupPDF.js
View File

File diff suppressed because one or more lines are too long

106
frontend/components/utilities/getSecretsForProject.js
View File

@@ -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;

96
frontend/components/utilities/issueBackupKey.js
View File

@@ -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;

109
frontend/components/utilities/pushKeys.js
View File

@@ -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;

77
frontend/components/utilities/pushKeysIntegration.js
View File

@@ -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;

34
frontend/components/utilities/randomId.js
View File

@@ -3,23 +3,23 @@
* @returns
*/
const guidGenerator = () => {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (
S4() +
S4() +
"-" +
S4() +
"-" +
S4() +
"-" +
S4() +
"-" +
S4() +
S4() +
S4()
);
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (
S4() +
S4() +
"-" +
S4() +
"-" +
S4() +
"-" +
S4() +
"-" +
S4() +
S4() +
S4()
);
};
export default guidGenerator;

103
frontend/components/utilities/secrets/getSecretsForProject.js Normal file
View File

@@ -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;

106
frontend/components/utilities/secrets/pushKeys.js Normal file
View File

@@ -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;

74
frontend/components/utilities/secrets/pushKeysIntegration.js Normal file
View File

@@ -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;

32
frontend/const.js
View File

@@ -1,20 +1,20 @@
export const PATH = process.env.NEXT_PUBLIC_WEBSITE_URL;
export const publicPaths = [
`/`,
// `/integrations`,
`/signupinvite`,
`/pricing`,
`/signup`,
`/login`,
`/blog`,
`/docs`,
`/changelog`,
`/security`,
`/scheduledemo`,
`/blog/[slug]`,
`/faq`,
`/privacy`,
`/terms`,
`/subprocessors`,
`/`,
// `/integrations`,
`/signupinvite`,
`/pricing`,
`/signup`,
`/login`,
`/blog`,
`/docs`,
`/changelog`,
`/security`,
`/scheduledemo`,
`/blog/[slug]`,
`/faq`,
`/privacy`,
`/terms`,
`/subprocessors`,
];

266
frontend/locales/en-US.json
View File

@@ -1,135 +1,135 @@
{
"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. ",
"email": "Email",
"password": "Password",
"verify": "Verify",
"first-name": "First Name",
"last-name": "Last Name",
"logout": "Log Out",
"validate-required": "Please input your {{name}}",
"password-validate": "Password should contain at least:",
"password-validate-length": "14 characters",
"password-validate-case": "1 lowercase character",
"password-validate-number": "1 number",
"maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes.",
"click-to-copy": "Click to copy",
"project-id": "Project ID",
"save-changes": "Save Changes",
"saved": "Saved",
"drop-zone": "Drag and drop your .env file here.",
"drop-zone-keys": "Drag and drop your .env file here to add more keys.",
"role": "Role",
"role_admin": "admin",
"display-name": "Display Name"
},
"nav": {
"support": {
"slack": "[NEW] Join Slack Forum",
"docs": "Read Docs",
"issue": "Open a Github Issue",
"email": "Send us an Email"
},
"user": {
"signed-in-as": "SIGNED IN AS",
"current-organization": "CURRENT ORGANIZATION",
"usage-billing": "Usage & Billing",
"invite": "Invite Members",
"other-organizations": "OTHER ORGANIZATION"
},
"menu": {
"project": "PROJECT",
"secrets": "Secrets",
"members": "Members",
"integrations": "Integrations",
"project-settings": "Project Settings"
}
},
"auth": {
"meta": {
"login": {
"title": "Login | Infiscal",
"og-title": "Log In to Infisical",
"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
},
"signup": {
"title": "Sign Up | Infiscal",
"og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables. Works with Node.js, Next.js, Gatsby, Nest.js..."
}
},
"login": "Log In",
"signup": "Sign Up",
"need-account": "Need an Infisical account?",
"create-account": "Create an account",
"already-have-account": "Have an account? Log in",
"forgot-password": "Forgot your password?",
"step1-start": "Let's get started",
"step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
"step1-submit": "Get Started",
"step2-message": "<wrapper>We've sent a verification email to</wrapper><email>{{email}}</email>",
"step2-code-error": "Oops. Your code is wrong. Please try again.",
"step2-spam-alert": "Make sure to check your spam inbox.",
"step3-message": "Almost there!",
"step4-message": "Save your Emergency Kit",
"step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
"step4-description2": "We recommend you download it and keep it somewhere safe.",
"step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
"step4-download": "Download PDF"
},
"dashboard": {
"secrets": "Secrets",
"meta": {
"title": "Dashboard | Infiscal",
"og-title": "Manage your .env files in seconds",
"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
},
"search-keys": "Search keys...",
"add-key": "Add Key",
"personal": "Personal",
"personal-description": "Personal keys are only visible to you",
"shared": "Shared",
"shared-description": "Shared keys are visible to your whole team",
"make-shared": "Make Shared",
"make-personal": "Make Personal",
"check-docs": {
"button": "Check Docs",
"title": "Good job!",
"line1": "Congrats on adding more secrets.",
"line2": "Here is how to connect them to your codebase."
}
},
"settings": {
"meta": {
"members": {
"title": "Project Members",
"head-title": "Project Settings | Infiscal",
"description": "This pages shows the members of the selected project."
},
"org": {
"title": "Organization Settings",
"head-title": "Organization Settings | Infiscal",
"description": "Manage members of your organization. These users could afterwards be formed into projects."
}
},
"search-members": "Search members...",
"search": "Search...",
"add-member": "Add Member",
"org-members": "Organization Members",
"org-members-description": "Manage members of your organization. These users could afterwards be formed into projects.",
"incident-contacts": "Incident Contacts",
"incident-contacts-description": "These contacts will be notified in the unlikely event of a severe incident.",
"no-incident-contacts": "No incident contacts found.",
"add-contact": "Add Contact",
"add-member-dialog": {
"add-member-to-project": "Add a member to your project",
"already-all-invited": "All the users in your organization are already invited.",
"add-user-org-first": "Add more users to the organization first.",
"user-will-email": "The user will receive an email with the instructions.",
"looking-add": "<0>If you are looking to add users to your org,</0><1>click here</1>",
"add-user-to-org": "Add Users to Organization",
"add-member": "Add Member"
}
}
"common": {
"error_project-already-exists": "A project with this name already exists.",
"no-mobile": " To use Infisical, please log in through a device with larger dimensions. ",
"email": "Email",
"password": "Password",
"verify": "Verify",
"first-name": "First Name",
"last-name": "Last Name",
"logout": "Log Out",
"validate-required": "Please input your {{name}}",
"password-validate": "Password should contain at least:",
"password-validate-length": "14 characters",
"password-validate-case": "1 lowercase character",
"password-validate-number": "1 number",
"maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes.",
"click-to-copy": "Click to copy",
"project-id": "Project ID",
"save-changes": "Save Changes",
"saved": "Saved",
"drop-zone": "Drag and drop your .env file here.",
"drop-zone-keys": "Drag and drop your .env file here to add more keys.",
"role": "Role",
"role_admin": "admin",
"display-name": "Display Name"
},
"nav": {
"support": {
"slack": "[NEW] Join Slack Forum",
"docs": "Read Docs",
"issue": "Open a Github Issue",
"email": "Send us an Email"
},
"user": {
"signed-in-as": "SIGNED IN AS",
"current-organization": "CURRENT ORGANIZATION",
"usage-billing": "Usage & Billing",
"invite": "Invite Members",
"other-organizations": "OTHER ORGANIZATION"
},
"menu": {
"project": "PROJECT",
"secrets": "Secrets",
"members": "Members",
"integrations": "Integrations",
"project-settings": "Project Settings"
}
},
"auth": {
"meta": {
"login": {
"title": "Login | Infiscal",
"og-title": "Log In to Infisical",
"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
},
"signup": {
"title": "Sign Up | Infiscal",
"og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables. Works with Node.js, Next.js, Gatsby, Nest.js..."
}
},
"login": "Log In",
"signup": "Sign Up",
"need-account": "Need an Infisical account?",
"create-account": "Create an account",
"already-have-account": "Have an account? Log in",
"forgot-password": "Forgot your password?",
"step1-start": "Let's get started",
"step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
"step1-submit": "Get Started",
"step2-message": "<wrapper>We've sent a verification email to</wrapper><email>{{email}}</email>",
"step2-code-error": "Oops. Your code is wrong. Please try again.",
"step2-spam-alert": "Make sure to check your spam inbox.",
"step3-message": "Almost there!",
"step4-message": "Save your Emergency Kit",
"step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
"step4-description2": "We recommend you download it and keep it somewhere safe.",
"step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
"step4-download": "Download PDF"
},
"dashboard": {
"secrets": "Secrets",
"meta": {
"title": "Dashboard | Infiscal",
"og-title": "Manage your .env files in seconds",
"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
},
"search-keys": "Search keys...",
"add-key": "Add Key",
"personal": "Personal",
"personal-description": "Personal keys are only visible to you",
"shared": "Shared",
"shared-description": "Shared keys are visible to your whole team",
"make-shared": "Make Shared",
"make-personal": "Make Personal",
"check-docs": {
"button": "Check Docs",
"title": "Good job!",
"line1": "Congrats on adding more secrets.",
"line2": "Here is how to connect them to your codebase."
}
},
"settings": {
"meta": {
"members": {
"title": "Project Members",
"head-title": "Project Settings | Infiscal",
"description": "This pages shows the members of the selected project."
},
"org": {
"title": "Organization Settings",
"head-title": "Organization Settings | Infiscal",
"description": "Manage members of your organization. These users could afterwards be formed into projects."
}
},
"search-members": "Search members...",
"search": "Search...",
"add-member": "Add Member",
"org-members": "Organization Members",
"org-members-description": "Manage members of your organization. These users could afterwards be formed into projects.",
"incident-contacts": "Incident Contacts",
"incident-contacts-description": "These contacts will be notified in the unlikely event of a severe incident.",
"no-incident-contacts": "No incident contacts found.",
"add-contact": "Add Contact",
"add-member-dialog": {
"add-member-to-project": "Add a member to your project",
"already-all-invited": "All the users in your organization are already invited.",
"add-user-org-first": "Add more users to the organization first.",
"user-will-email": "The user will receive an email with the instructions.",
"looking-add": "<0>If you are looking to add users to your org,</0><1>click here</1>",
"add-user-to-org": "Add Users to Organization",
"add-member": "Add Member"
}
}
}

8
frontend/locales/ko-KR.json
View File

@@ -1,6 +1,6 @@
{
"common": {},
"nav": {},
"auth": {},
"dashboard": {}
"common": {},
"nav": {},
"auth": {},
"dashboard": {}
}

5
frontend/next-env.d.ts vendored Normal file
View File

@@ -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.

90
frontend/next.config.js
View File

@@ -4,13 +4,13 @@ const nextTranslate = require("next-translate");
const ContentSecurityPolicy = `
default-src ${process.env.NEXT_PUBLIC_WEBSITE_URL};
script-src ${
process.env.NEXT_PUBLIC_WEBSITE_URL
} https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
process.env.NEXT_PUBLIC_WEBSITE_URL
} https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
style-src 'self' https://rsms.me 'unsafe-inline';
child-src https://infisical.com https://api.stripe.com;
frame-src https://js.stripe.com/ https://api.stripe.com;
connect-src ws://${process.env.NEXT_PUBLIC_WEBSITE_URL?.split("//")[1]} ${
process.env.NEXT_PUBLIC_WEBSITE_URL
process.env.NEXT_PUBLIC_WEBSITE_URL
} https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
img-src 'self' https://*.stripe.com https://i.ytimg.com/ data:;
media-src;
@@ -20,49 +20,49 @@ const ContentSecurityPolicy = `
// You can choose which headers to add to the list
// after learning more below.
const securityHeaders = [
{
key: "X-DNS-Prefetch-Control",
value: "on",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload",
},
{
key: "X-XSS-Protection",
value: "1; mode=block",
},
{
key: "X-Frame-Options",
value: "SAMEORIGIN",
},
{
key: "Permissions-Policy",
value: "camera=(), microphone=()",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Referrer-Policy",
value: "strict-origin-when-cross-origin",
},
{
key: "Content-Security-Policy",
value: ContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
},
{
key: "X-DNS-Prefetch-Control",
value: "on",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload",
},
{
key: "X-XSS-Protection",
value: "1; mode=block",
},
{
key: "X-Frame-Options",
value: "SAMEORIGIN",
},
{
key: "Permissions-Policy",
value: "camera=(), microphone=()",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Referrer-Policy",
value: "strict-origin-when-cross-origin",
},
{
key: "Content-Security-Policy",
value: ContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
},
];
module.exports = nextTranslate({
output: "standalone",
async headers() {
return [
{
// Apply these headers to all routes in your application.
source: "/:path*",
headers: securityHeaders,
},
];
},
output: "standalone",
async headers() {
return [
{
// Apply these headers to all routes in your application.
source: "/:path*",
headers: securityHeaders,
},
];
},
});

20320
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

123
frontend/package.json
View File

@@ -1,63 +1,66 @@
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"start:docker": "next build && next start"
},
"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",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@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",
"add": "^2.0.6",
"axios": "^0.27.2",
"axios-auth-refresh": "^3.3.3",
"classnames": "^2.3.1",
"cookies": "^0.8.0",
"fs": "^0.0.1-security",
"gray-matter": "^4.0.3",
"http-proxy": "^1.18.1",
"jspdf": "^2.5.1",
"jsrp": "^0.2.4",
"markdown-it": "^13.0.1",
"next": "^12.2.5",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"start:docker": "next build && next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/css": "^11.10.0",
"@emotion/server": "^11.10.0",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.2",
"@fortawesome/react-fontawesome": "^0.1.19",
"@headlessui/react": "^1.6.6",
"@reduxjs/toolkit": "^1.8.3",
"@stripe/react-stripe-js": "^1.10.0",
"@stripe/stripe-js": "^1.35.0",
"add": "^2.0.6",
"axios": "^0.27.2",
"axios-auth-refresh": "^3.3.3",
"classnames": "^2.3.1",
"cookies": "^0.8.0",
"fs": "^0.0.1-security",
"gray-matter": "^4.0.3",
"http-proxy": "^1.18.1",
"jspdf": "^2.5.1",
"jsrp": "^0.2.4",
"markdown-it": "^13.0.1",
"next": "^12.2.5",
"next-translate": "^1.6.0",
"posthog-js": "^1.34.0",
"query-string": "^7.1.1",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.1",
"react-code-input": "^3.10.1",
"react-dom": "^17.0.2",
"react-github-btn": "^1.4.0",
"react-grid-layout": "^1.3.4",
"react-mailchimp-subscribe": "^2.1.3",
"react-markdown": "^8.0.3",
"react-redux": "^8.0.2",
"react-table": "^7.8.0",
"set-cookie-parser": "^2.5.1",
"styled-components": "^5.3.5",
"tweetnacl": "^1.0.3",
"tweetnacl-util": "^0.15.1",
"uuid": "^8.3.2",
"uuidv4": "^6.2.13"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.4",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"prettier": "2.7.1",
"tailwindcss": "^3.1.4"
}
"posthog-js": "^1.34.0",
"query-string": "^7.1.1",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.1",
"react-code-input": "^3.10.1",
"react-dom": "^17.0.2",
"react-github-btn": "^1.4.0",
"react-grid-layout": "^1.3.4",
"react-mailchimp-subscribe": "^2.1.3",
"react-markdown": "^8.0.3",
"react-redux": "^8.0.2",
"react-table": "^7.8.0",
"set-cookie-parser": "^2.5.1",
"styled-components": "^5.3.5",
"tweetnacl": "^1.0.3",
"tweetnacl-util": "^0.15.1",
"uuid": "^8.3.2",
"uuidv4": "^6.2.13"
},
"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",
"typescript": "^4.9.3"
}
}

84
frontend/pages/_app.js
View File

@@ -1,62 +1,62 @@
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;
const App = ({ Component, pageProps, ...appProps }) => {
const router = useRouter();
const posthog = initPostHog();
const router = useRouter();
const posthog = initPostHog();
useEffect(() => {
// Init for auto capturing
const posthog = initPostHog();
useEffect(() => {
// Init for auto capturing
const posthog = initPostHog();
const handleRouteChange = () => {
if (typeof window !== "undefined") {
if (ENV == "production") {
posthog.capture("$pageview");
}
}
};
const handleRouteChange = () => {
if (typeof window !== "undefined") {
if (ENV == "production") {
posthog.capture("$pageview");
}
}
};
router.events.on("routeChangeComplete", handleRouteChange);
router.events.on("routeChangeComplete", handleRouteChange);
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
// If it's one of these routes, don't add the layout (e.g., these routes are external)
if (
publicPaths.includes("/" + appProps.router.pathname.split("/")[1]) ||
!Component.requireAuth
) {
return (
<Component {...pageProps} />
)
}
// If it's one of these routes, don't add the layout (e.g., these routes are external)
if (
publicPaths.includes("/" + appProps.router.pathname.split("/")[1]) ||
!Component.requireAuth
) {
return <Component {...pageProps} />;
}
return (
<RouteGuard>
<Layout>
<Component {...pageProps} />
</Layout>
</RouteGuard>
);
return (
<RouteGuard>
<Layout>
<Component {...pageProps} />
</Layout>
</RouteGuard>
);
};
export default App;
{
/* <Script
/* <Script
src="https://www.googletagmanager.com/gtag/js?id=G-DQ1XLJJGG1"
strategy="afterInteractive"
/>

54
frontend/pages/api/auth/ChangePassword2.js
View File

@@ -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}) => {
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
}),
})
.then(async res => {
if (res.status == 200) {
return res;
} else {
console.log('Failed to change the password');
}
})
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,
}),
}).then(async (res) => {
if (res.status == 200) {
return res;
} else {
console.log("Failed to change the password");
}
});
};
export default changePassword2;

Some files were not shown because too many files have changed in this diff Show More