Merge pull request #1533 from Infisical/daniel/k8-operator-machine-identities

Feat: K8 Operator Machine Identity Support

.github/workflows/build-staging-and-deploy.yml

@@ -8,6 +8,15 @@ jobs:
     steps:
       - name: ☁️ Checkout source
         uses: actions/checkout@v3
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_FOR_ECR }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_FOR_ECR }}
+          aws-region: us-east-1
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v1
       - name: 📦 Install dependencies to test all dependencies
         run: npm ci --only-production
         working-directory: backend
@@ -35,16 +44,7 @@ jobs:
           context: .
           file: Dockerfile.standalone-infisical
           tags: infisical/infisical:test
-      # - name: ⏻ Spawn backend container and dependencies
-      #   run: |
-      #     docker compose -f .github/resources/docker-compose.be-test.yml up --wait --quiet-pull
-      # - name: 🧪 Test backend image
-      #   run: |
-      #     ./.github/resources/healthcheck.sh infisical-backend-test
-      # - name: ⏻ Shut down backend container and dependencies
-      #   run: |
-      #     docker compose -f .github/resources/docker-compose.be-test.yml down
-      - name: 🏗️ Build backend and push
+      - name: 🏗️ Build backend and push to docker hub
         uses: depot/build-push-action@v1
         with:
           project: 64mmf0n610
@@ -59,6 +59,8 @@ jobs:
           build-args: |
             POSTHOG_API_KEY=${{ secrets.PUBLIC_POSTHOG_API_KEY }}
             INFISICAL_PLATFORM_VERSION=${{ steps.extract_version.outputs.version }}
+    
+    
   postgres-migration:
     name: Run latest migration files
     runs-on: ubuntu-latest

Dockerfile.standalone-infisical

@@ -118,9 +118,6 @@ WORKDIR /backend
 
 ENV TELEMETRY_ENABLED true
 
-HEALTHCHECK --interval=10s --timeout=3s --start-period=10s \  
-  CMD node healthcheck.js
-
 EXPOSE 8080
 EXPOSE 443
 

README.md

@@ -10,7 +10,8 @@
   <a href="https://infisical.com/">Infisical Cloud</a> |
   <a href="https://infisical.com/docs/self-hosting/overview">Self-Hosting</a> |
   <a href="https://infisical.com/docs/documentation/getting-started/introduction">Docs</a> |
-  <a href="https://www.infisical.com">Website</a>
+  <a href="https://www.infisical.com">Website</a> |
+  <a href="https://infisical.com/careers">Hiring (Remote/SF)</a>
 </h4>
 
 <p align="center">

backend/src/ee/routes/v1/org-role-router.ts

@@ -19,7 +19,7 @@ export const registerOrgRoleRouter = async (server: FastifyZodProvider) => {
           .min(1)
           .trim()
           .refine(
-            (val) => Object.keys(OrgMembershipRole).includes(val),
+            (val) => !Object.keys(OrgMembershipRole).includes(val),
             "Please choose a different slug, the slug you have entered is reserved"
           )
           .refine((v) => slugify(v) === v, {

backend/src/services/secret-folder/secret-folder-service.ts

@@ -232,6 +232,7 @@ export const secretFolderServiceFactory = ({
     if (!parentFolder) return [];
 
     const folders = await folderDAL.find({ envId: env.id, parentId: parentFolder.id });
+
     return folders;
   };
 

cli/packages/cmd/secrets.go

@@ -419,7 +419,7 @@ func getSecretsByNames(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Unable to parse path flag")
 	}
 
-	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath}, "")
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath, IncludeImport: true}, "")
 	if err != nil {
 		util.HandleError(err, "To fetch all secrets")
 	}
@@ -477,7 +477,7 @@ func generateExampleEnv(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Unable to parse flag")
 	}
 
-	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath}, "")
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath, IncludeImport: true}, "")
 	if err != nil {
 		util.HandleError(err, "To fetch all secrets")
 	}

docs/documentation/platform/secret-rotation/mysql.mdx

@@ -1,37 +1,102 @@
 ---
 title: "MySQL/MariaDB"
-description: "Rotated database user password of a MySQL or MariaDB"
+description: "How to rotate MySQL/MariaDB database user passwords"
 ---
 
-Infisical will update periodically the provided database user's password.
+The Infisical MySQL secret rotation allows you to automatically rotate your MySQL database user's password at a predefined interval.
 
-<Warning>
-	At present Infisical do require access to your database. We will soon be released Infisical agent based rotation which would help you rotate without direct database access from Infisical cloud.
-</Warning>
 
-## Working
+## Prerequisite
 
-1. User's has to create the two user's for Infisical to rotate and provide them required database access
-2. Infisical will connect with your database with admin access
-3. If last rotated one was username1, then username2 is chosen to be rotated
-5. Update it's password with random value
-6. After testing it gets saved to the provided secret mapping
+1. Create two users with the required permission in your MySQL instance. We'll refer to them as `user-a` and `user-b`.
+2. Create another MySQL user with just the permission to update the passwords of `user-a` and `user-b`. We'll refer to this user as the `admin` user.
+
+To learn more about MySQL permission system, please visit this [documentation](https://dev.mysql.com/doc/refman/8.0/en/privileges-provided.html).
+
+## How it works 
+
+1. Infisical connects to your database using the provided `admin` user account.
+2. A random value is generated and the password for `user-a` is updated with the new value.
+3. The new password is then tested by logging into the database
+4. If test is success, it's saved to the output secret mappings so that rest of the system gets the newly rotated value(s).
+5. The process is then repeated for `user-b` on the next rotation.
+6. The cycle repeats until secret rotation is deleted/stopped.
 
 ## Rotation Configuration
 
-1. Head over to Secret Rotation configuration page of your project by clicking on side bar `Secret Rotation`
-2. Click on `MySQL`
-3. Provide the inputs
-	- Admin Username: DB admin username
-	- Admin Password: DB admin password
-	- Host: DB host
-	- Port: DB port(number)
-	- Username1: The first username in two to rotate
-	- Username2: The second username in two to rotate
-	- CA: Certificate to connect with database(string)
-4. Final step
-	- Select `Environment`, `Secret Path` and `Interval` to rotate the secrets
-	- Finally select the secrets in your provided board to replace with new secret after each rotation
-	- Your done and good to go.
+<Steps>
+  <Step title="Open Secret Rotation Page">
+	Head over to Secret Rotation configuration page of your project by clicking on `Secret Rotation` in the left side bar 
+  </Step>
+  <Step title="Click on MySQL card" />
+  <Step title="Provide the inputs">
+	<ParamField path="Admin Username" type="string" required>
+		Rotator admin username
+	</ParamField>
 
-Congrats. You have 10x your MySQL/MariaDB access security. 
+	<ParamField path="Admin password" type="string" required>
+		Rotator admin password
+	</ParamField>
+
+	<ParamField path="Host" type="string" required>
+		Database host url
+	</ParamField>
+
+	<ParamField path="Port" type="number" required>
+		Database port number
+	</ParamField>
+
+	<ParamField path="Username1" type="string" required>
+		The first username of two to rotate - `user-a`
+	</ParamField>
+
+	<ParamField path="Username2" type="string" required>
+		The second username of two to rotate - `user-b`
+	</ParamField>
+ 
+	<ParamField path="CA" type="string">
+		Optional database certificate to connect with database
+	</ParamField>
+
+  </Step>
+  <Step title="Configure the output secret mapping">
+  	When a secret rotation is successful, the updated values needs to be saved to an existing key(s) in your project. 
+
+	<ParamField path="Environment" type="string" required>
+		The environment where the rotated credentials should be mapped to.
+	</ParamField>
+
+	<ParamField path="Secret Path" type="string" required>
+		The secret path where the rotated credentials should be mapped to.
+	</ParamField>
+
+	<ParamField path="Interval" type="number" required>
+		What interval should the credentials be rotated in days.
+	</ParamField>
+
+	<ParamField path="DB USERNAME" type="string" required>
+		Select an existing secret key where the rotated database username value should be saved to.
+	</ParamField>
+
+	<ParamField path="DB PASSWORD" type="string" required>
+		Select an existing select key where the rotated database password value should be saved to.
+	</ParamField>
+  </Step>
+</Steps>
+
+## FAQ
+
+<AccordionGroup>
+  <Accordion title="Why can't we delete the other user when rotating?">
+  	When a system has multiple nodes by horizontal scaling, redeployment doesn't happen instantly.
+
+	This means that when the secrets are rotated, and the redeployment is triggered, the existing system will still be using the old credentials until the change rolls out. 
+
+	To avoid causing failure for them, the old credentials are not removed. Instead, in the next rotation, the previous user's credentials are updated.
+  </Accordion>
+  <Accordion title="Why do you need root user account?">
+	The admin account is used by Infisical to update the credentials for `user-a` and `user-b`. 
+
+	You don't need to grant all permission for your admin account but rather just the permissions to update both of the user's passwords.
+  </Accordion>
+</AccordionGroup>

docs/documentation/platform/secret-rotation/postgres.mdx

@@ -1,33 +1,104 @@
 ---
 title: "PostgreSQL/CockroachDB"
-description: "Rotated database user password of a PostgreSQL or Cockroach DB"
+description: "How to rotate postgreSQL/cockroach database user passwords"
 ---
 
-Infisical will update periodically the provided database user's password.
+The Infisical Postgres secret rotation allows you to automatically rotate your Postgres database user's password at a predefined interval.
 
-## Working
 
-1. User's has to create the two user's for Infisical to rotate and provide them required database access.
-2. Infisical will connect with your database with admin access.
-3. If last rotated one was username1, then username2 is chosen to be rotated.
-5. Update it's password with random value.
-6. After testing it gets saved to the provided secret mapping.
+## Prerequisite
+
+1. Create two users with the required permission in your PostgreSQL instance. We'll refer to them as `user-a` and `user-b`.
+2. Create another PostgreSQL user with just the permission to update the passwords of `user-a` and `user-b`. We'll refer to this user as the `admin` user.
+
+To learn more about Postgres permission system, please visit this [documentation](https://www.postgresql.org/docs/9.1/sql-grant.html).
+
+
+## How it works 
+
+1. Infisical connects to your database using the provided `admin` user account.
+2. A random value is generated and the password for `user-a` is updated with the new value.
+3. The new password is then tested by logging into the database
+4. If test is success, it's saved to the output secret mappings so that rest of the system gets the newly rotated value(s).
+5. The process is then repeated for `user-b` on the next rotation.
+6. The cycle repeats until secret rotation is deleted/stopped.
 
 ## Rotation Configuration
 
-1. Head over to Secret Rotation configuration page of your project by clicking on side bar `Secret Rotation`
-2. Click on `PostgreSQL`
-3. Provide the inputs
-	- Admin Username: DB admin username
-	- Admin Password: DB admin password
-	- Host: DB host
-	- Port: DB port(number)
-	- Username1: The first username in two to rotate
-	- Username2: The second username in two to rotate
-	- CA: Certificate to connect with database(string)
-4. Final step
-	- Select `Environment`, `Secret Path` and `Interval` to rotate the secrets
-	- Finally select the secrets in your provided board to replace with new secret after each rotation
-	- Your done and good to go.
+<Steps>
+  <Step title="Open Secret Rotation Page">
+	Head over to Secret Rotation configuration page of your project by clicking on `Secret Rotation` in the left side bar 
+  </Step>
+  <Step title="Click on PostgresSQL card" />
 
-Congratulations. You have improved your PostgreSQL/CockroachDB access security. 
+  <Step title="Provide the inputs">
+	<ParamField path="Admin Username" type="string" required="true">
+		Rotator admin username
+	</ParamField>
+
+	<ParamField path="Admin password" type="string" required="true">
+		Rotator admin password
+	</ParamField>
+
+	<ParamField path="Host" type="string" required="true">
+		Database host url
+	</ParamField>
+
+	<ParamField path="Port" type="number" required="true">
+		Database port number
+	</ParamField>
+
+	<ParamField path="Username1" type="string" required="true">
+		The first username of two to rotate - `user-a`
+	</ParamField>
+
+	<ParamField path="Username2" type="string" required="true">
+		The second username of two to rotate - `user-b`
+	</ParamField>
+ 
+	<ParamField path="CA" type="string" optional>
+		Optional database certificate to connect with database
+	</ParamField>
+  </Step>
+  <Step title="Configure the output secret mapping">
+
+  	When a secret rotation is successful, the updated values needs to be saved to an existing key(s) in your project. 
+
+	<ParamField path="Environment" type="string" required>
+		The environment where the rotated credentials should be mapped to.
+	</ParamField>
+
+	<ParamField path="Secret Path" type="string" required>
+		The secret path where the rotated credentials should be mapped to.
+	</ParamField>
+
+	<ParamField path="Interval" type="number" required>
+		What interval should the credentials be rotated in days.
+	</ParamField>
+
+	<ParamField path="DB USERNAME" type="string" required>
+		Select an existing secret key where the rotated database username value should be saved to.
+	</ParamField>
+
+	<ParamField path="DB PASSWORD" type="string" required>
+		Select an existing select key where the rotated database password value should be saved to.
+	</ParamField>
+  </Step>
+</Steps>
+
+## FAQ
+
+<AccordionGroup>
+  <Accordion title="Why can't we delete the other user when rotating?">
+  	When a system has multiple nodes by horizontal scaling, redeployment doesn't happen instantly.
+
+	This means that when the secrets are rotated, and the redeployment is triggered, the existing system will still be using the old credentials until the change rolls out. 
+
+	To avoid causing failure for them, the old credentials are not removed. Instead, in the next rotation, the previous user's credentials are updated.
+  </Accordion>
+  <Accordion title="Why do you need root user account?">
+	The admin account is used by Infisical to update the credentials for `user-a` and `user-b`. 
+
+	You don't need to grant all permission for your admin account but rather just the permissions to update both of the user's passwords.
+  </Accordion>
+</AccordionGroup>

docs/documentation/platform/secret-rotation/sendgrid.mdx

@@ -1,31 +1,58 @@
 ---
 title: "Twilio SendGrid"
-description: "Rotate Twilio SendGrid API keys"
+description: "How to rotate Twilio SendGrid API keys"
 ---
 
-Twilio SendGrid is a cloud-based email delivery platform that helps businesses send transactional and marketing emails.
-It uses an API key to do various operations. Using Infisical you can easily dynamically change the keys.
+Eliminate the use of long lived secrets by rotating Twilio SendGrid API keys with Infisical.
 
-## Working
+## Prerequisite
 
-1. Infisical will need an admin token of SendGrid to create API keys dynamically.
-2. Using the given admin token and scope by user Infisical will create and rotate API keys periodically
-3. Under the hood infisical uses [SendGrid API](https://docs.sendgrid.com/api-reference/api-keys/create-api-keys)
+You will need a valid SendGrid admin key with the necessary scope to create additional API keys. 
+
+Follow the [SendGrid Docs to create an admin api key](https://docs.sendgrid.com/ui/account-and-settings/api-keys)
+
+## How it works
+
+Using the provided admin API key, Infisical will attempt to create child API keys with the specified permissions. 
+New keys will ge generated every time a rotation occurs. Behind the scenes, Infisical uses the [SendGrid API](https://docs.sendgrid.com/api-reference/api-keys/create-api-keys) to generate new API keys.
 
 ## Rotation Configuration
 
-1. Head over to Secret Rotation configuration page of your project by clicking on side bar `Secret Rotation`
-2. Click on `Twilio SendGrid Card`
-3. Provide the inputs
-	- Admin API Key: 
-		SendGrid admin key to create lower scoped API keys.
-	- API Key Scopes
-		SendGrid generated API Key's scopes. For more info refer [this doc](https://docs.sendgrid.com/api-reference/api-key-permissions/api-key-permissions)
+<Steps>
+  <Step title="Open Secret Rotation Page">
+	Head over to Secret Rotation configuration page of your project by clicking on `Secret Rotation` in the left side bar 
+  </Step>
+  <Step title="Click on Twilio SendGrid Card" />
+  <Step title="Provide the inputs">
+	<ParamField path="Admin API Key" type="string" required>
+		SendGrid admin API key with permission to create child scoped API keys.
+	</ParamField>
 
-4. Final step
-	- Select `Environment`, `Secret Path` and `Interval` to rotate the secrets
-	- Finally select the secrets in your provided board to replace with new secret after each rotation
-	- Your done and good to go.
-
-Now your output mapped secret value will be replaced periodically by SendGrid.
+	<ParamField path="Admin API Key" type="array" required>
+		The permissions that the newly generated API keys will have. To view possible permissions, visit [this documentation](https://docs.sendgrid.com/api-reference/api-key-permissions/api-key-permissions).
+		Permissions must be entered as a list of strings. 
 		
+		Example: `["user.profile.read", "user.profile.update"]`
+	</ParamField>
+  </Step>
+  <Step title="Configure the output secret mapping">
+  	When a secret rotation is successful, the updated values needs to be saved to an existing key(s) in your project. 
+	<ParamField path="Environment" type="string" required>
+		The environment where the rotated credentials should be mapped to.
+	</ParamField>
+
+	<ParamField path="Secret Path" type="string" required>
+		The secret path where the rotated credentials should be mapped to.
+	</ParamField>
+
+	<ParamField path="Interval" type="number" required>
+		What interval should the credentials be rotated in days.
+	</ParamField>
+
+	<ParamField path="API KEY" type="string" required>
+		Select an existing select key where the newly rotated API key will get saved to.
+	</ParamField>
+  </Step>
+</Steps>
+
+Now your output mapped secret value will be replaced periodically by SendGrid.	

docs/integrations/platforms/kubernetes.mdx

@@ -12,7 +12,7 @@ The operator continuously updates secrets and can also reload dependent deployme
 
 ## Install Operator
 
-The operator can be install via [Helm](helm.sh) or [kubectl](https://github.com/kubernetes/kubectl)
+The operator can be install via [Helm](https://helm.sh) or [kubectl](https://github.com/kubernetes/kubectl)
 
 <Tabs>
 	 <Tab title="Helm (recommended)">
@@ -61,23 +61,38 @@ Once you have installed the operator to your cluster, you'll need to create a `I
 apiVersion: secrets.infisical.com/v1alpha1
 kind: InfisicalSecret
 metadata:
-  # Name of of this InfisicalSecret resource
-  name: infisicalsecret-sample
+    name: infisicalsecret-sample
+    labels:
+        label-to-be-passed-to-managed-secret: sample-value
+    annotations:
+        example.com/annotation-to-be-passed-to-managed-secret: "sample-value"
 spec:
-  # The host that should be used to pull secrets from. If left empty, the value specified in Global configuration will be used
-  hostAPI: https://app.infisical.com/api
-  resyncInterval: 60
-  authentication:
-    serviceToken:
-      serviceTokenSecretReference:
-        secretName: service-token
+    hostAPI: https://app.infisical.com/api
+    resyncInterval: 10
+    authentication:
+        # Make sure to only have 1 authentication method defined, serviceToken/universalAuth.
+        # If you have multiple authentication methods defined, it may cause issues.
+        universalAuth:
+            secretsScope:
+                projectSlug: <project-slug>
+                envSlug: <env-slug> # "dev", "staging", "prod", etc..
+                secretsPath: "<secrets-path>" # Root is "/"
+            credentialsRef:
+                secretName: universal-auth-credentials
+                secretNamespace: default
+
+        serviceToken:
+            serviceTokenSecretReference:
+                secretName: service-token
+                secretNamespace: default
+            secretsScope:
+                envSlug: <env-slug>
+                secretsPath: <secrets-path> # Root is "/"
+
+    managedSecretReference:
+        secretName: managed-secret
         secretNamespace: default
-      secretsScope:
-        envSlug: dev
-        secretsPath: "/"
-  managedSecretReference:
-    secretName: managed-secret # <-- the name of kubernetes secret that will be created
-    secretNamespace: default # <-- where the kubernetes secret should be created
+        # secretType: kubernetes.io/dockerconfigjson
 ```
 ### InfisicalSecret CRD properties
 
@@ -105,11 +120,60 @@ Default re-sync interval is every 1 minute.
 </Accordion>
 
 <Accordion title="authentication">
-  This block defines the method that will be used to authenticate with Infisical so that secrets can be fetched. Currently, only [Service Tokens](../../documentation/platform/token) can be used to authenticate with Infisical. 
+  This block defines the method that will be used to authenticate with Infisical so that secrets can be fetched
 </Accordion>
 
-<Accordion title="authentication.serviceToken.serviceTokenSecretReference">
-  The service token required to authenticate with Infisical needs to be stored in a Kubernetes secret. This block defines the reference to the name and name space of secret that stores this service token. 
+<Accordion title="authentication.universalAuth">
+  The universal machine identity authentication method is used to authenticate with Infisical. The client ID and client secret needs to be stored in a Kubernetes secret. This block defines the reference to the name and namespace of secret that stores these credentials.
+
+  <Steps>
+    <Step title="Create a machine identity">
+      You need to create a machine identity, and give it access to the project(s) you want to interact with. You can [read more about machine identities here](/documentation/platform/identities/universal-auth).
+    </Step>
+    <Step title="Create Kubernetes secret containing machine identity credentials">
+      Once you have created your machine identity and added it to your project(s), you will need to create a Kubernetes secret containing the identity credentials.
+      To quickly create a Kubernetes secret containing the identity credentials, you can run the command below.
+      
+      Make sure you replace `<your-identity-client-id>` with the identity client ID and `<your-identity-client-secret>` with the identity client secret.
+
+      ``` bash
+        kubectl create secret generic universal-auth-credentials --from-literal=clientId="<your-identity-client-id>" --from-literal=clientSecret="<your-identity-client-secret>"
+      ```
+    </Step>
+
+    <Step title="Add reference for the Kubernetes secret containing the identity credentials">
+      Once the secret is created, add the `secretName` and `secretNamespace` of the secret that was just created under `authentication.universalAuth.credentialsRef` field in the InfisicalSecret resource.
+    </Step>
+  </Steps>
+
+
+
+  <Info>
+    Make sure to also populate the `secretsScope` field with the project slug _`projectSlug`_, environment slug _`envSlug`_, and secrets path _`secretsPath`_ that you want to fetch secrets from. Please see the example below.
+  </Info>
+
+  ## Example
+  ```yaml
+  apiVersion: secrets.infisical.com/v1alpha1
+  kind: InfisicalSecret
+  metadata:
+    name: infisicalsecret-sample-crd
+  spec:
+    authentication:
+        universalAuth:
+            secretsScope:
+                projectSlug: <project-slug> # <-- project slug
+                envSlug: <env-slug> # "dev", "staging", "prod", etc..
+                secretsPath: "<secrets-path>" # Root is "/"
+            credentialsRef:
+                secretName: universal-auth-credentials # <-- name of the Kubernetes secret that stores our machine identity credentials
+                secretNamespace: default # <-- namespace of the Kubernetes secret that stores our machine identity credentials
+    ...
+  ```
+</Accordion>
+
+<Accordion title="authentication.serviceToken">
+  The service token required to authenticate with Infisical needs to be stored in a Kubernetes secret. This block defines the reference to the name and namespace of secret that stores this service token. 
   Follow the instructions below to create and store the service token in a Kubernetes secrets and reference it in your CRD.
 
   #### 1. Generate service token 
@@ -122,13 +186,17 @@ Default re-sync interval is every 1 minute.
   To quickly create a Kubernetes secret containing the generated service token, you can run the command below. Make sure you replace `<your-service-token-here>` with your service token.
 
   ``` bash
-  kubectl create secret generic service-token --from-literal=infisicalToken=<your-service-token-here> 
+  kubectl create secret generic service-token --from-literal=infisicalToken="<your-service-token-here>"
   ```
 
   #### 3. Add reference for the Kubernetes secret containing service token 
 
   Once the secret is created, add the name and namespace of the secret that was just created under `authentication.serviceToken.serviceTokenSecretReference` field in the InfisicalSecret resource.
 
+  <Info>
+    Make sure to also populate the `secretsScope` field with the, environment slug _`envSlug`_, and secrets path _`secretsPath`_ that you want to fetch secrets from. Please see the example below.
+  </Info>
+
   ## Example
   ```yaml
   apiVersion: secrets.infisical.com/v1alpha1
@@ -141,25 +209,13 @@ Default re-sync interval is every 1 minute.
         serviceTokenSecretReference:
           secretName: service-token # <-- name of the Kubernetes secret that stores our service token
           secretNamespace: option # <-- namespace of the Kubernetes secret that stores our service token
+        secretsScope:
+          envSlug: <env-slug> # "dev", "staging", "prod", etc..
+          secretsPath: <secrets-path> # Root is "/"
     ...
   ```
 </Accordion>
 
-<Accordion title="authentication.serviceToken.secretsScope">
-  This block defines the scope of what secrets should be fetched. This is needed as your service token can have access to multiple folders and environments.
-  A scope is defined by `envSlug` and `secretsPath`. 
-  
-  #### envSlug
-
-  This refers to the short hand name of an environment. For example for the `development` environment the environment slug is `dev`. You can locate the slug of your environment by heading to your project settings in the Infisical dashboard.
-
-  #### secretsPath
-  
-  secretsPath is the path to the secret in the given environment. For example a path of `/` would refer to the root of the environment whereas `/folder1` would refer to the secrets in folder1 from the root.
-
-  Both fields are required.
-</Accordion>
-
 <Accordion title="managedSecretReference">
 The `managedSecretReference` field is used to define the target location for storing secrets retrieved from an Infisical project. 
 This field requires specifying both the name and namespace of the Kubernetes secret that will hold these secrets. 

frontend/.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
   },
   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",
@@ -72,7 +73,6 @@ module.exports = {
     ],
     "@typescript-eslint/no-non-null-assertion": "off",
     "simple-import-sort/exports": "warn",
-    "@typescript-eslint/no-empty-function": "off",
     "simple-import-sort/imports": [
       "warn",
       {

frontend/.storybook/main.js

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

frontend/src/components/analytics/posthog.ts

@@ -6,7 +6,7 @@ import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from "../utilities/config";
 
 export const initPostHog = () => {
   // @ts-ignore
-  console.log("Hi there 👋")
+  console.log("Hi there 👋");
   try {
     if (typeof window !== "undefined") {
       // @ts-ignore
@@ -19,7 +19,7 @@ export const initPostHog = () => {
 
     return posthog;
   } catch (e) {
-    console.log("posthog err", e)
+    console.log("posthog err", e);
   }
 
   return undefined;

frontend/src/components/basic/Error.tsx

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

frontend/src/components/basic/InputField.tsx

@@ -39,16 +39,16 @@ const InputField = ({
 
   if (isStatic === true) {
     return (
-      <div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
-        <p className="text-sm font-semibold text-gray-400 mb-0.5">{label}</p>
-        {text && <p className="text-xs text-gray-400 mb-2">{text}</p>}
+      <div className="my-2 flex w-full max-w-md flex-col justify-center md:my-4">
+        <p className="mb-0.5 text-sm font-semibold text-gray-400">{label}</p>
+        {text && <p className="mb-2 text-xs text-gray-400">{text}</p>}
         <input
           onChange={(e) => onChangeHandler(e.target.value)}
           type={type}
           placeholder={placeholder}
           value={value}
           required={isRequired}
-          className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
+          className="text-md min-w-16 w-full rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none"
           name={name}
           readOnly
           autoComplete={autoComplete}
@@ -58,12 +58,12 @@ const InputField = ({
     );
   }
   return (
-    <div className="flex-col w-full">
-      <div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
-        <p className="text-sm font-semibold mr-1">{label}</p>
+    <div className="w-full flex-col">
+      <div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
+        <p className="mr-1 text-sm font-semibold">{label}</p>
       </div>
       <div
-        className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+        className={`group relative flex w-full max-w-2xl flex-col justify-center border ${
           error ? "border-red" : "border-mineshaft-500"
         } rounded-md`}
       >
@@ -75,11 +75,11 @@ const InputField = ({
           required={isRequired}
           className={`${
             blurred
-              ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
+              ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
               : ""
           } ${
             error ? "focus:ring-red/50" : "focus:ring-primary/50"
-          } relative peer bg-mineshaft-900 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
+          } 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`}
           name={name}
           spellCheck="false"
           autoComplete={autoComplete}
@@ -91,7 +91,7 @@ const InputField = ({
             onClick={() => {
               setPasswordVisible(!passwordVisible);
             }}
-            className="absolute self-end mr-3 text-gray-400 cursor-pointer"
+            className="absolute mr-3 cursor-pointer self-end text-gray-400"
           >
             {passwordVisible ? (
               <FontAwesomeIcon icon={faEyeSlash} />
@@ -101,7 +101,7 @@ const InputField = ({
           </button>
         )}
         {blurred && (
-          <div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
+          <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden text-clip rounded-md text-gray-400/50 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
             <p className="ml-2" />
             {value
               .split("")
@@ -109,7 +109,7 @@ const InputField = ({
               .map(() => (
                 <FontAwesomeIcon
                   key={guidGenerator()}
-                  className="text-xxs mx-0.5"
+                  className="mx-0.5 text-xxs"
                   icon={faCircle}
                 />
               ))}
@@ -121,7 +121,7 @@ const InputField = ({
 						</div>
 					)} */}
       </div>
-      {error && <p className="text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs">{errorText}</p>}
+      {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
     </div>
   );
 };

frontend/src/components/basic/Listbox.tsx

@@ -34,19 +34,19 @@ const ListBox = ({
     <Listbox value={isSelected} onChange={onChange}>
       <div className="relative">
         <Listbox.Button
-          className={`text-gray-400 relative ${
+          className={`relative text-gray-400 ${
             isFull ? "w-full" : "w-52"
-          } cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
+          } 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 cursor-pointer block truncate font-semibold text-gray-300">
+            <span className="ml-1 block cursor-pointer truncate font-semibold text-gray-300">
               {" "}
               {isSelected}
             </span>
           </div>
           {data && (
-            <div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <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>
           )}
@@ -58,16 +58,16 @@ const ListBox = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="border border-mineshaft-700 z-[70] p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm no-scrollbar no-scrollbar::-webkit-scrollbar">
+            <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 }) =>
-                    `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
-                      selected ? "bg-white/10 text-gray-400 font-bold" : ""
+                    `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
-                        ? "bg-white/5 text-mineshaft-200 cursor-pointer"
+                        ? "cursor-pointer bg-white/5 text-mineshaft-200"
                         : "text-gray-400"
                     } `
                   }
@@ -83,7 +83,7 @@ const ListBox = ({
                         {person}
                       </span>
                       {selected ? (
-                        <span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
+                        <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}
@@ -92,9 +92,9 @@ const ListBox = ({
                 </Listbox.Option>
               ))}
               {buttonAction && (
-                <button type="button" onClick={buttonAction} className="cursor-pointer w-full">
-                  <div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
-                    <span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
+                <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

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

@@ -43,7 +43,7 @@ const Button = ({
   loading,
   icon,
   iconDisabled,
-  type = "button",
+  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
@@ -53,9 +53,13 @@ const Button = ({
     "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-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 border border-primary-400 opacity-80 hover:opacity-100",
     (color === "primary" || !color) && !activityStatus && "bg-primary",
     color === "red" && "bg-red-800 border border-red",
 
@@ -78,7 +82,9 @@ const Button = ({
     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" : "",
+    activityStatus && color !== "red" && color !== "mineshaft" && color !== "none"
+      ? "group-hover:text-black"
+      : "",
 
     size === "icon" && "flex items-center justify-center"
   );
@@ -103,7 +109,7 @@ const Button = ({
         <div
           className={`${
             loading === true ? "opacity-100" : "opacity-0"
-          } absolute flex items-center px-3 bg-primary duration-200 w-full`}
+          } absolute flex w-full items-center bg-primary px-3 duration-200`}
         >
           <Image
             src="/images/loading/loadingblack.gif"
@@ -116,7 +122,7 @@ const Button = ({
         {icon && (
           <FontAwesomeIcon
             icon={icon}
-            className={`flex my-auto font-extrabold ${size === "icon-sm" ? "text-sm" : "text-sm"} ${
+            className={`my-auto flex font-extrabold ${size === "icon-sm" ? "text-sm" : "text-sm"} ${
               (text || textDisabled) && "mr-2"
             }`}
           />
@@ -124,7 +130,7 @@ const Button = ({
         {iconDisabled && (
           <FontAwesomeIcon
             icon={iconDisabled as IconProp}
-            className={`flex my-auto font-extrabold ${size === "icon-sm" ? "text-sm" : "text-md"} ${
+            className={`my-auto flex font-extrabold ${size === "icon-sm" ? "text-sm" : "text-md"} ${
               (text || textDisabled) && "mr-2"
             }`}
           />

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

@@ -64,7 +64,7 @@ const AddProjectMemberDialog = ({
                   ) : (
                     <Dialog.Title
                       as="h3"
-                      className="z-50 text-lg font-medium text-mineshaft-300 mb-4"
+                      className="z-50 mb-4 text-lg font-medium text-mineshaft-300"
                     >
                       {t("section.members.add-dialog.already-all-invited")}
                     </Dialog.Title>
@@ -127,7 +127,9 @@ const AddProjectMemberDialog = ({
                       </div>
                     ) : (
                       <Button
-                        onButtonPressed={() => router.push(`/org/${localStorage.getItem("orgData.id")}/members`)}
+                        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"

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

@@ -28,11 +28,11 @@ export const AddUpdateEnvironmentDialog = ({
   onCreateSubmit,
   onEditSubmit,
   initialValues,
-  isEditMode,
+  isEditMode
 }: Props) => {
   const [formInput, setFormInput] = useState<FormFields>({
     name: "",
-    slug: "",
+    slug: ""
   });
 
   // This use effect can be removed when the unmount is happening from outside the component
@@ -50,7 +50,7 @@ export const AddUpdateEnvironmentDialog = ({
     e.preventDefault();
     const data = {
       name: formInput.name,
-      slug: formInput.slug.toLowerCase(),
+      slug: formInput.slug.toLowerCase()
     };
     if (isEditMode) {
       onEditSubmit(data);
@@ -62,75 +62,70 @@ export const AddUpdateEnvironmentDialog = ({
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative z-20' onClose={onClose}>
+        <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'
+            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' />
+            <div className="fixed inset-0 bg-black bg-opacity-70" />
           </Transition.Child>
 
-          <div className='fixed inset-0 overflow-y-auto z-50'>
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+          <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'
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
-                  <Dialog.Title
-                    as='h3'
-                    className='text-lg font-medium leading-6 text-gray-400'
-                  >
-                    {isEditMode
-                      ? "Update environment"
-                      : "Create a new environment"}
+                <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='max-h-28 mt-4'>
+                    <div className="mt-4 max-h-28">
                       <InputField
-                        label='Environment Name'
+                        label="Environment Name"
                         onChangeHandler={(val) => onInputChange("name", val)}
-                        type='varName'
+                        type="varName"
                         value={formInput.name}
-                        placeholder=''
+                        placeholder=""
                         isRequired
                         // error={error.length > 0}
                         // errorText={error}
                       />
                     </div>
-                    <div className='max-h-28 mt-4'>
+                    <div className="mt-4 max-h-28">
                       <InputField
-                        label='Environment Slug'
+                        label="Environment Slug"
                         onChangeHandler={(val) => onInputChange("slug", val)}
-                        type='varName'
+                        type="varName"
                         value={formInput.slug}
-                        placeholder=''
+                        placeholder=""
                         isRequired
                         // error={error.length > 0}
                         // errorText={error}
                       />
                     </div>
-                    <p className='text-xs text-gray-500 mt-2'>
+                    <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'>
+                    <div className="mt-4 max-w-min">
                       <Button
                         onButtonPressed={() => null}
-                        type='submit'
-                        color='mineshaft'
+                        type="submit"
+                        color="mineshaft"
                         text={isEditMode ? "Update" : "Create"}
                         active={formInput.name !== "" && formInput.slug !== ""}
-                        size='md'
+                        size="md"
                       />
                     </div>
                   </form>

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

@@ -13,76 +13,63 @@ type Props = {
   orgName: string;
 };
 
-const AddUserDialog = ({
-  isOpen,
-  closeModal,
-  submitModal,
-  email,
-  setEmail,
-  orgName,
-}: Props) => {
+const AddUserDialog = ({ isOpen, closeModal, submitModal, email, setEmail, orgName }: Props) => {
   const submit = () => {
     submitModal(email);
   };
 
   return (
-    <div className='z-50'>
+    <div className="z-50">
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative' onClose={closeModal}>
+        <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'
+            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' />
+            <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'>
+          <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'
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-lg transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className="w-full max-w-lg 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 z-50'
+                    as="h3"
+                    className="z-50 text-lg font-medium leading-6 text-gray-400"
                   >
                     Invite others to {orgName}
                   </Dialog.Title>
-                  <div className='mt-2 mb-4'>
-                    <p className='text-sm text-gray-500'>
-                      An invite is specific to an email address and expires
-                      after 1 day. For security reasons, you will need to
-                      separately add members to projects.
+                  <div className="mt-2 mb-4">
+                    <p className="text-sm text-gray-500">
+                      An invite is specific to an email address and expires after 1 day. For
+                      security reasons, you will need to separately add members to projects.
                     </p>
                   </div>
-                  <div className='max-h-28'>
+                  <div className="max-h-28">
                     <InputField
-                      label='Email'
+                      label="Email"
                       onChangeHandler={setEmail}
-                      type='varName'
+                      type="varName"
                       value={email}
-                      placeholder=''
+                      placeholder=""
                       isRequired
                     />
                   </div>
-                  <div className='mt-4 max-w-max'>
-                    <Button
-                      onButtonPressed={submit}
-                      color='mineshaft'
-                      text='Invite'
-                      size='md'
-                    />
+                  <div className="mt-4 max-w-max">
+                    <Button onButtonPressed={submit} color="mineshaft" text="Invite" size="md" />
                   </div>
                 </Dialog.Panel>
                 {/* <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">

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

@@ -5,7 +5,6 @@ import Button from "../buttons/Button";
 import InputField from "../InputField";
 import { Checkbox } from "../table/Checkbox";
 
-
 type Props = {
   isOpen: boolean;
   closeModal: () => void;
@@ -26,8 +25,8 @@ const AddWorkspaceDialog = ({
   workspaceName,
   setWorkspaceName,
   error,
-  loading,
-}:Props) => {
+  loading
+}: Props) => {
   const [addAllUsers, setAddAllUsers] = useState(true);
   const submit = () => {
     submitModal(workspaceName, addAllUsers);
@@ -60,11 +59,8 @@ const AddWorkspaceDialog = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-400"
-                  >
+                <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">
@@ -72,7 +68,7 @@ const AddWorkspaceDialog = ({
                       This project will contain your secrets and configs.
                     </p>
                   </div>
-                  <div className="max-h-28 mt-4">
+                  <div className="mt-4 max-h-28">
                     <InputField
                       label="Project Name"
                       onChangeHandler={setWorkspaceName}
@@ -84,10 +80,7 @@ const AddWorkspaceDialog = ({
                     />
                   </div>
                   <div className="mt-4 ml-1">
-                    <Checkbox
-                      addAllUsers={addAllUsers}
-                      setAddAllUsers={setAddAllUsers}
-                    />
+                    <Checkbox addAllUsers={addAllUsers} setAddAllUsers={setAddAllUsers} />
                   </div>
                   <div className="mt-4 max-w-min">
                     <Button

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

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

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

@@ -5,13 +5,13 @@ 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 
-}
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
 
 export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
@@ -45,7 +45,7 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker border border-mineshaft-600 p-6 text-left align-middle shadow-xl transition-all">
+                <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>
@@ -57,14 +57,14 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
                   <div className="mt-6 flex justify-start">
                     <button
                       type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-red-500 opacity-80 hover:opacity-100 px-4 py-2 text-sm font-medium text-bunker-100 text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      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="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 hover:bg-mineshaft-500 hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      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

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

@@ -10,66 +10,55 @@ type Props = {
   userIdToBeDeleted: string;
 };
 
-const DeleteUserDialog = ({
-  isOpen,
-  closeModal,
-  submitModal,
-  userIdToBeDeleted,
-}: Props) => {
+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}>
+        <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'
+            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' />
+            <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'>
+          <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'
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
-                  <Dialog.Title
-                    as='h3'
-                    className='text-lg font-medium leading-6 text-gray-400'
-                  >
-                    Are you sure you want to remove this user from the
-                    workspace?
+                <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 className="mt-2">
+                    <p className="text-sm text-gray-500">This action is irrevertible.</p>
                   </div>
-                  <div className='mt-6'>
+                  <div className="mt-6">
                     <button
-                      type='button'
-                      className='inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      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='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      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

frontend/src/components/basic/popups/BottomRightPopup.tsx

@@ -34,27 +34,27 @@ const BottonRightPopup = ({
 }: PopupProps): JSX.Element => {
   return (
     <div
-      className="z-[100] drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
+      className="absolute bottom-0 right-0 z-[100] mr-6 mb-6 flex max-w-xl flex-col items-start rounded-md border border-gray-600/50 bg-bunker pt-3 pb-4 text-gray-200 drop-shadow-xl"
       role="alert"
     >
-      <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
-        <div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
+      <div className="flex w-full flex-row items-center justify-between border-b border-gray-600/70 px-6 pb-3">
+        <div className="mr-2 mt-0.5 flex flex-row text-xl font-bold">
           <div>{titleText}</div>
           <div className="ml-2.5">{emoji}</div>
         </div>
         <button className="mt-1" onClick={() => setCheckDocsPopUpVisible(false)} type="button">
           <FontAwesomeIcon
             icon={faXmark}
-            className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer"
+            className="cursor-pointer text-2xl text-gray-400 duration-200 hover:text-red"
           />
         </button>
       </div>
-      <div className="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">{textLine1}</div>
-      <div className="block sm:inline mb-4 px-6">{textLine2}</div>
-      <div className="flex flex-row px-6 w-full">
+      <div className="mt-4 mb-0.5 block px-6 text-gray-300 sm:inline">{textLine1}</div>
+      <div className="mb-4 block px-6 sm:inline">{textLine2}</div>
+      <div className="flex w-full flex-row px-6">
         {/* eslint-disable-next-line react/jsx-no-target-blank */}
         <a
-          className="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
+          className="flex w-full justify-center rounded-md bg-white/10 p-2 font-bold duration-200 hover:bg-primary hover:text-black"
           href={buttonLink}
           target="_blank"
           rel="noopener"

frontend/src/components/basic/table/Checkbox.tsx

@@ -9,7 +9,7 @@ export const Checkbox = ({ addAllUsers, setAddAllUsers }: Props) => (
     {addAllUsers === true ? (
       <input
         type="checkbox"
-        className="accent-primary h-4 w-4"
+        className="h-4 w-4 accent-primary"
         checked
         readOnly
         onClick={() => setAddAllUsers(!addAllUsers)}
@@ -20,12 +20,12 @@ export const Checkbox = ({ addAllUsers, setAddAllUsers }: Props) => (
         role="button"
         tabIndex={0}
         aria-label="add all users"
-        className="h-4 w-4 bg-bunker border border-gray-600 rounded-sm"
+        className="h-4 w-4 rounded-sm border border-gray-600 bg-bunker"
         onClick={() => setAddAllUsers(!addAllUsers)}
       />
     )}
 
-    <label className="ml-2 text-gray-500 text-sm">
+    <label className="ml-2 text-sm text-gray-500">
       Add all members of my organization to this project.
     </label>
   </div>

frontend/src/components/context/Notifications/Notification.tsx

@@ -36,25 +36,28 @@ const Notification = ({ notification, clearNotification }: NotificationProps) =>
 
   return (
     <div
-      className="relative w-full flex items-center justify-between px-6 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-mineshaft-700 mb-3 right-3"
+      className="pointer-events-auto relative right-3 mb-3 flex w-full items-center justify-between rounded-md border border-bunker-500 bg-mineshaft-700 px-6 py-4"
       role="alert"
     >
       {notification.type === "error" && (
-        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md" />
+        <div className="absolute top-0 left-0 h-1 w-full rounded-t-md bg-red" />
       )}
       {notification.type === "success" && (
-        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md" />
+        <div className="absolute top-0 left-0 h-1 w-full rounded-t-md bg-green" />
       )}
       {notification.type === "info" && (
-        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md" />
+        <div className="absolute top-0 left-0 h-1 w-full rounded-t-md bg-yellow" />
       )}
-      <p className="text-bunker-200 text-md font-base mt-0.5">{notification.text}</p>
+      <p className="text-md font-base mt-0.5 text-bunker-200">{notification.text}</p>
       <button
         type="button"
         className="rounded-lg"
         onClick={() => clearNotification(notification.text)}
       >
-        <FontAwesomeIcon className="absolute right-2 top-3 text-bunker-300 pl-2 w-4 h-4 hover:text-white" icon={faXmark} />
+        <FontAwesomeIcon
+          className="absolute right-2 top-3 h-4 w-4 pl-2 text-bunker-300 hover:text-white"
+          icon={faXmark}
+        />
       </button>
     </div>
   );

frontend/src/components/context/Notifications/Notifications.tsx

@@ -11,7 +11,7 @@ const Notifications = ({ notifications, clearNotification }: NoticationsProps) =
   }
 
   return (
-    <div className="hidden fixed z-50 md:flex md:flex-col-reverse gap-y-2 w-96 h-full right-2 bottom-2 pointer-events-none">
+    <div className="pointer-events-none fixed right-2 bottom-2 z-[100] hidden h-full w-96 gap-y-2 md:flex md:flex-col-reverse">
       {notifications.map((notif) => (
         <Notification key={notif.text} notification={notif} clearNotification={clearNotification} />
       ))}

frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx

@@ -30,9 +30,9 @@ const ConfirmEnvOverwriteModal = ({
         onClose={onClose}
       >
         <div className="flex flex-col gap-2">
-          <p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
+          <p className="text-gray-400">Your file contains the following duplicate secrets:</p>
           <p className="text-sm text-gray-500">{duplicateKeys.join(", ")}</p>
-          <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
+          <p className="text-md text-gray-400">Are you sure you want to overwrite these secrets?</p>
         </div>
       </ModalContent>
     </Modal>

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -1,5 +1,10 @@
 import { memo, SyntheticEvent, useRef } from "react";
-import { faCircle, faCodeBranch, faExclamationCircle, faEye } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCircle,
+  faCodeBranch,
+  faExclamationCircle,
+  faEye
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import guidGenerator from "../utilities/randomId";
@@ -31,8 +36,8 @@ interface DashboardInputFieldProps {
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
  * @param {boolean} obj.isDuplicate - if the key name is duplicated
  * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
- * 
- * 
+ *
+ *
  * @returns
  */
 
@@ -61,29 +66,31 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div className={`relative flex-col w-full h-10 ${
-        error && value !== "" ? "bg-red/[0.15]" : ""
-      } ${
-        isSideBarOpen && "bg-mineshaft-700 duration-200"
-      }`}>
+      <div
+        className={`relative h-10 w-full flex-col ${error && value !== "" ? "bg-red/[0.15]" : ""} ${
+          isSideBarOpen && "bg-mineshaft-700 duration-200"
+        }`}
+      >
         <div
-          className={`group relative flex flex-col justify-center items-center h-full ${
+          className={`group relative flex h-full flex-col items-center justify-center ${
             error ? "w-max" : "w-full"
           }`}
         >
           <input
-            onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)}
+            onChange={(e) =>
+              onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)
+            }
             type={type}
             value={value}
-            className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
+            className={`ph-no-capture min-w-16 peer z-10 h-full w-full bg-transparent px-2 font-mono text-sm caret-bunker-200 outline-none ${
               error ? "text-red-600 focus:text-red-500" : "text-bunker-300 focus:text-bunker-100"
             } duration-200`}
             spellCheck="false"
           />
         </div>
         {startsWithNumber && (
-          <div className='absolute right-2 top-2 text-red z-50'>
-            <HoverObject 
+          <div className="absolute right-2 top-2 z-50 text-red">
+            <HoverObject
               text="Secret names should not start with a number"
               icon={faExclamationCircle}
               color="red"
@@ -91,33 +98,44 @@ const DashboardInputField = ({
           </div>
         )}
         {isDuplicate && value !== "" && !startsWithNumber && (
-          <div className='absolute right-2 top-2 text-red z-50'>
-            <HoverObject 
+          <div className="absolute right-2 top-2 z-50 text-red">
+            <HoverObject
               text="Secret names should be unique"
               icon={faExclamationCircle}
               color="red"
             />
           </div>
         )}
-        {!error && <div className={`absolute right-0 top-0 text-red z-50 bg-mineshaft-800 group-hover:bg-mineshaft-700 ${
-          overrideEnabled ? "visible" : "invisible group-hover:visible"
-        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
-          <button type="button" onClick={() => {
-            if (modifyValueOverride) {
-              if (overrideEnabled === false) {
-                modifyValueOverride("", id);
-              } else {
-                modifyValueOverride(undefined, id);
-              }
-            }
-          }}>
-            <HoverObject 
-              text={overrideEnabled ? "This secret is overriden with your personal value" : "You can override this secret with a personal value"}
-              icon={faCodeBranch}
-              color={overrideEnabled ? "primary" : "bunker-400"}
-            />
-          </button>
-        </div>}
+        {!error && (
+          <div
+            className={`absolute right-0 top-0 z-50 bg-mineshaft-800 text-red group-hover:bg-mineshaft-700 ${
+              overrideEnabled ? "visible" : "invisible group-hover:visible"
+            } duration-0 flex h-10 cursor-pointer items-center px-2`}
+          >
+            <button
+              type="button"
+              onClick={() => {
+                if (modifyValueOverride) {
+                  if (overrideEnabled === false) {
+                    modifyValueOverride("", id);
+                  } else {
+                    modifyValueOverride(undefined, id);
+                  }
+                }
+              }}
+            >
+              <HoverObject
+                text={
+                  overrideEnabled
+                    ? "This secret is overriden with your personal value"
+                    : "You can override this secret with a personal value"
+                }
+                icon={faCodeBranch}
+                color={overrideEnabled ? "primary" : "bunker-400"}
+              />
+            </button>
+          </div>
+        )}
       </div>
     );
   }
@@ -127,20 +145,29 @@ const DashboardInputField = ({
 
     return (
       <PopoverObject text={value || ""} onChangeHandler={onChangeHandler} id={id}>
-        <div title={value} className={`relative flex-col w-full h-10 overflow-hidden ${
-          isSideBarOpen && "bg-mineshaft-700 duration-200"
-        }`}>
+        <div
+          title={value}
+          className={`relative h-10 w-full flex-col overflow-hidden ${
+            isSideBarOpen && "bg-mineshaft-700 duration-200"
+          }`}
+        >
           <div
-            className={`group relative flex flex-col justify-center items-center h-full ${
+            className={`group relative flex h-full flex-col items-center justify-center ${
               error ? "w-max" : "w-full"
             }`}
           >
-            {value?.split("\n")[0] ? <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
-              {value?.split("\n")[0]}
-            </span> : <span className='text-bunker-400'>-</span> }
-            {value?.split("\n")[1] && <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
-              {value?.split("\n")[1]}
-            </span>}
+            {value?.split("\n")[0] ? (
+              <span className="ph-no-capture min-w-16 placeholder w-full truncate break-all bg-transparent px-2 text-xs leading-tight text-bunker-300 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent">
+                {value?.split("\n")[0]}
+              </span>
+            ) : (
+              <span className="text-bunker-400">-</span>
+            )}
+            {value?.split("\n")[1] && (
+              <span className="ph-no-capture min-w-16 placeholder w-full truncate break-all bg-transparent px-2 text-xs leading-tight text-bunker-300 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent">
+                {value?.split("\n")[1]}
+              </span>
+            )}
           </div>
         </div>
       </PopoverObject>
@@ -148,10 +175,10 @@ const DashboardInputField = ({
   }
   if (type === "value") {
     return (
-      <div className="flex-col w-full">
-        <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+      <div className="w-full flex-col">
+        <div className="group relative flex	w-full flex-col justify-center whitespace-pre">
           {overrideEnabled === true && (
-            <div className="bg-primary-500 rounded-sm absolute top-[0.1rem] right-[0.1rem] z-0 w-min text-xxs px-1 text-black opacity-80">
+            <div className="absolute top-[0.1rem] right-[0.1rem] z-0 w-min rounded-sm bg-primary-500 px-1 text-xxs text-black opacity-80">
               Override enabled
             </div>
           )}
@@ -160,20 +187,20 @@ const DashboardInputField = ({
             onChange={(e) => onChangeHandler(e.target.value, id)}
             onScroll={syncScroll}
             className={`${
-              blurred
-                ? "text-transparent focus:text-transparent active:text-transparent"
-                : ""
-            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+              blurred ? "text-transparent focus:text-transparent active:text-transparent" : ""
+            } ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none duration-200 no-scrollbar`}
             spellCheck="false"
           />
           <div
             ref={ref}
             className={`${
               blurred && !overrideEnabled
-                ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200"
+                ? "text-bunker-800 duration-200 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400"
                 : ""
             } ${overrideEnabled ? "text-primary-300" : "text-gray-400"}
-            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? "invisible" : "visible"} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            absolute z-0 flex flex-row whitespace-pre font-mono ${
+              blurred ? "invisible" : "visible"
+            } ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar mt-0.5 h-10 w-full overflow-x-scroll bg-transparent px-2 py-2 text-sm outline-none duration-100 no-scrollbar peer-focus:visible`}
           >
             {value?.split(REGEX).map((word) => {
               if (word.match(REGEX) !== null) {
@@ -203,20 +230,24 @@ const DashboardInputField = ({
             })}
           </div>
           {blurred && (
-            <div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
-              isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
-            } peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip`}>
-              <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+            <div
+              className={`peer absolute z-0 flex flex-row items-center justify-between pr-2 ${
+                isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
+              } h-10 w-full text-clip text-bunker-400 duration-100 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden`}
+            >
+              <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
                 {value?.split("").map(() => (
                   <FontAwesomeIcon
                     key={guidGenerator()}
-                    className="text-xxs mr-0.5"
+                    className="mr-0.5 text-xxs"
                     icon={faCircle}
                   />
                 ))}
-                {value?.split("").length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
+                {value?.split("").length === 0 && <span className="text-bunker-400/80">EMPTY</span>}
+              </div>
+              <div className="invisible z-[100] cursor-default group-hover:visible">
+                <FontAwesomeIcon icon={faEye} />
               </div>
-              <div className='invisible group-hover:visible cursor-default z-[100]'><FontAwesomeIcon icon={faEye} /></div>
             </div>
           )}
         </div>

frontend/src/components/dashboard/DeleteActionButton.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,32 +8,35 @@ import Button from "../basic/buttons/Button";
 type Props = {
   onSubmit: () => void;
   isPlain?: boolean;
-}
+};
 
 export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
   const { t } = useTranslation();
 
   return (
-    <div className={`${
-      !isPlain 
-      ? "bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2"
-      : "cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center"}`}>
-      {isPlain 
-      ? <div
-        onKeyDown={() => null}
-        role="button"
-        tabIndex={0}
-        onClick={onSubmit}
-        className="invisible group-hover:visible"
-      >
-        <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
-      </div>
-      : <Button
-        text={String(t("Delete"))}
-        color="red"
-        size="md"
-        onButtonPressed={onSubmit}
-      />}
+    <div
+      className={`${
+        !isPlain
+          ? "ml-2 h-[2.5rem] w-[4.5rem] rounded-md bg-[#9B3535] opacity-70 duration-200 hover:opacity-100"
+          : "justfy-center mr-2 flex h-[2.35rem] w-[1.5rem] cursor-pointer items-center"
+      }`}
+    >
+      {isPlain ? (
+        <div
+          onKeyDown={() => null}
+          role="button"
+          tabIndex={0}
+          onClick={onSubmit}
+          className="invisible group-hover:visible"
+        >
+          <FontAwesomeIcon
+            className="mt-0.5 pl-2 pr-6 text-lg text-bunker-300 hover:text-red"
+            icon={faXmark}
+          />
+        </div>
+      ) : (
+        <Button text={String(t("Delete"))} color="red" size="md" onButtonPressed={onSubmit} />
+      )}
     </div>
-  )
-}
+  );
+};

frontend/src/components/dashboard/DownloadSecretsMenu.tsx

@@ -18,7 +18,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
     <Menu as="div" className="relative inline-block text-left">
       <Menu.Button
         as="div"
-        className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+        className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
       >
         <Button color="mineshaft" size="icon-md" icon={faDownload} onButtonPressed={() => {}} />
       </Menu.Button>
@@ -31,7 +31,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute z-[90] drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+        <Menu.Items className="absolute right-0 z-[90] mt-0.5 w-[12rem] origin-top-right space-y-2 rounded-md border border-mineshaft-500 bg-bunker p-2 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none">
           <Menu.Item>
             <Button
               color="mineshaft"

frontend/src/components/navigation/NavHeader.tsx

@@ -56,7 +56,7 @@ export default function NavHeader({
 
   return (
     <div className="flex flex-row items-center pt-6">
-      <div className="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm text-black min-w-[1.25rem]">
+      <div className="mr-2 flex h-5 w-5 min-w-[1.25rem] items-center justify-center rounded-md bg-primary text-sm text-black">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link passHref legacyBehavior href={`/org/${currentOrg?.id}/overview`}>

frontend/src/components/navigation/NavHeaderSecrets.tsx

@@ -6,7 +6,6 @@ import { useOrganization, useWorkspace } from "@app/context";
 
 import { Select, SelectItem, Tooltip } from "../v2";
 
-
 /**
  * This is the component at the top of almost every page.
  * It shows how to navigate to a certain page.
@@ -39,10 +38,12 @@ export default function NavHeaderSecrets({
 }): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
-  const router = useRouter()
+  const router = useRouter();
 
   return (
-    <div className={`${!isSnapshot && "absolute"} ml-6 flex flex-row items-center pt-6 cursor-default`}>
+    <div
+      className={`${!isSnapshot && "absolute"} ml-6 flex cursor-default flex-row items-center pt-6`}
+    >
       <div className="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
         {currentOrg?.name?.charAt(0)}
       </div>
@@ -60,31 +61,39 @@ export default function NavHeaderSecrets({
         </>
       )}
       <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-      {pageName === "Secrets"
-      ? <a className="text-md font-medium text-primary/80 hover:text-primary" href={`${router.asPath.split("?")[0]}`}>{pageName}</a>
-      : <div className="text-md text-gray-400">{pageName}</div>}
-      {currentEnv &&
-      <>
-        <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-sm text-gray-400" />
-        <div className='pl-3 rounded-md hover:bg-bunker-100/10'>
-          <Tooltip content="Select environment">
-            <Select
-              value={userAvailableEnvs?.filter(uae => uae.name === currentEnv)[0]?.slug}
-              onValueChange={(value) => {
-                if (value && onEnvChange) onEnvChange(value);
-              }}
-              className="text-md pl-0 font-medium text-primary/80 hover:text-primary bg-transparent"
-              dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
-            >
-              {userAvailableEnvs?.map(({ name, slug }) => (
-                <SelectItem value={slug} key={slug}>
-                  {name}
-                </SelectItem>
-              ))}
-            </Select>
-          </Tooltip>
-        </div>
-      </>}
+      {pageName === "Secrets" ? (
+        <a
+          className="text-md font-medium text-primary/80 hover:text-primary"
+          href={`${router.asPath.split("?")[0]}`}
+        >
+          {pageName}
+        </a>
+      ) : (
+        <div className="text-md text-gray-400">{pageName}</div>
+      )}
+      {currentEnv && (
+        <>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-sm text-gray-400" />
+          <div className="rounded-md pl-3 hover:bg-bunker-100/10">
+            <Tooltip content="Select environment">
+              <Select
+                value={userAvailableEnvs?.filter((uae) => uae.name === currentEnv)[0]?.slug}
+                onValueChange={(value) => {
+                  if (value && onEnvChange) onEnvChange(value);
+                }}
+                className="text-md bg-transparent pl-0 font-medium text-primary/80 hover:text-primary"
+                dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
+              >
+                {userAvailableEnvs?.map(({ name, slug }) => (
+                  <SelectItem value={slug} key={slug}>
+                    {name}
+                  </SelectItem>
+                ))}
+              </Select>
+            </Tooltip>
+          </div>
+        </>
+      )}
     </div>
   );
 }

frontend/src/components/signup/CodeInputStep.tsx

@@ -3,9 +3,7 @@ import React, { useState } from "react";
 import ReactCodeInput from "react-code-input";
 import { useTranslation } from "react-i18next";
 
-import {
-  useSendVerificationEmail
-} from "@app/hooks/api";
+import { useSendVerificationEmail } from "@app/hooks/api";
 
 import Error from "../basic/Error";
 import { Button } from "../v2";
@@ -90,8 +88,8 @@ export default function CodeInputStep({
   return (
     <div className="mx-auto h-full w-full pb-4 md:px-8">
       <p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p>
-      <p className="text-md flex justify-center font-semibold my-1 text-bunker-200">{email} </p>
-      <div className="hidden md:block w-max min-w-[20rem] mx-auto">
+      <p className="text-md my-1 flex justify-center font-semibold text-bunker-200">{email} </p>
+      <div className="mx-auto hidden w-max min-w-[20rem] md:block">
         <ReactCodeInput
           name=""
           inputMode="tel"
@@ -102,7 +100,7 @@ export default function CodeInputStep({
           className="mt-6 mb-2"
         />
       </div>
-      <div className="block md:hidden w-max mt-4 mx-auto">
+      <div className="mx-auto mt-4 block w-max md:hidden">
         <ReactCodeInput
           name=""
           inputMode="tel"
@@ -114,26 +112,29 @@ export default function CodeInputStep({
         />
       </div>
       {codeError && <Error text={t("signup.step2-code-error")} />}
-      <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
-        <div className="text-l py-1 text-lg w-full">
+      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+        <div className="text-l w-full py-1 text-lg">
           <Button
             type="submit"
             onClick={incrementStep}
             size="sm"
             isFullWidth
-            className='h-14'
+            className="h-14"
             colorSchema="primary"
             variant="outline_bg"
             isLoading={isCodeInputCheckLoading}
-          > {String(t("signup.verify"))} </Button>
+          >
+            {" "}
+            {String(t("signup.verify"))}{" "}
+          </Button>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
+      <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
           <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
-          <div className="mt-2 text-bunker-400 text-md flex flex-row">
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
             <button disabled={isLoading} onClick={resendVerificationEmail} type="button">
-              <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
                 {isResendingVerificationEmail
                   ? t("signup.step2-resend-progress")
                   : t("signup.step2-resend-submit")}
@@ -141,7 +142,7 @@ export default function CodeInputStep({
             </button>
           </div>
         </div>
-        <p className="text-sm text-bunker-400 pb-2">{t("signup.step2-spam-alert")}</p>
+        <p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
       </div>
     </div>
   );

frontend/src/components/signup/DonwloadBackupPDFStep.tsx

@@ -57,19 +57,22 @@ export default function DonwloadBackupPDFStep({
   };
 
   return (
-    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
-      <p className="text-xl text-center font-medium flex flex-col justify-center items-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 mb-6 text-6xl text-bunker-200" />
+    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
+      <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"
+        />
         {t("signup.step4-message")}
       </p>
-      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
-        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
+      <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">
           <span className="mb-2">
             {t("signup.step4-description1")} {t("signup.step4-description3")}
           </span>
         </div>
-        <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
-          <div className="text-l py-1 text-lg w-full">
+        <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="text-l w-full py-1 text-lg">
             <Button
               onClick={handleBackupKeyGenerate}
               size="sm"

frontend/src/components/signup/EnterEmailStep.tsx

@@ -52,13 +52,13 @@ export default function EnterEmailStep({
       try {
         await mutateAsync({ email });
         incrementStep();
-      } catch(e) {
+      } catch (e) {
         if (axios.isAxiosError(e)) {
-          const { message = "Something went wrong" } = e.response?.data as { message: string};
+          const { message = "Something went wrong" } = e.response?.data as { message: string };
           createNotification({
             type: "error",
-            text:  message
-          })
+            text: message
+          });
         }
       }
     }
@@ -66,11 +66,11 @@ export default function EnterEmailStep({
 
   return (
     <div>
-      <div className="w-full md:px-6 mx-auto">
-        <p className="text-xl font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+      <div className="mx-auto w-full md:px-6">
+        <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
           {t("signup.step1-start")}
         </p>
-        <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] m-auto rounded-lg mt-8">
+        <div className="m-auto mt-8 flex w-1/4 min-w-[20rem] flex-col items-center justify-center rounded-lg lg:w-1/6">
           <Input
             placeholder="Enter your email address..."
             onChange={(e) => setEmail(e.target.value)}
@@ -79,28 +79,35 @@ export default function EnterEmailStep({
             autoComplete="username"
             className="h-12"
           />
-          {emailError && <p className="text-red-600 text-xs text-left w-full ml-1.5 mt-1.5">Please enter a valid email.</p>}
+          {emailError && (
+            <p className="ml-1.5 mt-1.5 w-full text-left text-xs text-red-600">
+              Please enter a valid email.
+            </p>
+          )}
         </div>
-        <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
-          <div className="text-l py-1 text-lg w-full">
+        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
               onClick={emailCheck}
               size="sm"
               isFullWidth
-              className='h-14'
+              className="h-14"
               colorSchema="primary"
               variant="outline_bg"
               isLoading={isLoading}
               isDisabled={isLoading}
-            > {String(t("signup.step1-submit"))} </Button>
+            >
+              {" "}
+              {String(t("signup.step1-submit"))}{" "}
+            </Button>
           </div>
         </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">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
-            <span className="text-sm text-mineshaft-400 hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer">
+            <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")}
             </span>
           </button>

frontend/src/components/signup/TeamInviteStep.tsx

@@ -16,7 +16,7 @@ export default function TeamInviteStep(): JSX.Element {
   const router = useRouter();
   const [emails, setEmails] = useState("");
   const { data: serverDetails } = useFetchServerStatus();
-  
+
   const { mutateAsync } = useAddUserToOrg();
   const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
 
@@ -40,55 +40,61 @@ export default function TeamInviteStep(): JSX.Element {
   };
 
   return (
-    <div className="w-max mx-auto min-w-lg h-full pb-4 px-8 mb-64 md:mb-32">
-      <p className="text-2xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+    <div className="min-w-lg mx-auto mb-64 h-full w-max px-8 pb-4 md:mb-32">
+      <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-2xl font-semibold text-transparent">
         {t("signup.step5-invite-team")}
       </p>
-      <p className="text-center flex justify-center text-bunker-400 md:mx-8 mb-6 mt-4">
+      <p className="mb-6 mt-4 flex justify-center text-center text-bunker-400 md:mx-8">
         {t("signup.step5-subtitle")}
       </p>
-      <div className="bg-mineshaft-800 border border-mineshaft-500 w-max mx-auto pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-6">
+      <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>
-          <div className="text-bunker-300 font-medium pl-1 pb-1 text-sm">
+          <div className="pl-1 pb-1 text-sm font-medium text-bunker-300">
             <span>Emails</span>
           </div>
           <textarea
-            className="bg-mineshaft-900/70 min-w-[30rem] h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+            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"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="email@example.com, email2@example.com..."
           />
         </div>
-        <div className="flex flex-row items-end justify-end mt-0 md:mt-4 md:mb-2 w-full md:min-w-[30rem] mt-2 md:max-w-md mx-auto text-sm">
+        <div className="mx-auto mt-0 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">
           <Button
             onClick={() => {
               if (serverDetails?.emailConfigured) {
-                inviteUsers({ emails })
+                inviteUsers({ emails });
               } else {
                 handlePopUpOpen("setUpEmail");
               }
             }}
             size="sm"
             // isFullWidth
-            className='h-10'
+            className="h-10"
             colorSchema="primary"
             variant="solid"
-          > {t("signup.step5-send-invites") ?? ""} </Button>
+          >
+            {" "}
+            {t("signup.step5-send-invites") ?? ""}{" "}
+          </Button>
         </div>
         <EmailServiceSetupModal
           isOpen={popUp.setUpEmail?.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
         />
       </div>
-      <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 min-w-[20rem] max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+      <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">
         <Button
           onClick={redirectToHome}
           size="sm"
           isFullWidth
-          className='h-12'
+          className="h-12"
           colorSchema="secondary"
           variant="outline"
-        > {t("signup.step5-skip") ?? "Skip"} </Button>
+        >
+          {" "}
+          {t("signup.step5-skip") ?? "Skip"}{" "}
+        </Button>
       </div>
     </div>
   );

frontend/src/components/utilities/SecurityClient.ts

@@ -1,17 +1,11 @@
-import {
-  getAuthToken, 
-  setAuthToken,
-  setMfaTempToken,
-  setSignupTempToken} from "@app/reactQuery";
-
+import { getAuthToken, setAuthToken, setMfaTempToken, setSignupTempToken } from "@app/reactQuery";
 
 export const PROVIDER_AUTH_TOKEN_KEY = "infisical__provider-auth-token";
 
 // depreciated: go for apiRequest module in config/api
 export default class SecurityClient {
-
   static setProviderAuthToken(tokenStr: string) {
-    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr || "")
+    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr || "");
   }
 
   static getProviderAuthToken() {

frontend/src/components/utilities/attemptChangePassword.ts

@@ -3,9 +3,7 @@ import crypto from "crypto";
 
 import jsrp from "jsrp";
 
-import {
-changePassword,
-    srp1} from "@app/hooks/api/auth/queries";
+import { changePassword, srp1 } from "@app/hooks/api/auth/queries";
 
 import Aes256Gcm from "./cryptography/aes-256-gcm";
 import { deriveArgonKey } from "./cryptography/crypto";
@@ -15,95 +13,95 @@ const clientOldPassword = new jsrp.client();
 const clientNewPassword = new jsrp.client();
 
 type Params = {
-    email: string;
-    currentPassword: string;
-    newPassword: string;
-}
+  email: string;
+  currentPassword: string;
+  newPassword: string;
+};
 
 const attemptChangePassword = ({ email, currentPassword, newPassword }: Params): Promise<void> => {
-    return new Promise((resolve, reject) => {
-        clientOldPassword.init({ username: email, password: currentPassword }, async () => {
-            let serverPublicKey; let salt;
+  return new Promise((resolve, reject) => {
+    clientOldPassword.init({ username: email, password: currentPassword }, async () => {
+      let serverPublicKey;
+      let salt;
 
+      try {
+        const clientPublicKey = clientOldPassword.getPublicKey();
+
+        const res = await srp1({ clientPublicKey });
+
+        serverPublicKey = res.serverPublicKey;
+        salt = res.salt;
+
+        clientOldPassword.setSalt(salt);
+        clientOldPassword.setServerPublicKey(serverPublicKey);
+
+        const clientProof = clientOldPassword.getProof();
+
+        clientNewPassword.init({ username: email, password: newPassword }, async () => {
+          clientNewPassword.createVerifier(async (err, result) => {
             try {
-                const clientPublicKey = clientOldPassword.getPublicKey();
+              const derivedKey = await deriveArgonKey({
+                password: newPassword,
+                salt: result.salt,
+                mem: 65536,
+                time: 3,
+                parallelism: 1,
+                hashLen: 32
+              });
 
-                const res = await srp1({ clientPublicKey });
+              if (!derivedKey) throw new Error("Failed to derive key from password");
 
-                serverPublicKey = res.serverPublicKey;
-                salt = res.salt;
+              const key = crypto.randomBytes(32);
 
-                clientOldPassword.setSalt(salt);
-                clientOldPassword.setServerPublicKey(serverPublicKey);
+              const {
+                ciphertext: encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              } = Aes256Gcm.encrypt({
+                text: localStorage.getItem("PRIVATE_KEY") as string,
+                secret: key
+              });
 
-                const clientProof = clientOldPassword.getProof();
+              const {
+                ciphertext: protectedKey,
+                iv: protectedKeyIV,
+                tag: protectedKeyTag
+              } = Aes256Gcm.encrypt({
+                text: key.toString("hex"),
+                secret: Buffer.from(derivedKey.hash)
+              });
 
-                clientNewPassword.init({ username: email, password: newPassword }, async () => {
-                    clientNewPassword.createVerifier(async (err, result) => {
-                        try {
-                            const derivedKey = await deriveArgonKey({
-                                password: newPassword,
-                                salt: result.salt,
-                                mem: 65536,
-                                time: 3,
-                                parallelism: 1,
-                                hashLen: 32
-                            });
+              await changePassword({
+                clientProof,
+                protectedKey,
+                protectedKeyIV,
+                protectedKeyTag,
+                encryptedPrivateKey,
+                encryptedPrivateKeyIV,
+                encryptedPrivateKeyTag,
+                salt: result.salt,
+                verifier: result.verifier
+              });
 
-                            if (!derivedKey) throw new Error("Failed to derive key from password");
+              saveTokenToLocalStorage({
+                encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              });
 
-                            const key = crypto.randomBytes(32);
-
-                            const {
-                                ciphertext: encryptedPrivateKey,
-                                iv: encryptedPrivateKeyIV,
-                                tag: encryptedPrivateKeyTag
-                            } = Aes256Gcm.encrypt({
-                                text: localStorage.getItem("PRIVATE_KEY") as string,
-                                secret: key
-                            });
-
-                            const {
-                                ciphertext: protectedKey,
-                                iv: protectedKeyIV,
-                                tag: protectedKeyTag
-                            } = Aes256Gcm.encrypt({
-                                text: key.toString("hex"),
-                                secret: Buffer.from(derivedKey.hash)
-                            });
-
-                            await changePassword({
-                                clientProof,
-                                protectedKey,
-                                protectedKeyIV,
-                                protectedKeyTag,
-                                encryptedPrivateKey,
-                                encryptedPrivateKeyIV,
-                                encryptedPrivateKeyTag,
-                                salt: result.salt,
-                                verifier: result.verifier
-                            });
-
-                            saveTokenToLocalStorage({
-                                encryptedPrivateKey,
-                                iv: encryptedPrivateKeyIV,
-                                tag: encryptedPrivateKeyTag
-                            });
-
-                            resolve();
-                        } catch (err2) {
-                            console.error(err2);
-                            reject(err2);
-                        }
-
-                    });
-                });
-            } catch (err) {
-                console.error(err);
-                reject(err);
+              resolve();
+            } catch (err2) {
+              console.error(err2);
+              reject(err2);
             }
+          });
         });
+      } catch (err) {
+        console.error(err);
+        reject(err);
+      }
     });
-}
+  });
+};
 
-export default attemptChangePassword;
+export default attemptChangePassword;

frontend/src/components/utilities/attemptCliLoginMfa.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import jsrp from "jsrp";
 
-import { login1 , verifyMfaToken } from "@app/hooks/api/auth/queries";
+import { login1, verifyMfaToken } from "@app/hooks/api/auth/queries";
 import KeyService from "@app/services/KeyService";
 
 import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
@@ -11,11 +11,11 @@ import SecurityClient from "./SecurityClient";
 const client = new jsrp.client();
 
 interface IsMfaLoginSuccessful {
-    success: boolean;
-    loginResponse:{ 
-        privateKey: string;
-        JTWToken: string;
-    }
+  success: boolean;
+  loginResponse: {
+    privateKey: string;
+    JTWToken: string;
+  };
 }
 
 /**
@@ -26,81 +26,84 @@ interface IsMfaLoginSuccessful {
  * @param {String} obj.mfaToken - MFA code/token
  */
 const attemptLoginMfa = async ({
-    email,
-    password,
-    providerAuthToken,
-    mfaToken
+  email,
+  password,
+  providerAuthToken,
+  mfaToken
 }: {
-    email: string;
-    password: string;
-    providerAuthToken?: string,
-    mfaToken: string;
+  email: string;
+  password: string;
+  providerAuthToken?: string;
+  mfaToken: string;
 }): Promise<IsMfaLoginSuccessful> => {
-    return new Promise((resolve, reject) => {
-        client.init({
-            username: email,
-            password
-        }, async () => {
-            try {
-                const clientPublicKey = client.getPublicKey();
-                const { salt } = await login1({
-                    email,
-                    clientPublicKey,
-                    providerAuthToken,
-                });
+  return new Promise((resolve, reject) => {
+    client.init(
+      {
+        username: email,
+        password
+      },
+      async () => {
+        try {
+          const clientPublicKey = client.getPublicKey();
+          const { salt } = await login1({
+            email,
+            clientPublicKey,
+            providerAuthToken
+          });
 
-                const {
-                    encryptionVersion,
-                    protectedKey,
-                    protectedKeyIV,
-                    protectedKeyTag,
-                    token,
-                    publicKey,
-                    encryptedPrivateKey,
-                    iv,
-                    tag
-                } = await verifyMfaToken({
-                    email,
-                    mfaCode: mfaToken
-                });
+          const {
+            encryptionVersion,
+            protectedKey,
+            protectedKeyIV,
+            protectedKeyTag,
+            token,
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag
+          } = await verifyMfaToken({
+            email,
+            mfaCode: mfaToken
+          });
 
-                // unset temporary (MFA) JWT token and set JWT token
-                SecurityClient.setMfaToken("");
-                SecurityClient.setToken(token);
-                SecurityClient.setProviderAuthToken("");
+          // unset temporary (MFA) JWT token and set JWT token
+          SecurityClient.setMfaToken("");
+          SecurityClient.setToken(token);
+          SecurityClient.setProviderAuthToken("");
 
-                const privateKey = await KeyService.decryptPrivateKey({
-                    encryptionVersion,
-                    encryptedPrivateKey,
-                    iv,
-                    tag,
-                    password,
-                    salt,
-                    protectedKey,
-                    protectedKeyIV,
-                    protectedKeyTag
-                });
+          const privateKey = await KeyService.decryptPrivateKey({
+            encryptionVersion,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            password,
+            salt,
+            protectedKey,
+            protectedKeyIV,
+            protectedKeyTag
+          });
 
-                saveTokenToLocalStorage({
-                    publicKey,
-                    encryptedPrivateKey,
-                    iv,
-                    tag,
-                    privateKey
-                });
+          saveTokenToLocalStorage({
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            privateKey
+          });
 
-                resolve({
-                    success: true,
-                    loginResponse:{
-                        privateKey,
-                        JTWToken: token
-                    }
-                });
-            } catch (err) {
-                reject(err);
+          resolve({
+            success: true,
+            loginResponse: {
+              privateKey,
+              JTWToken: token
             }
-        });
-    });
-}
+          });
+        } catch (err) {
+          reject(err);
+        }
+      }
+    );
+  });
+};
 
-export default attemptLoginMfa;
+export default attemptLoginMfa;

frontend/src/components/utilities/attemptLoginMfa.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import jsrp from "jsrp";
 
-import { login1 , verifyMfaToken } from "@app/hooks/api/auth/queries";
+import { login1, verifyMfaToken } from "@app/hooks/api/auth/queries";
 import KeyService from "@app/services/KeyService";
 
 import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
@@ -18,75 +18,78 @@ const client = new jsrp.client();
  * @param {String} obj.mfaToken - MFA code/token
  */
 const attemptLoginMfa = async ({
-    email,
-    password,
-    providerAuthToken,
-    mfaToken
+  email,
+  password,
+  providerAuthToken,
+  mfaToken
 }: {
-    email: string;
-    password: string;
-    providerAuthToken?: string,
-    mfaToken: string;
+  email: string;
+  password: string;
+  providerAuthToken?: string;
+  mfaToken: string;
 }): Promise<Boolean> => {
-    return new Promise((resolve, reject) => {
-        client.init({
-            username: email,
-            password
-        }, async () => {
-            try {
-                const clientPublicKey = client.getPublicKey();
-                const { salt } = await login1({
-                    email,
-                    clientPublicKey,
-                    providerAuthToken,
-                });
-                
-                const {
-                    encryptionVersion,
-                    protectedKey,
-                    protectedKeyIV,
-                    protectedKeyTag,
-                    token, 
-                    publicKey, 
-                    encryptedPrivateKey, 
-                    iv, 
-                    tag
-                } = await verifyMfaToken({
-                    email,
-                    mfaCode: mfaToken
-                });
+  return new Promise((resolve, reject) => {
+    client.init(
+      {
+        username: email,
+        password
+      },
+      async () => {
+        try {
+          const clientPublicKey = client.getPublicKey();
+          const { salt } = await login1({
+            email,
+            clientPublicKey,
+            providerAuthToken
+          });
 
-                // unset temporary (MFA) JWT token and set JWT token
-                SecurityClient.setMfaToken("");
-                SecurityClient.setToken(token);
-                SecurityClient.setProviderAuthToken("");
+          const {
+            encryptionVersion,
+            protectedKey,
+            protectedKeyIV,
+            protectedKeyTag,
+            token,
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag
+          } = await verifyMfaToken({
+            email,
+            mfaCode: mfaToken
+          });
 
-                const privateKey = await KeyService.decryptPrivateKey({
-                    encryptionVersion,
-                    encryptedPrivateKey,
-                    iv,
-                    tag,
-                    password,
-                    salt,
-                    protectedKey,
-                    protectedKeyIV,
-                    protectedKeyTag
-                });
-                
-                saveTokenToLocalStorage({
-                    publicKey,
-                    encryptedPrivateKey,
-                    iv,
-                    tag,
-                    privateKey
-                });
+          // unset temporary (MFA) JWT token and set JWT token
+          SecurityClient.setMfaToken("");
+          SecurityClient.setToken(token);
+          SecurityClient.setProviderAuthToken("");
 
-                resolve(true);
-            } catch (err) {
-                reject(err);
-            }
-        });
-    });
-}
+          const privateKey = await KeyService.decryptPrivateKey({
+            encryptionVersion,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            password,
+            salt,
+            protectedKey,
+            protectedKeyIV,
+            protectedKeyTag
+          });
 
-export default attemptLoginMfa;
+          saveTokenToLocalStorage({
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            privateKey
+          });
+
+          resolve(true);
+        } catch (err) {
+          reject(err);
+        }
+      }
+    );
+  });
+};
+
+export default attemptLoginMfa;

frontend/src/components/utilities/checks/password/PasswordCheck.ts

@@ -1,5 +1,11 @@
 import { checkIsPasswordBreached } from "./checkIsPasswordBreached";
-import { escapeCharRegex, letterCharRegex, lowEntropyRegexes,numAndSpecialCharRegex, repeatedCharRegex } from "./passwordRegexes";
+import {
+  escapeCharRegex,
+  letterCharRegex,
+  lowEntropyRegexes,
+  numAndSpecialCharRegex,
+  repeatedCharRegex
+} from "./passwordRegexes";
 
 interface PasswordCheckProps {
   password: string;
@@ -29,40 +35,38 @@ const passwordCheck = async ({
     {
       name: "tooShort",
       validator: (pwd: string) => pwd.length >= 14,
-      setError: setPasswordErrorTooShort,
+      setError: setPasswordErrorTooShort
     },
     {
       name: "tooLong",
       validator: (pwd: string) => pwd.length < 101,
-      setError: setPasswordErrorTooLong,
+      setError: setPasswordErrorTooLong
     },
     {
       name: "noLetterChar",
       validator: (pwd: string) => letterCharRegex.test(pwd),
-      setError: setPasswordErrorNoLetterChar,
+      setError: setPasswordErrorNoLetterChar
     },
     {
       name: "noNumOrSpecialChar",
       validator: (pwd: string) => numAndSpecialCharRegex.test(pwd),
-      setError: setPasswordErrorNoNumOrSpecialChar,
+      setError: setPasswordErrorNoNumOrSpecialChar
     },
     {
       name: "repeatedChar",
       validator: (pwd: string) => !repeatedCharRegex.test(pwd),
-      setError: setPasswordErrorRepeatedChar,
+      setError: setPasswordErrorRepeatedChar
     },
     {
       name: "escapeChar",
       validator: (pwd: string) => !escapeCharRegex.test(pwd),
-      setError: setPasswordErrorEscapeChar,
+      setError: setPasswordErrorEscapeChar
     },
     {
       name: "lowEntropy",
-      validator: (pwd: string) => (
-        !lowEntropyRegexes.some(regex => regex.test(pwd))
-      ),
-       setError: setPasswordErrorLowEntropy,
-    },
+      validator: (pwd: string) => !lowEntropyRegexes.some((regex) => regex.test(pwd)),
+      setError: setPasswordErrorLowEntropy
+    }
   ];
 
   const isBreached = await checkIsPasswordBreached(password);
@@ -73,7 +77,7 @@ const passwordCheck = async ({
   } else {
     setPasswordErrorBreached(false);
   }
-  
+
   tests.forEach((test) => {
     if (!test.validator(password)) {
       errorCheck = true;
@@ -81,7 +85,7 @@ const passwordCheck = async ({
     } else {
       test.setError(false);
     }
-  })
+  });
 
   return errorCheck;
 };

frontend/src/components/utilities/checks/password/checkIsPasswordBreached.ts

@@ -17,25 +17,25 @@ function bufferToHex(buffer: ArrayBuffer): string {
   return hexParts.join("");
 }
 
-  // see API details here: https://haveibeenpwned.com/API/v3#SearchingPwnedPasswordsByRange
-  // in short, the pending password is hashed (SHA-1), the first 5 chars are sliced and compared against a ranged hash table
-  // this hash table is formed from the 5 char hash prefix (ie. 00000-FFFFF) so 16^5 results
-  // returns a hash table of 800-1000 results
-  // padding has been added to prevent MitM attacker determining which hash table was called by the response size
-  // the last 35 chars of the password hash are compared client-side against the table
-  // if there is a match, that password has been involved in a password breach (ie. pwnd) and should NOT be accepted
-  // the database consists of ~700 mln breached passwords and is continuously updated, including with law enforcement ingestion
-  // https://www.troyhunt.com/open-source-pwned-passwords-with-fbi-feed-and-225m-new-nca-passwords-is-now-live/
+// see API details here: https://haveibeenpwned.com/API/v3#SearchingPwnedPasswordsByRange
+// in short, the pending password is hashed (SHA-1), the first 5 chars are sliced and compared against a ranged hash table
+// this hash table is formed from the 5 char hash prefix (ie. 00000-FFFFF) so 16^5 results
+// returns a hash table of 800-1000 results
+// padding has been added to prevent MitM attacker determining which hash table was called by the response size
+// the last 35 chars of the password hash are compared client-side against the table
+// if there is a match, that password has been involved in a password breach (ie. pwnd) and should NOT be accepted
+// the database consists of ~700 mln breached passwords and is continuously updated, including with law enforcement ingestion
+// https://www.troyhunt.com/open-source-pwned-passwords-with-fbi-feed-and-225m-new-nca-passwords-is-now-live/
 
-  // The HIBP API follows NIST guidance (pg.14) https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-63b.pdf
-  // "When processing requests to establish and change memorized secrets, verifiers SHALL compare
-  // the prospective secrets against a list that contains values known to be commonly-used, expected,
-  // or compromised. For example, the list MAY include, but is not limited to:
-  // • Passwords obtained from previous breach corpuses.
-  // • Dictionary words.
-  // • Repetitive or sequential characters (e.g. ‘aaaaaa’, ‘1234abcd’).
-  // • Context-specific words, such as the name of the service, the username, and derivatives
-  //   thereof."
+// The HIBP API follows NIST guidance (pg.14) https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-63b.pdf
+// "When processing requests to establish and change memorized secrets, verifiers SHALL compare
+// the prospective secrets against a list that contains values known to be commonly-used, expected,
+// or compromised. For example, the list MAY include, but is not limited to:
+// • Passwords obtained from previous breach corpuses.
+// • Dictionary words.
+// • Repetitive or sequential characters (e.g. ‘aaaaaa’, ‘1234abcd’).
+// • Context-specific words, such as the name of the service, the username, and derivatives
+//   thereof."
 
 export const checkIsPasswordBreached = async (password: string): Promise<boolean> => {
   const HAVE_I_BEEN_PWNED_API_URL = "https://api.pwnedpasswords.com";
@@ -66,8 +66,8 @@ export const checkIsPasswordBreached = async (password: string): Promise<boolean
         response = await axios.get(rangedHashTableUri, {
           headers: {
             "Add-Padding": "true", // see https://www.troyhunt.com/enhancing-pwned-passwords-privacy-with-padding/
-            "Content-Type": "text/plain",
-          },
+            "Content-Type": "text/plain"
+          }
         });
 
         if (response.status === 200) {
@@ -76,9 +76,8 @@ export const checkIsPasswordBreached = async (password: string): Promise<boolean
           // check the last 35 hash chars to see if there's a match
           const isBreachedPassword: boolean = responseData.includes(hashedPwd.slice(5, 40));
           return isBreachedPassword;
-        } 
-          retryAttempt += 1;
-        
+        }
+        retryAttempt += 1;
       } catch (err) {
         if (!axios.isAxiosError(err)) {
           throw err;
@@ -88,14 +87,15 @@ export const checkIsPasswordBreached = async (password: string): Promise<boolean
     }
 
     console.error(
-      `Received a non-200 response (${response ? response.status : "unknown"}) from the Pwnd Passwords API`
+      `Received a non-200 response (${
+        response ? response.status : "unknown"
+      }) from the Pwnd Passwords API`
     );
     return false;
   } catch (err: any) {
     console.error("An unexpected error has occurred:", err.message);
     return false;
   } finally {
-
     // Clear the UTF-8 encoded password from memory
 
     if (encodedPwd) {

frontend/src/components/utilities/checks/password/checkPassword.ts

@@ -1,5 +1,11 @@
 import { checkIsPasswordBreached } from "./checkIsPasswordBreached";
-import { escapeCharRegex, letterCharRegex, lowEntropyRegexes,numAndSpecialCharRegex, repeatedCharRegex } from "./passwordRegexes";
+import {
+  escapeCharRegex,
+  letterCharRegex,
+  lowEntropyRegexes,
+  numAndSpecialCharRegex,
+  repeatedCharRegex
+} from "./passwordRegexes";
 
 type Errors = {
   tooShort?: string;
@@ -44,40 +50,38 @@ const checkPassword = async ({ password, setErrors }: CheckPasswordParams): Prom
     {
       name: "tooShort",
       validator: (pwd: string) => pwd.length >= 14,
-      errorText: "at least 14 characters",
+      errorText: "at least 14 characters"
     },
     {
       name: "tooLong",
       validator: (pwd: string) => pwd.length < 101,
-      errorText: "at most 100 characters",
+      errorText: "at most 100 characters"
     },
     {
       name: "noLetterChar",
       validator: (pwd: string) => letterCharRegex.test(pwd),
-      errorText: "at least 1 letter character",
+      errorText: "at least 1 letter character"
     },
     {
       name: "noNumOrSpecialChar",
       validator: (pwd: string) => numAndSpecialCharRegex.test(pwd),
-      errorText: "at least 1 number or special character",
+      errorText: "at least 1 number or special character"
     },
     {
       name: "repeatedChar",
       validator: (pwd: string) => !repeatedCharRegex.test(pwd),
-      errorText: "at most 3 repeated, consecutive characters",
+      errorText: "at most 3 repeated, consecutive characters"
     },
     {
       name: "escapeChar",
       validator: (pwd: string) => !escapeCharRegex.test(pwd),
-      errorText: "No escape characters allowed.",
+      errorText: "No escape characters allowed."
     },
     {
       name: "lowEntropy",
-      validator: (pwd: string) => (
-        !lowEntropyRegexes.some(regex => regex.test(pwd))
-      ),
-      errorText: "Password contains personal info.",
-    },
+      validator: (pwd: string) => !lowEntropyRegexes.some((regex) => regex.test(pwd)),
+      errorText: "Password contains personal info."
+    }
   ];
 
   const isBreached = await checkIsPasswordBreached(password);
@@ -96,4 +100,4 @@ const checkPassword = async ({ password, setErrors }: CheckPasswordParams): Prom
   return Object.keys(errors).length > 0;
 };
 
-export default checkPassword;
+export default checkPassword;

frontend/src/components/utilities/checks/password/passwordRegexes.ts

@@ -1,6 +1,7 @@
 // This regex covers letters (case insensitive) for the top 50 most spoken languages
 /* eslint-disable no-misleading-character-class */
-export const letterCharRegex = /[A-Za-z\u00C0-\u00D6\u00D8-\u00DE\u00DF-\u00F6\u00F8-\u00FF\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FFF\u0600-\u06FF\u0400-\u04FF\u0500-\u052F\u2DE0-\u2DFF\uA640-\uA69F\u05B0-\u05FF\u0980-\u09FF\u1F00-\u1FFF\u0130\u015E\u011E\u00C7\u00FC\u00FB\u00EB\u00E7]/u;
+export const letterCharRegex =
+  /[A-Za-z\u00C0-\u00D6\u00D8-\u00DE\u00DF-\u00F6\u00F8-\u00FF\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FFF\u0600-\u06FF\u0400-\u04FF\u0500-\u052F\u2DE0-\u2DFF\uA640-\uA69F\u05B0-\u05FF\u0980-\u09FF\u1F00-\u1FFF\u0130\u015E\u011E\u00C7\u00FC\u00FB\u00EB\u00E7]/u;
 
 // This regex covers digits, special characters, symbols, and emojis.
 export const numAndSpecialCharRegex = /[\d!@#$%^&*(),.?":{}|<>]|[^\p{L}\p{N}\s]/u;
@@ -32,5 +33,5 @@ export const lowEntropyRegexes = [
   /\b(?:[A-Z0-9]{7,10}|[A-Z0-9]{10,11}|[A-Z0-9]{7,10})\b/,
 
   // US social security number
-  /\b\d{3}[-\s]?\d{2}[-\s]?\d{4}\b/,
-];
+  /\b\d{3}[-\s]?\d{2}[-\s]?\d{4}\b/
+];

frontend/src/components/utilities/cryptography/issueBackupKey.ts

@@ -3,9 +3,7 @@ import crypto from "crypto";
 
 import jsrp from "jsrp";
 
-import { issueBackupPrivateKey ,
-  srp1
-} from "@app/hooks/api/auth/queries";
+import { issueBackupPrivateKey, srp1 } from "@app/hooks/api/auth/queries";
 
 import generateBackupPDF from "../generateBackupPDF";
 import Aes256Gcm from "./aes-256-gcm";
@@ -97,7 +95,6 @@ const issueBackupKey = async ({
                     generatedKey
                   });
                   setBackupKeyIssued(true);
-              
                 } catch {
                   setBackupKeyError(true);
                 }

frontend/src/components/utilities/intercom/intercomProvider.ts

@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
 
 import { useUser } from "@app/context";
 
-import {
-  boot as bootIntercom,
-  load as loadIntercom,
-  update as updateIntercom,
-} from "./intercom";
+import { boot as bootIntercom, load as loadIntercom, update as updateIntercom } from "./intercom";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const IntercomProvider = ({ children }: { children: any }) => {
@@ -16,7 +12,11 @@ export const IntercomProvider = ({ children }: { children: any }) => {
 
   if (typeof window !== "undefined") {
     loadIntercom();
-    bootIntercom({name: `${user?.firstName || ""} ${user?.lastName || ""}`, email: user?.email || "", created_at: Math.floor(((new Date(user?.createdAt))?.getTime() || 0) / 1000)});
+    bootIntercom({
+      name: `${user?.firstName || ""} ${user?.lastName || ""}`,
+      email: user?.email || "",
+      created_at: Math.floor((new Date(user?.createdAt)?.getTime() || 0) / 1000)
+    });
   }
 
   useEffect(() => {
@@ -37,4 +37,4 @@ export const IntercomProvider = ({ children }: { children: any }) => {
   }, [router.events]);
 
   return children;
-};
+};

frontend/src/components/utilities/isValidHexColor.ts

@@ -1,5 +1,5 @@
-export  const isValidHexColor = (hexColor: string) => {
-    const hexColorPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
-  
-    return hexColorPattern.test(hexColor);
-}
+export const isValidHexColor = (hexColor: string) => {
+  const hexColorPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+
+  return hexColorPattern.test(hexColor);
+};

frontend/src/components/utilities/saveTokenToLocalStorage.ts

@@ -17,10 +17,9 @@ export const saveTokenToLocalStorage = ({
   encryptedPrivateKey,
   iv,
   tag,
-  privateKey,
+  privateKey
 }: Props) => {
   try {
-    
     if (protectedKey) {
       localStorage.removeItem("protectedKey");
       localStorage.setItem("protectedKey", protectedKey);
@@ -62,9 +61,7 @@ export const saveTokenToLocalStorage = ({
     }
   } catch (err) {
     if (err instanceof Error) {
-      throw new Error(
-        `Unable to send the tokens in local storage:${  err.message}`
-      );
+      throw new Error(`Unable to send the tokens in local storage:${err.message}`);
     }
   }
 };

frontend/src/components/utilities/telemetry/Telemetry.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
-import { PostHog } from 'posthog-js';
-import { initPostHog } from '@app/components/analytics/posthog';
-import { ENV } from '@app/components/utilities/config';
+import { PostHog } from "posthog-js";
+import { initPostHog } from "@app/components/analytics/posthog";
+import { ENV } from "@app/components/utilities/config";
 
 declare let TELEMETRY_CAPTURING_ENABLED: any;
 
@@ -13,23 +13,23 @@ class Capturer {
   }
 
   capture(item: string) {
-    if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
+    if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
       try {
         this.api.capture(item);
       } catch (error) {
-        console.error('PostHog', error);
+        console.error("PostHog", error);
       }
     }
   }
 
   identify(id: string, email?: string) {
-    if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
+    if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
       try {
         this.api.identify(id, {
           email: email
         });
       } catch (error) {
-        console.error('PostHog', error);
+        console.error("PostHog", error);
       }
     }
   }

frontend/src/components/v2/Accordion/Accordion.stories.tsx

@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Accordion>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <Accordion {...args}>
         <AccordionItem value="section-1">
           <AccordionTrigger>Section 1</AccordionTrigger>

frontend/src/components/v2/Accordion/Accordion.tsx

@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
   ({ children, className, ...props }, forwardedRef) => (
     <AccordionPrimitive.Item
       className={twMerge(
-        "mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
+        "mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
+        "group flex h-11 flex-1 items-center justify-between py-2 px-4 outline-none hover:text-primary data-[state=open]:text-primary ",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
       {children}
       <FontAwesomeIcon
         icon={faChevronDown}
-        className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
+        className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
         aria-hidden
       />
     </AccordionPrimitive.Trigger>
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={twMerge(
-      "data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
+      "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
       className
     )}
     {...props}
     ref={forwardedRef}
   >
-    <div className="text-sm py-2 px-4">{children}</div>
+    <div className="py-2 px-4 text-sm">{children}</div>
   </AccordionPrimitive.Content>
 ));
 

frontend/src/components/v2/Accordion/index.tsx

@@ -1 +1 @@
-export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";

frontend/src/components/v2/Card/Card.tsx

@@ -10,7 +10,7 @@ export type CardTitleProps = {
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
   <div
     className={twMerge(
-      "px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words",
+      "mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal",
       className
     )}
   >

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -30,7 +30,7 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
           isChecked && "bg-primary hover:bg-primary",
           Boolean(children) && "mr-3",
@@ -46,7 +46,7 @@ export const Checkbox = ({
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
+      <label className="truncate whitespace-nowrap text-sm" htmlFor={id}>
         {children}
         {isRequired && <span className="pl-1 text-red">*</span>}
       </label>

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -58,7 +58,7 @@ export const DeleteActionModal = ({
         title={title}
         subTitle={subTitle}
         footerContent={
-          <div className="flex items-center mx-2">
+          <div className="mx-2 flex items-center">
             <Button
               className="mr-4"
               colorSchema="danger"
@@ -91,7 +91,11 @@ export const DeleteActionModal = ({
             }
             className="mb-0"
           >
-            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} placeholder="Type to delete..." />
+            <Input
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              placeholder="Type to delete..."
+            />
           </FormControl>
         </form>
       </ModalContent>

frontend/src/components/v2/Drawer/Drawer.tsx

@@ -45,7 +45,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         ref={forwardedRef}
         className={twMerge(drawerContentVariation({ direction, className }))}
       >
-        <Card isRounded={false} className="h-full w-full dark">
+        <Card isRounded={false} className="dark h-full w-full">
           {title && (
             <CardTitle subTitle={subTitle} className="px-4">
               {title}

frontend/src/components/v2/Drawer/index.tsx

@@ -1 +1 @@
-export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from "./Drawer";
+export { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from "./Drawer";

frontend/src/components/v2/Dropdown/Dropdown.stories.tsx

@@ -25,7 +25,7 @@ type Story = StoryObj<typeof DropdownMenuContent>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -43,7 +43,7 @@ export const Basic: Story = {
 
 export const Icons: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -65,7 +65,7 @@ export const Icons: Story = {
 
 export const WithDivider: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -86,7 +86,7 @@ export const WithDivider: Story = {
 
 export const Group: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
 export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
   <DropdownMenuPrimitive.Label
     {...props}
-    className={twMerge("text-xs text-bunker-400 px-4 pt-2 pb-1", className)}
+    className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
   />
 );
 
@@ -91,14 +91,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      "block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
       className
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
-      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+      {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.Item>
 );
@@ -124,14 +124,14 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.SubTrigger
     {...props}
     className={twMerge(
-      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      "block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
       className
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
-      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+      {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.SubTrigger>
 );
@@ -143,7 +143,7 @@ export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupPro
   ({ ...props }, ref) => (
     <DropdownMenuPrimitive.Group
       {...props}
-      className={twMerge("text-xs py-2 pl-3", props.className)}
+      className={twMerge("py-2 pl-3 text-xs", props.className)}
       ref={ref}
     />
   )
@@ -159,7 +159,7 @@ export const DropdownMenuSeparator = forwardRef<
   <DropdownMenuPrimitive.Separator
     ref={ref}
     {...props}
-    className={twMerge("h-[1px] bg-gray-700 m-1", className)}
+    className={twMerge("m-1 h-[1px] bg-gray-700", className)}
   />
 ));
 

frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx

@@ -10,9 +10,10 @@ export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Ele
   <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
     <ModalContent title="Email service not configured">
       <p className="mb-4 text-bunker-300">
-        The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
+        The administrators of this Infisical instance have not yet set up an email service provider
+        required to perform this action
       </p>
-      
+
       <a href="https://infisical.com/docs/self-hosting/configuration/email">
         <Button className="mr-4">Learn more</Button>
       </a>

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -23,7 +23,7 @@ export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelP
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
     {icon && (
-      <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
+      <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}

frontend/src/components/v2/HoverCard/HoverCard.tsx

@@ -10,22 +10,16 @@ type Props = {
 
 export type HoverCardProps = Props;
 
-export const HoverObject = ({
-    text,
-    icon,
-    color
-  }: Props): JSX.Element => (
+export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
   <HoverCard.Root openDelay={50}>
     <HoverCard.Trigger asChild>
-      <a
-        className="ImageTrigger z-20"
-      >
+      <a className="ImageTrigger z-20">
         <FontAwesomeIcon icon={icon} className={`text-${color}`} />
       </a>
     </HoverCard.Trigger>
     <HoverCard.Portal>
       <HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
-        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+        <div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
           <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
             <div>
               <div className="Text bold">{text}</div>

frontend/src/components/v2/HoverCardv2/index.tsx

@@ -1 +1 @@
-export { HoverCard,HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCardv2";

frontend/src/components/v2/Modal/Modal.tsx

@@ -29,7 +29,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen thin-scrollbar max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
+            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-h-screen max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
             className
           )}
         >

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -44,7 +44,7 @@ export const Pagination = ({
   return (
     <div
       className={twMerge(
-        "flex items-center justify-end text-white w-full py-3 px-4 bg-mineshaft-800",
+        "flex w-full items-center justify-end bg-mineshaft-800 py-3 px-4 text-white",
         className
       )}
     >

frontend/src/components/v2/Popover/Popover.tsx

@@ -3,39 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Popover from "@radix-ui/react-popover";
 
 type Props = {
-  children: any; 
-  text: string; 
-  onChangeHandler: (value: string, id: string) => void; 
+  children: any;
+  text: string;
+  onChangeHandler: (value: string, id: string) => void;
   id: string;
 };
 
 export type PopoverProps = Props;
 
-export const PopoverObject = ({children, text, onChangeHandler, id}: Props) => (
+export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) => (
   <Popover.Root>
-    <Popover.Trigger asChild className='data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400'>
+    <Popover.Trigger
+      asChild
+      className="data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400"
+    >
       {children}
     </Popover.Trigger>
     <Popover.Portal>
       <Popover.Content
-        className="rounded z-[100] p-3 w-[460px] min-h-fit border border-chicago-700 bg-mineshaft-600 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
         sideOffset={5}
         hideWhenDetached
         side="left"
       >
-        <div className="flex flex-col pt-2 dark">
-          <p className="text-bunker-200 text-[15px] leading-[0px] font-medium mb-5">Comment</p>
+        <div className="dark flex flex-col pt-2">
+          <p className="mb-5 text-[15px] font-medium leading-[0px] text-bunker-200">Comment</p>
           <textarea
             onChange={(e) => onChangeHandler(e.target.value, id)}
             // type={type}
             value={text}
-            className='z-10 dark:[color-scheme:dark] peer h-[20rem] ph-no-capture bg-bunker-600 border border-mineshaft-500 rounded-md py-2.5 caret-bunker-200 text-sm px-2 w-full outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 py-2.5 px-2 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
             spellCheck="false"
-            placeholder='–'
+            placeholder="–"
           />
         </div>
         <Popover.Close
-          className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-bunker-300 hover:text-white absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+          className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
           aria-label="Close"
         >
           <FontAwesomeIcon icon={faXmark} />

frontend/src/components/v2/Popoverv2/index.tsx

@@ -1 +1 @@
-export { Popover,PopoverContent, PopoverTrigger } from "./Popoverv2";
+export { Popover, PopoverContent, PopoverTrigger } from "./Popoverv2";

frontend/src/components/v2/RadioGroup/RadioGroup.tsx

@@ -6,35 +6,35 @@ export type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
 
 // Note this component is not customizable (Heroku integration and potentially other pages depend on it)
 export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) => (
-  <RadioGroupPrimitive.Root 
-    className={twMerge("flex flex-row gap-5 px-6 mb-6", className)}
+  <RadioGroupPrimitive.Root
+    className={twMerge("mb-6 flex flex-row gap-5 px-6", className)}
     defaultValue="App"
     aria-label="View density"
     {...props}
-  >  
+  >
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="bg-bunker-400/20 w-[20px] h-[20px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        className="h-[20px] w-[20px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
         value="App"
         id="r1"
       >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
+        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-primary after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r1">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
         App
       </label>
     </div>
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="bg-bunker-400/20 w-[22px] h-[22px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        className="h-[22px] w-[22px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
         value="Pipeline"
         id="r2"
       >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[13px] after:h-[13px] after:rounded-[50%] after:bg-primary" />
+        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:bg-primary after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r2">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
         Pipeline
       </label>
     </div>
   </RadioGroupPrimitive.Root>
-);
+);

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -14,7 +14,8 @@ const replaceContentWithDot = (str: string) => {
   return finalStr;
 };
 
-const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
+const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
+  if (isImport) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
@@ -46,6 +47,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
+  isImport?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
   containerClassName?: string;
@@ -55,7 +57,17 @@ const commonClassName = "font-mono text-sm caret-white border-none outline-none
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   (
-    { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
+    {
+      value,
+      isVisible,
+      isImport,
+      containerClassName,
+      onBlur,
+      isDisabled,
+      isReadOnly,
+      onFocus,
+      ...props
+    },
     ref
   ) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
@@ -69,7 +81,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
           <pre aria-hidden className="m-0 ">
             <code className={`inline-block w-full  ${commonClassName}`}>
               <span style={{ whiteSpace: "break-spaces" }}>
-                {syntaxHighlight(value, isVisible || isSecretFocused)}
+                {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
               </span>
             </code>
           </pre>

frontend/src/components/v2/Select/Select.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp,faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { twMerge } from "tailwind-merge";
@@ -57,7 +57,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              "relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md",
+              "relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
               dropdownContainerClassName
             )}
             position={position}

frontend/src/components/v2/Spinner/Spinner.tsx

@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
       <svg
         aria-hidden="true"
         className={twMerge(
-          "text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
+          "m-1 animate-spin fill-primary text-gray-200 dark:text-gray-600",
           sizeChart[size],
           className
         )}

frontend/src/components/v2/Stepper/Stepper.tsx

@@ -14,7 +14,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
   return (
     <div
       className={twMerge(
-        "flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
+        "flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 p-2",
         className
       )}
     >
@@ -25,15 +25,15 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
         return (
           <div
             className={twMerge(
-              "flex items-center space-x-3 flex-shrink-0",
+              "flex flex-shrink-0 items-center space-x-3",
               isNotLast && "flex-grow"
             )}
           >
-            <div className="flex items-center space-x-2 flex-shrink-0">
+            <div className="flex flex-shrink-0 items-center space-x-2">
               <div
                 className={twMerge(
-                  "w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
-                  isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
+                  "flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium text-mineshaft-800 transition-all",
+                  isCompleted ? "bg-primary" : "border border-primary/30 text-bunker-300",
                   isActive && "bg-primary text-mineshaft-800"
                 )}
               >
@@ -71,7 +71,7 @@ export type StepProps = {
 export const Step = ({ title, description }: StepProps) => {
   return (
     <div className="flex flex-col text-gray-300">
-      <div className="font-medium text-sm">{title}</div>
+      <div className="text-sm font-medium">{title}</div>
       {description && <div className="text-xs">{description}</div>}
     </div>
   );

frontend/src/components/v2/Stepper/index.tsx

@@ -1,2 +1,2 @@
-export type { StepperProps,StepProps } from "./Stepper";
-export { Step,Stepper } from "./Stepper";
+export type { StepperProps, StepProps } from "./Stepper";
+export { Step, Stepper } from "./Stepper";

frontend/src/components/v2/Table/index.tsx

@@ -6,5 +6,6 @@ export type {
   TFootProps,
   THeadProps,
   ThProps,
-  TrProps} from "./Table";
-export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";
+  TrProps
+} from "./Table";
+export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot, Th, THead, Tr } from "./Table";

frontend/src/components/v2/Tabs/Tabs.tsx

@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
 
 export const TabList = ({ className, children, ...props }: TabListProps) => (
   <TabsPrimitive.List
-    className={twMerge("flex-shrink-0 flex  border-b-2 border-mineshaft-800", className)}
+    className={twMerge("flex flex-shrink-0  border-b-2 border-mineshaft-800", className)}
     {...props}
   >
     {children}
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
 export const Tab = ({ className, children, ...props }: TabProps) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "px-3 h-10 font-medium text-sm flex items-center justify-center select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 text-mineshaft-400 transition-all data-[state=active]:text-white data-[state=active]:border-b data-[state=active]:border-primary",
+      "flex h-10 select-none items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
 
 export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
   <TabsPrimitive.Content
-    className={twMerge("outline-none flex-grow py-5 rounded-bl-md rounded-br-md", className)}
+    className={twMerge("flex-grow rounded-bl-md rounded-br-md py-5 outline-none", className)}
     {...props}
   >
     {children}

frontend/src/components/v2/Tabs/index.tsx

@@ -1,2 +1,2 @@
-export type { TabListProps,TabPanelProps, TabProps, TabsProps } from "./Tabs";
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from "./Tabs";
 export { Tab, TabList, TabPanel, Tabs } from "./Tabs";

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -11,6 +11,8 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
   position?: "top" | "bottom" | "left" | "right";
+  isDisabled?: boolean;
+  center?: boolean;
 };
 
 export const Tooltip = ({
@@ -20,7 +22,9 @@ export const Tooltip = ({
   onOpenChange,
   defaultOpen,
   className,
+  center,
   asChild = true,
+  isDisabled,
   position = "top",
   ...props
 }: TooltipProps) => (
@@ -38,11 +42,13 @@ export const Tooltip = ({
       {...props}
       className={twMerge(
         `z-50 max-w-[15rem] select-none rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-sm font-light text-bunker-200 shadow-md 
-data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
-data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
-data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
-data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
-`,
+        data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
+        data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
+        data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
+        data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
+      `,
+        isDisabled && "!hidden",
+        center && "text-center",
         className
       )}
     >

frontend/src/context/AuthContext/AuthContext.tsx

@@ -39,7 +39,7 @@ export const AuthProvider = ({ children }: Props): JSX.Element => {
   // wait for app to load the auth state
   if (isLoading || !isReady) {
     return (
-      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+      <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
         <img
           src="/images/loading/loading.gif"
           height={70}

frontend/src/context/ProjectPermissionContext/index.tsx

@@ -1,3 +1,3 @@
 export { ProjectPermissionProvider, useProjectPermission } from "./ProjectPermissionContext";
 export type { ProjectPermissionSet, TProjectPermission } from "./types";
-export { ProjectPermissionActions,ProjectPermissionSub } from "./types";
+export { ProjectPermissionActions, ProjectPermissionSub } from "./types";

frontend/src/context/ServerConfigContext/ServerConfigContext.tsx

@@ -38,22 +38,31 @@ export const ServerConfigProvider = ({ children }: Props): JSX.Element => {
       <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 bg-bunker-800 px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <Head>
           <title>Infisical Maintenance Mode</title>
-          <link rel='icon' href='/infisical.ico' />
+          <link rel="icon" href="/infisical.ico" />
         </Head>
-        <img src="/images/maintenance.png" height={175} width={300} alt="maintenance mode" className="w-[40rem]"/>
+        <img
+          src="/images/maintenance.png"
+          height={175}
+          width={300}
+          alt="maintenance mode"
+          className="w-[40rem]"
+        />
         <p className="mx-8 mb-4 flex justify-center bg-gradient-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
           Scheduled Maintenance
         </p>
         <div className="mt-2 text-center text-lg text-bunker-300">
-          Infisical is undergoing planned maintenance. <br /> No action is required on your end — your applications will continue to fetch secrets. 
-          <br /> If you have questions, please <a
-            className="text-bunker-300 underline underline-offset-4 decoration-primary-800 hover:decoration-primary-600 hover:text-mineshaft-100 duration-200"
+          Infisical is undergoing planned maintenance. <br /> No action is required on your end —
+          your applications will continue to fetch secrets.
+          <br /> If you have questions, please{" "}
+          <a
+            className="text-bunker-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
             href="https://infisical.com/slack"
             target="_blank"
             rel="noopener noreferrer"
           >
             join our Slack community
-          </a>.
+          </a>
+          .
         </div>
       </div>
     );

frontend/src/context/ServerConfigContext/index.tsx

@@ -1 +1 @@
-export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
+export { ServerConfigProvider, useServerConfig } from "./ServerConfigContext";

frontend/src/context/index.tsx

@@ -14,7 +14,7 @@ export {
   ProjectPermissionSub,
   useProjectPermission
 } from "./ProjectPermissionContext";
-export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
+export { ServerConfigProvider, useServerConfig } from "./ServerConfigContext";
 export { SubscriptionProvider, useSubscription } from "./SubscriptionContext";
 export { UserProvider, useUser } from "./UserContext";
 export { useWorkspace, WorkspaceProvider } from "./WorkspaceContext";

frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts

@@ -15,7 +15,7 @@ const updateUserProjectPermission = async ({
   denials: {
     ability: string;
     environmentSlug: string;
-  }[]
+  }[];
 }) =>
   SecurityClient.fetchCall(`/api/v1/membership/${membershipId}/deny-permissions`, {
     method: "POST",

frontend/src/ee/utilities/timeSince.ts

@@ -4,32 +4,30 @@
  * @returns {String} text - how much time has passed since a certain timestamp
  */
 function timeSince(date: Date) {
-  const seconds = Math.floor(
-    ((new Date() as any) - (date as any)) / 1000
-  ) as number;
+  const seconds = Math.floor(((new Date() as any) - (date as any)) / 1000) as number;
 
   let interval = seconds / 31536000;
 
   if (interval > 1) {
-    return `${Math.floor(interval)  } years ago`;
+    return `${Math.floor(interval)} years ago`;
   }
   interval = seconds / 2592000;
   if (interval > 1) {
-    return `${Math.floor(interval)  } months ago`;
+    return `${Math.floor(interval)} months ago`;
   }
   interval = seconds / 86400;
   if (interval > 1) {
-    return `${Math.floor(interval)  } days ago`;
+    return `${Math.floor(interval)} days ago`;
   }
   interval = seconds / 3600;
   if (interval > 1) {
-    return `${Math.floor(interval)  } hours ago`;
+    return `${Math.floor(interval)} hours ago`;
   }
   interval = seconds / 60;
   if (interval > 1) {
-    return `${Math.floor(interval)  } minutes ago`;
+    return `${Math.floor(interval)} minutes ago`;
   }
-  return `${Math.floor(seconds)  } seconds ago`;
+  return `${Math.floor(seconds)} seconds ago`;
 }
 
 export default timeSince;

frontend/src/helpers/key.ts

@@ -14,73 +14,71 @@ import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
  * @param {String} obj.protectedKeyTag
  */
 const decryptPrivateKeyHelper = async ({
-    encryptionVersion,
-    encryptedPrivateKey,
-    iv,
-    tag,
-    password,
-    salt,
-    protectedKey,
-    protectedKeyIV,
-    protectedKeyTag,
+  encryptionVersion,
+  encryptedPrivateKey,
+  iv,
+  tag,
+  password,
+  salt,
+  protectedKey,
+  protectedKeyIV,
+  protectedKeyTag
 }: {
-    encryptionVersion: number;
-    encryptedPrivateKey: string;
-    iv: string;
-    tag: string;
-    password: string;
-    salt: string;
-    protectedKey?: string;
-    protectedKeyIV?: string;
-    protectedKeyTag?: string;
+  encryptionVersion: number;
+  encryptedPrivateKey: string;
+  iv: string;
+  tag: string;
+  password: string;
+  salt: string;
+  protectedKey?: string;
+  protectedKeyIV?: string;
+  protectedKeyTag?: string;
 }) => {
-let privateKey;
-    try {
-        if (encryptionVersion === 1) {
-            privateKey = Aes256Gcm.decrypt({
-                ciphertext: encryptedPrivateKey,
-                iv,
-                tag,
-                secret: password
-                .slice(0, 32)
-                .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
-            });
-        } else if (encryptionVersion === 2 && protectedKey && protectedKeyIV && protectedKeyTag) {
-            const derivedKey = await deriveArgonKey({
-                password,
-                salt,
-                mem: 65536,
-                time: 3,
-                parallelism: 1,
-                hashLen: 32
-            });
-            
-            if (!derivedKey) throw new Error("Failed to generate derived key");
+  let privateKey;
+  try {
+    if (encryptionVersion === 1) {
+      privateKey = Aes256Gcm.decrypt({
+        ciphertext: encryptedPrivateKey,
+        iv,
+        tag,
+        secret: password
+          .slice(0, 32)
+          .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
+      });
+    } else if (encryptionVersion === 2 && protectedKey && protectedKeyIV && protectedKeyTag) {
+      const derivedKey = await deriveArgonKey({
+        password,
+        salt,
+        mem: 65536,
+        time: 3,
+        parallelism: 1,
+        hashLen: 32
+      });
 
-            const key = Aes256Gcm.decrypt({
-                ciphertext: protectedKey,
-                iv: protectedKeyIV,
-                tag: protectedKeyTag,
-                secret: Buffer.from(derivedKey.hash)
-            });
-            
-            // decrypt back the private key
-            privateKey = Aes256Gcm.decrypt({
-                ciphertext: encryptedPrivateKey,
-                iv,
-                tag,
-                secret: Buffer.from(key, "hex")
-            });
-        } else {
-            throw new Error("Insufficient details to decrypt private key");
-        }
-    } catch (err) {
-        throw new Error("Failed to decrypt private key");
+      if (!derivedKey) throw new Error("Failed to generate derived key");
+
+      const key = Aes256Gcm.decrypt({
+        ciphertext: protectedKey,
+        iv: protectedKeyIV,
+        tag: protectedKeyTag,
+        secret: Buffer.from(derivedKey.hash)
+      });
+
+      // decrypt back the private key
+      privateKey = Aes256Gcm.decrypt({
+        ciphertext: encryptedPrivateKey,
+        iv,
+        tag,
+        secret: Buffer.from(key, "hex")
+      });
+    } else {
+      throw new Error("Insufficient details to decrypt private key");
     }
+  } catch (err) {
+    throw new Error("Failed to decrypt private key");
+  }
 
-    return privateKey;
-}
+  return privateKey;
+};
 
-export {
-    decryptPrivateKeyHelper
-};
+export { decryptPrivateKeyHelper };

frontend/src/hoc/withPermission/withPermission.tsx

@@ -29,13 +29,13 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
       return (
         <div
           className={twMerge(
-            "container h-full mx-auto flex justify-center items-center",
+            "container mx-auto flex h-full items-center justify-center",
             containerClassName
           )}
         >
           <div
             className={twMerge(
-              "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+              "flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300",
               className
             )}
           >
@@ -43,7 +43,7 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
               <FontAwesomeIcon icon={faLock} size="6x" />
             </div>
             <div>
-              <div className="text-4xl font-medium mb-2">Access Restricted</div>
+              <div className="mb-2 text-4xl font-medium">Access Restricted</div>
               <div className="text-sm">
                 Your role has limited permissions, please <br /> contact your admin to gain access
               </div>

frontend/src/hooks/api/apiKeys/index.ts

@@ -1,4 +1 @@
-export {
-  useCreateAPIKeyV2,
-  useDeleteAPIKeyV2,
-  useUpdateAPIKeyV2} from "./queries";
+export { useCreateAPIKeyV2, useDeleteAPIKeyV2, useUpdateAPIKeyV2 } from "./queries";

frontend/src/hooks/api/apiKeys/queries.tsx

@@ -8,14 +8,13 @@ import {
   CreateAPIKeyDataV2DTO,
   CreateServiceTokenDataV3Res,
   DeleteAPIKeyDataV2DTO,
-  UpdateAPIKeyDataV2DTO} from "./types";
+  UpdateAPIKeyDataV2DTO
+} from "./types";
 
 export const useCreateAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<CreateServiceTokenDataV3Res, {}, CreateAPIKeyDataV2DTO>({
-    mutationFn: async ({
-      name
-    }) => {
+    mutationFn: async ({ name }) => {
       const { data } = await apiRequest.post("/api/v3/api-key", {
         name
       });
@@ -31,11 +30,10 @@ export const useCreateAPIKeyV2 = () => {
 export const useUpdateAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<APIKeyDataV2, {}, UpdateAPIKeyDataV2DTO>({
-    mutationFn: async ({
-      apiKeyDataId,
-      name
-    }) => {
-      const { data: { apiKeyData } } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
+    mutationFn: async ({ apiKeyDataId, name }) => {
+      const {
+        data: { apiKeyData }
+      } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
         name
       });
       return apiKeyData;
@@ -49,14 +47,14 @@ export const useUpdateAPIKeyV2 = () => {
 export const useDeleteAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<APIKeyDataV2, {}, DeleteAPIKeyDataV2DTO>({
-    mutationFn: async ({
-      apiKeyDataId
-    }) => {
-      const { data: { apiKeyData } } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
+    mutationFn: async ({ apiKeyDataId }) => {
+      const {
+        data: { apiKeyData }
+      } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
       return apiKeyData;
     },
     onSuccess: () => {
       queryClient.invalidateQueries(userKeys.myAPIKeysV2);
     }
   });
-};
+};

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -1,57 +1,57 @@
 import { EventType, UserAgentType } from "./enums";
 
 export const eventToNameMap: { [K in EventType]: string } = {
-    [EventType.GET_SECRETS]: "List secrets",
-    [EventType.GET_SECRET]: "Read secret",
-    [EventType.CREATE_SECRET]: "Create secret",
-    [EventType.UPDATE_SECRET]: "Update secret",
-    [EventType.DELETE_SECRET]: "Delete secret",
-    [EventType.GET_WORKSPACE_KEY]: "Read project key",
-    [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
-    [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
-    [EventType.CREATE_INTEGRATION]: "Create integration",
-    [EventType.DELETE_INTEGRATION]: "Delete integration",
-    [EventType.ADD_TRUSTED_IP]: "Add trusted IP",
-    [EventType.UPDATE_TRUSTED_IP]: "Update trusted IP",
-    [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
-    [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
-    [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
-    [EventType.CREATE_IDENTITY]: "Create identity",
-    [EventType.UPDATE_IDENTITY]: "Update identity",
-    [EventType.DELETE_IDENTITY]: "Delete identity",
-    [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
-    [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
-    [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
-    [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
-    [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
-    [EventType.CREATE_ENVIRONMENT]: "Create environment",
-    [EventType.UPDATE_ENVIRONMENT]: "Update environment",
-    [EventType.DELETE_ENVIRONMENT]: "Delete environment",
-    [EventType.ADD_WORKSPACE_MEMBER]: "Add member",
-    [EventType.REMOVE_WORKSPACE_MEMBER]: "Remove member",
-    [EventType.CREATE_FOLDER]: "Create folder",
-    [EventType.UPDATE_FOLDER]: "Update folder",
-    [EventType.DELETE_FOLDER]: "Delete folder",
-    [EventType.CREATE_WEBHOOK]: "Create webhook",
-    [EventType.UPDATE_WEBHOOK_STATUS]: "Update webhook status",
-    [EventType.DELETE_WEBHOOK]: "Delete webhook",
-    [EventType.GET_SECRET_IMPORTS]: "List secret imports",
-    [EventType.CREATE_SECRET_IMPORT]: "Create secret import",
-    [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
-    [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
-    [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
-    [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
+  [EventType.GET_SECRETS]: "List secrets",
+  [EventType.GET_SECRET]: "Read secret",
+  [EventType.CREATE_SECRET]: "Create secret",
+  [EventType.UPDATE_SECRET]: "Update secret",
+  [EventType.DELETE_SECRET]: "Delete secret",
+  [EventType.GET_WORKSPACE_KEY]: "Read project key",
+  [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
+  [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
+  [EventType.CREATE_INTEGRATION]: "Create integration",
+  [EventType.DELETE_INTEGRATION]: "Delete integration",
+  [EventType.ADD_TRUSTED_IP]: "Add trusted IP",
+  [EventType.UPDATE_TRUSTED_IP]: "Update trusted IP",
+  [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
+  [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
+  [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
+  [EventType.CREATE_IDENTITY]: "Create identity",
+  [EventType.UPDATE_IDENTITY]: "Update identity",
+  [EventType.DELETE_IDENTITY]: "Delete identity",
+  [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
+  [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
+  [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+  [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
+  [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+  [EventType.CREATE_ENVIRONMENT]: "Create environment",
+  [EventType.UPDATE_ENVIRONMENT]: "Update environment",
+  [EventType.DELETE_ENVIRONMENT]: "Delete environment",
+  [EventType.ADD_WORKSPACE_MEMBER]: "Add member",
+  [EventType.REMOVE_WORKSPACE_MEMBER]: "Remove member",
+  [EventType.CREATE_FOLDER]: "Create folder",
+  [EventType.UPDATE_FOLDER]: "Update folder",
+  [EventType.DELETE_FOLDER]: "Delete folder",
+  [EventType.CREATE_WEBHOOK]: "Create webhook",
+  [EventType.UPDATE_WEBHOOK_STATUS]: "Update webhook status",
+  [EventType.DELETE_WEBHOOK]: "Delete webhook",
+  [EventType.GET_SECRET_IMPORTS]: "List secret imports",
+  [EventType.CREATE_SECRET_IMPORT]: "Create secret import",
+  [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
+  [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
+  [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
+  [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {
-    [UserAgentType.WEB]: "Web",
-    [UserAgentType.CLI]: "CLI",
-    [UserAgentType.K8_OPERATOR]: "K8s operator",
-    [UserAgentType.TERRAFORM]: "Terraform",
-    [UserAgentType.NODE_SDK]: "InfisicalNodeSDK",
-    [UserAgentType.PYTHON_SDK]: "InfisicalPythonSDK",
-    [UserAgentType.OTHER]: "Other",
-};
+  [UserAgentType.WEB]: "Web",
+  [UserAgentType.CLI]: "CLI",
+  [UserAgentType.K8_OPERATOR]: "K8s operator",
+  [UserAgentType.TERRAFORM]: "Terraform",
+  [UserAgentType.NODE_SDK]: "InfisicalNodeSDK",
+  [UserAgentType.PYTHON_SDK]: "InfisicalPythonSDK",
+  [UserAgentType.OTHER]: "Other"
+};

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -38,7 +38,7 @@ export enum EventType {
   UPDATE_IDENTITY_UNIVERSAL_AUTH = "update-identity-universal-auth",
   GET_IDENTITY_UNIVERSAL_AUTH = "get-identity-universal-auth",
   CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "create-identity-universal-auth-client-secret",
-  REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET =  "revoke-identity-universal-auth-client-secret",
+  REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "revoke-identity-universal-auth-client-secret",
   GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS = "get-identity-universal-auth-client-secret",
   CREATE_ENVIRONMENT = "create-environment",
   UPDATE_ENVIRONMENT = "update-environment",
@@ -57,4 +57,4 @@ export enum EventType {
   DELETE_SECRET_IMPORT = "delete-secret-import",
   UPDATE_USER_WORKSPACE_ROLE = "update-user-workspace-role",
   UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS = "update-user-workspace-denied-permissions"
-}
+}

frontend/src/hooks/api/auditLogs/index.tsx

@@ -1 +1 @@
-export * from "./queries";
+export * from "./queries";

frontend/src/hooks/api/auth/types.ts

@@ -4,12 +4,12 @@ export type GetAuthTokenAPI = {
 
 export type SendMfaTokenDTO = {
   email: string;
-}
+};
 
 export type VerifyMfaTokenDTO = {
   email: string;
   mfaCode: string;
-}
+};
 
 export type VerifyMfaTokenRes = {
   encryptionVersion: number;
@@ -21,24 +21,24 @@ export type VerifyMfaTokenRes = {
   encryptedPrivateKey: string;
   iv: string;
   tag: string;
-}
+};
 
 export type Login1DTO = {
   email: string;
   clientPublicKey: string;
   providerAuthToken?: string;
-}
+};
 
 export type Login2DTO = {
   email: string;
   clientProof: string;
   providerAuthToken?: string;
-}
+};
 
 export type Login1Res = {
   serverPublicKey: string;
   salt: string;
-}
+};
 
 export type Login2Res = {
   mfaEnabled: boolean;
@@ -51,26 +51,26 @@ export type Login2Res = {
   encryptedPrivateKey?: string;
   iv?: string;
   tag?: string;
-}
+};
 
 export type LoginLDAPDTO = {
   organizationSlug: string;
   username: string;
   password: string;
-}
+};
 
 export type LoginLDAPRes = {
   nextUrl: string;
-}
+};
 
 export type SRP1DTO = {
   clientPublicKey: string;
-}
+};
 
 export type SRPR1Res = {
   serverPublicKey: string;
   salt: string;
-}
+};
 
 export type CompleteAccountDTO = {
   email: string;
@@ -85,19 +85,19 @@ export type CompleteAccountDTO = {
   encryptedPrivateKeyTag: string;
   salt: string;
   verifier: string;
-}
+};
 
 export type CompleteAccountSignupDTO = CompleteAccountDTO & {
   providerAuthToken?: string;
   attributionSource?: string;
   organizationName: string;
-}
+};
 
 export type VerifySignupInviteDTO = {
   email: string;
   code: string;
   organizationId: string;
-}
+};
 
 export type ChangePasswordDTO = {
   clientProof: string;
@@ -109,7 +109,7 @@ export type ChangePasswordDTO = {
   encryptedPrivateKeyTag: string;
   salt: string;
   verifier: string;
-}
+};
 
 export type ResetPasswordDTO = {
   protectedKey: string;
@@ -121,7 +121,7 @@ export type ResetPasswordDTO = {
   salt: string;
   verifier: string;
   verificationToken: string;
-}
+};
 
 export type IssueBackupPrivateKeyDTO = {
   encryptedPrivateKey: string;
@@ -130,8 +130,8 @@ export type IssueBackupPrivateKeyDTO = {
   salt: string;
   verifier: string;
   clientProof: string;
-}
+};
 
 export type GetBackupEncryptedPrivateKeyDTO = {
   verificationToken: string;
-}
+};