Merge pull request #2940 from Infisical/misc/updated-openssh-installation-for-fips

misc: updated openssh installation for fips

.github/workflows/check-fe-ts-and-lint.yml

@@ -18,18 +18,18 @@ jobs:
     steps:
       - name: ☁️ Checkout source
         uses: actions/checkout@v3
-      - name: 🔧 Setup Node 16
+      - name: 🔧 Setup Node 20
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "20"
           cache: "npm"
           cache-dependency-path: frontend/package-lock.json
       - name: 📦 Install dependencies
         run: npm install
         working-directory: frontend
       - name: 🏗️ Run Type check
-        run: npm run type:check 
+        run: npm run type:check
         working-directory: frontend
       - name: 🏗️ Run Link check
-        run: npm run lint:fix 
+        run: npm run lint:fix
         working-directory: frontend

Dockerfile.fips.standalone-infisical

@@ -8,7 +8,7 @@ FROM node:20-slim AS base
 FROM base AS frontend-dependencies
 WORKDIR /app
 
-COPY frontend/package.json frontend/package-lock.json frontend/next.config.js ./
+COPY frontend/package.json frontend/package-lock.json  ./
 
 # Install dependencies
 RUN npm ci --only-production --ignore-scripts
@@ -23,17 +23,16 @@ COPY --from=frontend-dependencies /app/node_modules ./node_modules
 COPY /frontend .
 
 ENV NODE_ENV production
-ENV NEXT_PUBLIC_ENV production
 ARG POSTHOG_HOST
-ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
+ENV VITE_POSTHOG_HOST $POSTHOG_HOST
 ARG POSTHOG_API_KEY
-ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+ENV VITE_POSTHOG_API_KEY $POSTHOG_API_KEY
 ARG INTERCOM_ID
-ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
+ENV VITE_INTERCOM_ID $INTERCOM_ID
 ARG INFISICAL_PLATFORM_VERSION
-ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
+ENV VITE_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
 ARG CAPTCHA_SITE_KEY
-ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY 
+ENV VITE_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY 
 
 # Build
 RUN npm run build
@@ -44,20 +43,10 @@ WORKDIR /app
 
 RUN groupadd -r -g 1001 nodejs && useradd -r -u 1001 -g nodejs non-root-user
 
-RUN mkdir -p /app/.next/cache/images && chown non-root-user:nodejs /app/.next/cache/images
-VOLUME /app/.next/cache/images
-
-COPY --chown=non-root-user:nodejs --chmod=555 frontend/scripts ./scripts
-COPY --from=frontend-builder /app/public ./public
-RUN chown non-root-user:nodejs ./public/data
-
-COPY --from=frontend-builder --chown=non-root-user:nodejs /app/.next/standalone ./
-COPY --from=frontend-builder --chown=non-root-user:nodejs /app/.next/static ./.next/static
+COPY --from=frontend-builder --chown=non-root-user:nodejs /app/dist ./
 
 USER non-root-user
 
-ENV NEXT_TELEMETRY_DISABLED 1
-
 ##
 ## BACKEND
 ##
@@ -137,7 +126,7 @@ RUN apt-get update && apt-get install -y \
     freetds-dev \
     freetds-bin \
     tdsodbc \
-    openssh \
+    openssh-client \
     && rm -rf /var/lib/apt/lists/*
 
 # Configure ODBC in production
@@ -160,14 +149,11 @@ RUN chmod u+rx /usr/sbin/update-ca-certificates
 
 ## set pre baked keys
 ARG POSTHOG_API_KEY
-ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
-    BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+ENV POSTHOG_API_KEY=$POSTHOG_API_KEY
 ARG INTERCOM_ID=intercom-id
-ENV NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID \
-    BAKED_NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID
+ENV INTERCOM_ID=$INTERCOM_ID
 ARG CAPTCHA_SITE_KEY
-ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY \
-    BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
+ENV CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
 
 WORKDIR / 
 
@@ -192,4 +178,4 @@ EXPOSE 443
 
 USER non-root-user
 
-CMD ["./standalone-entrypoint.sh"]
+CMD ["./standalone-entrypoint.sh"]

Dockerfile.standalone-infisical

@@ -12,7 +12,7 @@ RUN apk add --no-cache libc6-compat
 
 WORKDIR /app
 
-COPY frontend/package.json frontend/package-lock.json frontend/next.config.js ./
+COPY frontend/package.json frontend/package-lock.json  ./
 
 # Install dependencies
 RUN npm ci --only-production --ignore-scripts
@@ -27,17 +27,16 @@ COPY --from=frontend-dependencies /app/node_modules ./node_modules
 COPY /frontend .
 
 ENV NODE_ENV production
-ENV NEXT_PUBLIC_ENV production
 ARG POSTHOG_HOST
-ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
+ENV VITE_POSTHOG_HOST $POSTHOG_HOST
 ARG POSTHOG_API_KEY
-ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+ENV VITE_POSTHOG_API_KEY $POSTHOG_API_KEY
 ARG INTERCOM_ID
-ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
+ENV VITE_INTERCOM_ID $INTERCOM_ID
 ARG INFISICAL_PLATFORM_VERSION
-ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
+ENV VITE_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
 ARG CAPTCHA_SITE_KEY
-ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY 
+ENV VITE_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY 
 
 # Build
 RUN npm run build
@@ -49,20 +48,10 @@ WORKDIR /app
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 non-root-user
 
-RUN mkdir -p /app/.next/cache/images && chown non-root-user:nodejs /app/.next/cache/images
-VOLUME /app/.next/cache/images
-
-COPY --chown=non-root-user:nodejs --chmod=555 frontend/scripts ./scripts
-COPY --from=frontend-builder /app/public ./public
-RUN chown non-root-user:nodejs ./public/data
-
-COPY --from=frontend-builder --chown=non-root-user:nodejs /app/.next/standalone ./
-COPY --from=frontend-builder --chown=non-root-user:nodejs /app/.next/static ./.next/static
+COPY --from=frontend-builder --chown=non-root-user:nodejs /app/dist ./
 
 USER non-root-user
 
-ENV NEXT_TELEMETRY_DISABLED 1
-
 ##
 ## BACKEND
 ##
@@ -159,14 +148,11 @@ RUN chmod u+rx /usr/sbin/update-ca-certificates
 
 ## set pre baked keys
 ARG POSTHOG_API_KEY
-ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
-  BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+ENV POSTHOG_API_KEY=$POSTHOG_API_KEY
 ARG INTERCOM_ID=intercom-id
-ENV NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID \
-  BAKED_NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID
+ENV INTERCOM_ID=$INTERCOM_ID
 ARG CAPTCHA_SITE_KEY
-ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY \
-  BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
+ENV CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
 
 
 COPY --from=backend-runner /app /backend
@@ -189,4 +175,4 @@ EXPOSE 443
 
 USER non-root-user
 
-CMD ["./standalone-entrypoint.sh"]
+CMD ["./standalone-entrypoint.sh"]

backend/package-lock.json

@@ -26,6 +26,7 @@
         "@fastify/rate-limit": "^9.0.0",
         "@fastify/request-context": "^5.1.0",
         "@fastify/session": "^10.7.0",
+        "@fastify/static": "^7.0.4",
         "@fastify/swagger": "^8.14.0",
         "@fastify/swagger-ui": "^2.1.0",
         "@google-cloud/kms": "^4.5.0",
@@ -5406,6 +5407,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-1.1.0.tgz",
       "integrity": "sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=14"
       }
@@ -5545,6 +5547,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@fastify/send/-/send-2.1.0.tgz",
       "integrity": "sha512-yNYiY6sDkexoJR0D8IDy3aRP3+L4wdqCpvx5WP+VtEU58sn7USmKynBzDQex5X42Zzvw2gNzzYgP90UfWShLFA==",
+      "license": "MIT",
       "dependencies": {
         "@lukeed/ms": "^2.0.1",
         "escape-html": "~1.0.3",
@@ -5563,16 +5566,85 @@
       }
     },
     "node_modules/@fastify/static": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/@fastify/static/-/static-6.12.0.tgz",
-      "integrity": "sha512-KK1B84E6QD/FcQWxDI2aiUCwHxMJBI1KeCUzm1BwYpPY1b742+jeKruGHP2uOluuM6OkBPI8CIANrXcCRtC2oQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@fastify/static/-/static-7.0.4.tgz",
+      "integrity": "sha512-p2uKtaf8BMOZWLs6wu+Ihg7bWNBdjNgCwDza4MJtTqg+5ovKmcbgbR9Xs5/smZ1YISfzKOCNYmZV8LaCj+eJ1Q==",
+      "license": "MIT",
       "dependencies": {
         "@fastify/accept-negotiator": "^1.0.0",
         "@fastify/send": "^2.0.0",
         "content-disposition": "^0.5.3",
         "fastify-plugin": "^4.0.0",
-        "glob": "^8.0.1",
-        "p-limit": "^3.1.0"
+        "fastq": "^1.17.0",
+        "glob": "^10.3.4"
+      }
+    },
+    "node_modules/@fastify/static/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@fastify/static/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@fastify/static/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/@fastify/static/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@fastify/static/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/@fastify/swagger": {
@@ -5599,6 +5671,20 @@
         "yaml": "^2.2.2"
       }
     },
+    "node_modules/@fastify/swagger-ui/node_modules/@fastify/static": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@fastify/static/-/static-6.12.0.tgz",
+      "integrity": "sha512-KK1B84E6QD/FcQWxDI2aiUCwHxMJBI1KeCUzm1BwYpPY1b742+jeKruGHP2uOluuM6OkBPI8CIANrXcCRtC2oQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/accept-negotiator": "^1.0.0",
+        "@fastify/send": "^2.0.0",
+        "content-disposition": "^0.5.3",
+        "fastify-plugin": "^4.0.0",
+        "glob": "^8.0.1",
+        "p-limit": "^3.1.0"
+      }
+    },
     "node_modules/@google-cloud/kms": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@google-cloud/kms/-/kms-4.5.0.tgz",
@@ -6062,9 +6148,10 @@
       "integrity": "sha512-O89xFDLW2gBoZWNXuXpBSM32/KealKCTb3JGtJdtUQc7RjAk8XzrRgyz02cPAwGKwKPxy0ivuC7UP9bmN87egQ=="
     },
     "node_modules/@lukeed/ms": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@lukeed/ms/-/ms-2.0.1.tgz",
-      "integrity": "sha512-Xs/4RZltsAL7pkvaNStUQt7netTkyxrS0K+RILcVr3TRMS/ToOg4I6uNfhB9SlGsnWBym4U+EaXq0f0cEMNkHA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@lukeed/ms/-/ms-2.0.2.tgz",
+      "integrity": "sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -13879,9 +13966,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
@@ -13903,7 +13990,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -13918,6 +14005,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express-session": {
@@ -17388,15 +17479,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -18383,9 +18475,9 @@
       "license": "ISC"
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
     "node_modules/path-type": {

backend/package.json

@@ -134,6 +134,7 @@
     "@fastify/rate-limit": "^9.0.0",
     "@fastify/request-context": "^5.1.0",
     "@fastify/session": "^10.7.0",
+    "@fastify/static": "^7.0.4",
     "@fastify/swagger": "^8.14.0",
     "@fastify/swagger-ui": "^2.1.0",
     "@google-cloud/kms": "^4.5.0",

backend/src/ee/services/access-approval-request/access-approval-request-service.ts

@@ -213,7 +213,7 @@ export const accessApprovalRequestServiceFactory = ({
       );
 
       const requesterFullName = `${requestedByUser.firstName} ${requestedByUser.lastName}`;
-      const approvalUrl = `${cfg.SITE_URL}/project/${project.id}/approval`;
+      const approvalUrl = `${cfg.SITE_URL}/secret-manager/${project.id}/approval`;
 
       await triggerSlackNotification({
         projectId: project.id,

backend/src/ee/services/secret-approval-request/secret-approval-request-fns.ts

@@ -36,7 +36,7 @@ export const sendApprovalEmailsFn = async ({
         firstName: reviewerUser.firstName,
         projectName: project.name,
         organizationName: project.organization.name,
-        approvalUrl: `${cfg.SITE_URL}/project/${project.id}/approval?requestId=${secretApprovalRequest.id}`
+        approvalUrl: `${cfg.SITE_URL}/secret-manager/${project.id}/approval?requestId=${secretApprovalRequest.id}`
       },
       template: SmtpTemplates.SecretApprovalRequestNeedsReview
     });

backend/src/ee/services/secret-approval-request/secret-approval-request-service.ts

@@ -852,7 +852,7 @@ export const secretApprovalRequestServiceFactory = ({
           bypassReason,
           secretPath: policy.secretPath,
           environment: env.name,
-          approvalUrl: `${cfg.SITE_URL}/project/${project.id}/approval`
+          approvalUrl: `${cfg.SITE_URL}/secret-manager/${project.id}/approval`
         },
         template: SmtpTemplates.AccessSecretRequestBypassed
       });

backend/src/lib/config/env.ts

@@ -157,6 +157,8 @@ const envSchema = z
     INFISICAL_CLOUD: zodStrBool.default("false"),
     MAINTENANCE_MODE: zodStrBool.default("false"),
     CAPTCHA_SECRET: zpStr(z.string().optional()),
+    CAPTCHA_SITE_KEY: zpStr(z.string().optional()),
+    INTERCOM_ID: zpStr(z.string().optional()),
 
     // TELEMETRY
     OTEL_TELEMETRY_COLLECTION_ENABLED: zodStrBool.default("false"),

backend/src/server/app.ts

@@ -27,10 +27,10 @@ import { globalRateLimiterCfg } from "./config/rateLimiter";
 import { addErrorsToResponseSchemas } from "./plugins/add-errors-to-response-schemas";
 import { apiMetrics } from "./plugins/api-metrics";
 import { fastifyErrHandler } from "./plugins/error-handler";
-import { registerExternalNextjs } from "./plugins/external-nextjs";
 import { serializerCompiler, validatorCompiler, ZodTypeProvider } from "./plugins/fastify-zod";
 import { fastifyIp } from "./plugins/ip";
 import { maintenanceMode } from "./plugins/maintenanceMode";
+import { registerServeUI } from "./plugins/serve-ui";
 import { fastifySwagger } from "./plugins/swagger";
 import { registerRoutes } from "./routes";
 
@@ -120,13 +120,10 @@ export const main = async ({ db, hsmModule, auditLogDb, smtp, logger, queue, key
 
     await server.register(registerRoutes, { smtp, queue, db, auditLogDb, keyStore, hsmModule });
 
-    if (appCfg.isProductionMode) {
-      await server.register(registerExternalNextjs, {
-        standaloneMode: appCfg.STANDALONE_MODE || IS_PACKAGED,
-        dir: path.join(__dirname, IS_PACKAGED ? "../../../" : "../../"),
-        port: appCfg.PORT
-      });
-    }
+    await server.register(registerServeUI, {
+      standaloneMode: appCfg.STANDALONE_MODE || IS_PACKAGED,
+      dir: path.join(__dirname, IS_PACKAGED ? "../../../" : "../../")
+    });
 
     await server.ready();
     server.swagger();

backend/src/server/plugins/external-nextjs.ts

@@ -1,76 +0,0 @@
-// this plugins allows to run infisical in standalone mode
-// standalone mode = infisical backend and nextjs frontend in one server
-// this way users don't need to deploy two things
-import path from "node:path";
-
-import { IS_PACKAGED } from "@app/lib/config/env";
-
-// to enabled this u need to set standalone mode to true
-export const registerExternalNextjs = async (
-  server: FastifyZodProvider,
-  {
-    standaloneMode,
-    dir,
-    port
-  }: {
-    standaloneMode?: boolean;
-    dir: string;
-    port: number;
-  }
-) => {
-  if (standaloneMode) {
-    const frontendName = IS_PACKAGED ? "frontend" : "frontend-build";
-    const nextJsBuildPath = path.join(dir, frontendName);
-
-    const { default: conf } = (await import(
-      path.join(dir, `${frontendName}/.next/required-server-files.json`),
-      // @ts-expect-error type
-      {
-        assert: { type: "json" }
-      }
-    )) as { default: { config: string } };
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let NextServer: any;
-
-    if (!IS_PACKAGED) {
-      /* eslint-disable */
-      const { default: nextServer } = (
-        await import(path.join(dir, `${frontendName}/node_modules/next/dist/server/next-server.js`))
-      ).default;
-
-      NextServer = nextServer;
-    } else {
-      /* eslint-disable */
-      const nextServer = await import(path.join(dir, `${frontendName}/node_modules/next/dist/server/next-server.js`));
-
-      NextServer = nextServer.default;
-    }
-
-    const nextApp = new NextServer({
-      dev: false,
-      dir: nextJsBuildPath,
-      port,
-      conf: conf.config,
-      hostname: "local",
-      customServer: false
-    });
-
-    server.route({
-      method: ["GET", "PUT", "PATCH", "POST", "DELETE"],
-      url: "/*",
-      schema: {
-        hide: true
-      },
-      handler: (req, res) =>
-        nextApp
-          .getRequestHandler()(req.raw, res.raw)
-          .then(() => {
-            res.hijack();
-          })
-    });
-    server.addHook("onClose", () => nextApp.close());
-    await nextApp.prepare();
-    /* eslint-enable */
-  }
-};

backend/src/server/plugins/serve-ui.ts

@@ -0,0 +1,54 @@
+import path from "node:path";
+
+import staticServe from "@fastify/static";
+
+import { getConfig, IS_PACKAGED } from "@app/lib/config/env";
+
+// to enabled this u need to set standalone mode to true
+export const registerServeUI = async (
+  server: FastifyZodProvider,
+  {
+    standaloneMode,
+    dir
+  }: {
+    standaloneMode?: boolean;
+    dir: string;
+  }
+) => {
+  // use this only for frontend runtime static non-sensitive configuration in standalone mode
+  // that app needs before loading like posthog dsn key
+  // for most of the other usecase use server config
+  server.route({
+    method: "GET",
+    url: "/runtime-ui-env.js",
+    handler: (_req, res) => {
+      const appCfg = getConfig();
+      void res.type("application/javascript");
+      const config = {
+        CAPTCHA_SITE_KEY: appCfg.CAPTCHA_SITE_KEY,
+        POSTHOG_API_KEY: appCfg.POSTHOG_PROJECT_API_KEY,
+        INTERCOM_ID: appCfg.INTERCOM_ID,
+        TELEMETRY_CAPTURING_ENABLED: appCfg.TELEMETRY_ENABLED
+      };
+      const js = `window.__INFISICAL_RUNTIME_ENV__ = Object.freeze(${JSON.stringify(config)});`;
+      void res.send(js);
+    }
+  });
+
+  if (standaloneMode) {
+    const frontendName = IS_PACKAGED ? "frontend" : "frontend-build";
+    const frontendPath = path.join(dir, frontendName);
+    await server.register(staticServe, {
+      root: frontendPath,
+      wildcard: false
+    });
+
+    server.get("/*", (request, reply) => {
+      if (request.url.startsWith("/api")) {
+        reply.callNotFound();
+        return;
+      }
+      void reply.sendFile("index.html");
+    });
+  }
+};

backend/src/server/routes/v1/auth-router.ts

@@ -63,7 +63,8 @@ export const registerAuthRoutes = async (server: FastifyZodProvider) => {
     schema: {
       response: {
         200: z.object({
-          token: z.string()
+          token: z.string(),
+          organizationId: z.string().optional()
         })
       }
     },
@@ -115,7 +116,7 @@ export const registerAuthRoutes = async (server: FastifyZodProvider) => {
         { expiresIn: appCfg.JWT_AUTH_LIFETIME }
       );
 
-      return { token };
+      return { token, organizationId: decodedToken.organizationId };
     }
   });
 };

backend/src/server/routes/v1/slack-router.ts

@@ -331,12 +331,8 @@ export const registerSlackRouter = async (server: FastifyZodProvider) => {
         failureAsync: async () => {
           return res.redirect(appCfg.SITE_URL as string);
         },
-        successAsync: async (installation) => {
-          const metadata = JSON.parse(installation.metadata || "") as {
-            orgId: string;
-          };
-
-          return res.redirect(`${appCfg.SITE_URL}/org/${metadata.orgId}/settings?selectedTab=workflow-integrations`);
+        successAsync: async () => {
+          return res.redirect(`${appCfg.SITE_URL}/organization/settings?selectedTab=workflow-integrations`);
         }
       });
     }

backend/src/services/integration-auth/integration-sync-secret.ts

@@ -305,10 +305,16 @@ const syncSecretsAzureAppConfig = async ({
     value: string;
   }
 
-  const getCompleteAzureAppConfigValues = async (url: string) => {
+  if (!integration.app || !integration.app.endsWith(".azconfig.io"))
+    throw new BadRequestError({
+      message: "Invalid Azure App Configuration URL provided."
+    });
+
+  const getCompleteAzureAppConfigValues = async (baseURL: string, url: string) => {
     let result: AzureAppConfigKeyValue[] = [];
     while (url) {
       const res = await request.get(url, {
+        baseURL,
         headers: {
           Authorization: `Bearer ${accessToken}`
         },
@@ -319,7 +325,7 @@ const syncSecretsAzureAppConfig = async ({
       });
 
       result = result.concat(res.data.items);
-      url = res.data.nextLink;
+      url = res.data?.["@nextLink"];
     }
 
     return result;
@@ -327,11 +333,13 @@ const syncSecretsAzureAppConfig = async ({
 
   const metadata = IntegrationMetadataSchema.parse(integration.metadata);
 
-  const azureAppConfigValuesUrl = `${integration.app}/kv?api-version=2023-11-01&key=${metadata.secretPrefix}*${
-    metadata.azureLabel ? `&label=${metadata.azureLabel}` : ""
+  const azureAppConfigValuesUrl = `/kv?api-version=2023-11-01&key=${metadata.secretPrefix}*${
+    metadata.azureLabel ? `&label=${metadata.azureLabel}` : "&label=%00"
   }`;
 
-  const azureAppConfigSecrets = (await getCompleteAzureAppConfigValues(azureAppConfigValuesUrl)).reduce(
+  const azureAppConfigSecrets = (
+    await getCompleteAzureAppConfigValues(integration.app, azureAppConfigValuesUrl)
+  ).reduce(
     (accum, entry) => {
       accum[entry.key] = entry.value;
 

backend/src/services/slack/slack-fns.ts

@@ -51,7 +51,7 @@ const buildSlackPayload = (notification: TSlackNotification) => {
 *Environment*: ${payload.environment}
 *Secret path*: ${payload.secretPath || "/"}
 
-View the complete details <${appCfg.SITE_URL}/project/${payload.projectId}/approval?requestId=${
+View the complete details <${appCfg.SITE_URL}/secret-manager/${payload.projectId}/approval?requestId=${
         payload.requestId
       }|here>.`;
 

cli/go.mod

@@ -23,8 +23,8 @@ require (
 	github.com/spf13/cobra v1.6.1
 	github.com/spf13/viper v1.8.1
 	github.com/stretchr/testify v1.9.0
-	golang.org/x/crypto v0.25.0
-	golang.org/x/term v0.22.0
+	golang.org/x/crypto v0.31.0
+	golang.org/x/term v0.27.0
 	gopkg.in/yaml.v2 v2.4.0
 )
 
@@ -93,9 +93,9 @@ require (
 	go.opentelemetry.io/otel/trace v1.24.0 // indirect
 	golang.org/x/net v0.27.0 // indirect
 	golang.org/x/oauth2 v0.21.0 // indirect
-	golang.org/x/sync v0.7.0 // indirect
-	golang.org/x/sys v0.22.0 // indirect
-	golang.org/x/text v0.16.0 // indirect
+	golang.org/x/sync v0.10.0 // indirect
+	golang.org/x/sys v0.28.0 // indirect
+	golang.org/x/text v0.21.0 // indirect
 	golang.org/x/time v0.5.0 // indirect
 	google.golang.org/api v0.188.0 // indirect
 	google.golang.org/genproto/googleapis/api v0.0.0-20240701130421-f6361c86f094 // indirect

cli/go.sum

@@ -453,8 +453,8 @@ golang.org/x/crypto v0.0.0-20211215165025-cf75a172585e/go.mod h1:P+XmwS30IXTQdn5
 golang.org/x/crypto v0.0.0-20220622213112-05595931fe9d/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
 golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
-golang.org/x/crypto v0.25.0 h1:ypSNr+bnYL2YhwoMt2zPxHFmbAN1KZs/njMG3hxUp30=
-golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/M=
+golang.org/x/crypto v0.31.0 h1:ihbySMvVjLAeSH1IbfcRTkD/iNscyz8rGzjF/E5hV6U=
+golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190510132918-efd6b22b2522/go.mod h1:ZjyILWgesfNpC6sMxTJOJm9Kp84zZh5NQWvqDGG3Qr8=
@@ -564,8 +564,8 @@ golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.7.0 h1:YsImfSBoP9QPYL0xyKJPq0gcaJdG3rInoqxTWbfQu9M=
-golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.10.0 h1:3NQrjDixjgGwUOCaF8w2+VYHv0Ve/vGYSbdkTa98gmQ=
+golang.org/x/sync v0.10.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20180823144017-11551d06cbcc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20181026203630-95b1ffbd15a5/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -620,16 +620,16 @@ golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/sys v0.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
-golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
 golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
 golang.org/x/term v0.17.0/go.mod h1:lLRBjIVuehSbZlaOtGMbcMncT+aqLLLmKrsjNrUguwk=
 golang.org/x/term v0.20.0/go.mod h1:8UkIAJTvZgivsXaD6/pH6U9ecQzZ45awqEOzuCvwpFY=
-golang.org/x/term v0.22.0 h1:BbsgPEJULsl2fV/AT3v15Mjva5yXKQDyKf+TbDz7QJk=
-golang.org/x/term v0.22.0/go.mod h1:F3qCibpT5AMpCRfhfT53vVJwhLtIVHhB9XDjfFvnMI4=
+golang.org/x/term v0.27.0 h1:WP60Sv1nlK1T6SupCHbXzSaN0b9wUmsPoRS9b61A23Q=
+golang.org/x/term v0.27.0/go.mod h1:iMsnZpn0cago0GOrHO2+Y7u7JPn5AylBrcoWkElMTSM=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -643,8 +643,8 @@ golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
 golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-golang.org/x/text v0.16.0 h1:a94ExnEXNtEwYLGJSIUxnWoxoRz/ZcCsV63ROupILh4=
-golang.org/x/text v0.16.0/go.mod h1:GhwF1Be+LQoKShO3cGOHzqOgRrGaYc9AvblQOmPVHnI=
+golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=

cli/packages/cmd/ssh.go

@@ -6,9 +6,11 @@ package cmd
 import (
 	"context"
 	"fmt"
+	"net"
 	"os"
 	"path/filepath"
 	"strings"
+	"time"
 
 	"github.com/Infisical/infisical-merge/packages/api"
 	"github.com/Infisical/infisical-merge/packages/config"
@@ -16,6 +18,8 @@ import (
 	infisicalSdk "github.com/infisical/go-sdk"
 	infisicalSdkUtil "github.com/infisical/go-sdk/packages/util"
 	"github.com/spf13/cobra"
+	"golang.org/x/crypto/ssh"
+	"golang.org/x/crypto/ssh/agent"
 )
 
 var sshCmd = &cobra.Command{
@@ -52,8 +56,8 @@ var algoToFileName = map[infisicalSdkUtil.CertKeyAlgorithm]string{
 }
 
 func isValidKeyAlgorithm(algo infisicalSdkUtil.CertKeyAlgorithm) bool {
-    _, exists := algoToFileName[algo]
-    return exists
+	_, exists := algoToFileName[algo]
+	return exists
 }
 
 func isValidCertType(certType infisicalSdkUtil.SshCertType) bool {
@@ -81,6 +85,71 @@ func writeToFile(filePath string, content string, perm os.FileMode) error {
 	return nil
 }
 
+func addCredentialsToAgent(privateKeyContent, certContent string) error {
+	// Parse the private key
+	privateKey, err := ssh.ParseRawPrivateKey([]byte(privateKeyContent))
+	if err != nil {
+		return fmt.Errorf("failed to parse private key: %w", err)
+	}
+
+	// Parse the certificate
+	pubKey, _, _, _, err := ssh.ParseAuthorizedKey([]byte(certContent))
+	if err != nil {
+		return fmt.Errorf("failed to parse certificate: %w", err)
+	}
+
+	cert, ok := pubKey.(*ssh.Certificate)
+	if !ok {
+		return fmt.Errorf("parsed key is not a certificate")
+	}
+	// Calculate LifetimeSecs based on certificate's valid-to time
+	validUntil := time.Unix(int64(cert.ValidBefore), 0)
+	now := time.Now()
+
+	// Handle ValidBefore as either a timestamp or an enumeration
+	// SSH certificates use ValidBefore as a timestamp unless set to 0 or ~0
+	if cert.ValidBefore == ssh.CertTimeInfinity {
+		// If certificate never expires, set default lifetime to 1 year (can adjust as needed)
+		validUntil = now.Add(365 * 24 * time.Hour)
+	}
+
+	// Calculate the duration until expiration
+	lifetime := validUntil.Sub(now)
+	if lifetime <= 0 {
+		return fmt.Errorf("certificate is already expired")
+	}
+
+	// Convert duration to seconds
+	lifetimeSecs := uint32(lifetime.Seconds())
+
+	// Connect to the SSH agent
+	socket := os.Getenv("SSH_AUTH_SOCK")
+	if socket == "" {
+		return fmt.Errorf("SSH_AUTH_SOCK not set")
+	}
+
+	conn, err := net.Dial("unix", socket)
+	if err != nil {
+		return fmt.Errorf("failed to connect to SSH agent: %w", err)
+	}
+	defer conn.Close()
+
+	agentClient := agent.NewClient(conn)
+
+	// Add the key with certificate to the agent
+	err = agentClient.Add(agent.AddedKey{
+		PrivateKey:   privateKey,
+		Certificate:  cert,
+		Comment:      "Added via Infisical CLI",
+		LifetimeSecs: lifetimeSecs,
+	})
+	if err != nil {
+		return fmt.Errorf("failed to add key to agent: %w", err)
+	}
+
+	return nil
+}
+
 func issueCredentials(cmd *cobra.Command, args []string) {
 
 	token, err := util.GetInfisicalToken(cmd)
@@ -166,6 +235,15 @@ func issueCredentials(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Unable to parse flag")
 	}
 
+	addToAgent, err := cmd.Flags().GetBool("addToAgent")
+	if err != nil {
+		util.HandleError(err, "Unable to parse addToAgent flag")
+	}
+
+	if outFilePath == "" && addToAgent == false {
+		util.PrintErrorMessageAndExit("You must provide either --outFilePath or --addToAgent flag to use this command")
+	}
+
 	var (
 		outputDir      string
 		privateKeyPath string
@@ -173,14 +251,7 @@ func issueCredentials(cmd *cobra.Command, args []string) {
 		signedKeyPath  string
 	)
 
-	if outFilePath == "" {
-		// Use current working directory
-		cwd, err := os.Getwd()
-		if err != nil {
-			util.HandleError(err, "Failed to get current working directory")
-		}
-		outputDir = cwd
-	} else {
+	if outFilePath != "" {
 		// Expand ~ to home directory if present
 		if strings.HasPrefix(outFilePath, "~") {
 			homeDir, err := os.UserHomeDir()
@@ -264,34 +335,47 @@ func issueCredentials(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Failed to issue SSH credentials")
 	}
 
-	// If signedKeyPath wasn't set in the directory scenario, set it now
-	if signedKeyPath == "" {
-		fileName := algoToFileName[infisicalSdkUtil.CertKeyAlgorithm(keyAlgorithm)]
-		signedKeyPath = filepath.Join(outputDir, fileName+"-cert.pub")
+	if outFilePath != "" {
+		// If signedKeyPath wasn't set in the directory scenario, set it now
+		if signedKeyPath == "" {
+			fileName := algoToFileName[infisicalSdkUtil.CertKeyAlgorithm(keyAlgorithm)]
+			signedKeyPath = filepath.Join(outputDir, fileName+"-cert.pub")
+		}
+
+		if privateKeyPath == "" {
+			privateKeyPath = filepath.Join(outputDir, algoToFileName[infisicalSdkUtil.CertKeyAlgorithm(keyAlgorithm)])
+		}
+		err = writeToFile(privateKeyPath, creds.PrivateKey, 0600)
+		if err != nil {
+			util.HandleError(err, "Failed to write Private Key to file")
+		}
+
+		if publicKeyPath == "" {
+			publicKeyPath = privateKeyPath + ".pub"
+		}
+		err = writeToFile(publicKeyPath, creds.PublicKey, 0644)
+		if err != nil {
+			util.HandleError(err, "Failed to write Public Key to file")
+		}
+
+		err = writeToFile(signedKeyPath, creds.SignedKey, 0644)
+		if err != nil {
+			util.HandleError(err, "Failed to write Signed Key to file")
+		}
+
+		fmt.Println("Successfully wrote SSH certificate to:", signedKeyPath)
 	}
 
-	if privateKeyPath == "" {
-		privateKeyPath = filepath.Join(outputDir, algoToFileName[infisicalSdkUtil.CertKeyAlgorithm(keyAlgorithm)])
+	// Add SSH credentials to the SSH agent if needed
+	if addToAgent {
+		// Call the helper function to handle add-to-agent flow
+		err := addCredentialsToAgent(creds.PrivateKey, creds.SignedKey)
+		if err != nil {
+			util.HandleError(err, "Failed to add keys to SSH agent")
+		} else {
+			fmt.Println("The SSH key and certificate have been successfully added to your ssh-agent.")
+		}
 	}
-	err = writeToFile(privateKeyPath, creds.PrivateKey, 0600)
-	if err != nil {
-		util.HandleError(err, "Failed to write Private Key to file")
-	}
-
-	if publicKeyPath == "" {
-		publicKeyPath = privateKeyPath + ".pub"
-	}
-	err = writeToFile(publicKeyPath, creds.PublicKey, 0644)
-	if err != nil {
-		util.HandleError(err, "Failed to write Public Key to file")
-	}
-
-	err = writeToFile(signedKeyPath, creds.SignedKey, 0644)
-	if err != nil {
-		util.HandleError(err, "Failed to write Signed Key to file")
-	}
-
-	fmt.Println("Successfully wrote SSH certificate to:", signedKeyPath)
 }
 
 func signKey(cmd *cobra.Command, args []string) {
@@ -519,6 +603,7 @@ func init() {
 	sshIssueCredentialsCmd.Flags().String("ttl", "", "The ttl to issue SSH credentials for")
 	sshIssueCredentialsCmd.Flags().String("keyId", "", "The keyId to issue SSH credentials for")
 	sshIssueCredentialsCmd.Flags().String("outFilePath", "", "The path to write the SSH credentials to such as ~/.ssh, ./some_folder, ./some_folder/id_rsa-cert.pub. If not provided, the credentials will be saved to the current working directory")
+	sshIssueCredentialsCmd.Flags().Bool("addToAgent", false, "Whether to add issued SSH credentials to the SSH agent")
 	sshCmd.AddCommand(sshIssueCredentialsCmd)
 	rootCmd.AddCommand(sshCmd)
 }

company/handbook/onboarding.mdx

@@ -19,7 +19,7 @@ Every new joiner has an onboarding buddy who should ideally be in the the same t
 1. Join the weekly all-hands meeting. It typically happens on Monday's at 8:30am PT.
 2. Ship something together on day one – even if tiny! It feels great to hit the ground running, with a development environment all ready to go.
 3. Check out the [Areas of Responsibility (AoR) Table](https://docs.google.com/spreadsheets/d/1RnXlGFg83Sgu0dh7ycuydsSobmFfI3A0XkGw7vrVxEI/edit?usp=sharing). This is helpful to know who you can ask about particular areas of Infisical. Feel free to add yourself to the areas you'd be most interesting to dive into.
-4. Read the [Infisical Strategy Doc](https://docs.google.com/document/d/1RaJd3RoS2QpWLFHlgfHaXnHqCCwRt6mCGZkbJ75J_D0/edit?usp=sharing).
+4. Read the [Infisical Strategy Doc](https://docs.google.com/document/d/1uV9IaahYwbZ5OuzDTFdQMSa1P0mpMOnetGB-xqf4G40).
 5. Update your LinkedIn profile with one of [Infisical's official banners](https://drive.google.com/drive/u/0/folders/1oSNWjbpRl9oNYwxM_98IqzKs9fAskrb2) (if you want to). You can also coordinate your social posts in the #marketing Slack channel, so that we can boost it from Infisical's official social media accounts.
 6. Over the first few weeks, feel free to schedule 1:1s with folks on the team to get to know them a bit better.
 7. Change your Slack username in the users channel to `[NAME] (Infisical)`.

docker-compose.dev.yml

@@ -144,9 +144,6 @@ services:
       - ./frontend/src:/app/src/ # mounted whole src to avoid missing reload on new files
       - ./frontend/public:/app/public
     env_file: .env
-    environment:
-      - NEXT_PUBLIC_ENV=development
-      - INFISICAL_TELEMETRY_ENABLED=false
 
   pgadmin:
     image: dpage/pgadmin4

docs/cli/commands/ssh.mdx

@@ -0,0 +1,116 @@
+---
+title: "infisical ssh"
+description: "Generate SSH credentials with the CLI"
+---
+
+## Description
+
+[Infisical SSH](/documentation/platform/ssh) lets you issue SSH credentials to clients to provide short-lived, secure SSH access to infrastructure.
+
+This command enables you to obtain SSH credentials used to access a remote host; we recommend using the `issue-credentials` sub-command to generate dynamic SSH credentials for each SSH session.
+
+### Sub-commands
+
+<Accordion title="infisical ssh issue-credentials">
+    This command is used to issue SSH credentials (SSH certificate, public key, and private key) against a certificate template.
+    
+    We recommend using the `--addToAgent` flag to automatically load issued SSH credentials to the SSH agent.
+    
+    ```bash
+    $ infisical ssh issue-credentials --certificateTemplateId=<certificate-template-id> --principals=<principals> --addToAgent
+    ```
+
+    ### Flags
+    <Accordion title="--certificateTemplateId">
+        The ID of the SSH certificate template to issue SSH credentials for.
+    </Accordion>
+    <Accordion title="--principals">
+        A comma-separated list of principals (i.e. usernames like `ec2-user` or hostnames) to issue SSH credentials for.
+    </Accordion>
+    <Accordion title="--addToAgent">
+        Whether to add issued SSH credentials to the SSH agent.
+        
+        Default value: `false`
+        
+        Note that either the `--outFilePath` or `--addToAgent` flag must be set for the sub-command to execute successfully.
+    </Accordion>
+    <Accordion title="--outFilePath">
+        The path to write the SSH credentials to such as `~/.ssh`, `./some_folder`, `./some_folder/id_rsa-cert.pub`. If not provided, the credentials will be saved to the current working directory where the command is run.
+        
+        Note that either the `--outFilePath` or `--addToAgent` flag must be set for the sub-command to execute successfully.
+    </Accordion>
+    <Accordion title="--keyAlgorithm">
+        The key algorithm to issue SSH credentials for.
+        
+        Default value: `RSA_2048`
+        
+        Available options: `RSA_2048`, `RSA_4096`, `EC_prime256v1`, `EC_secp384r1`.
+    </Accordion>
+    <Accordion title="--certType">
+        The certificate type to issue SSH credentials for.
+        
+        Default value: `user`
+        
+        Available options: `user` or `host`
+    </Accordion>
+    <Accordion title="--ttl">
+        The time-to-live (TTL) for the issued SSH certificate (e.g. `2 days`, `1d`, `2h`, `1y`).
+        
+        Defaults to the Default TTL value set in the certificate template.
+    </Accordion>
+    <Accordion title="--keyId">
+        A custom Key ID to issue SSH credentials for.
+        
+        Defaults to the autogenerated Key ID by Infisical.
+    </Accordion>
+    <Accordion title="--token">
+        An authenticated token to use to issue SSH credentials.
+    </Accordion>
+</Accordion>
+
+<Accordion title="infisical ssh sign-key">
+    This command is used to sign an existing SSH public key against a certificate template; the command outputs the corresponding signed SSH certificate.
+    
+    ```bash
+    $ infisical ssh sign-key --certificateTemplateId=<certificate-template-id> --publicKey=<public-key> --principals=<principals> --outFilePath=<out-file-path>
+    ```
+    <Accordion title="--certificateTemplateId">
+        The ID of the SSH certificate template to issue the SSH certificate for.
+    </Accordion>
+    <Accordion title="--publicKey">
+        The public key to sign.
+
+        Note that either the `--publicKey` or `--publicKeyFilePath` flag must be set for the sub-command to execute successfully.
+    </Accordion>
+    <Accordion title="--publicKeyFilePath">
+        The path to the public key file to sign.
+
+        Note that either the `--publicKey` or `--publicKeyFilePath` flag must be set for the sub-command to execute successfully.
+    </Accordion>
+    <Accordion title="--principals">
+        A comma-separated list of principals (i.e. usernames like `ec2-user` or hostnames) to issue SSH credentials for.
+    </Accordion>
+    <Accordion title="--outFilePath">
+        The path to write the SSH certificate to such as `~/.ssh/id_rsa-cert.pub`; the specified file must have the `.pub` extension. If not provided, the credentials will be saved to the directory of the specified `--publicKeyFilePath` or the current working directory where the command is run.
+    </Accordion>
+    <Accordion title="--certType">
+        The certificate type to issue SSH credentials for.
+        
+        Default value: `user`
+        
+        Available options: `user` or `host`
+    </Accordion>
+    <Accordion title="--ttl">
+        The time-to-live (TTL) for the issued SSH certificate (e.g. `2 days`, `1d`, `2h`, `1y`).
+        
+        Defaults to the Default TTL value set in the certificate template.
+    </Accordion>
+    <Accordion title="--keyId">
+        A custom Key ID to issue SSH credentials for.
+        
+        Defaults to the autogenerated Key ID by Infisical.
+    </Accordion>
+    <Accordion title="--token">
+        An authenticated token to use to issue SSH credentials.
+    </Accordion>
+</Accordion>

docs/documentation/platform/ssh.mdx

@@ -6,7 +6,7 @@ description: "Learn how to generate SSH credentials to provide secure and centra
 
 ## Concept
 
-Infisical can be used to issue SSH certificates to clients to provide short-lived, secure SSH access to infrastructure;
+Infisical can be used to issue SSH credentials to clients to provide short-lived, secure SSH access to infrastructure;
 this improves on many limitations of traditional SSH key-based authentication via mitigation of private key compromise, static key management,
 unauthorized access, and SSH key sprawl.
 
@@ -159,7 +159,19 @@ as part of the SSH operation.
 
 ## Guide to Using Infisical SSH to Access a Host
 
-We show how to obtain a SSH certificate (and optionally a new SSH key pair) for a client to access a host via CLI:
+We show how to obtain a SSH certificate and use it for a client to access a host via CLI:
+
+<Note>
+  The subsequent guide assumes the following prerequisites:
+
+- SSH Agent is running: The `ssh-agent` must be actively running on the host machine.
+- OpenSSH is installed: The system should have OpenSSH installed; this includes
+  both the `ssh` client and `ssh-agent`.
+- `SSH_AUTH_SOCK` environment variable
+  is set; the `SSH_AUTH_SOCK` variable should point to the UNIX socket that
+  `ssh-agent` uses for communication.
+
+</Note>
 
 <Steps>
   <Step title="Authenticate with Infisical">
@@ -169,74 +181,30 @@ infisical login
 ```
 
   </Step>
-  <Step title="Obtain a SSH certificate (and optionally new key-pair)">
-    Depending on the use-case, a client may either request a SSH certificate along with a new SSH key pair or obtain a SSH certificate for an existing SSH key pair to access a host.
-
-    <AccordionGroup>
-      <Accordion title="Using New Key Pair (Recommended)">
-        If you wish to obtain a new SSH key pair in conjunction with the SSH certificate, then you can use the `infisical ssh issue-credentials` command.
-
-        ```bash
-        infisical ssh issue-credentials --certificateTemplateId=<certificate-template-id> --principals=<username>
-        ```
-
-        The following flags may be relevant:
-
-        - `certificateTemplateId`: The ID of the certificate template to use for issuing the SSH certificate.
-        - `principals`: The comma-delimited username(s) or hostname(s) to include in the SSH certificate.
-        - `outFilePath` (optional): The path to the file to write the SSH certificate to.
-
-        <Note>
-          If `outFilePath` is not specified, the SSH certificate will be written to the current working directory where the command is run.
-        </Note>
-
-      </Accordion>
-      <Accordion title="Using Existing Key Pair">
-        If you have an existing SSH key pair, then you can use the `infisical ssh sign-key` command with either
-        the `--publicKey` flag or the `--publicKeyFilePath` flag to obtain a SSH certificate corresponding to
-        the existing credential.
-
-        ```bash
-        infisical ssh sign-key --publicKeyFilePath=<public-key-file-path> --certificateTemplateId=<certificate-template-id> --principals=<username>
-        ```
-
-        The following flags may be relevant:
-
-        - `publicKey`: The public key to sign.
-        - `publicKeyFilePath`: The path to the public key file to sign.
-        - `certificateTemplateId`: The ID of the certificate template to use for issuing the SSH certificate.
-        - `principals`: The comma-delimited username(s) or hostname(s) to include in the SSH certificate.
-        - `outFilePath` (optional): The path to the file to write the SSH certificate to.
-
-        <Note>
-          If `outFilePath` is not specified but `publicKeyFilePath` is then the SSH certificate will be written to the directory of the public key file; if the public key file is called `id_rsa.pub`, then the file containing the SSH certificate will be called `id_rsa-cert.pub`.
-
-          Otherwise, if `outFilePath` is not specified, the SSH certificate will be written to the current working directory where the command is run.
-        </Note>
-
-      </Accordion>
-    </AccordionGroup>
-
-  </Step>
-  <Step title="SSH into the host">
-    Once you have obtained the SSH certificate, you can use it to SSH into the desired host.
-
+  <Step title="Obtain a SSH certificate and load it into the SSH agent">
+    Run the `infisical ssh issue-credentials` command, specifying the `--addToAgent` flag to automatically load the SSH certificate into the SSH agent.
     ```bash
-    ssh -i /path/to/private_key.pem \
-    -o CertificateFile=/path/to/ssh-cert.pub \
-    username@hostname
+    infisical ssh issue-credentials --certificateTemplateId=<certificate-template-id> --principals=<username> --addToAgent
     ```
 
-    <Note>
-      We recommend setting up aliases so you can more easily SSH into the desired host.
+    Here's some guidance on each flag:
 
-      For example, you may set up an SSH alias using the SSH client configuration file (usually `~/.ssh/config`), defining a host alias including the file path to the issued SSH credential(s).
-    </Note>
+    - `certificateTemplateId`: The ID of the certificate template to use for issuing the SSH certificate.
+    - `principals`: The comma-delimited username(s) or hostname(s) to include in the SSH certificate.
+    
+    For fuller documentation on commands and flags supported by the Infisical CLI for SSH, refer to the docs [here](/cli/commands/ssh).
+ 
+  </Step>
+  <Step title="SSH into the host">
+    Finally, SSH into the desired host; the SSH operation will be performed using the SSH certificate loaded into the SSH agent.
 
+    ```bash
+    ssh username@hostname
+    ```
   </Step>
 </Steps>
 
 <Note>
   Note that the above workflow can be executed via API or other client methods
   such as SDK.
-</Note>
+</Note>

docs/integrations/cloud/azure-app-configuration.mdx

@@ -29,6 +29,36 @@ description: "How to sync secrets from Infisical to Azure App Configuration"
         ![integrations](../../images/integrations/azure-app-configuration/create-integration-form.png)
 
         Press create integration to start syncing secrets to Azure App Configuration.
+
+        <Note>
+          The Azure App Configuration integration requires the following permissions to be set on the user / service principal
+          for Infisical to sync secrets to Azure App Configuration: `Read Key-Value`, `Write Key-Value`, `Delete Key-Value`.
+
+          Any role with these permissions would work such as the **App Configuration Data Owner** role. Alternatively, you can use the
+          **App Configuration Data Reader** role for read-only access or **App Configuration Data Contributor** role for read/write access.
+        </Note>
+
+      </Step>
+      <Step title="Additional Configuration">
+
+        #### Azure references
+          When adding secrets in Infisical that reference Azure Key Vault secrets, Infisical will automatically sets the content type to `application/vnd.microsoft.appconfig.keyvaultref+json;charset=utf-8` in Azure App Configuration. 
+          The following reference formats are automatically detected when added on Infisical's side:
+          - `{ "uri": "https://my-key-vault.vault.azure.net/secrets/my-secret" }`
+          - `https://my-key-vault.vault.azure.net/secrets/my-secret`
+
+        #### Azure Labels 
+          You can sync secrets from Infisical to Azure with custom labels by enabling the `Use Labels` option during setup:
+
+          **When enabled**: Secrets will be pushed to Azure with your specified label
+
+          **When disabled**: Secrets will be pushed with an empty (null) label
+
+        <Info>
+          If you have set the initial sync to `import` have behavior, the label selection affects which secrets are imported from Azure:
+          - With `Use Labels` disabled: Only secrets with empty labels are imported on initial sync
+          - With `Use Labels` enabled: Only secrets matching your specified label are imported on initial sync
+        </Info>
       </Step>
     </Steps>
 

docs/integrations/cloud/azure-key-vault.mdx

@@ -17,6 +17,10 @@ description: "How to sync secrets from Infisical to Azure Key Vault"
         ![integrations](../../images/integrations.png)
 
         Press on the Azure Key Vault tile and grant Infisical access to Azure Key Vault.
+        You can optionally authenticate against a specific tenant by providing the Azure tenant or directory ID.
+
+        ![integrations](/images/integrations/azure-key-vault/integrations-azure-key-vault-tenant-select.png)
+
       </Step>
       <Step title="Start integration">
         Obtain the Vault URI of your key vault in the Overview tab.

docs/mint.json

@@ -320,6 +320,7 @@
             "cli/commands/run",
             "cli/commands/secrets",
             "cli/commands/dynamic-secrets",
+            "cli/commands/ssh",
             "cli/commands/export",
             "cli/commands/token",
             "cli/commands/service-token",
@@ -341,14 +342,6 @@
         "cli/faq"
       ]
     },
-    {
-      "group": "App Connections",
-      "pages": [
-        "integrations/app-connections/overview",
-        "integrations/app-connections/aws",
-        "integrations/app-connections/github"
-      ]
-    },
     {
       "group": "Infrastructure Integrations",
       "pages": [
@@ -765,33 +758,6 @@
             "api-reference/endpoints/identity-specific-privilege/list"
           ]
         },
-        {
-          "group": "App Connections",
-          "pages": [
-            "api-reference/endpoints/app-connections/list",
-            "api-reference/endpoints/app-connections/options",
-            { "group":  "AWS",
-              "pages": [
-                "api-reference/endpoints/app-connections/aws/list",
-                "api-reference/endpoints/app-connections/aws/get-by-id",
-                "api-reference/endpoints/app-connections/aws/get-by-name",
-                "api-reference/endpoints/app-connections/aws/create",
-                "api-reference/endpoints/app-connections/aws/update",
-                "api-reference/endpoints/app-connections/aws/delete"
-              ]
-            },
-            { "group":  "GitHub",
-              "pages": [
-                "api-reference/endpoints/app-connections/github/list",
-                "api-reference/endpoints/app-connections/github/get-by-id",
-                "api-reference/endpoints/app-connections/github/get-by-name",
-                "api-reference/endpoints/app-connections/github/create",
-                "api-reference/endpoints/app-connections/github/update",
-                "api-reference/endpoints/app-connections/github/delete"
-              ]
-            }
-          ]
-        },
         {
           "group": "Integrations",
           "pages": [
@@ -974,9 +940,6 @@
       ]
     }
   ],
-  "integrations": {
-    "intercom": "hsg644ru"
-  },
   "analytics": {
     "koala": {
       "publicApiKey": "pk_b50d7184e0e39ddd5cdb43cf6abeadd9b97d"

frontend/.dockerignore

@@ -1,3 +1,2 @@
 node_modules
-**/.next
-.next
+dist

frontend/.eslintrc.js

@@ -1,108 +0,0 @@
-module.exports = {
-  overrides: [
-    {
-      files: ["next.config.js"]
-    }
-  ],
-  root: true,
-  env: {
-    browser: true,
-    es2021: true,
-    es6: true
-  },
-  extends: [
-    "airbnb",
-    "airbnb-typescript",
-    "airbnb/hooks",
-    "plugin:react/recommended",
-    "prettier",
-    "plugin:storybook/recommended"
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: "./tsconfig.json",
-    ecmaFeatures: {
-      jsx: true
-    },
-    tsconfigRootDir: __dirname
-  },
-  plugins: ["react", "prettier", "simple-import-sort", "import"],
-  rules: {
-    "@typescript-eslint/no-empty-function": "off",
-    quotes: ["error", "double", { avoidEscape: true }],
-    "comma-dangle": ["error", "only-multiline"],
-    "react/react-in-jsx-scope": "off",
-    "import/prefer-default-export": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "@typescript-eslint/ban-ts-comment": "warn",
-    "react/jsx-props-no-spreading": "off", // switched off for component building
-    // TODO: This rule will be switched ON after complete revamp of frontend
-    "@typescript-eslint/no-explicit-any": "off",
-    "jsx-a11y/control-has-associated-label": "off",
-    "no-console": "off",
-    "arrow-body-style": "off",
-    "no-underscore-dangle": [
-      "error",
-      {
-        allow: ["_id"]
-      }
-    ],
-    "jsx-a11y/anchor-is-valid": "off",
-    // all those <a> tags must be converted to label or a p component
-    //
-    "react/require-default-props": "off",
-    "react/jsx-filename-extension": [
-      1,
-      {
-        extensions: [".tsx", ".ts"]
-      }
-    ],
-    // TODO: turn this rule ON after migration. everything should use arrow functions
-    "react/function-component-definition": [
-      0,
-      {
-        namedComponents: "arrow-function"
-      }
-    ],
-    "react/no-unknown-property": [
-      "error",
-      {
-        ignore: ["jsx"]
-      }
-    ],
-    "@typescript-eslint/no-non-null-assertion": "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"],
-          ["^@app"],
-          // Internal packages.
-          ["^~(/.*|$)"],
-          // Relative imports
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$", "^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Style imports.
-          ["^.+\\.?(css|scss)$"]
-        ]
-      }
-    ]
-  },
-  ignorePatterns: ["next.config.js", "cypress/**/*.js", "cypress.config.js"],
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project: ["./tsconfig.json"]
-      }
-    }
-  }
-};

frontend/.gitignore

@@ -1,36 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-.env
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.vercel
-.env.infisical
+node_modules
+dist
+dist-ssr
+*.local
 
-.vscode
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.prettierrc

@@ -3,5 +3,8 @@
   "printWidth": 100,
   "trailingComma": "none",
   "tabWidth": 2,
-  "semi": true
+  "semi": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/index.css",
+  "tailwindFunctions": ["clsx", "twMerge"]
 }

frontend/.storybook/main.js

@@ -1,28 +0,0 @@
-const path = require("path");
-module.exports = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-dark-mode",
-    {
-      name: "@storybook/addon-styling",
-      options: {
-        postCss: {
-          implementation: require("postcss")
-        }
-      }
-    }
-  ],
-  framework: {
-    name: "@storybook/nextjs",
-    options: {}
-  },
-  core: {
-    disableTelemetry: true
-  },
-  docs: {
-    autodocs: "tag"
-  }
-};

frontend/.storybook/preview.js

@@ -1,29 +0,0 @@
-import { themes } from "@storybook/theming";
-import "react-day-picker/dist/style.css";
-import "../src/styles/globals.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  backgrounds: {
-    default: "dark",
-    values: [
-      {
-        name: "dark",
-        value: "rgb(14, 16, 20)"
-      },
-      {
-        name: "paper",
-        value: "rgb(30, 31, 34)"
-      }
-    ]
-  },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
-    }
-  },
-  darkMode: {
-    dark: { ...themes.dark, appContentBg: "rgb(14,16,20)", appBg: "rgb(14,16,20)" }
-  }
-};

frontend/Dockerfile

@@ -1,84 +0,0 @@
-ARG POSTHOG_HOST=https://app.posthog.com
-ARG POSTHOG_API_KEY=posthog-api-key
-ARG INTERCOM_ID=intercom-id
-ARG NEXT_INFISICAL_PLATFORM_VERSION=next-infisical-platform-version
-ARG CAPTCHA_SITE_KEY=captcha-site-key
-
-FROM node:16-alpine AS deps
-# Install dependencies only when needed. Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-# RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-# Copy over dependency files 
-COPY package.json package-lock.json next.config.js ./
-
-# Install dependencies
-RUN npm ci --only-production --ignore-scripts
-
-# Rebuild the source code only when needed
-FROM node:16-alpine AS builder
-WORKDIR /app
-
-# Copy dependencies
-COPY --from=deps /app/node_modules ./node_modules
-# Copy all files 
-COPY . .
-
-ENV NODE_ENV production
-ENV NEXT_PUBLIC_ENV production
-ARG POSTHOG_HOST
-ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
-ARG POSTHOG_API_KEY
-ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
-ARG INTERCOM_ID
-ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
-ARG CAPTCHA_SITE_KEY
-ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY
-
-# Build
-RUN npm run build
-
-
-# Production image
-FROM node:16-alpine AS runner
-WORKDIR /app
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-RUN mkdir -p /app/.next/cache/images && chown nextjs:nodejs /app/.next/cache/images
-VOLUME /app/.next/cache/images
-
-ARG POSTHOG_API_KEY
-ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
-    BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
-ARG INTERCOM_ID
-ENV NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID \
-    BAKED_NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID
-ARG SAML_ORG_SLUG
-ENV NEXT_PUBLIC_SAML_ORG_SLUG=$SAML_ORG_SLUG \
-    BAKED_NEXT_PUBLIC_SAML_ORG_SLUG=$SAML_ORG_SLUG
-ARG NEXT_INFISICAL_PLATFORM_VERSION
-ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION=$NEXT_INFISICAL_PLATFORM_VERSION 
-ARG CAPTCHA_SITE_KEY
-ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY \
-    BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
-COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
-COPY --from=builder /app/public ./public
-RUN chown nextjs:nodejs ./public/data
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs --chmod=777 /app/.next/static ./.next/static
-RUN chmod -R 777 /app/.next/server
-
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT 3000
-ENV NEXT_TELEMETRY_DISABLED 1
-
-HEALTHCHECK --interval=10s --timeout=3s --start-period=10s \  
-    CMD node scripts/healthcheck.js
-
-
-CMD ["/app/scripts/start.sh"]

frontend/Dockerfile.dev

@@ -1,5 +1,5 @@
 # Base layer
-FROM node:16-alpine
+FROM node:20-alpine
 
 # Set the working directory 
 WORKDIR /app
@@ -11,9 +11,6 @@ COPY package-lock.json ./
 # Install 
 RUN npm install --ignore-scripts
 
-# Copy over next.js config 
-COPY next.config.js ./next.config.js
-
 # Copy all files 
 COPY . .
 

frontend/README.md

@@ -1,22 +1,50 @@
-This is the client repository for Infisical.
+# React + TypeScript + Vite
 
-## Before you get started with development locally
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Please ensure you have Docker and Docker Compose installed for your OS.
+Currently, two official plugins are available:
 
-### Steps to start server
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-- `CD` into the repo
-- run command `docker-compose -f docker-compose.dev.yml up --build --force-recreate`
-- Visit localhost:8080 and the website should be live
+## Expanding the ESLint configuration
 
-### Steps to shutdown this Docker compose
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-- `CD` into this repo
-- run command `docker-compose -f docker-compose.dev.yml down`
+- Configure the top-level `parserOptions` property like this:
 
-### Notes
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
 
-Any changes made to local files in the `/components`, `/pages`, `/styles` will be hot reloaded. If would like like to watch for other files or folders live, please add them to the docker volume.
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
 
-You will also need to ensure that a .env.local file exists with all required environment variables
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

frontend/cypress.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  e2e: {
-    baseUrl: 'http://localhost:8080',
-    viewportWidth: 1480,
-    viewportHeight: 920,
-  },
-};

frontend/cypress/e2e/org-overview.cy.js

@@ -1,47 +0,0 @@
-/// <reference types="cypress" />
-
-describe('organization Overview', () => {
-  beforeEach(() => {
-    cy.login(`test@localhost.local`, `testInfisical1`)
-  })
-
-  const projectName = "projectY"
-
-  it('can`t create projects with empty names', () => {
-    cy.get('.button').click()
-    cy.get('input[placeholder="Type your project name"]').type('abc').clear()
-    cy.intercept('*').as('anyRequest');
-    cy.get('@anyRequest').should('not.exist');
-  })
-
-  it('can delete a newly-created project', () => {
-    // Create a project
-    cy.get('.button').click()
-    cy.get('input[placeholder="Type your project name"]').type(`${projectName}`)
-    cy.contains('button', 'Create Project').click()
-    cy.url().should('include', '/project')
-
-    // Delete a project
-    cy.get(`[href^="/project/"][href$="/settings"] > a > .group`).click()
-    cy.contains('button', `Delete ${projectName}`).click()
-    cy.contains('button', 'Delete Project').should('have.attr', 'disabled')
-    cy.get('input[placeholder="Type to delete..."]').type('confirm')
-    cy.contains('button', 'Delete Project').should('not.have.attr', 'disabled')
-    cy.url().then((currentUrl) => {
-      let projectId = currentUrl.split("/")[4]
-      cy.intercept('DELETE', `/api/v1/workspace/${projectId}`).as('deleteProject');
-      cy.contains('button', 'Delete Project').click();
-      cy.get('@deleteProject').should('have.property', 'response').and('have.property', 'statusCode', 200);
-    })
-  })  
-
-  it('can display no projects', () => {
-    cy.intercept('/api/v1/workspace', {
-      body: {
-        "workspaces": []
-      },
-    })
-    cy.get('.border-mineshaft-700 > :nth-child(2)').should('have.text', 'You are not part of any projects in this organization yet. When you are, they will appear here.')
-  })
-
-})

frontend/cypress/e2e/org-settings.cy.js

@@ -1,24 +0,0 @@
-/// <reference types="cypress" />
-
-describe('Organization Settings', () => {
-  let orgId; 
-
-  beforeEach(() => {
-    cy.login(`test@localhost.local`, `testInfisical1`)
-    cy.url().then((currentUrl) => {
-      orgId = currentUrl.split("/")[4]
-      cy.visit(`org/${orgId}/settings`)
-    })
-  })
-
-  it('can rename org', () => {
-    cy.get('input[placeholder="Acme Corp"]').clear().type('ABC')
-
-    cy.intercept('PATCH', `/api/v1/organization/${orgId}/name`).as('renameOrg');
-    cy.get('form.p-4 > .button').click()
-    cy.get('@renameOrg').should('have.property', 'response').and('have.property', 'statusCode', 200);
-    
-    cy.get('.pl-3').should("have.text", "ABC ")
-  })
-
-})

frontend/cypress/e2e/project-secret-operations.cy.js

@@ -1,84 +0,0 @@
-/// <reference types="cypress" />
-
-describe('Project Overview', () => {
-  const projectName = "projectY"
-  let projectId;
-  let isFirstTest = true;
-
-  before(() => {
-    cy.login(`test@localhost.local`, `testInfisical1`)
-
-    // Create a project
-    cy.get('.button').click()
-    cy.get('input[placeholder="Type your project name"]').type(`${projectName}`)
-    cy.contains('button', 'Create Project').click()
-    cy.url().should('include', '/project').then((currentUrl) => {
-      projectId = currentUrl.split("/")[4]
-    })
-  })
-
-  beforeEach(() => {
-    if (isFirstTest) {
-      isFirstTest = false;
-      return;  // Skip the rest of the beforeEach for the first test
-    }
-    cy.login(`test@localhost.local`, `testInfisical1`)
-    cy.visit(`/project/${projectId}/secrets/overview`)
-  })
-
-  it('can create secrets', () => {
-    cy.contains('button', 'Go to Development').click()
-    cy.contains('button', 'Add a new secret').click()
-    cy.get('input[placeholder="Type your secret name"]').type('SECRET_A')
-    cy.contains('button', 'Create Secret').click()
-    cy.get('.w-80 > .inline-flex > .input').should('have.value', 'SECRET_A')
-    cy.get(':nth-child(6) > .button > .w-min').should('have.text', '1 Commit')
-  })
-
-  it('can update secrets', () => {
-    cy.get(':nth-child(2) > .flex > .button').click()
-    cy.get('.overflow-auto > .relative > .absolute').type('VALUE_A')
-    cy.get('.button.text-primary > .svg-inline--fa').click()
-    cy.get(':nth-child(6) > .button > .w-min').should('have.text', '2 Commits')
-  })
-
-  it('can`t create duplicate-name secrets', () => {
-    cy.get(':nth-child(2) > .flex > .button').click()
-    cy.contains('button', 'Add Secret').click()
-    cy.get('input[placeholder="Type your secret name"]').type('SECRET_A')
-    cy.intercept('POST', `/api/v3/secrets/SECRET_A`).as('createSecret');
-    cy.contains('button', 'Create Secret').click()
-    cy.get('@createSecret').should('have.property', 'response').and('have.property', 'statusCode', 400);
-  })
-
-  it('can add another secret', () => {
-    cy.get(':nth-child(2) > .flex > .button').click()
-    cy.contains('button', 'Add Secret').click()
-    cy.get('input[placeholder="Type your secret name"]').type('SECRET_B')
-    cy.contains('button', 'Create Secret').click()
-    cy.get(':nth-child(6) > .button > .w-min').should('have.text', '3 Commits')
-  })
-
-  it('can delete a secret', () => {
-    cy.get(':nth-child(2) > .flex > .button').click()
-    // cy.get(':nth-child(3) > .shadow-none').trigger('mouseover')
-    cy.get(':nth-child(3) > .shadow-none > .group > .h-10 > .border-red').click()
-    cy.contains('button', 'Delete Secret').should('have.attr', 'disabled')
-    cy.get('input[placeholder="Type to delete..."]').type('SECRET_B')
-    cy.intercept('DELETE', `/api/v3/secrets/SECRET_B`).as('deleteSecret');
-    cy.contains('button', 'Delete Secret').should('not.have.attr', 'disabled')
-    cy.contains('button', 'Delete Secret').click();
-    cy.get('@deleteSecret').should('have.property', 'response').and('have.property', 'statusCode', 200);
-  })
-
-  it('can add a comment', () => {
-    return;
-    cy.get(':nth-child(2) > .flex > .button').click()
-    // for some reason this hover does not want to work
-    cy.get('.overflow-auto').trigger('mouseover').then(() => {
-      cy.get('.shadow-none > .group > .pl-4 > .h-8 > button[aria-label="add-comment"]').should('be.visible').click()
-    });
-    
-  })
-
-})

frontend/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

frontend/cypress/support/commands.js

@@ -1,19 +0,0 @@
-
-Cypress.Commands.add('login', (username, password) => {
-    cy.visit('/login')
-    cy.get('input[placeholder="Enter your email..."]').type(username)
-    cy.get('input[placeholder="Enter your password..."]').type(password)
-    cy.contains('Continue with Email').click()
-    cy.url().should('include', '/overview')
-})
-
-// Cypress.Commands.add('login', (username, password) => {
-//     cy.session([username, password], () => {
-//         cy.visit('/login')
-//         cy.get('input[placeholder="Enter your email..."]').type(username)
-//         cy.get('input[placeholder="Enter your password..."]').type(password)
-//         cy.contains('Continue with Email').click()
-//         cy.url().should('include', '/overview')
-//         cy.wait(2000);
-//     })
-// })

frontend/cypress/support/e2e.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

frontend/eslint.config.js

@@ -0,0 +1,137 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import tseslint from "typescript-eslint";
+import { FlatCompat } from "@eslint/eslintrc";
+import stylisticPlugin from "@stylistic/eslint-plugin";
+import importPlugin from "eslint-plugin-import";
+import pluginRouter from "@tanstack/eslint-plugin-router";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname
+});
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      ...pluginRouter.configs["flat/recommended"],
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      ...compat.extends("airbnb"),
+      ...compat.extends("@kesills/airbnb-typescript"),
+      eslintPluginPrettier
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname
+      }
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "simple-import-sort": simpleImportSort,
+      import: importPlugin
+    },
+    settings: {
+      "import/resolver": {
+        typescript: {
+          project: ["./tsconfig.json"]
+        }
+      }
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": "off",
+      "@typescript-eslint/only-throw-error": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      quotes: ["error", "double", { avoidEscape: true }],
+      "comma-dangle": ["error", "only-multiline"],
+      "react/react-in-jsx-scope": "off",
+      "import/prefer-default-export": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/ban-ts-comment": "warn",
+      "react/jsx-props-no-spreading": "off", // switched off for component building
+      // TODO: This rule will be switched ON after complete revamp of frontend
+      "@typescript-eslint/no-explicit-any": "off",
+      "jsx-a11y/control-has-associated-label": "off",
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: true
+        }
+      ],
+      "no-console": "off",
+      "arrow-body-style": "off",
+      "no-underscore-dangle": [
+        "error",
+        {
+          allow: ["_id"]
+        }
+      ],
+      "jsx-a11y/anchor-is-valid": "off",
+      // all those <a> tags must be converted to label or a p component
+      //
+      "react/require-default-props": "off",
+      "react/jsx-filename-extension": [
+        1,
+        {
+          extensions: [".tsx", ".ts"]
+        }
+      ],
+      // TODO: turn this rule ON after migration. everything should use arrow functions
+      "react/function-component-definition": [
+        0,
+        {
+          namedComponents: "arrow-function"
+        }
+      ],
+      "react/no-unknown-property": [
+        "error",
+        {
+          ignore: ["jsx"]
+        }
+      ],
+      "@typescript-eslint/no-non-null-assertion": "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"],
+            ["^@app"],
+            // Internal packages.
+            ["^~(/.*|$)"],
+            // Relative imports
+            ["^\\.\\.(?!/?$)", "^\\.\\./?$", "^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+            // Style imports.
+            ["^.+\\.?(css|scss)$"]
+          ]
+        }
+      ],
+      "import/first": "error",
+      "import/newline-after-import": "error",
+      "import/no-duplicates": "error"
+    }
+  },
+  {
+    rules: Object.fromEntries(
+      Object.keys(stylisticPlugin.configs["all-flat"].rules ?? {}).map((key) => [key, "off"])
+    )
+  }
+);

frontend/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/infisical.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+    default-src 'self'; 
+    connect-src 'self' https://*.posthog.com http://127.0.0.1:* https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.38.2/dist/dotlottie-player.wasm; 
+    script-src 'self' https://*.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.38.2/dist/dotlottie-player.wasm; 
+    style-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; 
+    child-src https://api.stripe.com; 
+    frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/ https://hcaptcha.com https://*.hcaptcha.com; 
+    connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io 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://api.stripe.com https://api.pwnedpasswords.com http://127.0.0.1:* https://hcaptcha.com https://*.hcaptcha.com; 
+    img-src 'self' https://static.intercomassets.com https://js.intercomcdn.com https://downloads.intercomcdn.com https://*.stripe.com https://i.ytimg.com/ data:; 
+    media-src https://js.intercomcdn.com; 
+    font-src 'self' https://fonts.intercomcdn.com/  https://fonts.gstatic.com; 
+  "
+    />
+    <title>Infisical</title>
+    <script src="/runtime-ui-env.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <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.

frontend/next.config.js

@@ -1,98 +0,0 @@
-const path = require("path");
-
-const ContentSecurityPolicy = `
-	default-src 'self';
-  connect-src 'self' https://*.posthog.com http://127.0.0.1:*;
-	script-src 'self' https://*.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
-	style-src 'self' https://rsms.me 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com;
-	child-src https://api.stripe.com;
-	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/ https://hcaptcha.com https://*.hcaptcha.com;
-	connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io 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://api.stripe.com https://api.pwnedpasswords.com http://127.0.0.1:* https://hcaptcha.com https://*.hcaptcha.com;
-	img-src 'self' https://static.intercomassets.com https://js.intercomcdn.com https://downloads.intercomcdn.com https://*.stripe.com https://i.ytimg.com/ data:;
-	media-src https://js.intercomcdn.com;
-	font-src 'self' https://fonts.intercomcdn.com/ https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;  
-`;
-
-// 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()
-  }
-];
-/**
- * @type {import('next').NextConfig}
- **/
-module.exports = {
-  output: "standalone",
-  i18n: {
-    locales: ["en", "ko", "fr", "pt-BR", "pt-PT", "es"],
-    defaultLocale: "en"
-  },
-  async headers() {
-    return [
-      {
-        // Apply these headers to all routes in your application.
-        source: "/:path*",
-        headers: securityHeaders
-      }
-    ];
-  },
-  webpack: (config, { isServer, webpack }) => {
-    // config
-    config.module.rules.push({
-      test: /\.wasm$/,
-      loader: "base64-loader",
-      type: "javascript/auto"
-    });
-
-    config.module.noParse = /\.wasm$/;
-
-    config.module.rules.forEach((rule) => {
-      (rule.oneOf || []).forEach((oneOf) => {
-        if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
-          oneOf.exclude.push(/\.wasm$/);
-        }
-      });
-    });
-
-    if (!isServer) {
-      config.resolve.fallback.fs = false;
-    }
-
-    // Perform customizations to webpack config
-    config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /\/__tests__\// }));
-
-    // Important: return the modified config
-    return config;
-  }
-};

frontend/package.json

@@ -1,165 +1,134 @@
 {
+  "name": "frontend-v2",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "prepare": "cd .. && npm install",
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "start:docker": "next build && next start",
-    "lint": "eslint --ext js,ts,tsx ./src",
-    "lint:fix": "eslint --fix --ext js,ts,tsx ./src",
-    "type:check": "tsc --project tsconfig.json --noEmit",
-    "storybook": "storybook dev -p 6006 -s ./public",
-    "build-storybook": "storybook build"
-  },
-  "overrides": {
-    "@storybook/nextjs": {
-      "sharp": "npm:dry-uninstall"
-    }
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
+    "type:check": "tsc --noEmit --project ./tsconfig.app.json"
   },
   "dependencies": {
-    "@casl/ability": "^6.5.0",
-    "@casl/react": "^3.1.0",
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/modifiers": "^6.0.1",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@emotion/css": "^11.10.0",
-    "@emotion/server": "^11.10.0",
-    "@fontsource/inter": "^4.5.15",
-    "@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.2.0",
-    "@hcaptcha/react-hcaptcha": "^1.10.1",
-    "@headlessui/react": "^1.7.7",
-    "@hookform/resolvers": "^2.9.10",
-    "@octokit/rest": "^19.0.7",
-    "@peculiar/x509": "^1.11.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-popper": "^1.1.3",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@reduxjs/toolkit": "^1.8.3",
-    "@sindresorhus/slugify": "1.1.0",
-    "@stripe/react-stripe-js": "^1.16.3",
-    "@stripe/stripe-js": "^1.46.0",
-    "@tanstack/react-query": "^4.23.0",
-    "@types/argon2-browser": "^1.18.1",
+    "@casl/ability": "^6.7.2",
+    "@casl/react": "^4.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@fontsource/inter": "^5.1.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hcaptcha/react-hcaptcha": "^1.11.0",
+    "@headlessui/react": "^1.7.19",
+    "@hookform/resolvers": "^3.9.1",
+    "@lottiefiles/dotlottie-react": "^0.12.0",
+    "@octokit/rest": "^21.0.2",
+    "@peculiar/x509": "^1.12.3",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.3",
+    "@radix-ui/react-hover-card": "^1.1.3",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-popper": "^1.2.1",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.1.5",
+    "@sindresorhus/slugify": "^2.2.1",
+    "@tanstack/react-query": "^5.62.7",
+    "@tanstack/react-router": "^1.95.1",
+    "@tanstack/virtual-file-routes": "^1.87.6",
+    "@tanstack/zod-adapter": "^1.91.0",
+    "@types/nprogress": "^0.2.3",
     "@ucast/mongo2js": "^1.3.4",
-    "add": "^2.0.6",
     "argon2-browser": "^1.18.0",
-    "axios": "^0.28.0",
-    "axios-auth-refresh": "^3.3.6",
-    "base64-loader": "^1.0.0",
-    "classnames": "^2.3.1",
-    "cookies": "^0.9.1",
-    "cva": "npm:class-variance-authority@^0.4.0",
-    "date-fns": "^2.30.0",
+    "axios": "^1.7.9",
+    "classnames": "^2.5.1",
+    "cva": "npm:class-variance-authority@^0.7.1",
+    "date-fns": "^4.1.0",
     "file-saver": "^2.0.5",
-    "framer-motion": "^6.2.3",
-    "fs": "^0.0.2",
-    "gray-matter": "^4.0.3",
-    "http-proxy": "^1.18.1",
-    "i18next": "^22.4.15",
-    "i18next-browser-languagedetector": "^7.0.1",
-    "i18next-http-backend": "^2.2.0",
-    "infisical-node": "^1.0.37",
+    "framer-motion": "^11.14.1",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-http-backend": "^3.0.1",
     "jspdf": "^2.5.2",
     "jsrp": "^0.2.4",
-    "jwt-decode": "^3.1.2",
-    "lottie-react": "^2.4.0",
-    "markdown-it": "^13.0.1",
+    "jwt-decode": "^4.0.0",
     "ms": "^2.1.3",
-    "next": "^12.3.4",
     "nprogress": "^0.2.0",
-    "picomatch": "^2.3.1",
-    "posthog-js": "^1.105.6",
+    "picomatch": "^4.0.2",
+    "posthog-js": "^1.198.0",
     "qrcode": "^1.5.4",
-    "query-string": "^7.1.3",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.1",
+    "react": "^18.3.1",
     "react-code-input": "^3.10.1",
-    "react-day-picker": "^8.8.0",
-    "react-dom": "^17.0.2",
-    "react-grid-layout": "^1.3.4",
-    "react-hook-form": "^7.43.0",
-    "react-i18next": "^12.2.2",
-    "react-icons": "^5.3.0",
-    "react-mailchimp-subscribe": "^2.1.3",
-    "react-markdown": "^8.0.3",
-    "react-redux": "^8.0.2",
-    "react-select": "^5.8.1",
-    "react-table": "^7.8.0",
-    "react-toastify": "^9.1.3",
-    "sanitize-html": "^2.12.1",
-    "set-cookie-parser": "^2.5.1",
-    "sharp": "^0.33.2",
-    "styled-components": "^5.3.7",
-    "tailwind-merge": "^1.8.1",
+    "react-day-picker": "^9.4.3",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.54.0",
+    "react-i18next": "^15.2.0",
+    "react-icons": "^5.4.0",
+    "react-select": "^5.9.0",
+    "react-toastify": "^10.0.6",
+    "redaxios": "^0.5.1",
+    "tailwind-merge": "^2.5.5",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",
-    "uuid": "^8.3.2",
-    "uuidv4": "^6.2.13",
-    "yaml": "^2.2.2",
-    "yup": "^0.32.11",
-    "zod": "^3.22.3",
-    "zustand": "^4.5.0"
+    "yaml": "^2.6.1",
+    "zod": "^3.24.1",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/addon-styling": "^1.3.0",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/client-api": "^7.2.1",
-    "@storybook/nextjs": "^7.0.23",
-    "@storybook/react": "^7.0.23",
-    "@storybook/testing-library": "^0.2.0",
-    "@tailwindcss/typography": "^0.5.4",
-    "@types/file-saver": "^2.0.5",
-    "@types/jsrp": "^0.2.4",
-    "@types/node": "^18.11.9",
-    "@types/picomatch": "^2.3.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
+    "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
+    "@stylistic/eslint-plugin": "^2.12.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tanstack/eslint-plugin-router": "^1.87.6",
+    "@tanstack/router-devtools": "^1.87.9",
+    "@tanstack/router-plugin": "^1.95.1",
+    "@types/argon2-browser": "^1.18.4",
+    "@types/file-saver": "^2.0.7",
+    "@types/jsrp": "^0.2.6",
+    "@types/ms": "^0.7.34",
+    "@types/picomatch": "^3.0.1",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.0.26",
-    "@types/sanitize-html": "^2.9.0",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.7",
-    "cypress": "^13.3.2",
-    "eslint": "^8.32.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-helmet": "^6.1.11",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "^13.0.5",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.27.4",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
-    "postcss": "^8.4.39",
-    "prettier": "^2.8.3",
-    "prettier-plugin-tailwindcss": "^0.2.2",
-    "storybook": "^7.6.20",
-    "storybook-dark-mode": "^3.0.0",
-    "tailwindcss": "3.2",
-    "typescript": "^4.9.3"
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.12.0",
+    "postcss": "^8.4.49",
+    "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.16",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^5.4.11",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

frontend/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

frontend/public/data/frequentConstants.ts

@@ -1,94 +0,0 @@
-interface Mapping {
-  [key: string]: string;
-}
-
-const integrationSlugNameMapping: Mapping = {
-  "azure-key-vault": "Azure Key Vault",
-  "aws-parameter-store": "AWS Parameter Store",
-  "aws-secret-manager": "AWS Secrets Manager",
-  heroku: "Heroku",
-  vercel: "Vercel",
-  netlify: "Netlify",
-  github: "GitHub",
-  gitlab: "GitLab",
-  render: "Render",
-  "laravel-forge": "Laravel Forge",
-  railway: "Railway",
-  flyio: "Fly.io",
-  circleci: "CircleCI",
-  databricks: "Databricks",
-  travisci: "TravisCI",
-  supabase: "Supabase",
-  checkly: "Checkly",
-  qovery: "Qovery",
-  "terraform-cloud": "Terraform Cloud",
-  teamcity: "TeamCity",
-  "hashicorp-vault": "Vault",
-  "cloudflare-pages": "Cloudflare Pages",
-  "cloudflare-workers": "Cloudflare Workers",
-  codefresh: "Codefresh",
-  "digital-ocean-app-platform": "Digital Ocean App Platform",
-  bitbucket: "Bitbucket",
-  "cloud-66": "Cloud 66",
-  northflank: "Northflank",
-  windmill: "Windmill",
-  "gcp-secret-manager": "GCP Secret Manager",
-  "hasura-cloud": "Hasura Cloud",
-  rundeck: "Rundeck",
-  "azure-devops": "Azure DevOps",
-  "azure-app-configuration": "Azure App Configuration",
-  "octopus-deploy": "Octopus Deploy"
-};
-
-const envMapping: Mapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test"
-};
-
-const reverseEnvMapping: Mapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing"
-};
-
-const contextNetlifyMapping: Mapping = {
-  dev: "Local development",
-  "branch-deploy": "Branch deploys",
-  "deploy-preview": "Deploy Previews",
-  production: "Production"
-};
-
-const reverseContextNetlifyMapping: Mapping = {
-  "Local development": "dev",
-  "Branch deploys": "branch-deploy",
-  "Deploy Previews": "deploy-preview",
-  Production: "production"
-};
-
-const plansDev: Mapping = {
-  starter: "prod_Mb4ATFT5QAHoPM",
-  team: "prod_NEpD2WMXUS2eDn",
-  professional: "prod_Mb4CetZ2jE7jdl",
-  enterprise: "licence_key_required"
-};
-
-const plansProd: Mapping = {
-  starter: "prod_Mb8oR5XNwyFTul",
-  team: "prod_NEp7fAB3UJWK6A",
-  professional: "prod_Mb8pUIpA0OUi5N",
-  enterprise: "licence_key_required"
-};
-
-const plans = plansProd || plansDev;
-
-export {
-  contextNetlifyMapping,
-  envMapping,
-  integrationSlugNameMapping,
-  plans,
-  reverseContextNetlifyMapping,
-  reverseEnvMapping
-};

frontend/public/data/frequentInterfaces.ts

@@ -1,19 +0,0 @@
-export interface Tag {
-  id: string;
-  name: string;
-  slug: string;
-  user: string;
-  workspace: string;
-  createdAt: string;
-}
-
-export interface SecretDataProps {
-  pos: number;
-  key: string;
-  value: string | undefined;
-  valueOverride: string | undefined;
-  id: string;
-  idOverride?: string;
-  comment: string;
-  tags: Tag[];
-}

frontend/public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/scripts/initialize-standalone-build.sh

@@ -6,6 +6,8 @@ scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_INTERCOM_ID" "$
 
 scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY" "$NEXT_PUBLIC_CAPTCHA_SITE_KEY"
 
+scripts/set-frontend-config.sh
+
 if [ "$TELEMETRY_ENABLED" != "false" ]; then
     echo "Telemetry is enabled"
     scripts/set-standalone-build-telemetry.sh true

frontend/scripts/replace-standalone-build-variable.sh

@@ -10,7 +10,7 @@ fi
 
 echo "Replacing pre-baked value.."
 
-find public .next -type f -name "*.js" |
+find assets -type f -name "*.js" |
 while read file; do
     sed -i "s|$ORIGINAL|$REPLACEMENT|g" "$file"
 done

frontend/scripts/set-frontend-config.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+# Configuration output file
+CONFIG_FILE="runtime-config.js"
+
+# Replace content in the config file with SENTRY_DSN interpolation
+echo "window.__CONFIG__ = Object.freeze({ CAPTCHA_SITE_KEY: \"${CAPTCHA_SITE_KEY}\", CAPTCHA_SITE_KEY: \"${CAPTCHA_SITE_KEY}\", CAPTCHA_SITE_KEY: \"${CAPTCHA_SITE_KEY}\" })" > $CONFIG_FILE
+
+echo "Configuration file updated at $CONFIG_FILE"

frontend/src/components/AddTagPopoverContent/AddTagPopoverContent.tsx

@@ -1,92 +0,0 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button, Checkbox, PopoverContent } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-
-import { WsTag } from "../../hooks/api/tags/types";
-import { ProjectPermissionCan } from "../permissions";
-
-interface Props {
-  wsTags: WsTag[] | undefined;
-  secKey: string;
-  selectedTagIds: Record<string, boolean>;
-  handleSelectTag: (wsTag: WsTag) => void;
-  handleTagOnMouseEnter: (wsTag: WsTag) => void;
-  handleTagOnMouseLeave: () => void;
-  checkIfTagIsVisible: (wsTag: WsTag) => boolean;
-  handleOnCreateTagOpen: () => void;
-}
-
-const AddTagPopoverContent = ({
-  wsTags,
-  secKey,
-  selectedTagIds,
-  handleSelectTag,
-  handleTagOnMouseEnter,
-  handleTagOnMouseLeave,
-  checkIfTagIsVisible,
-  handleOnCreateTagOpen
-}: Props) => {
-  return (
-    <PopoverContent
-      side="left"
-      className="relative max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 p-2 text-bunker-200"
-      hideCloseBtn
-    >
-      <div className=" text-center text-sm font-medium text-bunker-200">
-        Add tags to {secKey || "this secret"}
-      </div>
-      <div className="absolute left-0 mt-2 w-full border-t border-mineshaft-600" />
-      <div className="flex flex-col space-y-1.5">
-        {wsTags?.map((wsTag: WsTag) => (
-          <div
-            key={`tag-${wsTag.id}`}
-            className="relative mt-4 flex h-[32px] items-center  justify-start rounded-md bg-none   p-2  hover:border hover:border-mineshaft-600  hover:bg-mineshaft-700 hover:text-bunker-200"
-            onClick={() => handleSelectTag(wsTag)}
-            onMouseEnter={() => handleTagOnMouseEnter(wsTag)}
-            onMouseLeave={() => handleTagOnMouseLeave()}
-            tabIndex={0}
-            role="button"
-            onKeyDown={() => {}}
-          >
-            {(checkIfTagIsVisible(wsTag) || selectedTagIds?.[wsTag.slug]) && (
-              <Checkbox
-                id="autoCapitalization"
-                isChecked={selectedTagIds?.[wsTag.slug]}
-                className="absolute top-[50%] left-[10px] translate-y-[-50%] "
-                checkIndicatorBg={`${
-                  !selectedTagIds?.[wsTag.slug] ? "text-transparent" : "text-mineshaft-800"
-                }`}
-              />
-            )}
-            <div className="ml-7 flex items-center gap-3">
-              <div
-                className="h-[10px] w-[10px] rounded-full"
-                style={{ background: wsTag?.color ? wsTag.color : "#bec2c8" }}
-              >
-                {" "}
-              </div>
-              <span>{wsTag.slug}</span>
-            </div>
-          </div>
-        ))}
-        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Tags}>
-          {(isAllowed) => (
-            <Button
-              onClick={() => handleOnCreateTagOpen()}
-              isDisabled={!isAllowed}
-              size="xs"
-              className="mt-2"
-              leftIcon={<FontAwesomeIcon icon={faPlus} className="ml-1 mr-2" />}
-            >
-              Add new tag
-            </Button>
-          )}
-        </ProjectPermissionCan>
-      </div>
-    </PopoverContent>
-  );
-};
-
-export default AddTagPopoverContent;

frontend/src/components/RouteGuard.tsx

@@ -1,72 +0,0 @@
-import { ReactNode, useEffect, useState } from "react";
-import { useRouter } from "next/router";
-
-import { publicPaths } from "@app/const";
-import checkAuth from "@app/pages/api/auth/CheckAuth";
-
-// #TODO: finish spinner only when the data loads fully
-// #TODO: Redirect somewhere if the page does not exist
-
-type Prop = {
-  children: ReactNode;
-};
-
-export default function RouteGuard({ children }: Prop): JSX.Element {
-  const router = useRouter();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [authorized, setAuthorized] = useState(false);
-
-  /**
-   * redirect to login page if accessing a private page and not logged in
-   */
-  async function authCheck(url: string) {
-    // 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
-    // ANS(akhilmhdh): Because inside the security client the await token() doesn't have try/catch
-    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);
-      }
-    }
-  }
-
-  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 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);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return children as JSX.Element;
-}

frontend/src/components/analytics/posthog.ts

@@ -1,18 +1,18 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable no-undef */
 import posthog from "posthog-js";
 
-import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from "../utilities/config";
+import { envConfig } from "@app/config/env";
 
 export const initPostHog = () => {
-  // @ts-ignore
   console.log("Hi there 👋");
   try {
     if (typeof window !== "undefined") {
-      // @ts-ignore
-      if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === true) {
-        posthog.init(POSTHOG_API_KEY, {
-          api_host: POSTHOG_HOST
+      if (
+        envConfig.ENV === "production" &&
+        envConfig.TELEMETRY_CAPTURING_ENABLED === true &&
+        envConfig.POSTHOG_API_KEY
+      ) {
+        posthog.init(envConfig.POSTHOG_API_KEY, {
+          api_host: envConfig.POSTHOG_HOST
         });
       }
     }

frontend/src/components/auth/CodeInputStep.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useState } from "react";
+import { useState } from "react";
 import ReactCodeInput from "react-code-input";
 import { useTranslation } from "react-i18next";
 
@@ -97,7 +97,7 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...props}
-          className="mt-6 mb-2"
+          className="mb-2 mt-6"
         />
       </div>
       <div className="mx-auto mt-4 block w-max md:hidden">
@@ -108,7 +108,7 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...propsPhone}
-          className="mt-2 mb-2"
+          className="mb-2 mt-2"
         />
       </div>
       {codeError && <Error text={t("signup.step2-code-error")} />}

frontend/src/components/auth/DonwloadBackupPDFStep.tsx

@@ -32,7 +32,7 @@ export default function DonwloadBackupPDFStep({
   name
 }: DownloadBackupPDFStepProps): JSX.Element {
   const { t } = useTranslation();
-  
+
   const [isLoading, setIsLoading] = useToggle();
 
   const handleBackupKeyGenerate = async () => {
@@ -61,17 +61,17 @@ export default function DonwloadBackupPDFStep({
       <p className="flex flex-col items-center justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         <FontAwesomeIcon
           icon={faWarning}
-          className="ml-2 mr-3 mb-6 pt-1 text-6xl text-bunker-200"
+          className="mb-6 ml-2 mr-3 pt-1 text-6xl text-bunker-200"
         />
         {t("signup.step4-message")}
       </p>
       <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
-        <div className="m-2 mx-auto mt-4 flex w-full w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6 lg:w-1/6">
+        <div className="m-2 mx-auto mt-4 flex w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6">
           <span className="mb-2">
             {t("signup.step4-description1")} {t("signup.step4-description3")}
           </span>
         </div>
-        <div className="mx-auto mt-0 mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mt-4 md:mb-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
+        <div className="mx-auto mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mb-4 md:mt-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
           <div className="text-l w-full py-1 text-lg">
             <Button
               onClick={handleBackupKeyGenerate}

frontend/src/components/auth/EnterEmailStep.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import Link from "next/link";
+import { Link } from "@tanstack/react-router";
 import axios from "axios";
 
 import { createNotification } from "@app/components/notifications";
@@ -27,8 +27,7 @@ export default function EnterEmailStep({
   setEmail,
   incrementStep
 }: DownloadBackupPDFStepProps): JSX.Element {
-  
-  const { mutateAsync, isLoading } = useSendVerificationEmail();
+  const { mutateAsync, isPending } = useSendVerificationEmail();
   const [emailError, setEmailError] = useState(false);
   const { t } = useTranslation();
 
@@ -51,7 +50,7 @@ export default function EnterEmailStep({
     if (!emailCheckBool) {
       try {
         await mutateAsync({ email: email.toLowerCase() });
-        setEmail(email.toLowerCase())
+        setEmail(email.toLowerCase());
         incrementStep();
       } catch (e) {
         if (axios.isAxiosError(e)) {
@@ -96,8 +95,8 @@ export default function EnterEmailStep({
               className="h-14"
               colorSchema="primary"
               variant="outline_bg"
-              isLoading={isLoading}
-              isDisabled={isLoading}
+              isLoading={isPending}
+              isDisabled={isPending}
             >
               {" "}
               {String(t("signup.step1-submit"))}{" "}
@@ -106,7 +105,7 @@ export default function EnterEmailStep({
         </div>
       </div>
       <div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
-        <Link href="/login">
+        <Link to="/login">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
             <span className="cursor-pointer text-sm text-mineshaft-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
               {t("signup.already-have-account")}

frontend/src/components/auth/InitialSignupStep.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
-import Link from "next/link";
 import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
 
 import { RegionSelect } from "@app/components/navigation/RegionSelect";
 import { useServerConfig } from "@app/context";
@@ -94,7 +94,7 @@ export default function InitialSignupStep({
         {t("signup.create-policy")}
       </div>
       <div className="mt-2 flex flex-row text-xs text-bunker-400">
-        <Link href="/login">
+        <Link to="/login">
           <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
             {t("signup.already-have-account")}
           </span>

frontend/src/components/auth/Mfa.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import ReactCodeInput from "react-code-input";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { t } from "i18next";
 
 import Error from "@app/components/basic/Error";
@@ -43,7 +41,7 @@ type Props = {
 
 export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Props) => {
   const [mfaCode, setMfaCode] = useState("");
-  const router = useRouter();
+  const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingResend, setIsLoadingResend] = useState(false);
   const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
@@ -80,11 +78,11 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
       if (closeMfa) {
         closeMfa();
       }
-    } catch (error) {
+    } catch {
       if (triesLeft) {
         setTriesLeft((left) => {
           if (triesLeft === 1) {
-            router.push("/");
+            navigate({ to: "/" });
 
             SecurityClient.setMfaToken("");
             SecurityClient.setToken("");
@@ -132,9 +130,9 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
   return (
     <div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
       {!hideLogo && (
-        <Link href="/">
+        <Link to="/">
           <div className="mb-4 flex justify-center">
-            <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+            <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
           </div>
         </Link>
       )}
@@ -164,12 +162,12 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
               type="text"
               fields={6}
               onChange={setMfaCode}
-              className="mt-6 mb-2"
+              className="mb-2 mt-6"
               {...codeInputProps}
             />
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mt-6 mb-4">
+            <div className="mb-4 mt-6">
               <Input value={mfaCode} onChange={(e) => setMfaCode(e.target.value)} />
             </div>
           )}
@@ -194,8 +192,8 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         </div>
       </form>
       {method === MfaMethod.TOTP && (
-        <div className="mt-2 flex flex-row justify-center text-sm text-bunker-400 ">
-          <Link href="/verify-email">
+        <div className="mt-2 flex flex-row justify-center text-sm text-bunker-400">
+          <Link to="/verify-email">
             <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
               Lost your recovery codes? Reset your account
             </span>

frontend/src/components/auth/TeamInviteStep.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useRouter } from "next/router";
+import { useNavigate } from "@tanstack/react-router";
 
 import { useAddUsersToOrg } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
@@ -14,7 +14,7 @@ import { Button, EmailServiceSetupModal } from "../v2";
  */
 export default function TeamInviteStep(): JSX.Element {
   const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();
   const [emails, setEmails] = useState("");
   const { data: serverDetails } = useFetchServerStatus();
 
@@ -23,7 +23,7 @@ export default function TeamInviteStep(): JSX.Element {
 
   // Redirect user to the getting started page
   const redirectToHome = async () => {
-    router.push(`/org/${localStorage.getItem("orgData.id")}/${ProjectType.SecretManager}/overview`);
+    navigate({ to: `/organization/${ProjectType.SecretManager}/overview` as const });
   };
 
   const inviteUsers = async ({ emails: inviteEmails }: { emails: string }) => {
@@ -49,19 +49,19 @@ export default function TeamInviteStep(): JSX.Element {
       <p className="mb-6 mt-4 flex justify-center text-center text-bunker-400 md:mx-8">
         {t("signup.step5-subtitle")}
       </p>
-      <div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pt-6 pb-4 drop-shadow-xl">
+      <div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pb-4 pt-6 drop-shadow-xl">
         <div>
-          <div className="pl-1 pb-1 text-sm font-medium text-bunker-300">
+          <div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
             <span>Emails</span>
           </div>
           <textarea
-            className="h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 py-1 px-2 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2"
+            className="h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="email@example.com, email2@example.com..."
           />
         </div>
-        <div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:min-w-[30rem] md:max-w-md">
+        <div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mb-2 md:mt-4 md:min-w-[30rem] md:max-w-md">
           <Button
             onClick={() => {
               if (serverDetails?.emailConfigured) {
@@ -85,7 +85,7 @@ export default function TeamInviteStep(): JSX.Element {
           onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
         />
       </div>
-      <div className="min-w-28 mx-auto mt-4 mb-2 flex max-h-24 min-w-[20rem] max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
+      <div className="mx-auto mb-2 mt-4 flex max-h-24 min-w-[20rem] max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
         <Button
           onClick={redirectToHome}
           size="sm"

frontend/src/components/auth/UserInfoStep.tsx

@@ -1,6 +1,6 @@
 import crypto from "crypto";
 
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,9 +8,9 @@ import jsrp from "jsrp";
 import nacl from "tweetnacl";
 import { encodeBase64 } from "tweetnacl-util";
 
+import { initProjectHelper } from "@app/helpers/project";
 import { completeAccountSignup, useSelectOrganization } from "@app/hooks/api/auth/queries";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
-import ProjectService from "@app/services/ProjectService";
 
 import InputField from "../basic/InputField";
 import checkPassword from "../utilities/checks/password/checkPassword";
@@ -121,7 +121,7 @@ export default function UserInfoStep({
           password
         },
         async () => {
-          client.createVerifier(async (err: any, result: { salt: string; verifier: string }) => {
+          client.createVerifier(async (_err: any, result: { salt: string; verifier: string }) => {
             try {
               // TODO: moduralize into KeyService
               const derivedKey = await deriveArgonKey({
@@ -198,12 +198,11 @@ export default function UserInfoStep({
               const userOrgs = await fetchOrganizations();
 
               const orgId = userOrgs[0]?.id;
-              const project = await ProjectService.initProject({
+              await initProjectHelper({
                 projectName: "Example Project"
               });
 
               localStorage.setItem("orgData.id", orgId);
-              localStorage.setItem("projectData.id", project.id);
 
               incrementStep();
             } catch (error) {
@@ -224,7 +223,7 @@ export default function UserInfoStep({
         {t("signup.step3-message")}
       </p>
       <div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
-        <div className="relative z-0 flex w-1/4 w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
+        <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
           <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Your Name
           </p>
@@ -237,12 +236,12 @@ export default function UserInfoStep({
             className="h-12"
           />
           {nameError && (
-            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
               Please, specify your name
             </p>
           )}
         </div>
-        <div className="relative z-0 flex w-1/4 w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
+        <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
           <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Organization Name
           </p>
@@ -255,12 +254,12 @@ export default function UserInfoStep({
             className="h-12"
           />
           {organizationNameError && (
-            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
               Please, specify your organization name
             </p>
           )}
         </div>
-        <div className="relative z-0 flex w-1/4 w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
+        <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
           <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Where did you hear about us? <span className="font-light">(optional)</span>
           </p>
@@ -271,7 +270,7 @@ export default function UserInfoStep({
             className="h-12"
           />
         </div>
-        <div className="mt-2 flex max-h-60 w-1/4 w-full min-w-[20rem] flex-col items-center justify-center rounded-lg py-2 lg:w-1/6">
+        <div className="mt-2 flex max-h-60 w-full min-w-[20rem] flex-col items-center justify-center rounded-lg py-2 lg:w-1/6">
           <InputField
             label={t("section.password.password")}
             onChangeHandler={async (pass: string) => {

frontend/src/components/basic/Error.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const Error = ({ text }: { text: string }): JSX.Element => {
   return (
     <div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full">
-      <FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mt-1.5 mb-2 text-red" />
+      <FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mb-2 mt-1.5 text-red" />
       {text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>}
     </div>
   );

frontend/src/components/basic/InputField.tsx

@@ -48,7 +48,7 @@ const InputField = ({
           placeholder={placeholder}
           value={value}
           required={isRequired}
-          className="text-md min-w-16 w-full rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none"
+          className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none"
           name={name}
           readOnly
           autoComplete={autoComplete}
@@ -79,7 +79,7 @@ const InputField = ({
               : ""
           } ${
             error ? "focus:ring-red/50" : "focus:ring-primary/50"
-          } text-md min-w-16 peer relative w-full rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`}
+          } text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`}
           name={name}
           spellCheck="false"
           autoComplete={autoComplete}
@@ -121,7 +121,7 @@ const InputField = ({
 						</div>
 					)} */}
       </div>
-      {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
+      {error && <p className="mx-0 mb-2 mt-0.5 max-w-xs text-xs text-red">{errorText}</p>}
     </div>
   );
 };

frontend/src/components/basic/Listbox.tsx

@@ -1,112 +0,0 @@
-import React, { Fragment } from "react";
-import { faAngleDown, faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Listbox, Transition } from "@headlessui/react";
-
-interface ListBoxProps {
-  isSelected: string;
-  onChange: (arg: string) => void;
-  data: string[] | null;
-  text?: string;
-  buttonAction?: () => void;
-  isFull?: boolean;
-}
-
-/**
- * This is the component that we use for drop down lists.
- * @param {object} obj
- * @param {string} obj.isSelected - the item that is currently selected
- * @param {function} obj.onChange - what happends if you select the item inside a list
- * @param {string[]} obj.data - all the options available
- * @param {string} obj.text - the text that shows us in front of the select option
- * @param {function} obj.buttonAction - if there is a button at the bottom of the list, this is the action that happens when you click the button
- * @returns
- */
-const ListBox = ({
-  isSelected,
-  onChange,
-  data,
-  text,
-  buttonAction,
-  isFull
-}: ListBoxProps): JSX.Element => {
-  return (
-    <Listbox value={isSelected} onChange={onChange}>
-      <div className="relative">
-        <Listbox.Button
-          className={`relative text-gray-400 ${
-            isFull ? "w-full" : "w-52"
-          } focus-visible:ring-offset-orange-300 cursor-default rounded-md bg-white/[0.07] py-2.5 pl-3 pr-10 text-left shadow-md duration-200 hover:bg-white/[0.11] 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 sm:text-sm`}
-        >
-          <div className="flex flex-row">
-            {text}
-            <span className="ml-1 block cursor-pointer truncate font-semibold text-gray-300">
-              {" "}
-              {isSelected}
-            </span>
-          </div>
-          {data && (
-            <div className="pointer-events-none absolute inset-y-0 right-0 flex cursor-pointer 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="no-scrollbar::-webkit-scrollbar absolute z-[70] mt-1 max-h-60 w-full overflow-auto rounded-md border border-mineshaft-700 bg-bunker p-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 no-scrollbar focus:outline-none sm:text-sm">
-              {data.map((person, personIdx) => (
-                <Listbox.Option
-                  key={`${person}.${personIdx + 1}`}
-                  className={({ active, selected }) =>
-                    `relative my-0.5 cursor-default select-none rounded-md py-2 pl-10 pr-4 ${
-                      selected ? "bg-white/10 font-bold text-gray-400" : ""
-                    } ${
-                      active && !selected
-                        ? "cursor-pointer bg-white/5 text-mineshaft-200"
-                        : "text-gray-400"
-                    } `
-                  }
-                  value={person}
-                >
-                  {({ selected }) => (
-                    <>
-                      <span
-                        className={`block truncate text-primary${
-                          selected ? "font-medium" : "font-normal"
-                        }`}
-                      >
-                        {person}
-                      </span>
-                      {selected ? (
-                        <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 text-primary">
-                          <FontAwesomeIcon icon={faCheck} className="text-md ml-1" />
-                        </span>
-                      ) : null}
-                    </>
-                  )}
-                </Listbox.Option>
-              ))}
-              {buttonAction && (
-                <button type="button" onClick={buttonAction} className="w-full cursor-pointer">
-                  <div className="relative my-0.5 mt-2 flex cursor-pointer select-none justify-start rounded-md py-2 pl-10 pr-4 text-gray-400 duration-200 hover:bg-lime-300 hover:font-semibold hover:text-black">
-                    <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 pr-4">
-                      <FontAwesomeIcon icon={faPlus} className="text-lg" />
-                    </span>
-                    Add Project
-                  </div>
-                </button>
-              )}
-            </Listbox.Options>
-          </Transition>
-        )}
-      </div>
-    </Listbox>
-  );
-};
-
-export default ListBox;

frontend/src/components/basic/Toggle.tsx

@@ -1,45 +0,0 @@
-import { Switch } from "@headlessui/react";
-
-interface ToggleProps {
-  enabled: boolean;
-  setEnabled: (value: boolean) => void;
-  addOverride: (value: string | undefined, id: string) => void;
-  id: string;
-}
-
-/**
- * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values)
- * @param obj
- * @param {boolean} obj.enabled - whether the toggle is turned on or off
- * @param {function} obj.setEnabled - change the state of the toggle
- * @param {function} obj.addOverride - a function that adds an override to a certain secret
- * @param {number} obj.id - id of a certain secret
- * @returns
- */
-const Toggle = ({ enabled, setEnabled, addOverride, id }: ToggleProps): JSX.Element => {
-  return (
-    <Switch
-      checked={enabled}
-      onChange={() => {
-        if (enabled === false) {
-          addOverride("", id);
-        } else {
-          addOverride(undefined, id);
-        }
-        setEnabled(!enabled);
-      }}
-      className={`${
-        enabled ? "bg-primary" : "bg-bunker-400"
-      } relative inline-flex h-5 w-9 items-center rounded-full`}
-    >
-      <span className="sr-only">Enable notifications</span>
-      <span
-        className={`${
-          enabled ? "translate-x-[1.26rem]" : "translate-x-0.5"
-        } inline-block h-3.5 w-3.5 transform rounded-full bg-bunker-800 transition`}
-      />
-    </Switch>
-  );
-};
-
-export default Toggle;

frontend/src/components/basic/buttons/Button.tsx

@@ -1,148 +0,0 @@
-/* eslint-disable react/button-has-type */
-import React, { ButtonHTMLAttributes } from "react";
-import Image from "next/image";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const classNames = require("classnames");
-
-type ButtonProps = {
-  text?: string;
-  onButtonPressed: () => void;
-  loading?: boolean;
-  color?: string;
-  size: string;
-  icon?: IconProp;
-  active?: boolean;
-  iconDisabled?: IconProp;
-  textDisabled?: string;
-  type?: ButtonHTMLAttributes<any>["type"];
-};
-
-/**
- * This is the main butto component in the app.
- * @param {object} props
- * @param {string} props.text - text inside the button
- * @param {function} props.onButtonPressed - the action that happens when the button is clicked
- * @param {boolean} props.loading - if a button is currently in the laoding state
- * @param {string} props.color - button color
- * @param {string} props.size - button size
- * @param {FontAwesomeIconProps} props.icon - the icon inside the button
- * @param {boolean} props.active - if the button is active or disabled
- * @param {FontAwesomeIconProps} props.text - the icon inside the button when it is disabled
- * @param {string} props.textDisable - text inside the button when it is disabled
- * @returns
- */
-const Button = ({
-  active,
-  text,
-  textDisabled,
-  color,
-  size,
-  onButtonPressed,
-  loading,
-  icon,
-  iconDisabled,
-  type = "button"
-}: 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 = active || (text !== "" && textDisabled === undefined);
-
-  const styleButton = classNames(
-    "group m-auto md:m-0 inline-block rounded-md duration-200",
-
-    // Setting background colors and hover modes
-    color === "mineshaft" &&
-      activityStatus &&
-      "bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60",
-    color === "mineshaft" && !activityStatus && "bg-mineshaft",
-    (color === "primary" || !color) &&
-      activityStatus &&
-      "bg-primary border border-primary-400 opacity-80 hover:opacity-100",
-    (color === "primary" || !color) && !activityStatus && "bg-primary",
-    color === "red" && "bg-red-800 border border-red",
-
-    // Changing the opacity when active vs when not
-    activityStatus ? "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"
-  );
-
-  const styleMainDiv = classNames(
-    "relative font-medium flex items-center",
-
-    // Setting the text color for the text and icon
-    color === "mineshaft" && "text-bunker-200",
-    color !== "mineshaft" && color !== "red" && color !== "none" && "text-black",
-    color === "red" && "text-gray-200",
-    color === "none" && "text-gray-200 text-xl",
-    activityStatus && color !== "red" && color !== "mineshaft" && color !== "none"
-      ? "group-hover:text-black"
-      : "",
-
-    size === "icon" && "flex items-center justify-center"
-  );
-
-  const textStyle = classNames(
-    "relative duration-200 text-center w-full",
-
-    // Show the loading sign if the loading indicator is on
-    loading ? "opacity-0" : "opacity-100",
-    size === "md" && "text-sm",
-    size === "lg" && "text-lg"
-  );
-
-  const button = (
-    <button
-      disabled={!activityStatus}
-      type={type}
-      onClick={onButtonPressed}
-      className={styleButton}
-    >
-      <div className={styleMainDiv}>
-        <div
-          className={`${
-            loading === true ? "opacity-100" : "opacity-0"
-          } absolute flex w-full items-center bg-primary px-3 duration-200`}
-        >
-          <Image
-            src="/images/loading/loadingblack.gif"
-            height={25}
-            width={42}
-            alt="loading animation"
-            className="rounded-xl"
-          />
-        </div>
-        {icon && (
-          <FontAwesomeIcon
-            icon={icon}
-            className={`my-auto flex font-extrabold ${size === "icon-sm" ? "text-sm" : "text-sm"} ${
-              (text || textDisabled) && "mr-2"
-            }`}
-          />
-        )}
-        {iconDisabled && (
-          <FontAwesomeIcon
-            icon={iconDisabled as IconProp}
-            className={`my-auto flex font-extrabold ${size === "icon-sm" ? "text-sm" : "text-md"} ${
-              (text || textDisabled) && "mr-2"
-            }`}
-          />
-        )}
-        {(text || textDisabled) && (
-          <p className={textStyle}>{activityStatus ? text : textDisabled}</p>
-        )}
-      </div>
-    </button>
-  );
-
-  return button;
-};
-
-export default Button;

frontend/src/components/basic/dialog/ActivateBotDialog.tsx

@@ -1,100 +0,0 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-
-interface IntegrationOption {
-  clientId: string;
-  clientSlug?: string; // vercel-integration specific
-  docsLink: string;
-  image: string;
-  isAvailable: boolean;
-  name: string;
-  slug: string;
-  type: string;
-}
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  selectedIntegrationOption: IntegrationOption | null;
-  integrationOptionPress: (integrationOption: IntegrationOption) => void;
-};
-
-const ActivateBotDialog = ({
-  isOpen,
-  closeModal,
-  selectedIntegrationOption,
-  integrationOptionPress
-}: Props) => {
-  const { t } = useTranslation();
-
-  const submit = async () => {
-    try {
-      // type check
-      if (!selectedIntegrationOption) return;
-
-      // start integration or probe for PAT
-      integrationOptionPress(selectedIntegrationOption);
-    } catch (err) {
-      console.log(err);
-    }
-
-    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 border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    {t("integrations.grant-access-to-secrets")}
-                  </Dialog.Title>
-                  <div className="mt-2 mb-2">
-                    <p className="text-sm text-gray-500">
-                      {t("integrations.why-infisical-needs-access")}
-                    </p>
-                  </div>
-                  <div className="mt-6 max-w-max">
-                    <Button
-                      onButtonPressed={submit}
-                      color="mineshaft"
-                      text={t("integrations.grant-access-button") as string}
-                      size="md"
-                    />
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default ActivateBotDialog;

frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx

@@ -1,149 +0,0 @@
-import { Fragment } from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import ListBox from "../Listbox";
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  submitModal: () => void;
-  data: any;
-  email: string;
-  setEmail: (email: string) => void;
-};
-
-const AddProjectMemberDialog = ({
-  isOpen,
-  closeModal,
-  submitModal,
-  data,
-  email,
-  setEmail
-}: Props) => {
-  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>
-
-          <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 border border-mineshaft-600 bg-mineshaft-800 p-6 text-left align-middle shadow-xl transition-all">
-                  {data?.length > 0 ? (
-                    <Dialog.Title
-                      as="h3"
-                      className="z-50 text-lg font-medium leading-6 text-gray-400"
-                    >
-                      {t("section.members.add-dialog.add-member-to-project")}
-                    </Dialog.Title>
-                  ) : (
-                    <Dialog.Title
-                      as="h3"
-                      className="z-50 mb-4 text-lg font-medium text-mineshaft-300"
-                    >
-                      {t("section.members.add-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("section.members.add-dialog.user-will-email")}
-                        </p>
-                        <div className="">
-                          <Trans
-                            i18nKey="section.members.add-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(`/org/${router.query.id}/members`)}
-                                aria-label="add member"
-                              />,
-                              // 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(`/org/${router.query.id}/members?action=invite`)
-                                }
-                                aria-label="add member"
-                              />
-                            ]}
-                          />
-                        </div>
-                      </div>
-                    ) : (
-                      <p className="text-sm text-gray-500">
-                        {t("section.members.add-dialog.add-user-org-first")}
-                      </p>
-                    )}
-                  </div>
-                  <div className="max-h-28">
-                    {data?.length > 0 && (
-                      <ListBox
-                        isSelected={email || data[0]}
-                        onChange={setEmail}
-                        data={data}
-                        isFull
-                      />
-                    )}
-                  </div>
-                  <div className="max-w-max">
-                    {data?.length > 0 ? (
-                      <div className="mt-6 flex w-max flex-col justify-start">
-                        <Button
-                          onButtonPressed={submitModal}
-                          color="mineshaft"
-                          text={t("section.members.add-member") as string}
-                          size="md"
-                        />
-                      </div>
-                    ) : (
-                      <Button
-                        onButtonPressed={() =>
-                          router.push(`/org/${localStorage.getItem("orgData.id")}/members`)
-                        }
-                        color="mineshaft"
-                        text={t("section.members.add-dialog.add-user-to-org") as string}
-                        size="md"
-                      />
-                    )}
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default AddProjectMemberDialog;

frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx

@@ -1,140 +0,0 @@
-import { FormEventHandler, Fragment, useEffect, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-
-type FormFields = { name: string; slug: string };
-
-type Props = {
-  isOpen?: boolean;
-  isEditMode?: boolean;
-  // on edit mode load up initial values
-  initialValues?: FormFields;
-  onClose: () => void;
-  onCreateSubmit: (data: FormFields) => void;
-  onEditSubmit: (data: FormFields) => void;
-};
-
-// TODO: Migrate to better form management and validation. Preferable react-hook-form + yup
-/**
- * The dialog modal for when the user wants to create a new workspace
- * @param {*} param0
- * @returns
- */
-export const AddUpdateEnvironmentDialog = ({
-  isOpen,
-  onClose,
-  onCreateSubmit,
-  onEditSubmit,
-  initialValues,
-  isEditMode
-}: Props) => {
-  const [formInput, setFormInput] = useState<FormFields>({
-    name: "",
-    slug: ""
-  });
-
-  // This use effect can be removed when the unmount is happening from outside the component
-  // When unmount happens outside state gets unmounted also
-  useEffect(() => {
-    setFormInput(initialValues || { name: "", slug: "" });
-  }, [isOpen]);
-
-  // REFACTOR: Move to react-hook-form with yup for better form management
-  const onInputChange = (fieldName: string, fieldValue: string) => {
-    setFormInput((state) => ({ ...state, [fieldName]: fieldValue }));
-  };
-
-  const onFormSubmit: FormEventHandler = (e) => {
-    e.preventDefault();
-    const data = {
-      name: formInput.name,
-      slug: formInput.slug.toLowerCase()
-    };
-    if (isEditMode) {
-      onEditSubmit(data);
-      return;
-    }
-    onCreateSubmit(data);
-  };
-
-  return (
-    <div>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={onClose}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-out duration-150"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-70" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-50 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 border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    {isEditMode ? "Update environment" : "Create a new environment"}
-                  </Dialog.Title>
-                  <form onSubmit={onFormSubmit}>
-                    <div className="mt-4 max-h-28">
-                      <InputField
-                        label="Environment Name"
-                        onChangeHandler={(val) => onInputChange("name", val)}
-                        type="varName"
-                        value={formInput.name}
-                        placeholder=""
-                        isRequired
-                        // error={error.length > 0}
-                        // errorText={error}
-                      />
-                    </div>
-                    <div className="mt-4 max-h-28">
-                      <InputField
-                        label="Environment Slug"
-                        onChangeHandler={(val) => onInputChange("slug", val)}
-                        type="varName"
-                        value={formInput.slug}
-                        placeholder=""
-                        isRequired
-                        // error={error.length > 0}
-                        // errorText={error}
-                      />
-                    </div>
-                    <p className="mt-2 text-xs text-gray-500">
-                      Slugs are shorthands used in cli to access environment
-                    </p>
-                    <div className="mt-4 max-w-min">
-                      <Button
-                        onButtonPressed={() => null}
-                        type="submit"
-                        color="mineshaft"
-                        text={isEditMode ? "Update" : "Create"}
-                        active={formInput.name !== "" && formInput.slug !== ""}
-                        size="md"
-                      />
-                    </div>
-                  </form>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};

frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx

@@ -1,104 +0,0 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-import { Checkbox } from "../table/Checkbox";
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  submitModal: (email: string, addAllUser: boolean) => void;
-  workspaceName: string;
-  setWorkspaceName: (workspaceName: string) => void;
-  error: boolean;
-  loading: boolean;
-};
-
-/**
- * The dialog modal for when the user wants to create a new workspace
- */
-const AddWorkspaceDialog = ({
-  isOpen,
-  closeModal,
-  submitModal,
-  workspaceName,
-  setWorkspaceName,
-  error,
-  loading
-}: Props) => {
-  const [addAllUsers, setAddAllUsers] = useState(true);
-  const submit = () => {
-    submitModal(workspaceName, addAllUsers);
-  };
-
-  return (
-    <div>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-[100]" 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 border border-gray-700 bg-bunker-800 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 secrets and configs.
-                    </p>
-                  </div>
-                  <div className="mt-4 max-h-28">
-                    <InputField
-                      label="Project Name"
-                      onChangeHandler={setWorkspaceName}
-                      type="varName"
-                      value={workspaceName}
-                      placeholder=""
-                      isRequired
-                      error={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;

frontend/src/components/basic/dialog/DeleteActionModal.tsx

@@ -1,91 +0,0 @@
-import { Fragment, useEffect, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import InputField from "../InputField";
-
-// REFACTOR: Move all these modals into one reusable one
-type Props = {
-  isOpen?: boolean;
-  onClose: () => void;
-  title: string;
-  onSubmit: () => void;
-  deleteKey?: string;
-};
-
-const DeleteActionModal = ({ isOpen, onClose, title, onSubmit, deleteKey }: Props) => {
-  const [deleteInputField, setDeleteInputField] = useState("");
-
-  useEffect(() => {
-    setDeleteInputField("");
-  }, [isOpen]);
-
-  return (
-    <div>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={onClose}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-150"
-            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 border border-gray-700 bg-grey p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    {title}
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-gray-500">This action is irrevertible.</p>
-                  </div>
-                  <div className="mt-2">
-                    <InputField
-                      isRequired
-                      label={`Type ${deleteKey} to delete the resource`}
-                      onChangeHandler={(val) => setDeleteInputField(val)}
-                      value={deleteInputField}
-                      type="text"
-                    />
-                  </div>
-                  <div className="mt-6">
-                    <button
-                      type="button"
-                      className="hover:bg-alizarin hover:text-semibold inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                      onClick={onSubmit}
-                      disabled={Boolean(deleteKey) && deleteInputField !== deleteKey}
-                    >
-                      Delete
-                    </button>
-                    <button
-                      type="button"
-                      className="hover:text-semibold 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 duration-200 hover:border-white hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                      onClick={onClose}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default DeleteActionModal;

frontend/src/components/basic/dialog/DeleteEnvVar.tsx

@@ -1,81 +0,0 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { Dialog, Transition } from "@headlessui/react";
-
-// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: () => void;
-};
-
-export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <div>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-[80]" onClose={() => {}}>
-          <div className="fixed inset-0 overflow-y-auto">
-            <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"
-                onClick={onClose}
-                onKeyDown={onClose}
-                role="button"
-                tabIndex={0}
-                aria-label="Close"
-              />
-            </Transition.Child>
-            <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 border border-mineshaft-600 bg-bunker p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-bunker-200">
-                    {t("dashboard:sidebar.delete-key-dialog.title")}
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-bunker-300">
-                      {t("dashboard:sidebar.delete-key-dialog.confirm-delete-message")}
-                    </p>
-                  </div>
-                  <div className="mt-6 flex justify-start">
-                    <button
-                      type="button"
-                      className="text-semibold inline-flex justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-sm font-medium text-bunker-100 opacity-80 duration-200 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                      onClick={onSubmit}
-                    >
-                      Delete
-                    </button>
-                    <button
-                      type="button"
-                      className="hover:text-semibold ml-2 inline-flex justify-center rounded-md border border-transparent bg-bunker-500 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:bg-mineshaft-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                      onClick={onClose}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};

frontend/src/components/basic/dialog/DeleteUserDialog.tsx

@@ -1,77 +0,0 @@
-import { Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  submitModal: (userIdToBeDeleted: string) => void;
-  userIdToBeDeleted: string;
-};
-
-const DeleteUserDialog = ({ isOpen, closeModal, submitModal, userIdToBeDeleted }: Props) => {
-  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>
-
-          <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 border border-gray-700 bg-grey 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="hover:bg-alizarin hover:text-semibold inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:text-white 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="hover:text-semibold 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 duration-200 hover:border-white hover:text-white 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>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default DeleteUserDialog;