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

frontend/pages/api/auth/ChangePassword2.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -14,7 +13,7 @@ const changePassword2 = ({
   verifier,
   clientProof,
 }) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/password/change-password", {
+  return SecurityClient.fetchCall("/api/v1/password/change-password", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/CheckAuth.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient.js";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient.js";
  * @returns
  */
 const checkAuth = async (req, res) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/auth/checkAuth", {
+  return SecurityClient.fetchCall("/api/v1/auth/checkAuth", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/CheckEmailVerificationCode.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This route check the verification code from the email that user just recieved
  * @param {*} email
@@ -7,7 +5,7 @@ import { PATH } from "~/const";
  * @returns
  */
 const checkEmailVerificationCode = (email, code) => {
-  return fetch(PATH + "/api/v1/signup/email/verify", {
+  return fetch("/api/v1/signup/email/verify", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/CompleteAccountInformationSignup.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This function is called in the end of the signup process.
  * It sends all the necessary nformation to the server.
@@ -28,7 +26,7 @@ const completeAccountInformationSignup = ({
   verifier,
   token,
 }) => {
-  return fetch(PATH + "/api/v1/signup/complete-account/signup", {
+  return fetch("/api/v1/signup/complete-account/signup", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/CompleteAccountInformationSignupInvite.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This function is called in the end of the signup process.
  * It sends all the necessary nformation to the server.
@@ -26,7 +24,7 @@ const completeAccountInformationSignupInvite = ({
   verifier,
   token,
 }) => {
-  return fetch(PATH + "/api/v1/signup/complete-account/invite", {
+  return fetch("/api/v1/signup/complete-account/invite", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/IssueBackupPrivateKey.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -13,7 +12,7 @@ const issueBackupPrivateKey = ({
   clientProof,
 }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/password/backup-private-key",
+    "/api/v1/password/backup-private-key",
     {
       method: "POST",
       headers: {
@@ -32,8 +31,8 @@ const issueBackupPrivateKey = ({
     if (res.status == 200) {
       return res;
     } else {
-      return res;
       console.log("Failed to issue the backup key");
+      return res;
     }
   });
 };

frontend/pages/api/auth/Login1.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This is the first step of the login process (pake)
  * @param {*} email
@@ -7,7 +5,7 @@ import { PATH } from "~/const";
  * @returns
  */
 const login1 = (email, clientPublicKey) => {
-  return fetch(PATH + "/api/v1/auth/login1", {
+  return fetch("/api/v1/auth/login1", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/Login2.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This is the second step of the login process
  * @param {*} email
@@ -7,7 +5,7 @@ import { PATH } from "~/const";
  * @returns
  */
 const login2 = (email, clientProof) => {
-  return fetch(PATH + "/api/v1/auth/login2", {
+  return fetch("/api/v1/auth/login2", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/Logout.ts

@@ -1,22 +1,18 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route logs the user out. Note: the user should authorized to do this.
  * We first try to log out - if the authorization fails (response.status = 401), we refetch the new token, and then retry
- * @param {*} req
- * @param {*} res
- * @returns
  */
-const logout = async (req, res) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/auth/logout", {
+const logout = async () => {
+  return SecurityClient.fetchCall("/api/v1/auth/logout", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     credentials: "include",
   }).then((res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       SecurityClient.setToken("");
       // Delete the cookie by not setting a value; Alternatively clear the local storage
       localStorage.setItem("publicKey", "");

frontend/pages/api/auth/SRP1.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -7,7 +6,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const SRP1 = ({ clientPublicKey }) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/password/srp1", {
+  return SecurityClient.fetchCall("/api/v1/password/srp1", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/SendVerificationEmail.js

@@ -1,11 +1,9 @@
-import { PATH } from "~/const";
-
 /**
  * This route send the verification email to the user's email (contains a 6-digit verification code)
  * @param {*} email
  */
 const sendVerificationEmail = (email) => {
-  fetch(PATH + "/api/v1/signup/email/signup", {
+  fetch("/api/v1/signup/email/signup", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/Token.js

@@ -1,7 +1,5 @@
-import { PATH } from "~/const";
-
 const token = async (req, res) => {
-  return fetch(PATH + "/api/v1/auth/token", {
+  return fetch("/api/v1/auth/token", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/VerifySignupInvite.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This route verifies the signup invite link
  * @param {*} email
@@ -7,7 +5,7 @@ import { PATH } from "~/const";
  * @returns
  */
 const verifySignupInvite = ({ email, code }) => {
-  return fetch(PATH + "/api/v1/invite-org/verify", {
+  return fetch("/api/v1/invite-org/verify", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/auth/publicKeyInfisical.js

@@ -1,5 +1,3 @@
-import { PATH } from "~/const";
-
 /**
  * This route lets us get the public key of infisical. Th euser doesn't have to be authenticated since this is just the public key.
  * @param {*} req
@@ -7,7 +5,7 @@ import { PATH } from "~/const";
  * @returns
  */
 const publicKeyInfisical = (req, res) => {
-  return fetch(PATH + "/api/v1/key/publicKey/infisical", {
+  return fetch("/api/v1/key/publicKey/infisical", {
     method: "GET",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/files/GetSecrets.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient.js";
 
 /**
@@ -9,7 +8,6 @@ import SecurityClient from "~/utilities/SecurityClient.js";
  */
 const getSecrets = async (workspaceId, env) => {
   return SecurityClient.fetchCall(
-    PATH +
       "/api/v1/secret/" +
       workspaceId +
       "?" +

frontend/pages/api/files/UploadSecrets.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const uploadSecrets = async ({ workspaceId, secrets, keys, environment }) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/secret/" + workspaceId, {
+  return SecurityClient.fetchCall("/api/v1/secret/" + workspaceId, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/integrations/ChangeHerokuConfigVars.js

@@ -1,9 +1,8 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 const changeHerokuConfigVars = ({ integrationId, key, secrets }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/integration/" + integrationId + "/sync",
+    "/api/v1/integration/" + integrationId + "/sync",
     {
       method: "POST",
       headers: {

frontend/pages/api/integrations/DeleteIntegration.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const deleteIntegration = ({ integrationId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/integration/" + integrationId,
+    "/api/v1/integration/" + integrationId,
     {
       method: "DELETE",
       headers: {

frontend/pages/api/integrations/DeleteIntegrationAuth.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const deleteIntegrationAuth = ({ integrationAuthId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/integration-auth/" + integrationAuthId,
+    "/api/v1/integration-auth/" + integrationAuthId,
     {
       method: "DELETE",
       headers: {

frontend/pages/api/integrations/GetIntegrationApps.js

@@ -1,9 +1,8 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 const getIntegrationApps = ({ integrationAuthId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/integration-auth/" + integrationAuthId + "/apps",
+    "/api/v1/integration-auth/" + integrationAuthId + "/apps",
     {
       method: "GET",
       headers: {

frontend/pages/api/integrations/GetIntegrations.js

@@ -1,8 +1,7 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 const getIntegrations = () => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/integration/integrations", {
+  return SecurityClient.fetchCall("/api/v1/integration/integrations", {
     method: "GET",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/integrations/StartIntegration.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const startIntegration = ({ integrationId, appName, environment }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/integration/" + integrationId,
+    "/api/v1/integration/" + integrationId,
     {
       method: "PATCH",
       headers: {

frontend/pages/api/integrations/authorizeIntegration.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const AuthorizeIntegration = ({ workspaceId, code, integration }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/integration-auth/oauth-token",
+    "/api/v1/integration-auth/oauth-token",
     {
       method: "POST",
       headers: {

frontend/pages/api/integrations/getWorkspaceAuthorizations.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getWorkspaceAuthorizations = ({ workspaceId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + workspaceId + "/authorizations",
+    "/api/v1/workspace/" + workspaceId + "/authorizations",
     {
       method: "GET",
       headers: {

frontend/pages/api/integrations/getWorkspaceIntegrations.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getWorkspaceIntegrations = ({ workspaceId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + workspaceId + "/integrations",
+    "/api/v1/workspace/" + workspaceId + "/integrations",
     {
       method: "GET",
       headers: {

frontend/pages/api/organization/GetOrg.ts

@@ -1,20 +1,18 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route lets us get info about a certain org
- * @param {*} req
- * @param {*} res
+ * @param {string} orgId - the organization ID
  * @returns
  */
-const getOrganization = (req, res) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/organization/" + req.orgId, {
+const getOrganization = ({ orgId }: { orgId: string; }) => {
+  return SecurityClient.fetchCall("/api/v1/organization/" + orgId, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
     },
   }).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).organization;
     } else {
       console.log("Failed to get org info");

frontend/pages/api/organization/GetOrgProjects.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getOrganizationProjects = (req, res) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/organization/" + req.orgId + "/workspaces",
+    "/api/organization/" + req.orgId + "/workspaces",
     {
       method: "GET",
       headers: {

frontend/pages/api/organization/GetOrgSubscription.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getOrganizationSubscriptions = (req, res) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + req.orgId + "/subscriptions",
+    "/api/v1/organization/" + req.orgId + "/subscriptions",
     {
       method: "GET",
       headers: {

frontend/pages/api/organization/GetOrgUserProjects.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getOrganizationUserProjects = (req, res) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + req.orgId + "/my-workspaces",
+    "/api/v1/organization/" + req.orgId + "/my-workspaces",
     {
       method: "GET",
       headers: {

frontend/pages/api/organization/GetOrgUsers.ts

@@ -1,15 +1,14 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route lets us get all the users in an org.
- * @param {*} req
- * @param {*} res
+ * @param {object} obj
+ * @param {string} obj.orgId - organization Id
  * @returns
  */
-const getOrganizationUsers = (req, res) => {
+const getOrganizationUsers = ({ orgId }: { orgId: string; }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + req.orgId + "/users",
+    "/api/v1/organization/" + orgId + "/users",
     {
       method: "GET",
       headers: {
@@ -17,7 +16,7 @@ const getOrganizationUsers = (req, res) => {
       },
     }
   ).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).users;
     } else {
       console.log("Failed to get org users");

frontend/pages/api/organization/StripeRedirect.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const StripeRedirect = ({ orgId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + orgId + "/customer-portal-session",
+    "/api/v1/organization/" + orgId + "/customer-portal-session",
     {
       method: "POST",
       headers: {

frontend/pages/api/organization/addIncidentContact.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const addIncidentContact = (organizationId, email) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + organizationId + "/incidentContactOrg",
+    "/api/v1/organization/" + organizationId + "/incidentContactOrg",
     {
       method: "POST",
       headers: {

frontend/pages/api/organization/addUserToOrg.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const addUserToOrg = (email, orgId) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/invite-org/signup", {
+  return SecurityClient.fetchCall("/api/v1/invite-org/signup", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/organization/deleteIncidentContact.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const deleteIncidentContact = (organizaionId, email) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + organizaionId + "/incidentContactOrg",
+    "/api/v1/organization/" + organizaionId + "/incidentContactOrg",
     {
       method: "DELETE",
       headers: {

frontend/pages/api/organization/deleteUserFromOrganization.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const deleteUserFromOrganization = (membershipId) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/membership-org/" + membershipId,
+    "/api/v1/membership-org/" + membershipId,
     {
       method: "DELETE",
       headers: {

frontend/pages/api/organization/getIncidentContacts.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getIncidentContacts = (organizationId) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + organizationId + "/incidentContactOrg",
+    "/api/v1/organization/" + organizationId + "/incidentContactOrg",
     {
       method: "GET",
       headers: {

frontend/pages/api/organization/getOrgs.ts

@@ -1,20 +1,17 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route lets us get the all the orgs of a certain user.
- * @param {*} req
- * @param {*} res
  * @returns
  */
-const getOrganizations = (req, res) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/organization", {
+const getOrganizations = () => {
+  return SecurityClient.fetchCall("/api/v1/organization", {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
     },
   }).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).organizations;
     } else {
       console.log("Failed to get orgs of a user");

frontend/pages/api/organization/renameOrg.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const renameOrg = (orgId, newOrgName) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/organization/" + orgId + "/name",
+    "/api/v1/organization/" + orgId + "/name",
     {
       method: "PATCH",
       headers: {

frontend/pages/api/serviceToken/addServiceToken.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -15,7 +14,7 @@ const addServiceToken = ({
   encryptedKey,
   nonce,
 }) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/service-token/", {
+  return SecurityClient.fetchCall("/api/v1/service-token/", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/serviceToken/getServiceTokens.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -8,7 +7,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const getServiceTokens = ({ workspaceId }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + workspaceId + "/service-tokens",
+    "/api/v1/workspace/" + workspaceId + "/service-tokens",
     {
       method: "GET",
       headers: {

frontend/pages/api/user/getUser.ts

@@ -1,20 +1,16 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route gets the information about a specific user.
- * @param {*} req
- * @param {*} res
- * @returns
  */
-const getUser = (req, res) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/user", {
+const getUser = () => {
+  return SecurityClient.fetchCall("/api/v1/user", {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
     },
   }).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).user;
     } else {
       console.log("Failed to get user info");

frontend/pages/api/userActions/checkUserAction.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,6 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const checkUserAction = ({ action }) => {
   return SecurityClient.fetchCall(
-    PATH +
       "/api/v1/user-action" +
       "?" +
       new URLSearchParams({

frontend/pages/api/userActions/registerUserAction.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -7,7 +6,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const registerUserAction = ({ action }) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/user-action", {
+  return SecurityClient.fetchCall("/api/v1/user-action", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/workspace/addUserToWorkspace.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const addUserToWorkspace = (email, workspaceId) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + workspaceId + "/invite-signup",
+    "/api/v1/workspace/" + workspaceId + "/invite-signup",
     {
       method: "POST",
       headers: {

frontend/pages/api/workspace/changeUserRoleInWorkspace.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const changeUserRoleInWorkspace = (membershipId, role) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/membership/" + membershipId + "/change-role",
+    "/api/v1/membership/" + membershipId + "/change-role",
     {
       method: "POST",
       headers: {

frontend/pages/api/workspace/createWorkspace.ts

@@ -1,13 +1,13 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
- * This route creates a new workspace for a user.
- * @param {*} workspaceName
+ * This route creates a new workspace for a user within a certain organization.
+ * @param {string} workspaceName - project Name
+ * @param {string} organizationId - org ID
  * @returns
  */
-const createWorkspace = (workspaceName, organizationId) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/workspace", {
+const createWorkspace = ( { workspaceName, organizationId }: { workspaceName: string; organizationId: string; }) => {
+  return SecurityClient.fetchCall("/api/v1/workspace", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -17,7 +17,7 @@ const createWorkspace = (workspaceName, organizationId) => {
       organizationId: organizationId,
     }),
   }).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).workspace;
     } else {
       console.log("Failed to create a project");

frontend/pages/api/workspace/deleteUserFromWorkspace.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -7,7 +6,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const deleteUserFromWorkspace = (membershipId) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/membership/" + membershipId, {
+  return SecurityClient.fetchCall("/api/v1/membership/" + membershipId, {
     method: "DELETE",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/workspace/deleteWorkspace.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -7,7 +6,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const deleteWorkspace = (workspaceId) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/workspace/" + workspaceId, {
+  return SecurityClient.fetchCall("/api/v1/workspace/" + workspaceId, {
     method: "DELETE",
     headers: {
       "Content-Type": "application/json",

frontend/pages/api/workspace/getLatestFileKey.ts

@@ -1,14 +1,13 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * Get the latest key pairs from a certain workspace
- * @param {*} workspaceId
+ * @param {string} workspaceId
  * @returns
  */
-const getLatestFileKey = (workspaceId) => {
+const getLatestFileKey = ({ workspaceId } : { workspaceId: string; }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/key/" + workspaceId + "/latest",
+    "/api/v1/key/" + workspaceId + "/latest",
     {
       method: "GET",
       headers: {
@@ -16,7 +15,7 @@ const getLatestFileKey = (workspaceId) => {
       },
     }
   ).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return await res.json();
     } else {
       console.log("Failed to get the latest key pairs for a certain project");

frontend/pages/api/workspace/getProjectInfo.ts

@@ -1,15 +1,13 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route lets us get the information of a certain project.
- * @param {*} req
- * @param {*} res
+ * @param {*} projectId - project ID (we renamed workspaces to projects in the app)
  * @returns
  */
-const getWorkspaceInfo = (req, res) => {
+const getProjectInfo = ({ projectId }: { projectId: string; }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + req.workspaceId,
+    "/api/v1/workspace/" + projectId,
     {
       method: "GET",
       headers: {
@@ -17,7 +15,7 @@ const getWorkspaceInfo = (req, res) => {
       },
     }
   ).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).workspace;
     } else {
       console.log("Failed to get project info");
@@ -25,4 +23,4 @@ const getWorkspaceInfo = (req, res) => {
   });
 };
 
-export default getWorkspaceInfo;
+export default getProjectInfo;

frontend/pages/api/workspace/getWorkspaceKeys.ts

@@ -1,15 +1,13 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route lets us get the public keys of everyone in your workspace.
- * @param {*} req
- * @param {*} res
+ * @param {string} workspaceId
  * @returns
  */
-const getWorkspaceKeys = (req, res) => {
+const getWorkspaceKeys = ({ workspaceId }: { workspaceId: string; }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + req.workspaceId + "/keys",
+    "/api/v1/workspace/" + workspaceId + "/keys",
     {
       method: "GET",
       headers: {
@@ -17,7 +15,7 @@ const getWorkspaceKeys = (req, res) => {
       },
     }
   ).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).publicKeys;
     } else {
       console.log("Failed to get the public keys of everyone in the workspace");

frontend/pages/api/workspace/getWorkspaceUsers.ts

@@ -1,15 +1,13 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
  * This route lets us get all the users in the workspace.
- * @param {*} req
- * @param {*} res
+ * @param {string} workspaceId - workspace ID
  * @returns
  */
-const getWorkspaceUsers = (req, res) => {
+const getWorkspaceUsers = ({ workspaceId }: { workspaceId: string; }) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + req.workspaceId + "/users",
+    "/api/v1/workspace/" + workspaceId + "/users",
     {
       method: "GET",
       headers: {
@@ -17,7 +15,7 @@ const getWorkspaceUsers = (req, res) => {
       },
     }
   ).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).users;
     } else {
       console.log("Failed to get Project Users");

frontend/pages/api/workspace/getWorkspaces.ts

@@ -1,20 +1,17 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
- * This route lets us get the public keys of everyone in your workspace.
- * @param {*} req
- * @param {*} res
+ * This route lets us get the workspaces of a certain user
  * @returns
  */
-const getWorkspaces = (req, res) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/workspace", {
+const getWorkspaces = () => {
+  return SecurityClient.fetchCall("/api/v1/workspace", {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
     },
   }).then(async (res) => {
-    if (res.status == 200) {
+    if (res?.status == 200) {
       return (await res.json()).workspaces;
     } else {
       console.log("Failed to get projects");

frontend/pages/api/workspace/renameWorkspace.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -9,7 +8,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  */
 const renameWorkspace = (workspaceId, newWorkspaceName) => {
   return SecurityClient.fetchCall(
-    PATH + "/api/v1/workspace/" + workspaceId + "/name",
+    "/api/v1/workspace/" + workspaceId + "/name",
     {
       method: "POST",
       headers: {

frontend/pages/api/workspace/uploadKeys.js

@@ -1,4 +1,3 @@
-import { PATH } from "~/const";
 import SecurityClient from "~/utilities/SecurityClient";
 
 /**
@@ -10,7 +9,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @returns
  */
 const uploadKeys = (workspaceId, userId, encryptedKey, nonce) => {
-  return SecurityClient.fetchCall(PATH + "/api/v1/key/" + workspaceId, {
+  return SecurityClient.fetchCall("/api/v1/key/" + workspaceId, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/pages/dashboard/[id].js

@@ -35,19 +35,13 @@ import pushKeys from "~/components/utilities/secrets/pushKeys";
 import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
 import guidGenerator from "~/utilities/randomId";
 
+import { envMapping } from "../../public/data/frequentConstants";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 import getUser from "../api/user/getUser";
 import checkUserAction from "../api/userActions/checkUserAction";
 import registerUserAction from "../api/userActions/registerUserAction";
 import getWorkspaces from "../api/workspace/getWorkspaces";
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 /**
  * This component represent a single row for an environemnt variable on the dashboard
  * @param {object} obj
@@ -57,6 +51,7 @@ const envMapping = {
  * @param {function} obj.modifyValue - modify the value of a certain environment variable
  * @param {function} obj.modifyVisibility - switch between public/private visibility
  * @param {boolean} obj.isBlurred - if the blurring setting is turned on
+ * @param {string[]} obj.duplicates - list of all the duplicates secret names on the dashboard
  * @returns
  */
 const KeyPair = ({
@@ -66,20 +61,22 @@ const KeyPair = ({
   modifyValue,
   modifyVisibility,
   isBlurred,
+  duplicates
 }) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
   const { t } = useTranslation();
 
   return (
     <div className="px-1 flex flex-col items-center ml-1">
-      <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-10 my-1 items-center px-2">
+      <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-2">
         <div className="min-w-xl w-96">
-          <div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-10">
+          <div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-16">
             <DashboardInputField
               onChangeHandler={modifyKey}
               type="varName"
               index={keyPair[1]}
               value={keyPair[2]}
+              duplicates={duplicates}
             />
           </div>
         </div>
@@ -114,7 +111,7 @@ const KeyPair = ({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute z-40 right-0 mt-0.5 w-[20rem] 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-1 py-1">
+            <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none px-1 py-1">
               <div
                 onClick={() =>
                   modifyVisibility(
@@ -378,37 +375,47 @@ export default function Dashboard() {
       ...data.map((row) => ({ [row[2]]: [row[3], row[4]] }))
     );
 
-    // Once "Save changed is clicked", disable that button
-    setButtonReady(false);
-    pushKeys(obj, router.query.id, env);
+    // Checking if any of the secret keys start with a number - if so, don't do anything
+    const nameErrors = !Object.keys(obj).map(key => !isNaN(key.charAt(0))).every(v => v === false);
+    const duplicatesExist = data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item)).length > 0;
 
-    /**
-     * Check which integrations are active for this project and environment
-     * If there are any, update environment variables for those integrations
-     */
-    let integrations = await getWorkspaceIntegrations({
-      workspaceId: router.query.id,
-    });
-    integrations.map(async (integration) => {
-      if (
-        envMapping[env] == integration.environment &&
-        integration.isActive == true
-      ) {
-        let objIntegration = Object.assign(
-          {},
-          ...data.map((row) => ({ [row[2]]: row[3] }))
-        );
-        await pushKeysIntegration({
-          obj: objIntegration,
-          integrationId: integration._id,
-        });
+    if (nameErrors) {
+      console.log("Solve all name errors first!");
+    } else if (duplicatesExist) {
+      console.log("Remove the duplicated entries first!");
+    } else {
+      // Once "Save changes is clicked", disable that button
+      setButtonReady(false);
+      pushKeys({obj, workspaceId: router.query.id, env});
+
+      /**
+       * Check which integrations are active for this project and environment
+       * If there are any, update environment variables for those integrations
+       */
+      let integrations = await getWorkspaceIntegrations({
+        workspaceId: router.query.id,
+      });
+      integrations.map(async (integration) => {
+        if (
+          envMapping[env] == integration.environment &&
+          integration.isActive == true
+        ) {
+          let objIntegration = Object.assign(
+            {},
+            ...data.map((row) => ({ [row[2]]: row[3] }))
+          );
+          await pushKeysIntegration({
+            obj: objIntegration,
+            integrationId: integration._id,
+          });
+        }
+      });
+
+      // If this user has never saved environment variables before, show them a prompt to read docs
+      if (!hasUserEverPushed) {
+        setCheckDocsPopUpVisible(true);
+        await registerUserAction({ action: "first_time_secrets_pushed" });
       }
-    });
-
-    // If this user has never saved environment variables before, show them a prompt to read docs
-    if (!hasUserEverPushed) {
-      setCheckDocsPopUpVisible(true);
-      await registerUserAction({ action: "first_time_secrets_pushed" });
     }
   };
 
@@ -647,6 +654,7 @@ export default function Dashboard() {
                           modifyKey={listenChangeKey}
                           modifyVisibility={listenChangeVisibility}
                           isBlurred={blurred}
+                          duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))}
                         />
                       ))}
                   </div>
@@ -694,6 +702,7 @@ export default function Dashboard() {
                           modifyKey={listenChangeKey}
                           modifyVisibility={listenChangeVisibility}
                           isBlurred={blurred}
+                          duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))}
                         />
                       ))}
                   </div>

frontend/pages/home/[id].tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faCheckCircle, faHandPeace, faNetworkWired, faPlug, faPlus, faStar, faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import getOrganizationUsers from "../api/organization/GetOrgUsers";
+import checkUserAction from "../api/userActions/checkUserAction";
+import registerUserAction from "../api/userActions/registerUserAction";
+
+type ItemProps = { 
+  text: string; 
+  subText: string; 
+  complete: boolean; 
+  icon: IconProp; 
+  time: string; 
+  userAction?: string;
+  link?: string;
+};
+
+const learningItem = ({ text, subText, complete, icon, time, userAction, link }: ItemProps): JSX.Element => {
+  if (link) {
+    return (
+      <Link href={link}>
+        <a target={`${link.includes("https") ? "_blank" : "_self"}`} rel="noopener noreferrer" className="w-full">
+          <div 
+            onClick={async () => { 
+              if (userAction) { 
+                await registerUserAction({ 
+                  action: userAction 
+                })
+              }
+            }}
+            className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer">
+            <div className="flex flex-row items-center mr-4">
+              <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
+              {complete && 
+              <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10 p-2 flex items-center justify-center">
+                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
+              </div>}
+              <div className="flex flex-col items-start">
+                <div className="text-xl font-semibold mt-0.5">{text}</div>
+                <div className="text-sm font-normal">{subText}</div>
+              </div>
+            </div>
+            <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && "text-green"}`}>
+              {complete ? "Complete!" : "About " + time}
+            </div>
+            {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>}
+          </div>
+        </a>
+      </Link>
+    );
+  } else {
+    return (
+      <div 
+      onClick={async () => { 
+        if (userAction) { 
+          await registerUserAction({ 
+            action: userAction 
+          })
+        }
+      }}
+        className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer">
+        <div className="flex flex-row items-center mr-4">
+          <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
+          {complete && 
+          <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
+            <FontAwesomeIcon icon={faCheckCircle} className="absolute text-4xl left-12 top-16 w-5 h-5 text-green" />
+          </div>}
+          <div className="flex flex-col items-start">
+            <div className="text-xl font-semibold mt-0.5">{text}</div>
+            <div className="text-sm font-normal mt-0.5">{subText}</div>
+          </div>
+        </div>
+        <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && "text-green"}`}>
+          {complete ? "Complete!" : "About " + time}
+        </div>
+        {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>}
+      </div>
+    );
+  }
+}
+
+/**
+ * This tab is called Home because in the future it will include some company news, 
+ * updates, roadmap, relavant blogs, etc. Currently it only has the setup instruction 
+ * for the new users
+ */
+export default function Home() {
+  const router = useRouter();
+  const [hasUserClickedSlack, setHasUserClickedSlack] = useState(false);
+  const [hasUserClickedIntro, setHasUserClickedIntro] = useState(false);
+  const [hasUserStarred, setHasUserStarred] = useState(false);
+  const [usersInOrg, setUsersInOrg] = useState(false);
+
+  useEffect(() => {
+    const checkUserActionsFunction = async () => {
+      const userActionSlack = await checkUserAction({
+        action: "slack_cta_clicked",
+      });
+      setHasUserClickedSlack(userActionSlack ? true : false);
+
+      const userActionIntro = await checkUserAction({
+        action: "intro_cta_clicked",
+      });
+      setHasUserClickedIntro(userActionIntro ? true : false);
+
+      const userActionStar = await checkUserAction({
+        action: "star_cta_clicked",
+      });
+      setHasUserStarred(userActionStar ? true : false);
+
+      const orgId = localStorage.getItem("orgData.id");
+      const orgUsers = await getOrganizationUsers({
+        orgId: orgId ? orgId : "",
+      });
+      setUsersInOrg(orgUsers.length > 1)
+    };
+    checkUserActionsFunction();
+  }, []);
+
+  return (
+    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-20 h-screen">
+      <div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
+        <div className="text-3xl font-bold text-left w-full">Your quick start guide</div>
+        <div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">Click on the items below and follow the instructions.</div>
+        {learningItem({ text: "Get to know Infisical", subText: "", complete: hasUserClickedIntro, icon: faHandPeace, time: "3 min", userAction: "intro_cta_clicked", link: "https://www.youtube.com/watch?v=JS3OKYU2078" })}
+        {learningItem({ text: "Add your secrets", subText: "Click to see example secrets, and add your own.", complete: false, icon: faPlus, time: "2 min", userAction: "first_time_secrets_pushed", link: "/dashboard/" + router.query.id })}
+        {learningItem({ text: "Inject secrets locally", subText: "Replace .env files with a more secure an efficient alternative.", complete: false, icon: faNetworkWired, time: "8 min", link: "https://infisical.com/docs/getting-started/quickstart" })}
+        {learningItem({ text: "Integrate Infisical with your infrastructure", subText: "Only a few integrations are currently available. Many more coming soon!", complete: false, icon: faPlug, time: "15 min", link: "https://infisical.com/docs/integrations/overview"  })}
+        {learningItem({ text: "Invite your teammates", subText: "", complete: usersInOrg, icon: faUserPlus, time: "2 min", link: "/settings/org/" + router.query.id + "?invite" })}
+        {learningItem({ text: "Join Infisical Slack", subText: "Have any questions? Ask us!", complete: hasUserClickedSlack, icon: faSlack, time: "1 min", userAction: "slack_cta_clicked", link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g" })}
+        {learningItem({ text: "Star Infisical on GitHub", subText: "Like what we're doing? You know what to do! :)", complete: hasUserStarred, icon: faStar, time: "1 min", userAction: "star_cta_clicked", link: "https://github.com/Infisical/infisical" })}
+      </div>
+    </div>
+  );
+}
+
+Home.requireAuth = true;

frontend/pages/integrations/[id].js

@@ -18,6 +18,11 @@ import getSecretsForProject from "~/components/utilities/secrets/getSecretsForPr
 import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
 import guidGenerator from "~/utilities/randomId";
 
+import {
+  envMapping,
+  frameworks,
+  reverseEnvMapping,
+} from "../../public/data/frequentConstants";
 import deleteIntegration from "../api/integrations/DeleteIntegration";
 import deleteIntegrationAuth from "../api/integrations/DeleteIntegrationAuth";
 import getIntegrationApps from "../api/integrations/GetIntegrationApps";
@@ -28,20 +33,6 @@ import startIntegration from "../api/integrations/StartIntegration";
 
 const crypto = require("crypto");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
-
 const Integration = ({ projectIntegration }) => {
   const [integrationEnvironment, setIntegrationEnvironment] = useState(
     reverseEnvMapping[projectIntegration.environment]
@@ -262,7 +253,7 @@ export default function Integrations() {
               {t("integrations:available-text2")}
             </p>
           </div>
-          <div className="grid gap-4 grid-cols-3 grid-rows-3 mx-6 mt-4 max-w-5xl">
+          <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 mt-4 max-w-5xl">
             {Object.keys(integrations).map((integration) => (
               <div
                 className={`relative ${
@@ -287,12 +278,12 @@ export default function Integrations() {
                 >
                   <Image
                     src={`/images/integrations/${integrations[integration].name}.png`}
-                    height={100}
-                    width={100}
+                    height={70}
+                    width={70}
                     alt="integration logo"
                   ></Image>
                   {integrations[integration].name.split(" ").length > 2 ? (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
                       <div>{integrations[integration].name.split(" ")[0]}</div>
                       <div className="text-base">
                         {integrations[integration].name.split(" ")[1]}{" "}
@@ -300,7 +291,7 @@ export default function Integrations() {
                       </div>
                     </div>
                   ) : (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-2xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
                       {integrations[integration].name}
                     </div>
                   )}
@@ -350,6 +341,46 @@ export default function Integrations() {
               </div>
             ))}
           </div>
+          <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+            <div className="flex flex-row justify-start items-center text-3xl">
+              <p className="font-semibold mr-4">Framework Integrations</p>
+            </div>
+            <p className="mr-4 text-base text-gray-400">
+              Click on a framework to get the setup instructions.
+            </p>
+          </div>
+          <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+            {frameworks.map((framework) => (
+              <div key={framework.name}>
+                <a
+                  href={framework.link}
+                  rel="noopener"
+                  className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr hover:from-sky-400 hover:to-primary duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
+                >
+                  <div
+                    className={`font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${
+                      framework?.name?.split(" ").length > 1
+                        ? "text-sm px-1"
+                        : "text-xl px-2"
+                    } text-center w-full max-w-xs`}
+                  >
+                    {framework?.image && (
+                      <Image
+                        src={`/images/integrations/${framework.image}.png`}
+                        height={framework?.name ? 60 : 90}
+                        width={framework?.name ? 60 : 90}
+                        alt="integration logo"
+                      ></Image>
+                    )}
+                    {framework?.name && framework?.image && (
+                      <div className="h-2"></div>
+                    )}
+                    {framework?.name && framework.name}
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

frontend/pages/settings/billing/[id].js

@@ -54,7 +54,7 @@ export default function SettingsBilling() {
       orgId: localStorage.getItem("orgData.id"),
     });
 
-    setCurrentPlan(subscriptions.data[0].plan.product);
+    setCurrentPlan(subscriptions.data[0].plan.id);
     const orgUsers = await getOrganizationUsers({
       orgId: localStorage.getItem("orgData.id"),
     });

frontend/pages/signup.js

@@ -201,7 +201,7 @@ export default function SignUp() {
         },
         async () => {
           client.createVerifier(async (err, result) => {
-            const response = await completeAccountInformationSignup({
+            let response = await completeAccountInformationSignup({
               email,
               firstName,
               lastName,
@@ -473,7 +473,7 @@ export default function SignUp() {
       </div>
       <div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
         <Button
-          text={t("auth:signup")}
+          text={t("signup:signup")}
           loading={isLoading}
           onButtonPressed={signupErrorCheck}
           size="lg"
@@ -486,19 +486,19 @@ export default function SignUp() {
   const step4 = (
     <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
       <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {t("auth:step4-message")}
+        {t("signup:step4-message")}
       </p>
       <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
-        <div>{t("auth:step4-description1")}</div>
-        <div className="mt-3">{t("auth:step4-description2")}</div>
+        <div>{t("signup:step4-description1")}</div>
+        <div className="mt-3">{t("signup:step4-description2")}</div>
       </div>
       <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
         <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
-        {t("auth:step4-description3")}
+        {t("signup:step4-description3")}
       </div>
       <div className="flex flex-row items-center justify-center w-3/4 md:w-full md:p-2 max-h-28 max-w-max mx-auto mt-6 py-1 md:mt-4 text-lg text-center md:text-left">
         <Button
-          text={t("auth:step4-download")}
+          text={t("signup:step4-download")}
           onButtonPressed={async () => {
             await issueBackupKey({
               email,
@@ -507,7 +507,9 @@ export default function SignUp() {
               setBackupKeyError,
               setBackupKeyIssued,
             });
-            router.push("auth:/dashboard/");
+            const userWorkspaces = await getWorkspaces();
+            let userWorkspace = userWorkspaces[0]._id;
+            router.push("/home/" + userWorkspace);
           }}
           size="lg"
         />

frontend/pages/signupinvite.js

@@ -92,7 +92,7 @@ export default function SignupInvite() {
         },
         async () => {
           client.createVerifier(async (err, result) => {
-            const response = await completeAccountInformationSignupInvite({
+            let response = await completeAccountInformationSignupInvite({
               email,
               firstName,
               lastName,
@@ -291,7 +291,7 @@ export default function SignupInvite() {
           <div className="py-2"></div>
         )}
       </div>
-      <div className="flex flex-col items-center justify-center w-full md:px-4 md:py-5 mt-2 px-2 py-3  max-h-24 max-w-md mx-auto text-lg">
+      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
         <Button
           text="Sign Up"
           onButtonPressed={() => {