some review changes

frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx

@@ -208,7 +208,7 @@ export const GatewayCliDeploymentMethod = () => {
         placeholder="Enter gateway name..."
         isError={Boolean(errors.name)}
       />
-      {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+      {errors.name && <p className="mt-1 text-sm text-red">{errors.name}</p>}
 
       <FormLabel label="Relay" tooltipText="The relay to use with your gateway." className="mt-4" />
       <FilterableSelect
@@ -236,7 +236,7 @@ export const GatewayCliDeploymentMethod = () => {
         getOptionValue={(option) => option.id}
         components={{ Option: RelayOption }}
       />
-      {errors.relay && <p className="mt-1 text-sm text-red-500">{errors.relay}</p>}
+      {errors.relay && <p className="mt-1 text-sm text-red">{errors.relay}</p>}
 
       <FormLabel
         label="Instance Domain"
@@ -249,9 +249,7 @@ export const GatewayCliDeploymentMethod = () => {
         placeholder="https://app.infisical.com"
         isError={Boolean(errors.instanceDomain)}
       />
-      {errors.instanceDomain && (
-        <p className="mt-1 text-sm text-red-500">{errors.instanceDomain}</p>
-      )}
+      {errors.instanceDomain && <p className="mt-1 text-sm text-red">{errors.instanceDomain}</p>}
 
       <FormLabel
         label="Identity"
@@ -274,7 +272,7 @@ export const GatewayCliDeploymentMethod = () => {
         getOptionValue={(option) => option.id}
         getOptionLabel={(option) => option.name}
       />
-      {errors.identity && <p className="mt-1 text-sm text-red-500">{errors.identity}</p>}
+      {errors.identity && <p className="mt-1 text-sm text-red">{errors.identity}</p>}
 
       <div className="mt-6 flex items-center">
         <Button

frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx

@@ -25,7 +25,7 @@ export const GatewayDeploymentMethodSelect = ({ onSelect }: Props) => {
   };
 
   return (
-    <div className="grid h-118 grid-cols-4 content-start gap-2">
+    <div className="grid h-fit grid-cols-4 content-start gap-2">
       {deploymentOptions.map((option) => {
         const { image, name, method } = option;
 

frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx

@@ -13,7 +13,13 @@ import {
   Input,
   ModalClose
 } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import {
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
+
 import {
   useAddIdentityTokenAuth,
   useCreateTokenIdentityTokenAuth,
@@ -22,11 +28,13 @@ import {
 } from "@app/hooks/api";
 import { slugSchema } from "@app/lib/schemas";
 
-const formSchema = z.object({
+const baseFormSchema = z.object({
   name: slugSchema({ field: "name" }),
   host: z.string().min(1, "Host is required"),
+  instanceDomain: z.string().url("Must be a valid URL").or(z.literal(""))
+});
 
-  instanceDomain: z.string().url("Must be a valid URL").or(z.literal("")),
+const formSchemaWithIdentity = baseFormSchema.extend({
   identity: z
     .object(
       {
@@ -39,11 +47,16 @@ const formSchema = z.object({
     .refine((val) => val !== null, { message: "Identity is required" })
 });
 
+const formSchemaWithToken = baseFormSchema.extend({
+  identityToken: z.string().min(1, "Token is required")
+});
+
 export const RelayCliDeploymentMethod = () => {
   const { protocol, hostname, port } = window.location;
   const portSuffix = port && port !== "80" ? `:${port}` : "";
   const siteURL = `${protocol}//${hostname}${portSuffix}`;
 
+  const [addTokenManually, setAddTokenManually] = useState(false);
   const [step, setStep] = useState<"form" | "command">("form");
   const [name, setName] = useState("");
   const [host, setHost] = useState("");
@@ -69,6 +82,12 @@ export const RelayCliDeploymentMethod = () => {
   const { currentOrg } = useOrganization();
   const organizationId = currentOrg?.id || "";
 
+  const { permission } = useOrgPermission();
+  const canCreateToken = permission.can(
+    OrgPermissionIdentityActions.CreateToken,
+    OrgPermissionSubjects.Identity
+  );
+
   const { data: identityMembershipOrgsData, isPending: isIdentitiesLoading } =
     useGetIdentityMembershipOrgs({
       organizationId,
@@ -84,7 +103,9 @@ export const RelayCliDeploymentMethod = () => {
 
   const handleGenerateCommand = async () => {
     setFormErrors([]);
-    const validation = formSchema.safeParse({ name, host, instanceDomain, identity });
+
+    if (canCreateToken) {
+      const validation = formSchemaWithIdentity.safeParse({ name, host, instanceDomain, identity });
       if (!validation.success) {
         setFormErrors(validation.error.issues);
         return;
@@ -127,6 +148,19 @@ export const RelayCliDeploymentMethod = () => {
         });
         setIdentityToken("");
       }
+    } else {
+      const validation = formSchemaWithToken.safeParse({
+        name,
+        host,
+        instanceDomain,
+        identityToken
+      });
+      if (!validation.success) {
+        setFormErrors(validation.error.issues);
+        return;
+      }
+      setStep("command");
+    }
   };
 
   const handleIdentityChange = (
@@ -194,7 +228,7 @@ export const RelayCliDeploymentMethod = () => {
         placeholder="Enter relay name..."
         isError={Boolean(errors.name)}
       />
-      {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+      {errors.name && <p className="mt-1 text-sm text-red">{errors.name}</p>}
 
       <FormLabel
         label="Host"
@@ -207,7 +241,7 @@ export const RelayCliDeploymentMethod = () => {
         placeholder="0.0.0.0"
         isError={Boolean(errors.host)}
       />
-      {errors.host && <p className="mt-1 text-sm text-red-500">{errors.host}</p>}
+      {errors.host && <p className="mt-1 text-sm text-red">{errors.host}</p>}
 
       <FormLabel
         label="Instance Domain"
@@ -220,10 +254,10 @@ export const RelayCliDeploymentMethod = () => {
         placeholder="https://app.infisical.com"
         isError={Boolean(errors.instanceDomain)}
       />
-      {errors.instanceDomain && (
-        <p className="mt-1 text-sm text-red-500">{errors.instanceDomain}</p>
-      )}
+      {errors.instanceDomain && <p className="mt-1 text-sm text-red">{errors.instanceDomain}</p>}
 
+      {canCreateToken && !addTokenManually ? (
+        <>
           <FormLabel
             label="Identity"
             tooltipText="The identity that your relay will use for authentication."
@@ -245,7 +279,41 @@ export const RelayCliDeploymentMethod = () => {
             getOptionValue={(option) => option.id}
             getOptionLabel={(option) => option.name}
           />
-      {errors.identity && <p className="mt-1 text-sm text-red-500">{errors.identity}</p>}
+          <p className="mt-1 text-xs text-yellow">
+            Selecting an identity will automatically enable token auth and generate a token.{" "}
+            <button
+              onClick={() => setAddTokenManually(true)}
+              className="cursor-pointer underline transition-opacity hover:opacity-70"
+            >
+              Add token manually
+            </button>
+          </p>
+          {errors.identity && <p className="mt-1 text-sm text-red">{errors.identity}</p>}
+        </>
+      ) : (
+        <>
+          <FormLabel
+            label="Identity Token"
+            tooltipText="The identity token that your relay will use for authentication."
+            className="mt-4"
+          />
+          <Input
+            value={identityToken}
+            onChange={(e) => setIdentityToken(e.target.value)}
+            placeholder="Enter identity token..."
+            isError={Boolean(errors.identityToken)}
+          />
+          {canCreateToken && (
+            <button
+              onClick={() => setAddTokenManually(false)}
+              className="mt-1 cursor-pointer text-xs text-mineshaft-400 underline transition-opacity hover:opacity-70"
+            >
+              Autogenerate token for identity
+            </button>
+          )}
+          {errors.identityToken && <p className="mt-1 text-sm text-red">{errors.identityToken}</p>}
+        </>
+      )}
 
       <div className="mt-6 flex items-center">
         <Button

frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx

@@ -25,7 +25,7 @@ export const RelayDeploymentMethodSelect = ({ onSelect }: Props) => {
   };
 
   return (
-    <div className="grid h-118 grid-cols-4 content-start gap-2">
+    <div className="grid h-fit grid-cols-4 content-start gap-2">
       {deploymentOptions.map((option) => {
         const { image, name, method } = option;